/* ==========================================================================
   Gorillas Playground Fitness and Boxing — site.css
   Order: fonts · tokens · base · nav · hero · programmes · gallery ·
          lightbox · visit · closing · footer · breakpoints
   Fonts are self-hosted (see assets/vendor/SOURCE.txt for provenance).
   ========================================================================== */

/* --- fonts --------------------------------------------------------------- */
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/bigshoulders-800.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-400.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-500.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-600.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-700.woff2') format('woff2');}

/* --- tokens -------------------------------------------------------------- */
:root{
  --navy:#0f1626; --navy-2:#182339; --navy-3:#0a0f1b;
  --gold:#c9a24e; --gold-light:#f3dc9a; --gold-dark:#7a612e;
  --ink:#efe9dc; --ink-2:#c7c2b6; --muted:#a8afc0;
  --line:rgba(201,162,78,.28);        /* decorative dividers */
  --line-ui:rgba(201,162,78,.62);     /* borders that are the only cue for a control */
  --wa:#25d366; --wa-ink:#0b1f14;
  --display:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;
  --body:Barlow,'Segoe UI',Helvetica,Arial,sans-serif;
  --pad:clamp(20px,4vw,56px);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);   /* landscape notch */
  --safe-r:env(safe-area-inset-right,0px);
}

/* --- base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scrollbar-gutter:stable;}
body{margin:0;background:var(--navy);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{text-wrap:balance;}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;}

.display{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.9;}
.label{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;}
.goldtext{background:linear-gradient(180deg,var(--gold-light) 0%,var(--gold) 52%,var(--gold-dark) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){.goldtext{color:var(--gold);-webkit-text-fill-color:var(--gold);background:none;}}

.grain{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:.07;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.75 0 0 0 0 0.6 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.skip{position:absolute;left:-9999px;top:0;z-index:10;background:var(--gold);color:var(--navy);padding:12px 20px;font-weight:700;}
.skip:focus{left:0;}

/* --- buttons and inline links -------------------------------------------- */
/* transition covers background only. transform is GSAP's — the hero button is
   tweened by the roar timeline, and a CSS transform transition fights it. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:60px;padding:0 28px;background:var(--gold);color:var(--navy);font-family:var(--body);font-size:14px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;border:0;cursor:pointer;transition:background .2s ease;}
.btn:hover{background:var(--gold-light);}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-ui);}
.btn.ghost:hover{background:rgba(201,162,78,.12);color:var(--ink);transform:none;}
.btn .wa{flex:0 0 20px;}
.link{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;}
.link:hover{color:var(--ink);}

/* --- nav ----------------------------------------------------------------- */
.nav{position:absolute;top:0;left:0;right:0;height:80px;padding:var(--safe-t) var(--pad) 0;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);z-index:4;}
.brand{display:flex;flex-direction:column;gap:2px;line-height:1;}
.brand-mark{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:22px;color:var(--gold);}
.brand-sub{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--muted);}
.links{display:flex;gap:36px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;}
.links a:hover{color:var(--gold-light);}
.phone{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;white-space:nowrap;}
.phone:hover{color:var(--gold-light);}

/* --- hero ---------------------------------------------------------------- */
.hero{position:relative;min-height:100vh;min-height:100svh;background:radial-gradient(ellipse 900px 720px at 70% 46%,var(--navy-2) 0%,var(--navy) 70%);overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:center;min-height:100vh;min-height:100svh;padding:calc(100px + var(--safe-t)) var(--pad) 96px;gap:24px;}
.hero-copy{display:flex;flex-direction:column;gap:26px;max-width:640px;min-width:0;}
.eyebrow{display:flex;align-items:center;gap:14px;color:var(--muted);margin:0;}
.eyebrow::before{content:"";display:block;width:36px;height:2px;background:var(--gold);flex:0 0 36px;}
h1{margin:0;font-size:clamp(52px,8vw,118px);letter-spacing:.005em;}
h1 .line{display:block;}
.lede{margin:0;max-width:520px;font-size:clamp(16px,1.4vw,20px);color:var(--ink-2);}
.actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:6px;}
.hero-mark{position:relative;display:flex;align-items:center;justify-content:center;height:min(74vh,700px);min-width:0;}
.halo{position:absolute;inset:-12% -22%;background:radial-gradient(closest-side,rgba(201,162,78,.16),rgba(201,162,78,0) 72%);pointer-events:none;}
.mark-wrap{position:relative;height:100%;aspect-ratio:1260/1700;max-width:100%;}
/* No drop-shadow filter: it forces a full-size offscreen re-raster on every
   animation frame and costs real frames on the cheap Androids this audience uses. */
