/* ==========================================================================
   PortfolioX — Responsive CSS
   Built by Teamseven Private Limited | https://teamseven.ltd
   Breakpoints: 375px | 640px | 768px | 1024px | 1280px | 1440px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Large Desktop (1280px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .container {
    padding: 0 var(--space-8);
  }
}

/* --------------------------------------------------------------------------
   2. Desktop (1024px — 1279px)
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .heading-xl {
    font-size: clamp(2.25rem, 5vw, 4rem);
  }

  .work-card-col-7 { grid-column: span 7; }
  .work-card-col-5 { grid-column: span 5; }
}

/* --------------------------------------------------------------------------
   3. Tablet (768px — 1023px)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* Navigation */
  .navbar-links {
    display: none;
  }

  .navbar-mobile-toggle {
    display: flex;
  }

  /* Hero */
  .hero-section {
    text-align: center;
    padding-top: 9rem;
  }

  .hero-section > .container {
    padding-bottom: var(--space-8);
  }

  .hero-cols {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    display: none;
  }

  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  #hero-cta-group {
    justify-content: center;
  }

  /* Work grid */
  .work-card-col-7,
  .work-card-col-5,
  .work-card-col-6,
  .work-card-col-4 {
    grid-column: span 12;
  }

  /* Grids */
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Pricing */
  .pricing-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Layout classes — tablet */
  .layout-footer {
    grid-template-columns: 1fr 1fr;
  }

  .layout-footer .footer-grid-brand {
    grid-column: span 2;
  }

  .layout-timeline {
    grid-template-columns: 1fr;
  }

  /* Section spacing */
  .section {
    padding: var(--space-16) var(--space-4);
  }

  /* CTA banner */
  .cta-banner {
    padding: var(--space-12) var(--space-8);
  }

  /* Legacy footer class (fallback) */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

  .footer-grid-brand {
    grid-column: span 2;
  }
}

/* --------------------------------------------------------------------------
   4. Mobile (640px — 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Navbar */
  .navbar {
    top: 0.75rem;
    padding: 0.75rem 1.25rem;
    width: calc(100% - 1.5rem);
  }

  /* Hero — extra top clearance for mobile navbar */
  .hero-section {
    padding-top: 7rem;
  }

  .hero-section > .container {
    padding-top: var(--space-12);
  }

  /* Stats strip — 2×2 grid on mobile */
  .hero-stats-strip {
    padding: var(--space-6) var(--space-4);
  }

  .hero-stats-strip .stat-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) 0;
    max-width: 360px;
    margin: 0 auto;
  }

  .hero-stats-strip .stat-item {
    padding: var(--space-2) var(--space-4);
  }

  /* Remove all vertical dividers in the 2×2 grid */
  .hero-stats-strip .stat-item + .stat-item {
    border-left: none;
  }

  /* Grids */
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  /* Work grid */
  .work-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .work-card-col-7,
  .work-card-col-5,
  .work-card-col-6,
  .work-card-col-4 {
    grid-column: span 1;
  }

  /* Pricing */
  .pricing-grid-3 {
    grid-template-columns: 1fr;
  }

  /* Sections */
  .section {
    padding: var(--space-12) var(--space-4);
  }

  /* Stat group */
  .stat-group {
    flex-wrap: wrap;
    gap: var(--space-6);
  }

  /* Layout classes — mobile */
  .layout-footer,
  .layout-2col,
  .layout-2col-start,
  .layout-2col-contact,
  .layout-timeline,
  .layout-bio {
    grid-template-columns: 1fr;
  }

  .layout-2col { gap: var(--space-8); }
  .layout-2col-start { gap: var(--space-8); }
  .layout-2col-contact { gap: var(--space-8); }
  .layout-bio { gap: var(--space-8); }
  .layout-footer { gap: var(--space-8); }

  /* Remove sticky positioning on bio image on mobile */
  .layout-bio > *:first-child {
    position: static !important;
  }

  /* Legacy footer class (fallback) */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-grid-brand {
    grid-column: span 1;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-2);
  }

  /* CTA banner */
  .cta-banner {
    padding: var(--space-10) var(--space-6);
    border-radius: var(--radius-xl);
  }

  /* Page hero */
  .page-hero {
    padding-top: 8rem;
    padding-bottom: var(--space-10);
  }

  /* Stat borders — remove vertical dividers on small screens */
  .stat-item[style*="border-left"] {
    border-left: none !important;
    padding-left: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   5. Small Mobile (up to 639px)
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  /* Typography */
  .heading-xl {
    font-size: 2.2rem;
  }

  .heading-lg {
    font-size: 1.8rem;
  }

  .heading-md {
    font-size: 1.5rem;
  }

  /* Navbar */
  .navbar-logo {
    font-size: var(--text-lg);
  }

  /* Aurora blobs — reduce size on small screens */
  .aurora-blob-1 { width: 280px; height: 280px; }
  .aurora-blob-2 { width: 250px; height: 250px; }
  .aurora-blob-3 { width: 220px; height: 220px; }
  .aurora-blob-4 { width: 200px; height: 200px; }

  /* Service card */
  .service-card {
    padding: var(--space-6);
  }

  /* Testimonial */
  .testimonial-card {
    padding: var(--space-6);
  }

  /* Pricing */
  .pricing-card {
    padding: var(--space-6);
  }

  /* Toast */
  .toast-container {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
  }

  .toast {
    max-width: 100%;
  }

  /* Filter tabs */
  .filter-tabs {
    gap: var(--space-2);
  }

  .filter-tab {
    padding: 0.4rem 1rem;
    font-size: var(--text-xs);
  }

  /* Timeline */
  .timeline {
    padding-left: var(--space-6);
  }

  .timeline-dot {
    left: calc(-1.5rem - 4px);
  }

  /* Hero stats */
  .stat-item .stat-number {
    font-size: var(--text-3xl);
  }
}

/* --------------------------------------------------------------------------
   6. Minimum Mobile (375px)
   -------------------------------------------------------------------------- */
@media (max-width: 374px) {
  body {
    font-size: 0.9375rem;
  }

  .navbar {
    padding: 0.625rem 1rem;
  }

  .container {
    padding: 0 var(--space-3);
  }
}

/* --------------------------------------------------------------------------
   7. Touch Device Optimizations
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  /* Show overlay info by default on touch (no hover) */
  .work-card-overlay {
    opacity: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  }

  /* Remove hover transforms that can feel jarring on touch */
  .glass-card:hover {
    transform: none;
  }

  .work-card:hover {
    transform: none;
  }

  /* Ensure tap targets are large enough */
  .filter-tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .footer-social-link {
    width: 44px;
    height: 44px;
  }
}

/* --------------------------------------------------------------------------
   8. Print Styles
   -------------------------------------------------------------------------- */
@media print {
  .aurora-bg,
  .noise-overlay,
  .cursor-glow,
  .navbar,
  .mobile-nav {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .glass-card,
  .glass-card-flat {
    background: white;
    border: 1px solid #ddd;
    backdrop-filter: none;
  }

  .text-gradient,
  .text-gradient-pink {
    -webkit-text-fill-color: black;
    background: none;
  }
}