/* ============================================
   NomadBridge: Responsive Styles
   Desktop-first: 1200px → 768px → 480px
   ============================================ */

/* ================================================
   MAX 1200px
   ================================================ */

@media (max-width: 1200px) {
  /* Tighter nav links so all five fit on one line down to 993px */
  .nav__links { gap: 2px; }
  .nav__link { padding: 8px 10px; }

  .titan-hero__inner {
    gap: var(--space-6);
  }

  .footer__inner {
    gap: var(--space-7);
  }

  /* Book a Call */
  .cta-section__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: var(--space-7);
  }
}

/* ================================================
   MAX 992px
   ================================================ */

@media (max-width: 992px) {
  /* Navigation: five links and the CTA no longer fit on one line */
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__hamburger { display: flex; margin-right: 8px; }

  .titan-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .titan-hero__image img {
    aspect-ratio: 16/9;
    max-height: 400px;
  }

  .titan-hero {
    min-height: auto;
    padding: var(--shell-top) 0 var(--space-6);
  }

  .brand-card__grid {
    grid-template-columns: 1fr;
  }

  .brand-card__image img {
    min-height: 300px;
  }

  /* Challenges: two by two */
  .challenges__head {
    margin-bottom: var(--space-7);
  }

  .challenge-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(10, auto);
  }

  .challenge,
  .challenge:first-child,
  .challenge:last-child {
    padding: var(--space-6) var(--space-5) var(--space-6) 0;
    border-left: 0;
  }

  .challenge:nth-child(even) {
    padding: var(--space-6) 0 var(--space-6) var(--space-5);
    border-left: 1px solid var(--sand-deep);
  }

  .challenge:nth-child(n + 3) {
    border-top: 1px solid var(--sand-deep);
  }

  .final-cta__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }


  /* Legacy */
  .service-page-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .service-page-sidebar {
    position: static;
  }

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

/* ================================================
   MAX 768px
   ================================================ */

@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
    --shell-width: 96%;
    --shell-top: 8px;
    --text-logo: 1.125rem;   /* 18px: 10% smaller than desktop's 20px */
  }

  .about-intro {
    grid-template-columns: 1fr;
  }

  /* Services: an accordion with the photo inside the open item */
  .services-showcase__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .svc-media {
    display: none;
  }

  .svc__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-card);
    margin-bottom: var(--space-5);
  }

  /* CTA band: headline above the text and button */
  .cta-band__inner {
    grid-template-columns: 1fr;
  }

  /* Hero */
  .titan-hero {
    padding: var(--shell-top) 0 0;
  }

  /* Stack section already handled at 992px */

  .challenges {
    padding: var(--space-8) 0;
  }


  /* Testimonials: narrower cards in the moving row */
  .stories__grid .story-card {
    width: 280px;
  }

  .stories-section__header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Generic grids stack on phones (About approach cards) */
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Family grid */
  .service-family__grid {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer {
    padding-top: var(--space-8);
  }

  .footer__bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Book a Call: one column, form below the text */
  .contact-section {
    padding-top: var(--space-7);
  }

  .cta-section__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }

  .cta-section__text {
    max-width: none;
  }

  .cta-section__form-wrap {
    width: 100%;
    max-width: 560px;
    padding: var(--space-5);
  }

  /* Page margins are narrow on phones: keep the opening quote mark inside */
  .testimonial-inline__quote p {
    text-indent: 0;
  }

  /* Section spacing */
  .service-section {
    padding: var(--space-7) 0;
  }

  .challenges-section,
  .testimonials-section,
  .final-cta {
    padding: var(--space-7) 0;
  }

  /* Editorial break */
  .editorial-break__image img {
    aspect-ratio: 16/9;
  }

  /* Legacy page hero */
  .page-hero {
    padding: var(--space-8) 0;
    min-height: 320px;
  }

  .page-hero--bg {
    padding-top: calc(var(--nav-clearance) + var(--space-8));
    min-height: calc(320px + var(--nav-clearance));
  }

  /* Text spans the full width on phones, so the side-to-side fade
     becomes top-to-bottom: the photo shows clearly at the top and
     through a denser tint behind the text (0.85 of the hero colour keeps
     the 80% white tagline at 4.5:1 even over a white photo). */
  .page-hero--bg::before {
    background: var(--hero-color-start);
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--hero-color-start) 45%, transparent) 0%,
      color-mix(in srgb, var(--hero-color-start) 90%, transparent) 30%,
      color-mix(in srgb, var(--hero-color-start) 90%, transparent) 100%
    );
  }

  .about-approach-card {
    padding: var(--space-5);
  }

  .cefr-levels {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
}

/* ================================================
   MAX 480px
   ================================================ */

@media (max-width: 480px) {
  /* Challenges: one column */
  .challenge-list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .challenge,
  .challenge:first-child,
  .challenge:last-child,
  .challenge:nth-child(even) {
    grid-row: auto;
    grid-template-rows: none;
    padding: var(--space-6) 0;
    border-left: 0;
  }

  .challenge + .challenge {
    border-top: 1px solid var(--sand-deep);
  }

  /* Too narrow for two columns: the four points stack */
  .contact-trust {
    grid-template-columns: 1fr;
  }

  /* Two lines on phones, clear of the photos around it */
  /* 32px keeps "Relocation advisory / and coaching" on two lines */
  .titan-hero__headline {
    font-size: 2rem;
  }

  .brand-card__text {
    padding: var(--space-5);
  }

  .btn-group {
    flex-direction: column;
  }

  .btn--lg {
    width: 100%;
    text-align: center;
  }

}

/* Booking dialog fills the screen on phones */
@media (max-width: 480px) {
  .booking-dialog {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
}