.gp-logo{width:100%;height:100%;overflow:visible;}
.gp-ring{opacity:0;}
/* padding-right reserves a gutter for the fixed WhatsApp button, which would
   otherwise sit on top of the scroll cue. */
.hero-meta{position:absolute;left:max(var(--pad),var(--safe-l));right:max(var(--pad),var(--safe-r));bottom:0;min-height:72px;padding:12px 96px calc(12px + var(--safe-b)) 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:40px;flex-wrap:wrap;color:var(--muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;z-index:2;}
.hero-meta .ig,.hero-meta .scroll-cue{display:inline-flex;align-items:center;gap:8px;}
.hero-meta .ig:hover{color:var(--gold-light);}
.scroll-cue{margin-left:auto;white-space:nowrap;}
.scroll-cue svg{animation:bob 1.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

/* --- section heads ------------------------------------------------------- */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap;}
.section-head h2{margin:0;font-size:clamp(40px,5vw,72px);}
.section-head p{margin:0;color:var(--muted);max-width:46ch;}

/* --- programmes ---------------------------------------------------------- */
.programmes{padding:clamp(64px,8vw,120px) var(--pad);border-top:1px solid var(--line);}
.prog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
.prog{background:var(--navy);padding:28px 24px 32px;display:flex;flex-direction:column;gap:14px;min-height:220px;}
.prog h3{margin:0;font-size:34px;}
.prog p{margin:0;color:var(--muted);font-size:15px;}
.prog .who{margin-top:auto;color:var(--gold);}

/* --- gallery ------------------------------------------------------------- */
.floor{padding:clamp(64px,8vw,120px) var(--pad);border-top:1px solid var(--line);}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,16vw,240px);grid-auto-flow:dense;gap:12px;}
.tile{position:relative;margin:0;overflow:hidden;background:var(--navy-3);cursor:pointer;}
.tile.feature{grid-column:span 2;grid-row:span 2;}
/* Full colour, always. The greyscale-until-hover treatment left the gallery
   permanently grey on every phone, which is where most visitors are. */
.tile img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.04) saturate(1.04);transition:transform .7s ease;}
.tile:hover img,.tile:focus-visible img{transform:scale(1.03);}
.tile figcaption{position:absolute;left:0;bottom:0;background:var(--gold);color:var(--navy);padding:8px 12px;transform:translateY(100%);transition:transform .35s ease;}
.tile:hover figcaption,.tile:focus-visible figcaption{transform:translateY(0);}
.tile.more{display:none;}
.gallery.expanded .tile.more{display:block;}
.gallery-foot{display:flex;justify-content:center;margin-top:28px;}
.credit{margin:24px 0 0;color:var(--muted);font-size:12px;letter-spacing:.06em;}
/* Touch: captions always visible, and neutralise the HOVER rule itself —
   overriding the base rule would not work (the :hover selector still wins) and
   iOS leaves a tapped tile stuck in its hover state. */
@media (hover:none){
  .tile figcaption{transform:none;}
  .tile:hover img{transform:none;}
}

/* --- lightbox ------------------------------------------------------------ */
/* Browsers that implement <dialog> hide it when closed via their own UA rule.
   Browsers that do NOT (iOS Safari < 15.4, old Android WebViews) have no such
   rule, so without this the closed lightbox renders as a visible strip of
   broken image and stray buttons below the footer. No-op where dialog works. */
.lightbox:not([open]){display:none;}
/* inset:0 rather than 100vw/100vh — vw includes the scrollbar gutter, which
   pushed the close and next buttons under the viewport edge on desktop. */
