/* ==========================================================================
   LA Elegant Homes — Responsive
   Intentional behaviour per breakpoint, not a shrunk desktop layout.
   Breakpoints: 1280 (phone out) / 1100 (nav -> burger) / 1024 / 768 / 560 / 430
   ========================================================================== */

/* ---------- 1280px: the phone number leaves the bar ---------- */
@media (max-width: 1280px) {
  .header-phone { display: none; }
  .nav__list { gap: .95rem; }
  .nav__link,
  .nav__toggle-sub { font-size: .75rem; letter-spacing: .09em; }
  .header-actions { gap: var(--space-sm); }
  .site-header__logo img { height: 31px; }

  .mega__inner { gap: var(--space-lg); }
  .mega__col-side { padding-left: var(--space-lg); }
  .mega__card { min-width: 190px; }
  .hero-switch__btn { width: 92px; }
}

/* ---------- 1080px: the header is the tightest thing on the page ---------- */
@media (max-width: 1080px) {
  .nav__list { gap: .85rem; }
  .nav__link,
  .nav__toggle-sub { font-size: .72rem; letter-spacing: .06em; }
  .site-header__logo img { height: 29px; }
  .header-actions .btn { padding: .7rem 1rem; }

  .mega__card { flex: 1 1 calc(50% - var(--space-md) / 2); }
}

