/*
 * =============================================================
 * responsive.css — ExpoAxis v2
 * All @media queries — 1280px, 1024px, 768px, 480px
 * =============================================================
 */


/* ============================================================
   LARGE DESKTOP — max 1280px
   Minor containment adjustments
   ============================================================ */
@media (max-width: 1280px) {
  :root { --container: 1120px; }

  .hero-title { font-size: 3.4rem; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; }
}


/* ============================================================
   TABLET LANDSCAPE — max 1024px
   Two-column layouts collapse or rebalance
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --container : 100%;
    --section-y : 80px;
  }

  .container,
  .container-sm { padding-left: 32px; padding-right: 32px; }

  /* Hero */
  .hero-title        { font-size: 2.8rem; }
  .hero-stats-grid   { grid-template-columns: repeat(2, 1fr); }

  /* Nav */
  .nav-links         { display: none; }
  .hamburger         { display: flex; }
  .nav-right .btn    { display: none; } /* hide nav CTA on tablet, show in mobile menu */

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

  /* Portfolio preview */
  .portfolio-grid-home {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows   : repeat(3, 200px); /* explicit rows = all equal */
    grid-auto-rows       : 200px;
    gap                  : 14px;
  }
  .project-tall  { grid-row   : span 1; }  /* cancel desktop span-2 */
  .project-wide  { grid-column: span 1; }  /* cancel desktop span-2 */
  /* Let the grid row height control cards, not min-height */
  .portfolio-grid-home .project-card { min-height: 0; }

  /* Why */
  .why-grid  { grid-template-columns: 1fr; gap: 48px; }
  .why-cards { grid-template-columns: repeat(2, 1fr); }

  /* Process */
  .process-steps {
    grid-template-columns: repeat(3, 1fr);
    gap                  : 32px;
  }
  .process-steps::before { display: none; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-item:nth-child(2)::after { display: none; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }

  /* About */
  .about-two-col   { grid-template-columns: 1fr; gap: 48px; }
  .team-grid       { grid-template-columns: repeat(2, 1fr); }

  /* Services page */
  .service-feature { grid-template-columns: 1fr; gap: 48px; }
  .service-feature:nth-child(even) .service-feature-visual { order: 0; }
  .services-full-grid { grid-template-columns: repeat(2, 1fr); }

  /* Contact */
  .contact-two-col { grid-template-columns: 1fr; gap: 48px; }

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

  /* Blog */
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid .blog-featured { grid-column: span 2; }

  /* Portfolio full */
  .portfolio-full-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   TABLET PORTRAIT — max 768px
   Single-column, mobile nav, compact spacing
   ============================================================ */
@media (max-width: 768px) {
  :root { --section-y: 64px; --nav-height: 68px; }

  .container,
  .container-sm { padding-left: 20px; padding-right: 20px; }

  .testimonials-track {
    padding     : 8px 20px 32px;
    margin-left : -20px;
    margin-right: -20px;
  }

  /* Nav */
  .nav-inner    { padding: 0 20px; }
  .hamburger    { display: flex; }

  /* Hero */
  .hero-body    { padding: 110px 0 56px; }
  .hero-title   { font-size: 2.1rem; }
  .hero-subtitle{ font-size: 1rem; }
  .hero-ctas    { flex-direction: column; align-items: flex-start; }
  .hero-ctas .btn { width: 100%; justify-content: center; max-width: 360px; }
  .hero-stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Section headers */
  .section-title { font-size: 1.7rem; }
  .section-header-center { margin-bottom: 48px; }
  .section-header-split  { flex-direction: column; align-items: flex-start; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }

  /* Portfolio preview — 2 equal cols, explicit rows lock heights */
  .portfolio-grid-home {
    grid-template-columns: 1fr 1fr;
    grid-template-rows   : repeat(3, 180px);
    grid-auto-rows       : 180px;
    gap                  : 12px;
  }
  .project-tall { grid-row   : span 1; }
  .project-wide { grid-column: span 1; }
  .portfolio-grid-home .project-card { min-height: 0; }

  /* Why */
  .why-cards { grid-template-columns: 1fr; }
  /* why-stat-float removed */

  /* Process */
  .process-steps { grid-template-columns: 1fr; gap: 0; }
  .process-step {
    flex-direction: row;
    align-items   : flex-start;
    text-align    : left;
    padding       : 20px 0;
    border-bottom : 1px solid var(--border-light);
    gap           : 20px;
  }
  .step-num { flex-shrink: 0; margin-bottom: 0; }

  /* Testimonials */
  .testimonial-card { width: 300px; }

  /* CTA banner */
  .cta-content {
    flex-direction: column;
    text-align    : center;
    padding       : 64px 0;
    gap           : 32px;
  }
  .cta-actions { justify-content: center; }
  .cta-subtitle { max-width: 100%; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-item:not(:last-child)::after { display: none; }

  /* Footer */
  .footer-grid   { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Forms */
  .form-row { grid-template-columns: 1fr; }
  .contact-form-card { padding: 28px 20px; }

  /* About stats row */
  .about-stats-row { flex-direction: column; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }

  /* Services page */
  .services-full-grid { grid-template-columns: 1fr; }

  /* Industries */
  .industries-grid { grid-template-columns: 1fr; }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr; }
  .blog-grid .blog-featured { grid-column: span 1; }

  /* Portfolio full */
  .portfolio-full-grid { grid-template-columns: repeat(2, 1fr); }

  /* Cookie banner */
  .cookie-banner { padding: 16px 20px; }

  /* Floating buttons */
  .floating-btns { bottom: 76px; right: 20px; }
  .back-to-top   { bottom: 24px; right: 20px; }
}


/* ============================================================
   SMALL MOBILE — max 480px
   Extra compression for narrow screens
   ============================================================ */
@media (max-width: 480px) {
  :root { --section-y: 56px; }

  .container,
  .container-sm { padding-left: 16px; padding-right: 16px; }

  .testimonials-track {
    padding     : 8px 16px 32px;
    margin-left : -16px;
    margin-right: -16px;
  }

  /* Hero */
  .hero-title { font-size: 1.85rem; }
  .hero-stats-grid { grid-template-columns: 1fr 1fr; }
  .hero-stat-num   { font-size: 1.5rem; }

  /* Section title */
  .section-title { font-size: 1.5rem; }

  /* Portfolio preview — 2-col, explicit rows keep all cards equal height */
  .portfolio-grid-home {
    grid-template-columns: 1fr 1fr;
    grid-template-rows   : repeat(3, 155px);
    grid-auto-rows       : 155px;
    gap                  : 10px;
  }
  .portfolio-grid-home .project-card { min-height: 0; }

  /* Scale down overlay text for compact 155px cards */
  .portfolio-grid-home .project-overlay { padding: 10px 12px; }
  .portfolio-grid-home .project-name    { font-size: 0.78rem; line-height: 1.3; }
  .portfolio-grid-home .project-location{ display: none; }
  .portfolio-grid-home .project-tag     { font-size: 0.63rem; padding: 3px 8px; margin-bottom: 4px; }
  .portfolio-grid-home .project-arrow   { width: 28px; height: 28px; top: 8px; right: 8px; font-size: 0.68rem; }

  /* Hero ctas stacked full-width */
  .hero-ctas .btn { max-width: 100%; }

  /* Testimonials */
  .testimonial-card { width: 280px; }

  /* Process */
  .step-num  { width: 44px; height: 44px; font-size: 0.9rem; }

  /* Team */
  .team-grid { grid-template-columns: 1fr; }

  /* Portfolio full */
  .portfolio-full-grid { grid-template-columns: 1fr; }

  /* CTA title */
  .cta-title { font-size: 1.5rem; }

  /* Stats */
  .stats-num { font-size: 2rem; }

  /* Blog */
  .blog-thumb { height: 160px; }
}