/* FightNight Boxing Club
 *
 * Same visual language as fightnights.com — black gradient bar, dark cards on
 * a light page, one hot accent colour — but red where fightnights uses gold.
 * Blue is kept for links only: it is in the logo, but used as a fill it took
 * over the page.
 */
:root {
  --black:    #05070c;
  --card:     #0d1119;
  --card-2:   #141a24;
  --red:      #8f1016;   /* blood red — the accent everywhere */
  --red-dk:   #6a0b10;
  --red-lt:   #b3161e;   /* hover, and the lighter stop in the nav gradient */
  --blue:     #2b7fff;   /* links only */
  --page:     #ececed;
  --ink:      #14171c;
  --muted:    #5f6570;
  --on-dark:  rgba(255,255,255,.72);
  --line:     rgba(255,255,255,.12);
  --line-lt:  rgba(0,0,0,.1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* A short page — Contact, an empty Gallery — would otherwise leave the footer
   floating halfway up with grey below it. The column layout pins it to the
   bottom of the viewport without making it position:fixed, so on a long page it
   still scrolls away properly. */
body { margin:0; font:16px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif;
       color:var(--ink); background:var(--page);
       min-height:100vh; display:flex; flex-direction:column; }
main { flex:1 0 auto; }
.foot { flex-shrink:0; }
img { max-width:100%; }
a { color:var(--blue); }

/* ---- header ------------------------------------------------------------ */
.nav { position:sticky; top:0; z-index:50;
       display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
       gap:1rem;
       padding-top:.7rem; padding-bottom:.7rem;
       padding-left:max(1.25rem, calc((100% - 980px) / 2));
       padding-right:max(1.25rem, calc((100% - 980px) / 2));
       /* Blood red bar, as the old site had it, with black beneath. */
       background:linear-gradient(90deg,#6a0b10 0%,#a11219 50%,#6a0b10 100%);
       border-bottom:3px solid #05070c; }
.brand { display:flex; align-items:center; gap:.6rem; color:#fff;
         text-decoration:none; font-weight:800;
         justify-self:start; }
.brand img { height:58px; width:auto; display:block; }
.brand span { font-size:1.05rem; letter-spacing:.6px; white-space:nowrap; }
.brand span em { font-style:normal; color:rgba(255,255,255,.75); }
.nav nav { display:flex; gap:1.25rem; flex-wrap:wrap; justify-content:center;
           justify-self:center; }

.nav-spacer { justify-self:end; }

/* Hidden on desktop; the media query below turns it on. Three bars that become
   an X, so the open state is obvious without a label. */
.burger { display:none; background:none; border:0; cursor:pointer; padding:.4rem;
          width:42px; height:36px; }
.burger span { display:block; width:24px; height:2px; margin:5px auto;
               background:#fff; border-radius:2px;
               transition:transform .2s ease, opacity .2s ease; }
.burger.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity:0; }
.burger.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.nav nav a { color:var(--on-dark); text-decoration:none; font-weight:600;
             font-size:.92rem; text-transform:uppercase; letter-spacing:.4px; }
.nav nav a { color:rgba(255,255,255,.82); }
.nav nav a:hover, .nav nav a.active { color:#fff; }

/* A white panel on the grey page, so the content reads as a contained sheet
   rather than text floating on a background. Narrower than the old 1100px —
   long lines are harder to read and the page looked sprawling on a wide
   monitor. */
main { width:100%; max-width:980px; margin:2rem auto; padding:2.25rem 2rem 2.75rem;
       background:#fff; border-radius:12px;
       box-shadow:0 1px 3px rgba(0,0,0,.08), 0 8px 28px rgba(0,0,0,.06); }

/* ---- headings ---------------------------------------------------------- */
h1 { font-size:clamp(1.9rem,5vw,2.9rem); line-height:1.12; margin:0 0 .6rem;
     text-transform:uppercase; font-weight:800; letter-spacing:-.5px; }
main h2 { margin:2.75rem 0 1.25rem; font-size:1.5rem; text-transform:uppercase;
          letter-spacing:.6px; font-weight:800; }
main h2::after { content:""; display:block; width:52px; height:4px;
                 background:var(--red); margin-top:.55rem; }
.lead { font-size:1.05rem; color:var(--muted); max-width:62ch; }
.muted { color:var(--muted); }

/* ---- hero -------------------------------------------------------------- */
.hero { padding:.5rem 0 1.5rem; }
.contact-line { font-size:1.12rem; font-weight:700; color:var(--ink); line-height:1.85; }
.contact-line a { text-decoration:none; }
.contact-line a:hover { text-decoration:underline; }

/* ---- buttons ----------------------------------------------------------- */
.btn { display:inline-block; margin-top:1.1rem; padding:.8rem 1.7rem;
       background:var(--red); color:#fff; font-weight:800; text-decoration:none;
       border-radius:5px; text-transform:uppercase; letter-spacing:.5px;
       font-size:.95rem; }
.btn:hover { background:var(--red-lt); }
.btn-sm { padding:.55rem 1.1rem; font-size:.85rem; margin:.5rem .5rem 0 0; }

/* ---- video ------------------------------------------------------------- */
.video { position:relative; padding-bottom:56.25%; height:0; overflow:hidden;
         border-radius:8px; background:#000; margin-bottom:1.75rem; }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---- dark cards -------------------------------------------------------- */
.promo-grid, .tier-grid, .coach-grid {
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
}
/* Promotions carry images of wildly different shapes — a landscape photo one
   month, a portrait flyer the next. Let each card be its own height. */
.promo-grid { align-items:start; }
/* The same black-into-navy gradient fightnights uses on its cards, so the two
   sites read as one hand. */
.promo, .tier, .coach {
  background:linear-gradient(160deg,#0d1b2e 0%,#173250 55%,#0d1b2e 100%);
  color:#fff; border-radius:10px; overflow:hidden;
  display:flex; flex-direction:column; }
/* Never crop a promotion image. A flyer is mostly text — a fixed height with
   object-fit:cover was slicing the middle out of it and throwing away the part
   that mattered. Natural height instead, capped so one very tall flyer cannot
   run away with the page, and `contain` for anything beyond the cap so it
   letterboxes rather than crops. */
.promo img { width:100%; height:auto; max-height:560px; object-fit:contain;
             display:block; background:#05070c; }
.promo-body { padding:1.25rem; display:flex; flex-direction:column; flex:1; }
.promo-body h3 { margin:0 0 .5rem; font-size:1.25rem; color:#fff; }
.promo-body p, .tier p { color:var(--on-dark); }
.promo-body .btn, .tier .btn { margin-top:auto; align-self:flex-start; }

/* Red rule across the top of a tier, the way fightnights brackets a main event. */
.tier { padding:1.5rem; border-top:4px solid var(--red); }
.tier h3 { margin:0 0 .35rem; font-size:1.2rem; text-transform:uppercase;
           letter-spacing:.5px; }
.price { font-size:2.6rem; font-weight:800; margin:.15rem 0 .6rem; color:var(--red); }
.price span { font-size:.95rem; font-weight:600; color:var(--on-dark); }

/* The badge sits in the card's top-right corner rather than across it: the
   name is the thing to read first, and a real ribbon would cover it. The card
   is already position-relative-free, so this needs the anchor. */
.tier { position:relative; }
.tier-badge { position:absolute; top:0; right:0;
              background:var(--red); color:#fff; font-size:.7rem; font-weight:700;
              text-transform:uppercase; letter-spacing:.6px;
              padding:.3rem .7rem; border-bottom-left-radius:6px; }
/* Leave room so a long name never runs under the badge. */
.tier-badge + h3 { padding-right:5.5rem; }

/* Ticks rather than bullets — this is a list of what you get, and a tick reads
   as included in a way a dot does not. */
.tier-includes { list-style:none; padding:0; margin:.4rem 0 1rem; }
.tier-includes li { position:relative; padding:.25rem 0 .25rem 1.5rem;
                    color:var(--on-dark); font-size:.95rem; }
.tier-includes li::before { content:"✓"; position:absolute; left:0; top:.25rem;
                            color:var(--red); font-weight:800; }

.more { margin:1.25rem 0 0; }

/* ---- coaches ----------------------------------------------------------- */
.coach-head { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
              padding:1.25rem 1.25rem 0; }
.coach-head h3 { margin:0; font-size:1.5rem; color:#fff; }
/* The direct child only — that is the phone button. The name is a link too now,
   nested in the h3, and a bare `.coach-head a` turned it into a second red pill
   the same size as the phone number. */
.coach-head > a { background:var(--red); color:#fff; font-size:.78rem; font-weight:700;
                padding:.3rem .65rem; border-radius:4px; text-decoration:none;
                white-space:nowrap; }
/* White, not the red accent. This sits on the dark navy card, where the blood
   red scores about 1.3:1 against the background — legible as a shape, not as
   words, and small uppercase text is the worst case for it. The red still
   brackets the cards elsewhere; it just cannot carry copy on this background. */
.coach-role { margin:.4rem 1.25rem 0; color:#fff; font-weight:700;
              text-transform:uppercase; font-size:.8rem; letter-spacing:.5px; }
.coach img { width:100%; display:block; margin-top:1rem; }
.coach-body { padding:1.25rem; color:var(--on-dark); }
.coach-body h4 { margin:1.1rem 0 .35rem; font-size:.82rem; color:#fff;
                 text-transform:uppercase; letter-spacing:.6px; }
.coach-body ul { margin:0; padding-left:1.15rem; }
.coach-body li { margin-bottom:.2rem; }

/* ---- a coach's own page ------------------------------------------------ */
/* Wider than a card and its own page, because this is the link a coach hands
   out — it should not look like a team page with one person left on it. */
.profile { background:linear-gradient(160deg,#0d1b2e 0%,#173250 55%,#0d1b2e 100%);
           color:#fff; border-radius:10px; overflow:hidden; border-top:4px solid var(--red); }
.profile-head { display:flex; gap:1.5rem; padding:1.5rem; flex-wrap:wrap; align-items:flex-start; }
.profile-photo { width:220px; height:220px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.profile-head > div { flex:1 1 260px; }
.profile-head h1 { margin:0 0 .25rem; font-size:2rem; color:#fff; }
.profile-role { margin:0 0 1rem; color:#fff; font-weight:700; text-transform:uppercase;
                font-size:.85rem; letter-spacing:.5px; }
.profile-actions { margin:0; display:flex; gap:.5rem; flex-wrap:wrap; }
.profile-actions .btn { margin:0; }
/* An outlined twin for the second action, so the two do not compete. */
.btn-ghost { background:transparent; border:2px solid var(--red-lt); }
.btn-ghost:hover { background:var(--red-lt); }
.profile-socials { margin:.9rem 0 0; display:flex; gap:.5rem; flex-wrap:wrap; }
.profile-socials a { color:#fff; text-decoration:none; font-size:.82rem; font-weight:700;
                     text-transform:uppercase; letter-spacing:.5px;
                     border:1px solid var(--line); border-radius:999px; padding:.3rem .8rem; }
.profile-socials a:hover { background:var(--red); border-color:var(--red); }
.profile-body { padding:0 1.5rem 1.5rem; color:var(--on-dark); }
.profile-body h2 { margin:1.5rem 0 .4rem; font-size:.85rem; color:#fff;
                   text-transform:uppercase; letter-spacing:.6px; }
.profile-body ul { margin:0; padding-left:1.15rem; }
.profile-body li { margin-bottom:.2rem; }
/* The name on the team page links through to this page. It stays exactly what
   it looked like before it was a link — the h3's size and white — because the
   heading is the thing you read, not a button. Underline only on hover, so
   there is still a hint that it goes somewhere. */
.coach-head h3 a { color:#fff; font:inherit; text-decoration:none; }
.coach-head h3 a:hover { text-decoration:underline; }

/* ---- info banner ------------------------------------------------------- */
.info-banner { margin:2.5rem 0 1rem; padding:1.75rem 1.25rem; text-align:center;
               background:linear-gradient(160deg,#0d1b2e 0%,#173250 55%,#0d1b2e 100%);
               color:#fff; border-radius:10px; font-size:1.1rem; line-height:1.8;
               border-top:4px solid var(--red); }
.info-banner strong { display:block; font-size:1.2rem; margin-bottom:.35rem; }
.info-banner a { color:#fff; }

/* ---- gallery ----------------------------------------------------------- */
.pills { display:flex; gap:.5rem; flex-wrap:wrap; margin:1.25rem 0;
         overflow-x:auto; -webkit-overflow-scrolling:touch; }
.pills a { padding:.4rem .95rem; border-radius:999px; text-decoration:none;
           color:var(--ink); background:#fff; border:1px solid var(--line-lt);
           font-size:.88rem; white-space:nowrap; }
.pills a.active, .pills a:hover { background:var(--black); color:#fff; border-color:var(--black); }
.gallery { display:grid; gap:.9rem;
           grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); }
.gallery figure { margin:0; border-radius:8px; overflow:hidden; background:var(--card); }
.gallery img { width:100%; height:190px; object-fit:cover; display:block; }
.gallery figcaption { padding:.55rem .75rem; font-size:.82rem; color:var(--on-dark); }

/* ---- contact ----------------------------------------------------------- */
.contact-grid { display:grid; gap:1.75rem; margin-top:1.5rem;
                grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.contact-grid h3 { margin:1.15rem 0 .3rem; font-size:.85rem; text-transform:uppercase;
                   letter-spacing:.6px; color:var(--red); }
.contact-grid p { margin:0; font-size:1.05rem; }

.price-list { list-style:none; padding:0; margin:.5rem 0 0; max-width:24rem; }
.price-list li { padding:.55rem 0; border-bottom:1px solid var(--line-lt); font-weight:600; }

/* ---- footer ------------------------------------------------------------ */
.foot { margin-top:3rem; padding:2.25rem 1.25rem 1.5rem;
        background:linear-gradient(90deg,#05070c 0%,#141a24 50%,#080b11 100%);
        color:var(--on-dark); font-size:.92rem; border-top:3px solid var(--red); }
.foot-grid { max-width:980px; margin:0 auto; display:grid; gap:1.75rem;
             grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.foot strong { color:#fff; }
.foot a { color:#fff; text-decoration:none; }
.foot a:hover { text-decoration:underline; }
.copy { max-width:980px; margin:1.75rem auto 0; padding-top:1.25rem;
        border-top:1px solid var(--line); font-size:.82rem; }

/* ---- mobile ------------------------------------------------------------ */
@media (max-width: 720px) {
  /* Brand left, burger right. The menu drops underneath as a full-width panel
     when opened, so it never competes with the logo for space. */
  .nav { grid-template-columns:1fr auto; gap:.5rem;
         padding:.6rem 1rem; }
  .brand { justify-self:start; }
  .nav nav { justify-self:stretch; }
  .nav-spacer { display:none; }
  .burger { display:block; justify-self:end; }

  .nav nav { grid-column:1 / -1; display:none; width:100%;
             flex-direction:column; gap:0; padding-top:.5rem; }
  .nav nav.open { display:flex; }
  .nav nav a { padding:.75rem .25rem; width:100%;
               border-top:1px solid rgba(255,255,255,.18); font-size:1rem; }
  /* The nav scrolls sideways rather than wrapping into three ragged rows. */

  .brand img { height:46px; }
  main { margin:1rem auto; padding:1.5rem 1.15rem 2rem; border-radius:10px; }
  .contact-line { font-size:1.05rem; }
  .btn { display:block; text-align:center; }
  .btn-sm { display:inline-block; }
  .gallery img { height:150px; }
}

/* Classes */
.agetag { display:inline-block; background:var(--red); color:#fff; font-size:.75rem;
          font-weight:700; padding:.2rem .6rem; border-radius:4px; margin:0 0 .5rem;
          text-transform:uppercase; letter-spacing:.5px; }
.agetag.big { font-size:.85rem; padding:.3rem .8rem; }
.classhero { width:100%; max-height:380px; object-fit:cover; border-radius:10px; margin:1.25rem 0; }

/* --- gallery lightbox ---------------------------------------------------- */
/* Thumbnails have to look clickable before anyone clicks one. */
.gallery figure { cursor:zoom-in; position:relative; transition:transform .15s ease; }
.gallery figure:hover { transform:translateY(-2px); }
.gallery figure:focus-visible { outline:3px solid var(--red); outline-offset:2px; }
.gallery figure::after {
  content:"⤢"; position:absolute; top:.5rem; right:.5rem;
  width:28px; height:28px; line-height:28px; text-align:center;
  background:rgba(5,7,12,.7); color:#fff; border-radius:5px;
  font-size:.9rem; opacity:0; transition:opacity .15s ease;
}
.gallery figure:hover::after, .gallery figure:focus-visible::after { opacity:1; }

.lb { position:fixed; inset:0; z-index:200; display:none;
      align-items:center; justify-content:center;
      background:rgba(5,7,12,.94); padding:1rem; }
.lb.is-open { display:flex; }
.lb-stage { margin:0; max-width:100%; max-height:100%;
            display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.lb-stage img { max-width:100%; max-height:82vh; width:auto; height:auto;
                display:block; border-radius:6px; }
.lb-stage figcaption { color:rgba(255,255,255,.85); font-size:.95rem;
                       text-align:center; max-width:60ch; }

.lb button { position:absolute; background:rgba(255,255,255,.1); color:#fff;
             border:0; cursor:pointer; border-radius:6px; line-height:1;
             transition:background .15s ease; }
.lb button:hover { background:var(--red); }
.lb-close { top:1rem; right:1rem; width:44px; height:44px; font-size:1.9rem; }
.lb-prev, .lb-next { top:50%; transform:translateY(-50%);
                     width:48px; height:64px; font-size:2.2rem; }
.lb-prev { left:1rem; }
.lb-next { right:1rem; }

@media (max-width: 720px) {
  /* Arrows sit at the bottom on a phone — at the sides they land under your
     thumbs and over the photo. Swiping works too. */
  .lb-prev, .lb-next { top:auto; bottom:1rem; transform:none; height:48px; width:56px; }
  .lb-stage img { max-height:70vh; }
  .gallery figure::after { opacity:1; }   /* no hover on touch */
}