.lightbox{border:0;padding:0;background:transparent;position:fixed;inset:0;width:auto;height:auto;max-width:none;max-height:none;color:var(--ink);}
.lightbox::backdrop{background:rgba(10,15,27,.93);}
.lightbox .frame{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:calc(72px + var(--safe-t)) 90px calc(40px + var(--safe-b));}
.lightbox img{max-width:min(1200px,100%);max-height:calc(100% - 48px);object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.6);}
.lightbox .cap{margin:0;color:var(--gold);text-align:center;}
.lb-btn{position:absolute;width:52px;height:52px;border:1px solid var(--line);background:rgba(15,22,38,.75);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.lb-btn:hover{background:var(--gold);color:var(--navy);}
.lb-close{top:calc(20px + var(--safe-t));right:20px;}
.lb-prev{left:20px;top:50%;transform:translateY(-50%);}
.lb-next{right:20px;top:50%;transform:translateY(-50%);}

/* --- visit --------------------------------------------------------------- */
.visit{padding:clamp(64px,8vw,120px) var(--pad);border-top:1px solid var(--line);}
.visit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;}
.visit-block{display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
.visit-block h3{margin:0;color:var(--gold);}
.visit-block address{font-style:normal;font-size:19px;line-height:1.6;color:var(--ink);}
.visit-lead{margin:0;color:var(--muted);font-size:15px;}
.hours{border-collapse:collapse;font-size:17px;font-variant-numeric:tabular-nums;}
.hours th{text-align:left;font-weight:600;color:var(--ink);padding:0 28px 10px 0;white-space:nowrap;}
.hours td{color:var(--ink-2);padding:0 0 10px;white-space:nowrap;}
.hours .closed{color:var(--muted);}
.tel-big{font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:.02em;color:var(--gold);line-height:1;}
.tel-big:hover{color:var(--gold-light);}

/* --- closing ------------------------------------------------------------- */
.closing{position:relative;isolation:isolate;padding:clamp(64px,10vw,140px) var(--pad);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;overflow:hidden;}
.closing .bg{position:absolute;inset:0;z-index:-2;background-image:url('../img/closing-bg.webp');background-size:cover;background-position:center;filter:grayscale(1);opacity:.22;}
.closing::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--navy) 0%,rgba(15,22,38,.55) 55%,rgba(15,22,38,.85) 100%);}
.closing-copy h2{margin:0;font-size:clamp(44px,6vw,88px);}
.closing-copy p{margin:12px 0 0;color:var(--ink-2);max-width:52ch;font-size:17px;}

/* --- footer and floating button ------------------------------------------ */
footer{padding:28px var(--pad) calc(28px + var(--safe-b));border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase;}
footer a:hover{color:var(--gold-light);}
.wa-fab{position:fixed;right:24px;bottom:calc(24px + var(--safe-b));width:60px;height:60px;border-radius:50%;background:var(--wa);color:var(--wa-ink);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 32px rgba(0,0,0,.5);z-index:6;}

/* --- breakpoints --------------------------------------------------------- */
@media (max-width:1100px){
  .visit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;}
}
@media (max-width:860px){
  .links{display:none;}
  .phone-text{display:none;}
  .phone{width:44px;height:44px;justify-content:center;gap:0;border:1px solid var(--line);}
  .brand-mark{font-size:18px;}
  .hero-grid{grid-template-columns:minmax(0,1fr);align-items:start;align-content:start;padding:calc(88px + var(--safe-t)) var(--pad) 130px;gap:12px;}
  .hero-mark{height:clamp(230px,38vh,400px);order:-1;}
  .hero-copy{gap:18px;}
  h1{font-size:clamp(44px,13vw,64px);}
  .lede{max-width:100%;}
  .actions{gap:16px;}
  .btn{width:100%;height:56px;}
  .hero-meta{gap:6px 20px;font-size:11px;flex-direction:column;align-items:flex-start;padding-right:76px;}
  .btn{margin-right:0;}
  .scroll-cue{display:none;}
  .prog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .visit-grid{grid-template-columns:minmax(0,1fr);gap:36px;}
  .closing{grid-template-columns:minmax(0,1fr);}
  .closing::before{background:linear-gradient(180deg,rgba(15,22,38,.75) 0%,rgba(15,22,38,.9) 100%);}
  .lightbox .frame{padding:calc(64px + var(--safe-t)) 12px calc(96px + var(--safe-b));}
  .lb-prev,.lb-next{top:auto;bottom:calc(24px + var(--safe-b));transform:none;}
  .lb-prev{left:24px;} .lb-next{right:24px;}
  .wa-fab{right:16px;bottom:calc(16px + var(--safe-b));width:54px;height:54px;}
}
@media (max-width:480px){
  .prog-grid{grid-template-columns:minmax(0,1fr);}
  .prog{min-height:0;}
  .tel-big{font-size:30px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}