/* ---------- 1024px: drop the header phone, ease the type ---------- */
@media (max-width: 1024px) {
  :root { --header-h: 76px; }

  .hero-cine__copy { max-width: 40rem; }
  .hero-cine__text { max-width: 32rem; }

  /* Three-up becomes two-up rather than collapsing straight to one */
  .col-3 { flex: 1 1 calc(50% - var(--gap) / 2); }
  .pillars .value-block { padding-inline: var(--space-md); }
  .project-card__specs { gap: var(--space-sm); }
  .gallery__item { flex: 1 1 calc(50% - var(--space-sm) / 2); }
  .gallery__item--lead { flex: 1 1 100%; }

  .split__media--framed::before { display: none; }

  .mega__col-main,
  .mega__col-side { flex: 1 1 100%; }
  .mega__col-side { padding-left: 0; padding-top: var(--space-lg); border-left: 0; border-top: 1px solid var(--color-line); }
  .mega__feature-media { aspect-ratio: 21/9; }

  .hero-switch__btn { width: 84px; }
  .hero-switch__play { width: 40px; height: 40px; }
  .hero-switch__ring { width: 40px; height: 40px; }

  .cta-band__inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- 1100px: switch to the mobile menu ----------
   Seven nav items plus a button will not fit a 1240px bar below this width,
   and squeezing them makes the nav collide with the actions. ---------- */
@media (max-width: 1100px) {
  .nav { display: none; }
  .burger { display: flex; }
  .mega { display: none; }

  /* Burger sits over the open light panel, so force dark bars */
  .site-header.is-nav-open { background: rgba(255,255,255,.97); border-bottom-color: var(--color-line); }
  .site-header.is-nav-open .logo--light { display: none; }
  .site-header.is-nav-open .logo--dark  { display: block; }

  /* Portrait: the composition becomes vertical, so the scrim does too.
     Same 30% base grade underneath, verified the same way. */
  .hero-cine__scrim {
    background:
      linear-gradient(180deg, rgba(6,24,22,.40) 0%, rgba(6,24,22,.24) 30%, rgba(6,24,22,.70) 74%, rgba(6,24,22,.86) 100%),
      linear-gradient(0deg, rgba(6,24,22,.30) 0%, rgba(6,24,22,.30) 100%);
  }

  .project-row,
  .project-row--flip .project-row__media { order: 0; }
}

/* ---------- 820px: the three pillars stack ----------
   They go straight from 3-up to stacked. Allowing a 2-up step would leave the
   third pillar orphaned on its own row. ---------- */
@media (max-width: 820px) {
  .pillars { --gap: 0; }
  .pillars .value-block {
    flex: 1 1 100%;
    padding: var(--space-lg) 0 0;
    border-left: 0;
    border-top: 1px solid var(--color-line-dark);
  }
  .pillars .value-block:first-child { padding-top: 0; border-top: 0; }
  .section--alt .pillars .value-block,
  .section--light .pillars .value-block { border-top-color: var(--color-line); }
}

/* ---------- 768px: single column, re-proportioned hero ---------- */
@media (max-width: 768px) {
  :root { --space-xl: 3rem; --space-2xl: 4rem; }

  .header-actions .btn { display: none; }

  .hero-cine {
    padding-top: calc(var(--header-h) + 2.5rem);
    padding-bottom: 1.25rem;
  }
  .hero-cine__slide img { object-position: center 55%; }
  .hero-cine__copy,
  .hero-cine__text { max-width: 100%; }
  .hero-cine__title { line-height: 1.06; }
  .hero-cine .btn-group .btn { flex: 1 1 100%; }
  .hero-cine__foot {
    margin-top: 1.5rem;
    padding-top: 1rem;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 1rem;
  }
  .hero-cine__foot-left { justify-content: flex-start; }
  .hero-cine__cue { display: none; }
  .hero-cine__creds { gap: .4rem 1rem; font-size: .75rem; }

  .hero-switch { justify-content: space-between; width: 100%; }
  .hero-switch__list { flex: 1; gap: .4rem; }
  .hero-switch__list li { flex: 1; }
  .hero-switch__btn { width: 100%; }

  .page-hero { min-height: 0; padding-top: calc(var(--header-h) + 3rem); padding-bottom: var(--space-lg); }

  .col-2, .col-3, .col-4,
  .col-5of12, .col-7of12 { flex: 1 1 100%; }

  .row, .row--gap-lg { gap: var(--space-lg); }

  /* Media above copy on every split, regardless of source order */
  .split .split__media { order: -1; }
  .project-row__media { order: -1 !important; }
  .project-row + .project-row { margin-top: var(--space-xl); }

  .cred-bar__list li { flex: 1 1 50%; border-left: 0; border-top: 1px solid var(--color-line); padding-block: var(--space-md); }
  .cred-bar__list li:nth-child(-n+2) { border-top: 0; }

  .fact-list { gap: var(--space-md); }
  .fact-list li { flex: 1 1 calc(50% - var(--space-md) / 2); }

  .checklist--two { display: block; }

  .site-footer__cols { gap: var(--space-lg); }
  .footer-brand { flex: 1 1 100%; }
  .footer-col { flex: 1 1 calc(50% - var(--space-lg) / 2); }
  .site-footer__bar-inner { flex-direction: column; align-items: flex-start; }

  .cta-band .btn-group { width: 100%; }
  .cta-band .btn-group .btn { flex: 1 1 100%; }

  .map-embed { aspect-ratio: 4/3; }
}

/* ---------- 560px: compress cards and galleries ---------- */
@media (max-width: 560px) {
  .gallery__item { flex: 1 1 100%; }
  .gallery__item--lead img { aspect-ratio: 3 / 2; }

  .gallery { gap: var(--space-xs); }

  .service-card__media { aspect-ratio: 3/2; }
  .service-card__index { font-size: 1.5rem; }
  .project-card__body { padding: var(--space-sm) var(--space-md) var(--space-md); }

  .form__row { gap: var(--space-md); }
  .form__field { flex: 1 1 100%; }

  .mobile-nav__link,
  .mobile-nav__sub-toggle { font-size: 1.4rem; }

  .footer-col { flex: 1 1 100%; }
  .footer-badges img { height: 26px; }
}

/* ---------- 430px and below: the smallest supported phones ---------- */
@media (max-width: 430px) {
  :root { --gutter: 1.125rem; }

  .hero-cine__title { font-size: clamp(2.375rem, 1.1rem + 9.6vw, 3.125rem); line-height: 1.08; }
  .hero-cine__eyebrow { letter-spacing: .16em; gap: .65rem; }
  .hero-cine__eyebrow::before { width: 28px; }
  .hero-cine__creds { font-size: .6875rem; }
  .hero-switch__play { width: 36px; height: 36px; margin-right: .25rem; }
  .hero-switch__ring { width: 36px; height: 36px; }
  .hero-switch__btn img { aspect-ratio: 3/2; }

  .site-header__logo img { height: 26px; }

  .btn { padding: .85rem 1.35rem; font-size: .75rem; letter-spacing: .1em; }
  .btn-group { gap: .75rem; }

  .cred-bar__list li { flex: 1 1 100%; border-top: 1px solid var(--color-line); }
  .cred-bar__list li:first-child { border-top: 0; }

  .fact-list li { flex: 1 1 100%; }

  .project-meta { gap: var(--space-sm) var(--space-lg); }

  .accordion__trigger { font-size: 1.05rem; padding: 1.1rem 0; }

  .suburb-list span,
  .suburb-list a { font-size: .75rem; padding: .5rem .85rem; }

  .notice { padding: var(--space-sm) var(--space-md); }
}

/* ---------- Tall-but-narrow tablets in portrait (768 / 820) ---------- */
@media (min-width: 761px) and (max-width: 900px) {
  .col-3 { flex: 1 1 calc(50% - var(--gap) / 2); }
  .col-4 { flex: 1 1 calc(50% - var(--gap) / 2); }
  .hero-cine__copy { max-width: 34rem; }
}

/* ---------- Landscape phones: don't let the hero eat the screen ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-cine { min-height: 0; padding-top: calc(var(--header-h) + 2rem); padding-bottom: 1.5rem; }
  .hero-cine__title { font-size: clamp(2rem, 1rem + 4vw, 2.75rem); }
  .hero-cine__text { display: none; }
  .hero-cine__foot { margin-top: 1.5rem; flex-direction: row; }
  .hero-switch__list { display: none; }
  .mobile-nav__inner { padding-bottom: var(--space-lg); }
  .mobile-nav__link, .mobile-nav__sub-toggle { font-size: 1.2rem; padding: .7rem 0; }
}

/* ---------- Print ---------- */
@media print {
  /* Texture costs ink and adds nothing on paper */
  body, .section--light, .section--alt, .section--dark,
  .cta-band, .site-footer, .cred-bar { background-image: none !important; }

  .site-header, .mobile-nav, .cta-band, .burger, .btn { display: none !important; }
  body { color: #000; }
  .hero-cine, .page-hero { min-height: 0; padding: 1rem 0; background: none; }
  .hero-cine__stage, .hero-cine__scrim, .hero-cine__grain,
  .hero-cine__cue, .hero-switch, .mega, .page-hero__media { display: none; }
  .hero-cine__title, .page-hero h1 { color: #000; }
  .hero-cine__text, .hero-cine__creds, .hero-cine__eyebrow { color: #000; }
}