/* ==========================================================================
   Mega Mall Murree — Responsive
   Desktop-first breakpoints:
     ≤1440 small desktop · ≤1200 laptop · ≤1024 tablet landscape
     ≤768 tablet portrait · ≤560 phone · ≤380 small phone
   ========================================================================== */

/* ---------- ≤1440 · Small desktop ---------- */
@media (max-width: 1440px) {
  .highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- ≤1200 · Laptop ---------- */
@media (max-width: 1200px) {
  .site-header__inner { gap: var(--space-md); }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { min-height: 240px; }

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

  .reason { min-height: 360px; padding: var(--space-md); }
}

/* ---------- ≤1024 · Tablet landscape ---------- */
@media (max-width: 1024px) {
  :root { --header-h: 76px; }

  /* Header: logo + toggle only */
  .site-header__inner { grid-template-columns: 1fr auto; }
  .site-header.is-scrolled { height: 64px; }
  .site-header__cta { display: none; }
  .menu-toggle { display: block; z-index: calc(var(--z-menu) + 1); }

  /* Full-screen menu — closed state here; the open/close animation is a
     GSAP timeline in interactions.js (clip-path wipe + staggered links). */
  .nav {
    position: fixed;
    inset: 0;
    justify-self: stretch; /* desktop's `center` would shrink the overlay to its content */
    z-index: var(--z-menu);
    display: grid;
    place-items: center;
    background:
      radial-gradient(ellipse at 50% 100%, rgba(184,154,112,0.12), transparent 60%),
      var(--color-bg);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
  }
  /* Header effects create a containing block for fixed children (backdrop
     filter, transform), which would shrink the menu to the header's size. */
  .menu-open .site-header {
    transform: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav__list {
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
  }
  .nav__link.is-active { color: var(--color-accent); }
  .nav__link {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 1.5rem + 4vw, 4rem);
    font-weight: 300;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-text);
  }
  .nav__link::after { display: none; }
  .nav__link:hover { color: var(--color-accent); }

  /* Hero */
  .hero__scroll { width: 104px; height: 104px; }
  .hero__scroll span { top: 20px; }

  /* Intro: stack image under heading, lead beside */
  .section--intro .section__header { grid-column: 1 / -1; }
  .intro__media { grid-column: 1 / -1; grid-row: 2; }
  .intro__body .lead {
    grid-column: 1 / 10;
    grid-row: 1;
    padding-bottom: var(--space-lg);
  }

  /* Overview */
  .overview__grid .section__header {
    grid-column: 1 / -1;
    position: static;
    margin-bottom: var(--space-xl);
  }
  .overview__text { grid-column: 1 / -1; }

  /* Floors header */
  .section--floors .section__header > *,
  .section--floors .section__header .lead { grid-column: 1 / -1; grid-row: auto; }

  /* Floor cards: responsive rules live in floors.css */

  /* Investment */
  .reasons { grid-template-columns: 1fr; }
  .reason {
    min-height: 0;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    align-items: center;
    gap: var(--space-lg);
  }
  .reason__title { align-self: center; max-width: none; }

  /* Location */
  .location__grid { row-gap: var(--space-xl); }
  .location__grid .section__header,
  .location__map { grid-column: 1 / -1; }
  .location__map { aspect-ratio: 16 / 10; }

  /* Contact */
  .contact__info,
  .contact__form { grid-column: 1 / -1; }
  .contact__addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Footer */
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* ---------- ≤768 · Tablet portrait ---------- */
@media (max-width: 768px) {
  .section { padding-block: var(--space-2xl); }
  .section__header { margin-bottom: var(--space-xl); }

  /* Hero */
  .hero { padding-bottom: var(--space-xl); }
  .hero__lead { padding-left: var(--space-md); }
  .hero__scroll {
    right: var(--gutter);
    bottom: auto;
    top: calc(var(--header-h) + var(--space-lg));
    width: 88px;
    height: 88px;
  }
  .hero__scroll span { top: 16px; font-size: 0.55rem; }

  /* Intro */
  .intro__body .lead { grid-column: 1 / -1; }

  /* Stats */
  .stat { min-height: 200px; gap: var(--space-lg); padding: var(--space-md); }

  /* Highlights */
  .highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .highlight { min-height: 170px; gap: var(--space-lg); }

  /* Floor directory */
  .floor-index__link { grid-template-columns: 90px 1fr; }
  .floor-index__link::after { display: none; }

  /* Investment */
  .reason { grid-template-columns: auto 1fr; padding: var(--space-md); }
  .reason svg { display: none; }

  /* Gallery */
  .gallery__item { width: 70vw; }
  .gallery__item:nth-child(even) { width: 85vw; }

  /* Contact */
  .contact__form { grid-template-columns: 1fr; }
  .contact__addresses { grid-template-columns: 1fr; }
}

/* ---------- ≤560 · Phone ---------- */
@media (max-width: 560px) {
  :root { --header-h: 68px; }

  .logo__word { font-size: 1.4rem; }
  .menu-toggle { width: 44px; height: 44px; }
  .menu-toggle__line:first-child { top: 18px; }
  .menu-toggle__line:last-child  { top: 24px; }

  /* Hero */
  .hero__title { line-height: 0.92; }
  .hero__lead { max-width: none; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__scroll { display: none; }

  .lead { max-width: none; }

  /* Stats: single column, horizontal layout */
  .stats { grid-template-columns: 1fr; gap: var(--space-sm); }
  .stat {
    min-height: 0;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: var(--space-md);
  }
  .stat__label { border-top: 0; padding-top: 0; text-align: right; }
  .stat__value { font-size: clamp(3.5rem, 2.5rem + 6vw, 4.5rem); }
  .stat--text .stat__value { font-size: 1.6rem; }

  /* Highlights */
  .highlights { grid-template-columns: 1fr; }
  .highlight {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-sm);
  }
  .highlight span { max-width: none; }

  /* Floor directory */
  .floor-index__link { grid-template-columns: 1fr; gap: var(--space-3xs); }

  /* Investment */
  .reason { grid-template-columns: 1fr; gap: var(--space-sm); }

  /* Contact */
  .contact__submit { justify-self: stretch; }

  /* Footer */
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- ≤380 · Small phone ---------- */
@media (max-width: 380px) {
  :root { --gutter: 1rem; }
  .btn { padding: 0 1.5em; }
}

/* ---------- Input capability ---------- */
@media (hover: none) {
  .intro__media:hover img,
  .floor-card__media:hover img,
  .gallery__item:hover img { scale: none; }
  .reason:hover { transform: none; }
}

/* Short landscape screens (phones turned sideways) */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 520px; }
  .hero__scroll { display: none; }
}

/* ==========================================================================
   Responsive pass (1920 → 360): fixes found by the breakpoint audit
   ========================================================================== */

/* (Fluid type minimums for small phones were lowered in the style.css tokens) */

/* Investment cards: the 10ch cap was narrower than "Infrastructure" */
.reason__title {
  max-width: 14ch;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Header logo link only as wide as the logo */
.logo--image { justify-self: start; }

/* Touch targets: 44px minimum hit area without changing the look */
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.nav__link::after { bottom: 8px; }
.site-footer__nav ul { gap: 0; }
.site-footer__nav a,
.site-footer__top {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Form: 16px minimum so iOS Safari does not zoom in on focus */
.field__input { font-size: max(1rem, var(--fs-base)); }

/* Mobile menu on short screens (small phones, landscape): keep every link
   reachable — smaller type, and the overlay scrolls if it still overflows */
@media (max-width: 1024px) {
  .nav { overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 1024px) and (max-height: 700px) {
  .nav__link { font-size: clamp(1.6rem, 1rem + 4vh, 2.6rem); }
  .nav__list { gap: 0; }
}