/* ==========================================================================
   JAGUAR FITNESS DEN — responsive.css
   Content-aware breakpoints: 1180 / 960 / 720 / 480.
   Layouts are recomposed (not just shrunk) on small screens.
   ========================================================================== */

/* ---------- Large laptops and below ---------- */
@media (max-width: 1180px) {
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ask { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ask__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .ask__item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile:nth-child(3) { border-left: 0; }
  .tile:nth-child(n+3) { border-top: 2px solid var(--ink); }
  .next-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .next-steps li:nth-child(3) { border-left: 0; padding-left: 0; }
  .next-steps li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .opt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav__links { gap: 16px; }
}

/* ---------- Tablets: switch to mobile navigation and stack heroes ---------- */
@media (max-width: 960px) {
  :root { --nav-h: 64px; }
  .nav__toggle { display: block; }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 99;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 28px; background: var(--white); border-bottom: 3px solid var(--orange);
    max-height: calc(100svh - var(--nav-h)); overflow-y: auto;
    clip-path: inset(0 0 100% 0); visibility: hidden; opacity: 0;
    transition: clip-path .5s var(--ease), opacity .3s, visibility 0s .5s;
    counter-reset: m;
  }
  .nav__links.is-open { clip-path: inset(0 0 -40px 0); visibility: visible; opacity: 1; transition: clip-path .5s var(--ease), opacity .3s, visibility 0s; }
  .nav__links a:not(.btn) {
    display: flex; align-items: baseline; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line);
    font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; letter-spacing: .04em; text-transform: uppercase;
    counter-increment: m;
  }
  .nav__links a:not(.btn)::before { content: "0" counter(m); font-size: .85rem; color: var(--orange-deep); letter-spacing: .1em; min-width: 1.6em; }
  .nav__links a:not(.btn)::after { left: auto; right: 0; bottom: auto; top: 50%; width: 22px; height: 3px; transform: scaleX(0) translateY(-50%); transform-origin: right; }
  .nav__links a:not(.btn):hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1) translateY(-50%); }
  .nav__links .btn { margin-top: 22px; width: 100%; }
  /* menu links stagger in */
  html.js .nav__links a { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
  html.js .nav__links.is-open a { opacity: 1; transform: none; }
  html.js .nav__links.is-open a:nth-child(1) { transition-delay: .08s; }
  html.js .nav__links.is-open a:nth-child(2) { transition-delay: .13s; }
  html.js .nav__links.is-open a:nth-child(3) { transition-delay: .18s; }
  html.js .nav__links.is-open a:nth-child(4) { transition-delay: .23s; }
  html.js .nav__links.is-open a:nth-child(5) { transition-delay: .28s; }
  html.js .nav__links.is-open a:nth-child(6) { transition-delay: .33s; }
  html.js .nav__links.is-open a:nth-child(7) { transition-delay: .38s; }
  /* No-JS: nav stays a simple wrapped row */
  html:not(.js) .nav__toggle { display: none; }
  html:not(.js) .nav__in { flex-wrap: wrap; padding-block: 10px; }
  html:not(.js) .nav__links { position: static; clip-path: none; visibility: visible; opacity: 1; flex-direction: row; flex-wrap: wrap; gap: 4px 16px; padding: 0 0 8px; border: 0; width: 100%; max-height: none; }
  html:not(.js) .nav__links a:not(.btn) { font-family: var(--f-body); font-size: .85rem; padding: 6px 0; border: 0; text-transform: none; }
  html:not(.js) .nav__links a:not(.btn)::before { display: none; }
  html:not(.js) .nav__links .btn { margin: 0; width: auto; }

  /* Home hero: photo first, then headline (intentional recomposition) */
  .hero__in { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 34px; padding-block: 24px 56px; }
  .hero__visual { order: -1; padding: 0 14px 0 0; }
  .hero__main { aspect-ratio: 5/4; max-height: 440px; }
  .hero__main img { object-position: 55% 38%; }
  .hero__sub { display: none; }
  .hero__badge { width: 84px; top: -18px; right: -2px; }
  .hero__chip { right: 0; bottom: -14px; }
  .hero__shape { width: 70vw; clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); }
  .hero__copy { max-width: 640px; }

  .intro, .goals, .faq, .mind, .mem-grid, .con-grid, .loc, .feature, .cta__in, .statement, .ph-mem__in, .ph-gal__in, .ph-train__head, .ph-con__top, .orange-panel { grid-template-columns: minmax(0, 1fr); }
  .intro__head, .goals__head, .faq__head, .mem-grid__side { position: static; }
  .cta__shape { width: 100%; height: 38%; top: auto; clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%); opacity: .9; }
  .feature__badge { justify-self: start; width: 190px; margin-top: 8px; }
  .loc__media .frame { aspect-ratio: 4/3; max-height: none; }

  /* Collage → balanced 2-column mosaic */
  .collage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collage__a, .collage__b, .collage__c, .collage__t, .collage__head { grid-column: auto; grid-row: auto; margin-top: 0 !important; padding-top: 0; }
  .collage__head { grid-column: 1 / -1; order: -1; margin-bottom: 14px; }
  .collage__t { grid-column: 1 / -1; }
  .collage__b { margin-top: 36px !important; }

  /* Environment: card drops below image */
  .env { display: block; }
  .env__card { margin: -44px 14px 0 14px; position: relative; }
  .env__small { display: none; }
  .env__img .frame { aspect-ratio: 4/3; }

  /* Interactive panels → stacked accordion-like cards */
  .panels { flex-direction: column; height: auto; gap: 10px; }
  .panel { flex: none; height: 118px; transition: height .6s var(--ease); }
  .panel.is-active { flex-grow: 0; height: 340px; }

  /* Process → vertical timeline */
  .process { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .process::before { left: 29px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .process::after { left: 29px; top: 0; width: 2px; height: var(--p, 0%); transition-property: height; }
  .step { padding: 0 0 0 86px; min-height: 60px; }
  .step__dot { position: absolute; left: 0; top: 0; }
  .step h3 { margin-top: 0; padding-top: 4px; }

  /* Equipment */
  .equip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equip__big { grid-column: 1 / -1; grid-row: auto; }
  .equip__a, .equip__b, .equip__c { grid-column: auto; margin-top: 0 !important; }
  .equip__c { grid-column: 1 / -1; }

  /* Gallery preview */
  .gprev { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(60px, 15vw, 110px); }
  .gprev__1 { grid-column: 1 / 4; grid-row: 1 / 4; }
  .gprev__2 { grid-column: 4 / 7; grid-row: 1 / 3; }
  .gprev__3 { grid-column: 4 / 7; grid-row: 3 / 5; }
  .gprev__4 { grid-column: 1 / 4; grid-row: 4 / 6; }
  .gprev__5 { grid-column: 4 / 7; grid-row: 5 / 7; }
  .gprev__6 { grid-column: 1 / 4; grid-row: 6 / 7; }

  .final__img { aspect-ratio: 4/3; min-height: 0; }
  .final__panel { position: relative; left: auto; bottom: auto; margin: -36px var(--gutter) 0; max-width: none; }

  /* About */
  .ph-about__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-about__copy { grid-column: 1 / -1; }
  .ph-about__a, .ph-about__b { grid-column: auto; margin-bottom: 0 !important; }
  .split, .split--flip { display: grid; grid-template-columns: minmax(0, 1fr); }
  .split__a, .split__b, .split--flip .split__a, .split--flip .split__b { grid-column: 1; grid-row: auto; }
  .principles { grid-template-columns: minmax(0, 1fr); }
  .principle, .principle + .principle { padding-left: 0; border-left: 0; padding-right: 0; }
  .principle + .principle { border-top: 1px solid var(--line); }
  .curate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .curate__1, .curate__2, .curate__3, .curate__4 { grid-column: auto; margin-bottom: 0 !important; }

  /* Training */
  .tr-row, .tr-row--flip { grid-template-columns: minmax(0, 1fr); }
  .tr-row__img, .tr-row__txt, .tr-row--flip .tr-row__img, .tr-row--flip .tr-row__txt { grid-column: 1; grid-row: auto; }
  .confirm { grid-template-columns: minmax(0, 1fr); }
  .zone-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Gallery + contact */
  .masonry { column-count: 2; }
  .visit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visit__1, .visit__2 { grid-column: auto; margin-bottom: 0 !important; }
  .visit__t { grid-column: 1 / -1; }
}

/* ---------- Large phones ---------- */
@media (max-width: 720px) {
  .topbar { font-size: .62rem; letter-spacing: .14em; }
  .brand img { width: 40px; height: 40px; }
  .brand__name { font-size: 1.2rem; }
  .brand__sub { font-size: .52rem; letter-spacing: .28em; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .foot__bar { flex-direction: column; }
  .ask { grid-template-columns: minmax(0, 1fr); }
  .ask__item, .ask__item + .ask__item { padding-left: 0; padding-right: 0; border-left: 0; }
  .ask__item + .ask__item { border-top: 1px solid var(--line); }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile + .tile { border-left: 0; border-top: 2px solid var(--ink); }
  .tile:nth-child(3) { border-left: 0; }
  .next-steps { grid-template-columns: minmax(0, 1fr); }
  .next-steps li, .next-steps li + li { padding-left: 0; border-left: 0; }
  .next-steps li + li { border-top: 1px solid var(--line); }
  .opt-cards { grid-template-columns: minmax(0, 1fr); }
  .cols-2 { column-count: 1; }
  .fac-list { grid-template-columns: minmax(0, 1fr); }
  .goal { grid-template-columns: 54px 1fr; gap: 12px; }
  .goal__n { font-size: 1.7rem; }
  .loc__list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ph-train__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-train__strip figure:nth-child(3) { display: none; }
  .ph-train__strip .frame, .ph-train__strip figure:nth-child(2) .frame { height: clamp(240px, 62vw, 340px); }
  .masonry { column-gap: 10px; }
  .g-item { margin-bottom: 10px; }
  .g-item__cap, .g-item__zoom { opacity: 1; transform: none; }
  .g-item__cap { font-size: .62rem; padding: 26px 10px 8px; }
  .g-item__zoom { display: none; }
  .btn-row .btn { flex: 1 1 100%; }
  .lb__stage { padding: 0 8px; }
  .lb__nav { top: auto; bottom: -4px; transform: none; }
  .lb__nav--prev { left: 8px; } .lb__nav--next { right: 8px; }
  .lb__cap { padding-inline: 64px; }
  .statement__side { padding-left: 1rem; }
  .final__panel { margin-inline: 12px; }
  .hero__meta { gap: 6px 16px; font-size: .7rem; }
}

/* ---------- Small phones (360 / 390) ---------- */
@media (max-width: 480px) {
  :root { --gutter: 18px; }
  .brand__sub { display: none; }
  .hero__main { aspect-ratio: 1/1; }
  .hero__chip { font-size: .64rem; padding: 10px 12px; }
  .hero__title br { display: none; }
  .gprev { grid-auto-rows: clamp(54px, 16vw, 90px); }
  .zone-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .panel.is-active { height: 360px; }
  .panel__body { padding: 16px; }
  .curate, .collage, .visit { gap: 10px; }
  .eyebrow::after { width: 28px; }
}

/* ---------- Very large displays ---------- */
@media (min-width: 1700px) {
  :root { --wrap: 1360px; }
  .hero__in { min-height: 820px; }
}

/* ---------- Print ---------- */
@media print {
  .topbar, .nav, .lb, .cta__shape { display: none !important; }
  html.js .reveal, html.js .split-words .wi { opacity: 1 !important; transform: none !important; }
}