/* ============================================================
   4Naple — responsive.css
   Mobile-first layout, progressively enhanced per breakpoint.
   ============================================================ */

/* ---------- Base: small phones (default) ---------- */
/* Hero */
.hero-slider {
  min-height: 62vh;
  max-height: 36rem;
}

/* Slightly smaller title on phones so multi-line headings stay tidy */
@media (max-width: 47.99rem) {
  .hero-title {
    font-size: clamp(1.75rem, 8.5vw, 2.5rem);
  }

  .hero-text {
    font-size: var(--fs-base);
  }
}

/* City sections: visual above, cards below */
.city-layout {
  grid-template-columns: 1fr;
}

/* City visual keeps the 4:3 ratio of its artwork (set in style.css) */
.city-visual {
  max-height: none;
}

/* Cards: mostly-visible card + generous peek of the next one */
.card {
  width: min(52vw, 10.5rem);
}

/* Nav: on phones the drawer hides behind the toggle */
.nav-list {
  display: block;
}

/* ---------- 640px: large phones ---------- */
@media (min-width: 40rem) {
  .card {
    width: 11rem;
  }
}

/* ---------- 768px: tablets ---------- */
@media (min-width: 48rem) {
  :root {
    --header-height: 4.25rem;
  }

  .hero-slider {
    min-height: 58vh;
  }

  /* About features + contact channels spread out */
  .about-features {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact-cards {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }

  /* About page: the six cities grid */
  .about-cities-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .city-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
  }

  /* Keep the 4:3 framed thumbnail instead of stretching to the row height */
  .city-visual {
    max-height: none;
    align-self: center;
    width: 100%;
  }

  /* Stats strip spreads out on tablets+ */
  .city-stats {
    grid-template-columns: repeat(4, 1fr);
  }

  .card {
    width: 11.5rem;
  }
}

/* ---------- 1200px: laptops (inline nav needs room for 10 links) ---------- */
@media (min-width: 75rem) {
  .hero-slider {
    min-height: 54vh;
  }

  /* The body-level drawer becomes an inline bar inside the header.
     Header becomes a flex row: [brand+actions] [inline menu]. */
  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-inline: var(--container-pad);
  }

  .site-header .navbar {
    margin-inline: 0;
    width: auto;
    flex: none;
  }

  .nav-menu {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
    visibility: visible;
    overflow: visible;
    transition: none;
  }

  .nav-menu .nav-list {
    justify-content: flex-end;
  }

  .nav-menu-backdrop {
    display: none;
  }

  .nav-menu-head {
    display: none;
  }

  .nav-divider {
    display: none;
  }

  .nav-list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
  }

  .nav-item + .nav-item {
    margin-top: 0;
  }

  .nav-link {
    min-height: 2.75rem;
    padding: 0.5rem var(--space-2);
    font-size: var(--fs-sm);
    white-space: nowrap;
  }

  /* Compact icons on desktop so all links fit the bar */
  .nav-link .nav-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Tighter spacing once the menu holds 10 links — keeps the inline
     bar inside the header (and the viewport) down to the 1200px break */
  .nav-list {
    gap: 0;
  }

  .nav-link {
    padding-inline: 0.375rem;
  }

  .nav-menu.is-open .nav-item {
    opacity: 1;
    transform: none;
    animation: none;
  }

  /* About page: the six cities grid */
  .about-cities-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .city-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .card {
    width: 12rem;
  }
}

/* Tight laptops (1200–1400px): compact the inline nav so all 11 links
   stay inside the header without overflowing the viewport. */
@media (min-width: 75rem) and (max-width: 87.49rem) {
  .nav-link {
    font-size: 0.6875rem;
    padding-inline: 0.1875rem;
  }

  .nav-link .nav-icon {
    width: 1rem;
    height: 1rem;
  }
}

/* ---------- 1280px: desktops ---------- */
@media (min-width: 80rem) {
  .hero-slider {
    min-height: min(58vh, 38rem);
  }

  .card {
    width: 12.5rem;
  }
}

/* ---------- 1536px: large desktops ---------- */
@media (min-width: 96rem) {
  .hero-slider {
    max-height: 42rem;
  }

  .card {
    width: 13rem;
  }
}

/* ---------- Short viewports ---------- */
@media (max-height: 36rem) {
  .hero-slider {
    min-height: 26rem;
  }
}