/**
 * Scoped styles for pasted Gutenberg page templates.
 * Everything lives under `.wp-gb-page` so it never leaks onto other pages.
 * Paste the matching .html from /gutenberg-templates/ into the WP Code Editor
 * and wrap the body inside a Group with className="wp-gb-page".
 */
.wp-gb-page{
  --red:#C8102E;--red-deep:#A00D24;--navy:#0A1628;--navy-mid:#0F1D32;
  --cream:#EDF1F7;--warm-white:#F7F8FB;--silver:#8B9DAF;--silver-light:#B4C0CE;--dark-text:#0A0E1A;--gold:#C9A84C;--gold-muted:#B89430;
  --steel:#6B7A8D;--mid:#5A6370;--light-border:#DEE3EC;--green:#2D8A4E;
  --heading:'Bebas Neue',sans-serif;--condensed:'Barlow Condensed',sans-serif;--body:'Barlow',sans-serif;
  font-family:var(--body);color:var(--dark-text);background:var(--warm-white);font-size:16px;
  display:block;
  /* Full-bleed breakout: span the full viewport regardless of any constrained
   * parent (default page.php's .page-layout, theme content columns, etc.).
   * Stays in normal vertical flow — only the horizontal extent escapes. */
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.wp-gb-page *{box-sizing:border-box;}
.wp-gb-page a{text-decoration:none;color:inherit;}

/* page_gutenberg.php (the dedicated full-width Page Template) — also strip
 * any inherited padding/max-width from <main class="wp-gb-main">. */
.wp-gb-main{max-width:none;padding:0;margin:0;width:100%;}

/* WP wraps every wp:group block's children in a .wp-block-group__inner-container
 * div. Without intervention, our grid/flex parents (.gb-hero, .gb-split,
 * .gb-hero-text, .gb-split-text, .gb-content) would have ONE grid item — that
 * wrapper — instead of the actual blocks. display:contents collapses the
 * wrapper so the real children (text group + image figure) become the
 * grid/flex items their parent expects. */
.wp-gb-page .wp-block-group__inner-container{display:contents;}

/* Reset core block defaults that fight the design: image figures need to
 * fill their parent slot (hero / split), not size to the bitmap. We rely on
 * grid-cell stretch for height — do NOT set height:100% on the figure, that
 * triggers an unbounded growth loop inside the constrained-parent fallback. */
.wp-gb-page figure.wp-block-image{margin:0;}
.wp-gb-page figure.wp-block-image.gb-hero-img,
.wp-gb-page figure.wp-block-image.gb-split-img{display:block;width:100%;}
.wp-gb-page .gb-hero-img > img,
.wp-gb-page .gb-split-img > img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;display:block;}

/* Neutralise the default Gutenberg block-gap that injects vertical space
 * between sibling top-level sections (hero → split → content → banner).
 * Targets the children of the outermost __inner-container (which is what
 * actually sits at the top of the wp-gb-page tree once display:contents
 * collapses the wrapper). */
.wp-gb-page > .wp-block-group__inner-container > *{margin-block-start:0;margin-block-end:0;}

/* The default page template (page.php) wraps content in .watl-page .page-body
 * and styles content images with `img{margin:24px auto}`. When a .wp-gb-page
 * block layout is pasted into a page still on that template, the 24px margin
 * leaks onto card/split/avatar images and pushes them down inside their crop
 * box (exposing the cream background as a band on top). Cancel any inherited
 * margin on our block images so the layout is correct on either template. */
.wp-gb-page figure.wp-block-image img{margin:0 !important;}

/* Buttons */
.wp-gb-page .btn-p{background:var(--red);color:white;font-family:var(--condensed);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:2px;padding:15px 36px;border:2px solid var(--red);border-radius:2px;cursor:pointer;transition:all .35s;display:inline-flex;align-items:center;gap:8px;position:relative;overflow:hidden;}
.wp-gb-page .btn-p::before{content:'';position:absolute;inset:0;background:#1E3A8A;transform:scaleX(0);transform-origin:left;transition:transform .35s;z-index:0;}
.wp-gb-page .btn-p span,.wp-gb-page .btn-p svg{position:relative;z-index:1;}
.wp-gb-page .btn-p:hover{border-color:#1E3A8A;transform:translateY(-2px);box-shadow:0 0 0 3px rgba(30,58,138,.2);}
.wp-gb-page .btn-p:hover::before{transform:scaleX(1);}

/* Hero secondary button — outline style, used as the "Find a Venue" CTA
 * alongside the primary "Apply for Membership". Ports the mockup's .btn-s
 * (transparent, white text, hairline border) onto WP's core button block
 * with className="is-style-outline gb-hero-btn-secondary". */
.wp-gb-page .gb-hero-btn-secondary .wp-block-button__link,
.wp-gb-page .gb-hero-btn-secondary.wp-block-button .wp-block-button__link{background:transparent;color:white;font-family:var(--condensed);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;padding:12px 28px;border:1.5px solid rgba(255,255,255,.25);border-radius:2px;transition:all .25s;text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.wp-gb-page .gb-hero-btn-secondary .wp-block-button__link:hover{border-color:white;background:rgba(255,255,255,.06);color:white;}

/* Hero */
.wp-gb-page .gb-hero{background:var(--navy);color:white;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;min-height:380px;}
.wp-gb-page .gb-hero-text{padding:clamp(40px,6vw,72px) clamp(20px,5vw,56px);display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1;}
.wp-gb-page .gb-hero-text::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(200,16,46,.08),transparent 70%);pointer-events:none;}
.wp-gb-page .gb-hero-tag{font-family:var(--condensed);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--silver);margin:0 0 12px;position:relative;}
.wp-gb-page .gb-hero h1{font-family:var(--heading);font-size:clamp(32px,5vw,52px);letter-spacing:3px;line-height:1.05;margin:0 0 16px;position:relative;color:white;}
.wp-gb-page .gb-hero-sub{font-size:16px;color:rgba(255,255,255,.5);line-height:1.65;max-width:520px;position:relative;margin:0;}
.wp-gb-page .gb-hero-img{background:var(--navy-mid);position:relative;overflow:hidden;min-height:300px;margin:0;}
.wp-gb-page .gb-hero-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}

/* Split */
.wp-gb-page .gb-split{display:grid;grid-template-columns:1fr 1fr;min-height:340px;}
.wp-gb-page .gb-split.reverse .gb-split-img{order:2;}
.wp-gb-page .gb-split.reverse .gb-split-text{order:1;}
.wp-gb-page .gb-split-img{background:var(--cream);position:relative;overflow:hidden;min-height:280px;margin:0;}
.wp-gb-page .gb-split-img img{width:100% !important;height:100% !important;object-fit:cover;position:absolute;inset:0;}
/* About Us split photos — keep each subject framed inside the section. */
.wp-gb-page .gb-split-img.af-whatwedo img{object-position:50% 45%;}
.wp-gb-page .gb-split-img.af-community img{object-position:56% 32%;}
/* Portrait source in a landscape frame — pull the crop up so the thrower's
   head clears the top edge. */
.wp-gb-page .gb-split-img.af-flex-season img{object-position:50% 18%;}
.wp-gb-page .gb-split-text{padding:clamp(32px,5vw,56px) clamp(24px,5vw,48px);display:flex;flex-direction:column;justify-content:center;}
.wp-gb-page .gb-split-text h2{font-family:var(--heading);font-size:clamp(24px,3.5vw,34px);letter-spacing:2px;margin:0 0 12px;}
.wp-gb-page .gb-split-text p{font-size:15px;line-height:1.7;color:var(--mid);margin:0 0 14px;}

/* Image banner — rendered via core Cover block with className="gb-img-banner".
 * Ported from the mockup's PR & Marketing section: charcoal section with the
 * image filling the full width, a 4-stop gradient overlay that fades from
 * nearly-opaque dark on the left to mostly-transparent on the right (so the
 * image reads on the right side), and left-pinned content max-560 wide. */
.wp-gb-page .gb-img-banner{position:relative;min-height:320px;background:var(--navy-mid);display:flex;align-items:center;justify-content:flex-start;overflow:hidden;margin:0;border-radius:0;padding:0;}
.wp-gb-page .gb-img-banner.wp-block-cover{min-height:320px;}
.wp-gb-page .gb-img-banner .wp-block-cover__image-background{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.wp-gb-page .gb-img-banner .wp-block-cover__background{background:linear-gradient(to right,rgba(10,14,26,.95) 0%,rgba(10,14,26,.85) 45%,rgba(10,14,26,.4) 70%,rgba(10,14,26,.15) 100%)!important;opacity:1!important;}
.wp-gb-page .gb-img-banner .wp-block-cover__inner-container{position:relative;z-index:1;padding:clamp(40px,6vw,64px) clamp(24px,5vw,56px);max-width:560px;margin:0;width:100%;color:white;align-self:center;}
.wp-gb-page .gb-img-banner .gb-img-banner-title,
.wp-gb-page .gb-img-banner h2{font-family:var(--heading);font-size:clamp(28px,4vw,40px);letter-spacing:3px;margin:0 0 16px;color:white;text-align:left;}
.wp-gb-page .gb-img-banner .gb-img-banner-copy,
.wp-gb-page .gb-img-banner p{color:rgba(255,255,255,.55);font-size:15px;line-height:1.75;margin:0;text-align:left;}
.wp-gb-page .gb-img-banner ul{font-size:15px;color:rgba(255,255,255,.5);line-height:1.75;margin:0 0 0 20px;padding:0;list-style:disc;}
.wp-gb-page .gb-img-banner li{margin-bottom:8px;color:rgba(255,255,255,.5);}
.wp-gb-page .gb-img-banner a{color:var(--silver);}
.wp-gb-page .gb-img-banner .gb-eyebrow{display:block;font-family:var(--condensed);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--silver);margin:0 0 10px;}

/* Content */
.wp-gb-page .gb-content{max-width:900px;margin:0 auto;padding:clamp(32px,5vw,56px) clamp(20px,5vw,56px);}
.wp-gb-page .gb-content h2{font-family:var(--heading);font-size:clamp(24px,3.5vw,32px);letter-spacing:2px;margin:40px 0 16px;}
.wp-gb-page .gb-content h2:first-child{margin-top:0;}
.wp-gb-page .gb-content h3{font-family:var(--heading);font-size:clamp(20px,3vw,24px);letter-spacing:1.5px;margin:32px 0 12px;}
.wp-gb-page .gb-content p{font-size:15px;line-height:1.7;color:var(--mid);margin:0 0 16px;}
.wp-gb-page .gb-content ul,.wp-gb-page .gb-content ol{font-size:15px;line-height:1.7;color:var(--mid);margin:0 0 16px 24px;}
.wp-gb-page .gb-content li{margin-bottom:8px;}
.wp-gb-page .gb-content a{color:var(--red);font-weight:500;}
.wp-gb-page .gb-content a:hover{color:var(--red-deep);}
.wp-gb-page .gb-content strong{color:var(--dark-text);font-weight:600;}
.wp-gb-page .gb-content .gb-note{background:var(--cream);border-left:3px solid var(--silver);padding:16px 20px;margin:20px 0;font-size:14px;color:var(--mid);}
.wp-gb-page .gb-content table{width:100%;border-collapse:collapse;margin:0;font-size:14px;}
/* Reset WP core block-library's border injection on table cells — core sets
 * `border: 1px solid` on every th/td and a 3px thead/tfoot border, which
 * paints a full grid of lines and fights the design's single-bottom-border
 * row style. */
.wp-gb-page .gb-content thead,
.wp-gb-page .gb-content tfoot{border:0;}
.wp-gb-page .gb-content th{background:var(--navy);color:white;font-family:var(--condensed);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:12px 16px;text-align:left;border:0;}
.wp-gb-page .gb-content td{padding:12px 16px;color:var(--mid);border:0;border-bottom:1px solid var(--light-border);}
.wp-gb-page .gb-content tr:hover td{background:rgba(237,240,245,.5);}
.wp-gb-page .gb-content .gb-table-wrap,
.wp-gb-page .gb-content .wp-block-table{overflow-x:auto;margin:20px 0;}
.wp-gb-page .gb-content .gb-inline-svg{background:white;padding:16px 12px;border:1px solid var(--light-border);margin:24px 0;overflow-x:auto;}
.wp-gb-page .gb-content .gb-inline-svg svg{width:100%;height:auto;display:block;min-width:700px;}

/* Stat cards (3-up metric strip inside .gb-content) */
.wp-gb-page .gb-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0;}
.wp-gb-page .gb-stat-card{background:white;border:1px solid var(--light-border);padding:clamp(12px,2vw,24px);text-align:center;}
.wp-gb-page .gb-stat-card .gb-stat-num{font-family:var(--heading);font-size:clamp(24px,4vw,36px);color:var(--red);letter-spacing:2px;margin:0;line-height:1;}
.wp-gb-page .gb-stat-card .gb-stat-label{font-family:var(--condensed);font-size:clamp(9px,1.5vw,11px);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel);margin:6px 0 0;}

/* FAQ accordion — toggle behaviour is wired in src/js/site-chrome.js
 * (initGbFaq) targeting `.wp-gb-page .gb-faq-q`. */
.wp-gb-page .gb-faq{margin:20px 0;}
.wp-gb-page .gb-faq-item{border-bottom:1px solid var(--light-border);}
.wp-gb-page .gb-faq-q{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:18px 0;background:none;border:0;cursor:pointer;font-family:var(--body);font-size:15px;font-weight:600;color:var(--dark-text);text-align:left;transition:color .2s;}
.wp-gb-page .gb-faq-q:hover{color:var(--red);}
.wp-gb-page .gb-faq-q:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.wp-gb-page .gb-faq-q svg{width:18px;height:18px;transition:transform .3s;flex-shrink:0;color:var(--steel);}
.wp-gb-page .gb-faq-item.open .gb-faq-q svg{transform:rotate(180deg);color:var(--red);}
.wp-gb-page .gb-faq-a{max-height:0;overflow:hidden;transition:max-height .35s;}
.wp-gb-page .gb-faq-a-inner{padding:0 0 18px;font-size:14px;line-height:1.7;color:var(--mid);margin:0;}
.wp-gb-page .gb-faq-a-inner a{color:var(--red);font-weight:500;}
.wp-gb-page .gb-faq-a-inner a:hover{color:var(--red-deep);}

/* Dark-background CTA banner (no image, text + button centered) */
.wp-gb-page .gb-cta-banner{background:var(--navy);padding:clamp(40px,6vw,64px) clamp(20px,5vw,56px);text-align:center;color:white;}
.wp-gb-page .gb-cta-banner .gb-cta-banner-inner{max-width:700px;margin:0 auto;}
.wp-gb-page .gb-cta-banner h2{font-family:var(--heading);font-size:clamp(28px,4vw,40px);color:white;letter-spacing:2px;margin:0 0 12px;}
.wp-gb-page .gb-cta-banner p{color:rgba(255,255,255,.5);font-size:16px;margin:0 0 24px;}
.wp-gb-page .gb-cta-banner .wp-block-buttons{justify-content:center;}
.wp-gb-page .gb-cta-banner .wp-block-button__link{background:var(--red);color:white;font-family:var(--condensed);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:2px;padding:15px 36px;border:2px solid var(--red);border-radius:2px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:background-color .25s,color .25s,border-color .25s,box-shadow .25s,transform .25s;}
.wp-gb-page .gb-cta-banner .wp-block-button__link:hover{background:white;color:var(--dark-text);border-color:white;box-shadow:0 0 0 3px rgba(255,255,255,.15);transform:translateY(-2px);}

/* Email CTA */
.wp-gb-page .gb-email{background:var(--cream);padding:clamp(40px,6vw,56px) clamp(20px,5vw,56px);text-align:center;}
.wp-gb-page .gb-email-inner{max-width:560px;margin:0 auto;}
.wp-gb-page .gb-email h2{font-family:var(--heading);font-size:clamp(24px,3.5vw,32px);letter-spacing:2px;margin:0 0 8px;}
.wp-gb-page .gb-email p{color:var(--mid);font-size:15px;margin:0 0 20px;}
.wp-gb-page .gb-email-form{display:flex;gap:8px;max-width:440px;margin:0 auto;}
.wp-gb-page .gb-email-input{flex:1;padding:14px 16px;border:1.5px solid var(--light-border);font-family:var(--body);font-size:14px;background:white;outline:none;}
.wp-gb-page .gb-email-input:focus{border-color:var(--red);}
.wp-gb-page .gb-email .btn-p::before{background:white;}
.wp-gb-page .gb-email .btn-p:hover{border-color:white;box-shadow:0 0 0 3px rgba(255,255,255,.15);}
.wp-gb-page .gb-email .btn-p:hover span{color:var(--dark-text);}

/* Season calendar grid (occupies the left cell of .gb-split on the Leagues page
 * in place of the usual .gb-split-img). 4 editable cards; toggle the active
 * card by adding `is-active` to its className. */
.wp-gb-page .gb-season-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:clamp(16px,2.5vw,28px);background:var(--cream);align-content:center;min-height:280px;margin:0;}
.wp-gb-page .gb-season-card{background:white;border:1px solid var(--light-border);border-radius:4px;padding:20px 12px;text-align:center;display:flex;flex-direction:column;gap:6px;margin:0;}
.wp-gb-page .gb-season-card .gb-season-title{font-family:var(--heading);font-size:clamp(18px,2.2vw,22px);color:var(--dark-text);letter-spacing:2px;margin:0;line-height:1;}
.wp-gb-page .gb-season-card .gb-season-dates{font-family:var(--condensed);font-size:12px;font-weight:600;letter-spacing:1px;color:var(--steel);margin:0;text-transform:uppercase;}
.wp-gb-page .gb-season-card .gb-season-detail{font-size:11px;color:var(--mid);margin:0;line-height:1.4;}
.wp-gb-page .gb-season-card .gb-season-status{font-family:var(--condensed);font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--green);margin:4px 0 0;display:none;}
.wp-gb-page .gb-season-card .gb-season-status::before{content:'';display:block;width:60%;height:3px;background:var(--red);border-radius:2px;margin:0 auto 8px;}
.wp-gb-page .gb-season-card.is-active{background:var(--navy);border-color:var(--dark-text);}
.wp-gb-page .gb-season-card.is-active .gb-season-title{color:var(--red);}
.wp-gb-page .gb-season-card.is-active .gb-season-dates{color:rgba(255,255,255,.5);}
.wp-gb-page .gb-season-card.is-active .gb-season-detail{color:rgba(255,255,255,.35);}
.wp-gb-page .gb-season-card.is-active .gb-season-status{display:block;}

/* In-content photo placeholders (16:9) — rendered via core wp:image block
 * with className="gb-inline-img". */
.wp-gb-page .gb-content figure.gb-inline-img.wp-block-image{aspect-ratio:16/9;min-height:200px;margin:24px 0;background:var(--cream);border:1px solid var(--light-border);position:relative;overflow:hidden;}
.wp-gb-page .gb-content figure.gb-inline-img img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;}

/* Two-col image row — core wp:columns containing .gb-inline-img images.
 * The columns block takes over the outer margin so the inner figures
 * can sit flush inside each column. */
.wp-gb-page .gb-content .wp-block-columns.gb-img-row{margin:24px 0;gap:16px;}
.wp-gb-page .gb-content .wp-block-columns.gb-img-row .wp-block-column{margin:0;}
.wp-gb-page .gb-content .wp-block-columns.gb-img-row figure.gb-inline-img.wp-block-image{margin:0;}

/* Core wp:separator inside .gb-content — match the design's plain rule. */
.wp-gb-page .gb-content hr.wp-block-separator{border:0;border-top:1px solid var(--light-border);margin:32px 0;background:none;opacity:1;height:auto;}

/* Outline/secondary buttons inside .gb-content — core wp:button with
 * the built-in `is-style-outline` variant. Used for in-content link CTAs. */
.wp-gb-page .gb-content .wp-block-buttons{margin:24px 0;}
.wp-gb-page .gb-content .wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--dark-text);font-family:var(--condensed);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;padding:12px 28px;border:1.5px solid var(--light-border);border-radius:2px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:border-color .25s,color .25s;}
.wp-gb-page .gb-content .wp-block-button.is-style-outline .wp-block-button__link:hover{border-color:var(--red);color:var(--red);}

/* Council grid — rendered by the [wktl_council] shortcode. 3-col on
 * desktop, 2-col ≤1024, 1-col ≤640. Cards are restrained (single border,
 * subtle hover) to match the gb-stat-card / gb-season-card treatment. */
.wp-gb-page .gb-council{padding:clamp(40px,6vw,72px) clamp(20px,5vw,56px);background:var(--warm-white);}
.wp-gb-page .gb-council-head{max-width:720px;margin:0 auto 32px;text-align:center;}
.wp-gb-page .gb-council-head h2{font-family:var(--heading);font-size:clamp(28px,4vw,40px);letter-spacing:2px;margin:0 0 12px;}
.wp-gb-page .gb-council-head p{color:var(--mid);font-size:15px;line-height:1.65;margin:0;}
.wp-gb-page .gb-council-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1080px;margin:0 auto;}
.wp-gb-page .gb-council-card{background:white;border:1px solid var(--light-border);padding:0;overflow:hidden;transition:border-color .25s,transform .25s;}
.wp-gb-page .gb-council-card:hover{border-color:var(--red);transform:translateY(-2px);}
.wp-gb-page .gb-council-photo{aspect-ratio:1/1;background:var(--cream);overflow:hidden;}
.wp-gb-page .gb-council-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s,filter .35s;}
.wp-gb-page .gb-council-card:hover .gb-council-photo img{transform:scale(1.04);filter:brightness(.94);}
.wp-gb-page .gb-council-name{font-family:var(--heading);font-size:clamp(20px,2.4vw,24px);letter-spacing:1.5px;color:var(--dark-text);margin:16px 16px 4px;transition:color .25s;}
.wp-gb-page .gb-council-card:hover .gb-council-name{color:var(--red);}
.wp-gb-page .gb-council-role{font-family:var(--condensed);font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--silver-light);margin:0 16px 18px;}
.wp-gb-page .gb-council-foot{text-align:center;margin:32px 0 0;}
.wp-gb-page .gb-council-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--condensed);font-size:14px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--dark-text);border:1.5px solid var(--light-border);padding:12px 28px;border-radius:2px;transition:border-color .25s,color .25s;}
.wp-gb-page .gb-council-btn:hover{border-color:var(--red);color:var(--red);}

/* ===========================================================
 * Membership Benefits Gutenberg template — section primitives
 * Ported 1:1 from /home/iocarpe/Downloads/watl-redesign/watl-membership-benefits.html
 * =========================================================== */

/* Hero embed slot — YouTube wp:embed (or iframe via [wktl_hero_video]
 * shortcode) filling the right side of .gb-hero in place of .gb-hero-img.
 * Overrides core's responsive padding-bottom trick so the iframe stretches
 * edge-to-edge of the grid cell. */
.wp-gb-page .gb-hero-embed{background:var(--navy-mid);position:relative;overflow:hidden;min-height:320px;margin:0;}
.wp-gb-page .gb-hero-embed .wp-block-embed,
.wp-gb-page .gb-hero-embed figure.wp-block-embed{position:absolute;inset:0;margin:0;width:100%;height:100%;max-width:none;}
.wp-gb-page .gb-hero-embed .wp-block-embed.wp-has-aspect-ratio::before,
.wp-gb-page .gb-hero-embed .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper{padding-top:0;padding-bottom:0;height:100%;}
.wp-gb-page .gb-hero-embed .wp-block-embed__wrapper{position:absolute;inset:0;width:100%;height:100%;}
.wp-gb-page .gb-hero-embed iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:0;}

/* Dark stat bar (4-up) */
.wp-gb-page .gb-stat-bar{background:#080B14;padding:24px clamp(20px,5vw,56px);display:flex;justify-content:center;gap:clamp(24px,5vw,72px);flex-wrap:wrap;margin:0;}
.wp-gb-page .gb-stat-bar .gb-stat-item{text-align:center;margin:0;}
.wp-gb-page .gb-stat-bar .gb-stat-item-num{font-family:var(--heading);font-size:clamp(28px,4vw,40px);color:var(--silver);letter-spacing:2px;margin:0;line-height:1;}
.wp-gb-page .gb-stat-bar .gb-stat-item-label{font-family:var(--condensed);font-size:clamp(10px,1.3vw,12px);font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.3);margin:2px 0 0;}

/* Centered intro section */
.wp-gb-page .gb-intro{padding:clamp(40px,6vw,64px) clamp(20px,5vw,56px);background:var(--warm-white);}
.wp-gb-page .gb-intro-inner{max-width:760px;margin:0 auto;text-align:center;}
.wp-gb-page .gb-intro h2{font-family:var(--heading);font-size:clamp(28px,4vw,40px);letter-spacing:3px;margin:0 0 16px;}
.wp-gb-page .gb-intro p{font-size:16px;color:var(--mid);line-height:1.75;margin:0;}

/* Split — dark variant (alternating benefits) */
.wp-gb-page .gb-split.split-dark{background:var(--navy);}
/* The image slot defaults to cream (light variant). For dark splits, give
 * the empty figure a charcoal background so it blends with the surrounding
 * dark band when the placehold.co placeholder is hidden on the frontend
 * (see inc/enqueue.php). Once a real image is placed, object-fit:cover
 * fills the slot and the background no longer shows. */
.wp-gb-page .gb-split.split-dark .gb-split-img{background:var(--navy-mid);}
.wp-gb-page .gb-split.split-dark .gb-split-text h2,
.wp-gb-page .gb-split.split-dark .gb-split-text h3{color:white;}
.wp-gb-page .gb-split.split-dark .gb-split-text p,
.wp-gb-page .gb-split.split-dark .gb-split-text li{color:rgba(255,255,255,.45);}
.wp-gb-page .gb-split.split-dark .gb-split-text a{color:var(--silver);}

/* Split lists + small eyebrow span */
.wp-gb-page .gb-split-text h3{font-family:var(--heading);font-size:clamp(18px,2.5vw,22px);letter-spacing:1px;margin:20px 0 8px;}
.wp-gb-page .gb-split-text ul{font-size:15px;line-height:1.7;color:var(--mid);margin:0 0 12px 20px;padding:0;}
.wp-gb-page .gb-split-text li{margin-bottom:6px;}
.wp-gb-page .gb-split-text a{color:var(--red);}
.wp-gb-page .gb-split-text .gb-eyebrow{display:block;font-family:var(--condensed);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--silver);margin:0 0 8px;}

/* "As Featured In" media strip — children can be <span>, <p>, or anything
 * the editor produces; we target the class, not the tag, and reset margin. */
.wp-gb-page .gb-media-strip{background:var(--red);padding:28px clamp(20px,5vw,56px);overflow:hidden;margin:0;}
.wp-gb-page .gb-media-strip-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:clamp(16px,3vw,40px);justify-content:center;flex-wrap:wrap;}
.wp-gb-page .gb-media-strip-inner > *{margin:0;}
.wp-gb-page .gb-media-strip-label{font-family:var(--condensed);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5);white-space:nowrap;margin:0;}
.wp-gb-page .gb-media-logo{font-family:var(--heading);font-size:clamp(16px,2.5vw,22px);color:white;opacity:.6;letter-spacing:2px;transition:opacity .2s;white-space:nowrap;margin:0;}
.wp-gb-page .gb-media-logo:hover{opacity:1;}

/* Software section — centered with screenshots + multi-column text */
.wp-gb-page .gb-software{padding:clamp(48px,6vw,72px) clamp(20px,5vw,56px);background:var(--warm-white);}
.wp-gb-page .gb-software-inner{max-width:900px;margin:0 auto;}
.wp-gb-page .gb-software-head{text-align:center;margin-bottom:28px;}
.wp-gb-page .gb-software-eyebrow{font-family:var(--condensed);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--silver);display:block;margin:0 0 8px;}
.wp-gb-page .gb-software-head h2{font-family:var(--heading);font-size:clamp(28px,4vw,40px);letter-spacing:3px;margin:0;}
.wp-gb-page .gb-software-shots{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px;}
/* Figure-based screenshots — wp:image with className="gb-software-shot".
 * Aspect-ratio enforced on the figure so the placeholder slot has the
 * design's 16:10 frame even before a real image is set. */
.wp-gb-page figure.wp-block-image.gb-software-shot,
.wp-gb-page .gb-software-shot{aspect-ratio:16/10;margin:0;background:var(--cream);border-radius:4px;overflow:hidden;position:relative;}
.wp-gb-page figure.wp-block-image.gb-software-shot img,
.wp-gb-page .gb-software-shot img{width:100%;height:100%;object-fit:cover;display:block;}
.wp-gb-page .gb-software-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;}
.wp-gb-page .gb-software-cols p{font-size:15px;color:var(--mid);line-height:1.7;margin:0;}
.wp-gb-page .gb-software-cols a{color:var(--red);}

/* Benefits grid (Programs — 6-up icon cards) */
.wp-gb-page .gb-ben{padding:clamp(48px,6vw,72px) clamp(20px,5vw,56px);max-width:1100px;margin:0 auto;background:var(--warm-white);}
.wp-gb-page .gb-ben-label{font-family:var(--condensed);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--silver);text-align:center;margin:0 0 8px;}
.wp-gb-page .gb-ben > h2{font-family:var(--heading);font-size:clamp(28px,4vw,40px);letter-spacing:3px;text-align:center;margin:0 0 36px;}
/* Eyebrow standing in for the section heading — Flex Leagues "How It Works",
   Terminology "A–Z Glossary", Code of Conduct "Our Principles" and friends all
   run label straight into the grid with no h2. The label's 8px eyebrow margin
   was then the only gap below it, while the section's own top padding stacked
   on the preceding .gb-intro's bottom padding to leave ~136px above — the label
   read as glued to the cards. Re-split the same total so it sits centred
   between the two sections: drop this section's top padding and hand that space
   to the grid instead. The grid's margin-top mirrors .gb-intro's padding-bottom
   clamp, so the two halves stay equal at every width (the label's own 8px
   margin collapses into it). The padding-top reset is keyed to a preceding
   .gb-intro on purpose: that's the section whose 64px bottom padding replaces
   it. .gb-split has padding-bottom:0, so zeroing this unconditionally left
   New to Throwing's second "How to Get Started" label flush against the split
   above it — that instance keeps its own padding and lands at 72/64, near
   enough. Also assumes .gb-ben stays background-less against the page (it
   shares --warm-white); give it a distinct background and the label will hug
   the box edge. */
.wp-gb-page .gb-intro + .gb-ben:has(.gb-ben-label + .gb-ben-grid){padding-top:0;}
.wp-gb-page .gb-ben-label + .gb-ben-grid{margin-top:clamp(40px,6vw,64px);}
.wp-gb-page .gb-ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
/* gb-ben-4up: single row on desktop (e.g. About Us "Our Values"); stacks below. */
.wp-gb-page .gb-ben-4up .gb-ben-grid{grid-template-columns:repeat(4,1fr);}
.wp-gb-page .gb-ben-card{background:white;border:1px solid var(--light-border);padding:28px 24px;transition:transform .2s,box-shadow .2s;margin:0;}
.wp-gb-page .gb-ben-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.05);}
.wp-gb-page .gb-ben-card .gb-ben-icon{width:44px;height:44px;background:rgba(200,16,46,.06);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.wp-gb-page .gb-ben-card .gb-ben-icon svg{width:22px;height:22px;color:var(--red);}
.wp-gb-page .gb-ben-card h3{font-family:var(--heading);font-size:18px;letter-spacing:1px;margin:0 0 6px;color:var(--dark-text);}
.wp-gb-page .gb-ben-card p{font-size:13px;line-height:1.6;color:var(--mid);margin:0;}
.wp-gb-page .gb-ben-card a{color:var(--red);}

/* Flex Leagues "How It Works" — the client asked for this band to carry more
   weight (feedback 2026-07-31): four short cards under a 12px eyebrow left a
   sparse strip below the intro. Numbered badges fill the cards out and make the
   sequence explicit, and the label sits closer to the grid it introduces so the
   two read as one block. Scoped by page slug (the durable per-page hook from
   inc/theme-setup.php) rather than a new modifier class, so this ships with the
   theme instead of needing a content edit in every environment — .gb-ben-4up is
   shared with About Us's "What We Stand For", where numbering values would be
   wrong. Cards carry no .gb-ben-icon anywhere yet; if one ever gains one, hide
   this badge on that card. */
body.page-slug-flex-leagues .wp-gb-page .gb-ben-4up .gb-ben-grid{counter-reset:gb-step;}
body.page-slug-flex-leagues .wp-gb-page .gb-ben-4up .gb-ben-card{counter-increment:gb-step;}
body.page-slug-flex-leagues .wp-gb-page .gb-ben-4up .gb-ben-card::before{content:"0" counter(gb-step);display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(200,16,46,.06);color:var(--red);font-family:var(--condensed);font-size:15px;font-weight:700;letter-spacing:1px;margin-bottom:16px;}
body.page-slug-flex-leagues .wp-gb-page .gb-ben-label + .gb-ben-grid{margin-top:clamp(28px,3.5vw,40px);}

/* Testimonials (dark, 2 cards) */
.wp-gb-page .gb-test{background:var(--navy);padding:clamp(48px,7vw,72px) clamp(20px,5vw,56px);margin:0;}
.wp-gb-page .gb-test-inner{max-width:1100px;margin:0 auto;}
.wp-gb-page .gb-test-label{font-family:var(--condensed);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--silver);text-align:center;margin:0 0 8px;}
.wp-gb-page .gb-test > .gb-test-inner > h2{font-family:var(--heading);font-size:clamp(28px,4vw,40px);letter-spacing:3px;text-align:center;color:white;margin:0 0 36px;}
.wp-gb-page .gb-test-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.wp-gb-page .gb-test-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:32px;position:relative;margin:0;}
.wp-gb-page .gb-test-card::before{content:'"';position:absolute;top:12px;left:20px;font-family:var(--heading);font-size:64px;color:var(--silver);opacity:.2;line-height:1;}
.wp-gb-page .gb-test-quote{font-size:14px;line-height:1.75;color:rgba(255,255,255,.45);margin:0 0 20px;position:relative;z-index:1;}
.wp-gb-page .gb-test-author{display:flex;align-items:center;gap:12px;margin:0;}
.wp-gb-page .gb-test-author-meta{display:flex;flex-direction:column;gap:0;margin:0;}
/* Testimonial avatar — wp:image (figure) or fallback div, restricted to 44px circle */
.wp-gb-page figure.wp-block-image.gb-test-avatar,
.wp-gb-page .gb-test-avatar{width:44px;height:44px;min-width:44px;border-radius:50%;background:var(--navy-mid);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--condensed);font-size:9px;color:rgba(255,255,255,.15);letter-spacing:1px;margin:0;}
.wp-gb-page figure.wp-block-image.gb-test-avatar img,
.wp-gb-page .gb-test-avatar img{width:100% !important;height:100% !important;object-fit:cover;display:block;}
.wp-gb-page .gb-test-name{font-family:var(--condensed);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:white;margin:0;}
.wp-gb-page .gb-test-role{font-size:12px;color:rgba(255,255,255,.3);margin:0;}

/* Specs callout (2-col on cream) */
.wp-gb-page .gb-specs{background:var(--cream);padding:clamp(40px,6vw,56px) clamp(20px,5vw,56px);margin:0;}
.wp-gb-page .gb-specs-inner{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;}
.wp-gb-page .gb-specs-text h2{font-family:var(--heading);font-size:clamp(24px,3.5vw,32px);letter-spacing:2px;margin:0 0 12px;}
.wp-gb-page .gb-specs-text p{font-size:14px;color:var(--mid);line-height:1.7;margin:0 0 8px;}
.wp-gb-page .gb-specs-text ul{font-size:14px;color:var(--mid);line-height:1.7;margin:0 0 16px 20px;padding:0;}
.wp-gb-page .gb-specs-text li{margin-bottom:6px;}
.wp-gb-page .gb-specs-text strong{color:var(--dark-text);}
.wp-gb-page .gb-specs-text a{color:var(--red);font-family:var(--condensed);font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;}
.wp-gb-page .gb-specs-img{background:var(--navy);min-height:240px;display:flex;align-items:center;justify-content:center;font-family:var(--condensed);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.12);position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:2px;margin:0;}
.wp-gb-page .gb-specs-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;display:block;}

/* Thin in-flow divider rule (between specs and starter kit) — applied
 * either to wp:separator with className="gb-thin-divider" (preferred,
 * native block) or a wp:group wrapper with the same class (legacy). */
.wp-gb-page hr.gb-thin-divider,
.wp-gb-page .gb-thin-divider hr{max-width:900px;border:0;border-top:1px solid var(--light-border);margin:0 auto;padding:0;height:0;background:none;opacity:1;}
.wp-gb-page .gb-thin-divider{max-width:900px;margin:0 auto;padding:0 clamp(20px,5vw,56px);}

/* CTA banner — charcoal variant with circle decoration */
.wp-gb-page .gb-cta-banner.is-charcoal{background:var(--navy-mid);padding:clamp(48px,7vw,72px) clamp(20px,5vw,56px);text-align:center;position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);}
.wp-gb-page .gb-cta-banner.is-charcoal::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;height:400px;border:1px solid rgba(201,168,76,.06);border-radius:50%;pointer-events:none;}
.wp-gb-page .gb-cta-banner.is-charcoal .gb-cta-banner-inner{max-width:650px;margin:0 auto;position:relative;z-index:1;}
.wp-gb-page .gb-cta-banner.is-charcoal h2{font-family:var(--heading);font-size:clamp(28px,4vw,44px);color:white;letter-spacing:3px;margin:0 0 12px;}
.wp-gb-page .gb-cta-banner.is-charcoal p{color:rgba(255,255,255,.4);font-size:16px;line-height:1.65;margin:0 0 24px;}

/* Email signup — warm-white variant (overrides existing .gb-email cream) */
.wp-gb-page .gb-email.is-warm{background:var(--warm-white);padding:clamp(56px,8vw,88px) clamp(20px,5vw,56px);text-align:center;position:relative;overflow:hidden;}
.wp-gb-page .gb-email.is-warm .gb-email-inner{max-width:600px;margin:0 auto;position:relative;z-index:1;}
.wp-gb-page .gb-email.is-warm .gb-email-label{font-family:var(--condensed);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--red);margin:0 0 12px;display:block;}
.wp-gb-page .gb-email.is-warm h2{font-family:var(--heading);font-size:clamp(28px,4.5vw,42px);letter-spacing:3px;margin:0 0 14px;color:var(--dark-text);}
.wp-gb-page .gb-email.is-warm p{color:var(--mid);font-size:15px;margin:0 0 24px;line-height:1.6;}
.wp-gb-page .gb-email.is-warm .gb-email-form{display:flex;gap:0;max-width:500px;margin:0 auto 16px;}
.wp-gb-page .gb-email.is-warm .gb-email-input{flex:1;padding:16px 20px;border:1.5px solid var(--light-border);border-right:none;font-family:var(--body);font-size:15px;background:white;color:var(--dark-text);outline:none;border-radius:2px 0 0 2px;}
.wp-gb-page .gb-email.is-warm .gb-email-input::placeholder{color:var(--steel);}
.wp-gb-page .gb-email.is-warm .gb-email-input:focus{border-color:var(--red);}
.wp-gb-page .gb-email.is-warm .gb-email-btn{background:var(--red);color:white;font-family:var(--condensed);font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:16px 28px;border:none;border-radius:0 2px 2px 0;cursor:pointer;transition:background .2s;white-space:nowrap;}
.wp-gb-page .gb-email.is-warm .gb-email-btn:hover{background:var(--red-deep);}
.wp-gb-page .gb-email.is-warm .gb-email-note{font-family:var(--condensed);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--steel);margin:0;}

/* ===========================================================
 * [wktl_starter_kit] shortcode — scoped to .watl-kit so it
 * works inside .wp-gb-page (where the design tokens are declared).
 * =========================================================== */
.wp-gb-page .watl-kit{padding:clamp(48px,6vw,80px) clamp(20px,4vw,56px);background:var(--cream);overflow:hidden;}
.wp-gb-page .watl-kit__grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;}
.wp-gb-page .watl-kit__img-wrap{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:4/3.2;background:#E2E5EB;}
.wp-gb-page .watl-kit__img,
.wp-gb-page .watl-kit__img-ph{position:absolute;inset:0;width:100%;height:100%;}
.wp-gb-page .watl-kit__img{object-fit:cover;display:block;}
.wp-gb-page .watl-kit__img-ph{display:flex;align-items:center;justify-content:center;font-family:var(--condensed);font-size:12px;color:rgba(0,0,0,.1);letter-spacing:2px;text-transform:uppercase;}
.wp-gb-page .watl-kit__img-tag{position:absolute;top:20px;left:20px;background:var(--navy);color:white;font-family:var(--condensed);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:7px 14px;border-radius:2px;z-index:2;}
.wp-gb-page .watl-kit__eyebrow{font-family:var(--condensed);font-size:12px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--red);margin-bottom:8px;display:block;}
.wp-gb-page .watl-kit__title{font-family:var(--heading);font-size:clamp(32px,3.5vw,46px);margin:0 0 12px;line-height:1;letter-spacing:2px;color:var(--dark-text);}
.wp-gb-page .watl-kit__desc{font-size:16px;color:var(--mid);line-height:1.7;margin:0 0 24px;}
.wp-gb-page .watl-kit__var-label{font-family:var(--condensed);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:8px;display:block;}
.wp-gb-page .watl-kit__var-grid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;}
.wp-gb-page .watl-kit__var{padding:7px 12px;border:1.5px solid var(--light-border);border-radius:3px;font-family:var(--condensed);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--dark-text);cursor:pointer;transition:all .2s;background:white;line-height:1;}
.wp-gb-page .watl-kit__var:hover,
.wp-gb-page .watl-kit__var.is-active{background:var(--navy);border-color:var(--dark-text);color:white;}
.wp-gb-page .watl-kit__var:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.wp-gb-page .watl-kit__items{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
.wp-gb-page .watl-kit__item{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--warm-white);border-radius:4px;}
.wp-gb-page .watl-kit__item svg{width:20px;height:20px;flex-shrink:0;color:var(--red);}
.wp-gb-page .watl-kit__item span{font-family:var(--condensed);font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--dark-text);}
.wp-gb-page .watl-kit__price-row{display:flex;align-items:baseline;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
.wp-gb-page .watl-kit__price{font-family:var(--heading);font-size:38px;color:var(--dark-text);letter-spacing:1px;line-height:1;}
.wp-gb-page .watl-kit__orig{font-size:16px;color:var(--mid);text-decoration:line-through;}
.wp-gb-page .watl-kit__save{background:rgba(192,57,43,.08);color:var(--red);font-family:var(--condensed);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:5px 12px;border-radius:3px;}
.wp-gb-page .watl-kit__cta{background:var(--red);color:white;font-family:var(--condensed);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:2px;padding:15px 36px;border:2px solid var(--red);border-radius:4px;cursor:pointer;transition:all .35s;display:inline-flex;align-items:center;gap:8px;position:relative;overflow:hidden;text-decoration:none;}
.wp-gb-page .watl-kit__cta::before{content:'';position:absolute;inset:0;background:#1E3A8A;transform:scaleX(0);transform-origin:left;transition:transform .35s;z-index:0;}
.wp-gb-page .watl-kit__cta span{position:relative;z-index:1;}
.wp-gb-page .watl-kit__cta:hover{border-color:#1E3A8A;transform:translateY(-2px);box-shadow:0 0 0 3px rgba(30,58,138,.2);}
.wp-gb-page .watl-kit__cta:hover::before{transform:scaleX(1);}

/* ===========================================================
 * Membership Gutenberg template — section primitives
 * Ported 1:1 from /home/iocarpe/Downloads/watl-redesign/watl-membership.html
 * =========================================================== */

/* Audience router — 3 compact image+text cards under "GET STARTED" */
.wp-gb-page .gb-router{padding:clamp(40px,6vw,64px) clamp(20px,5vw,56px);max-width:1100px;margin:0 auto;}
.wp-gb-page .gb-router > h2{font-family:var(--heading);font-size:clamp(28px,4vw,40px);letter-spacing:3px;text-align:center;margin:0 0 32px;text-transform:uppercase;}
.wp-gb-page .gb-router-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.wp-gb-page .gb-rcard{border:1px solid var(--light-border);overflow:hidden;transition:transform .25s,box-shadow .25s;background:white;margin:0;}
.wp-gb-page .gb-rcard:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,.06);}
.wp-gb-page figure.wp-block-image.gb-rcard-img,
.wp-gb-page .gb-rcard-img{height:160px;background:var(--cream);position:relative;overflow:hidden;margin:0;}
/* Community pages (wrapper carries .wp-gb-community) use taller card images;
   other Gutenberg pages keep the 160px default. */
.wp-gb-community .gb-rcard-img{height:220px !important;}
.wp-gb-page figure.wp-block-image.gb-rcard-img img,
.wp-gb-page .gb-rcard-img img{width:100% !important;height:100% !important;object-fit:cover;position:absolute;inset:0;display:block;}
/* About Us "Get Involved" cards — bias each photo's subject into the short card. */
.wp-gb-page .gb-rcard-img.af-rules img{object-position:50% 24%;}
.wp-gb-page .gb-rcard-img.af-member img{object-position:50% 40%;}
.wp-gb-page .gb-rcard-img.af-contact img{object-position:50% 34%;}
.wp-gb-page .gb-rcard-body{padding:24px;}
.wp-gb-page .gb-rcard-body h3{font-family:var(--heading);font-size:22px;letter-spacing:1.5px;margin:0 0 8px;text-transform:uppercase;color:var(--dark-text);}
.wp-gb-page .gb-rcard-body p{font-size:14px;line-height:1.6;color:var(--mid);margin:0 0 16px;}
.wp-gb-page .gb-rcard-link{font-family:var(--condensed);font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin:0;}
.wp-gb-page .gb-rcard-link a{color:var(--red);transition:color .2s;}
.wp-gb-page .gb-rcard-link a:hover{color:var(--red-deep);}
/* [wktl_community_cards] renders each card as a whole-card <a> with the
   "View →" label as a .gb-rcard-link span (no inner <a>). */
.wp-gb-page a.gb-rcard{display:block;text-decoration:none;color:inherit;}
.wp-gb-page a.gb-rcard .gb-rcard-link{color:var(--red);transition:color .2s;}
.wp-gb-page a.gb-rcard:hover .gb-rcard-link{color:var(--red-deep);}
/* Each section shows 3 cards; the rest sit behind a CSS-only "More" toggle.
   The checkbox is a previous sibling of both the grid and the label, so the
   ~ combinators below resolve. */
.wp-gb-page .gb-router-toggle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* a.gb-rcard.gb-rcard--extra to outrank the .wp-gb-page a.gb-rcard{display:block} rule. */
.wp-gb-page a.gb-rcard.gb-rcard--extra{display:none;}
.wp-gb-page .gb-router-toggle:checked ~ .gb-router-grid a.gb-rcard.gb-rcard--extra{display:block;}
.wp-gb-page .gb-router-toggle:checked ~ .gb-router-more{display:none;}
.wp-gb-page .gb-router-more{display:block;width:fit-content;margin:24px auto 0;cursor:pointer;font-family:var(--condensed);font-size:14px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--dark-text);border:1.5px solid var(--light-border);padding:12px 28px;border-radius:2px;transition:border-color .25s,color .25s;}
.wp-gb-page .gb-router-more:hover{border-color:var(--red);color:var(--red);}
.wp-gb-page .gb-router-toggle:focus-visible ~ .gb-router-more{outline:2px solid var(--red);outline-offset:2px;}
/* Offset jump-link targets (#people/#programs/#resources sections) for the
   68px sticky nav so headings aren't hidden under it. */
.wp-gb-page .gb-router[id]{scroll-margin-top:84px;}

/* Venue search + map — rendered by [wktl_membership_map] shortcode.
 * The shortcode wraps everything in a .watl-membership div so the existing
 * src/js/membership.js auto-mounts and finds #watl-map / #watl-map-q etc.
 * These styles re-scope the visuals to the .wp-gb-page design. */
.wp-gb-page .gb-venue-search{padding:clamp(48px,6vw,64px) clamp(20px,5vw,56px);background:var(--cream);margin:0;}
.wp-gb-page .gb-venue-search-inner{max-width:700px;margin:0 auto;text-align:center;}
.wp-gb-page .gb-venue-search h2{font-family:var(--heading);font-size:clamp(28px,4vw,40px);letter-spacing:3px;margin:0 0 12px;text-transform:uppercase;}
.wp-gb-page .gb-venue-search p{color:var(--mid);font-size:15px;margin:0 0 24px;}
.wp-gb-page .gb-search-box{display:flex;gap:8px;max-width:520px;margin:0 auto 16px;}
.wp-gb-page .gb-search-input{flex:1;padding:14px 18px;border:1.5px solid var(--light-border);font-family:var(--body);font-size:15px;background:white;outline:none;border-radius:2px;color:var(--dark-text);min-width:0;}
.wp-gb-page .gb-search-input:focus{border-color:var(--red);}
.wp-gb-page .gb-search-input[aria-invalid="true"]{border-color:var(--red);}
.wp-gb-page .gb-search-btn{padding:14px 24px;}
.wp-gb-page .gb-venue-count{font-family:var(--condensed);font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel);margin:0;}
.wp-gb-page .gb-venue-count strong{color:var(--red);font-weight:700;}
.wp-gb-page .gb-map-wrap{max-width:1100px;margin:0 auto;padding:0;background:var(--cream);}
.wp-gb-page .gb-map-box{background:var(--cream);border:1px solid var(--light-border);min-height:480px;position:relative;overflow:hidden;}
.wp-gb-page .gb-map-box--fallback{display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--condensed);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel);padding:32px;}
.wp-gb-page .gb-map-empty{max-width:1100px;margin:12px auto 0;text-align:center;font-family:var(--body);font-size:14px;color:var(--mid);}
.wp-gb-page .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* Gold gradient divider — 3px horizontal rule with tan in the middle. */
.wp-gb-page .gb-gold-divider{height:3px;background:linear-gradient(to right,transparent,var(--silver),transparent);margin:0;border:0;}

/* Email signup — DARK variant (membership page uses this; the .is-warm
 * variant defined earlier in this file is for membership-benefits). */
.wp-gb-page .gb-email.is-dark{background:var(--navy);padding:clamp(56px,8vw,88px) clamp(20px,5vw,56px);text-align:center;position:relative;overflow:hidden;}
.wp-gb-page .gb-email.is-dark::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(200,16,46,.04),transparent 60%);pointer-events:none;}
.wp-gb-page .gb-email.is-dark .gb-email-inner{max-width:600px;margin:0 auto;position:relative;z-index:1;}
.wp-gb-page .gb-email.is-dark .gb-email-label{font-family:var(--condensed);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--silver);margin:0 0 12px;display:block;}
.wp-gb-page .gb-email.is-dark h2{font-family:var(--heading);font-size:clamp(28px,4.5vw,42px);letter-spacing:3px;margin:0 0 14px;color:white;}
.wp-gb-page .gb-email.is-dark p{color:rgba(255,255,255,.4);font-size:15px;margin:0 0 24px;line-height:1.6;}
.wp-gb-page .gb-email.is-dark .gb-email-form{display:flex;gap:0;max-width:500px;margin:0 auto 16px;}
.wp-gb-page .gb-email.is-dark .gb-email-input{flex:1;padding:16px 20px;border:none;font-family:var(--body);font-size:15px;background:rgba(255,255,255,.08);color:white;outline:none;border-radius:2px 0 0 2px;}
.wp-gb-page .gb-email.is-dark .gb-email-input::placeholder{color:rgba(255,255,255,.25);}
.wp-gb-page .gb-email.is-dark .gb-email-input:focus{background:rgba(255,255,255,.12);}
.wp-gb-page .gb-email.is-dark .gb-email-btn{background:var(--red);color:white;font-family:var(--condensed);font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:16px 28px;border:none;border-radius:0 2px 2px 0;cursor:pointer;transition:background .2s;white-space:nowrap;}
.wp-gb-page .gb-email.is-dark .gb-email-btn:hover{background:var(--red-deep);}
.wp-gb-page .gb-email.is-dark .gb-email-note{font-family:var(--condensed);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.2);margin:0;}

/* ===========================================================
 * Community page Gutenberg template — homepage-style hero
 * Ported from front-page.php .hero (src/css/main.css): dark,
 * centered, eyebrow tag + accent headline + CTAs + 4-stat row.
 * =========================================================== */
.wp-gb-page .gb-pagehero{position:relative;background:var(--navy);color:white;text-align:center;padding:clamp(64px,10vw,120px) clamp(20px,5vw,56px);overflow:hidden;margin:0;}
.wp-gb-page .gb-pagehero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(200,16,46,.12) 0%,transparent 55%),radial-gradient(ellipse at 20% 80%,rgba(201,168,76,.06) 0%,transparent 50%);pointer-events:none;}
.wp-gb-page .gb-pagehero-inner{position:relative;z-index:1;max-width:900px;margin:0 auto;}
.wp-gb-page .gb-pagehero-tag{font-family:var(--condensed);font-size:14px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--silver);margin:0 0 20px;display:flex;align-items:center;justify-content:center;gap:12px;}
.wp-gb-page .gb-pagehero-tag::before,.wp-gb-page .gb-pagehero-tag::after{content:'';width:40px;height:1px;background:var(--silver);}
.wp-gb-page .gb-pagehero h1{font-family:var(--heading);font-size:clamp(48px,8vw,92px);color:white;line-height:.92;letter-spacing:3px;margin:0 0 20px;}
.wp-gb-page .gb-pagehero h1 em{font-style:normal;color:var(--red);display:block;}
.wp-gb-page .gb-pagehero-sub{font-size:19px;color:rgba(255,255,255,.5);line-height:1.65;max-width:560px;margin:0 auto 36px;font-weight:300;}
.wp-gb-page .gb-pagehero .wp-block-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:0;}
.wp-gb-page .gb-pagehero .wp-block-button__link{background:var(--red);color:white;font-family:var(--condensed);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:2px;padding:15px 36px;border:2px solid var(--red);border-radius:2px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:background-color .25s,color .25s,border-color .25s,box-shadow .25s,transform .25s;}
.wp-gb-page .gb-pagehero .wp-block-button__link:hover{background:white;color:var(--dark-text);border-color:white;box-shadow:0 0 0 3px rgba(255,255,255,.15);transform:translateY(-2px);}
.wp-gb-page .gb-pagehero .wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:white;font-weight:600;border:1.5px solid rgba(255,255,255,.25);}
.wp-gb-page .gb-pagehero .wp-block-button.is-style-outline .wp-block-button__link:hover{border-color:white;background:rgba(255,255,255,.06);color:white;box-shadow:none;transform:none;}
.wp-gb-page .gb-pagehero-stats{display:flex;gap:clamp(24px,4vw,56px);justify-content:center;flex-wrap:wrap;margin:56px 0 0;}
.wp-gb-page .gb-pagehero-stat{text-align:center;margin:0;}
.wp-gb-page .gb-pagehero-stat .gb-pagehero-stat-num{font-family:var(--heading);font-size:clamp(36px,4vw,52px);color:white;letter-spacing:1px;line-height:1;margin:0;}
.wp-gb-page .gb-pagehero-stat .gb-pagehero-stat-label{font-family:var(--condensed);font-size:12px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:3px;margin:6px 0 0;}

/* Photo variant (About Us): background photograph behind the hero, plus a
   tighter vertical rhythm — the picture fills the frame, so the generous
   padding the flat-navy hero needs just reads as dead space here. The client
   flagged the bands above the eyebrow and below the stat row twice, so the
   padding runs deliberately tight (46px desktop / 30px floor). Add
   .gb-pagehero--photo alongside .gb-pagehero on the hero group. */
.wp-gb-page .gb-pagehero--photo{padding:clamp(30px,3.6vw,46px) clamp(20px,5vw,56px);background-color:var(--navy);background-image:url('../images/about/about-hero.jpg');background-size:cover;background-position:50% 62%;background-repeat:no-repeat;}
.wp-gb-page .gb-pagehero--photo::before{background:linear-gradient(180deg,rgba(8,18,34,.9) 0%,rgba(8,18,34,.84) 45%,rgba(8,18,34,.93) 100%),radial-gradient(ellipse at 50% 30%,rgba(200,16,46,.18) 0%,transparent 55%);}
.wp-gb-page .gb-pagehero--photo .gb-pagehero-sub{margin-bottom:0;color:rgba(255,255,255,.78);}
.wp-gb-page .gb-pagehero--photo .gb-pagehero-stats{margin-top:26px;}
/* Lift the low-contrast label greys — they vanish over a photograph. */
.wp-gb-page .gb-pagehero--photo .gb-pagehero-stat .gb-pagehero-stat-label{color:rgba(255,255,255,.58);}

/* Left-photo variant (Flex Leagues): the photograph occupies the left edge and
   dissolves into the navy around the middle, leaving the centred copy on flat
   ground. Same tightened vertical rhythm as .gb-pagehero--photo. Add
   .gb-pagehero--photo-left alongside .gb-pagehero on the hero group. */
.wp-gb-page .gb-pagehero--photo-left{padding:clamp(44px,5.5vw,68px) clamp(20px,5vw,56px);background-color:var(--navy);background-image:radial-gradient(ellipse at 50% 30%,rgba(200,16,46,.12) 0%,transparent 55%),radial-gradient(ellipse at 20% 80%,rgba(201,168,76,.06) 0%,transparent 50%);}
/* ::before carries the photo panel instead of the default glow, masked so it
   fades out before it reaches the headline.

   The panel's width sets the knife's scale: cover fits the 1400x1101 photo to
   the panel, so the handle end always lands at 1257/1400 = 89.8% of it. The
   649px cap (was 900px) plus a flat -68px nudge parks that handle end at ~30%
   of a 1920px viewport, per client note. The nudge is a length, not a
   percentage of the overflow, on purpose: the blade tip sits at 0.198 x the
   panel height when left-aligned (~112px), so a fixed 68px can never push it
   off the left edge, whereas a percentage would at laptop widths. */
.wp-gb-page .gb-pagehero--photo-left::before{inset:0 auto 0 0;width:min(64%,649px);background:linear-gradient(90deg,rgba(8,18,34,.3) 0%,rgba(8,18,34,.46) 50%,rgba(8,18,34,.7) 100%),url('../images/flex/flex-hero.jpg') -68px 45%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 48%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(90deg,#000 0%,#000 48%,rgba(0,0,0,0) 100%);}
.wp-gb-page .gb-pagehero--photo-left .gb-pagehero-sub{margin-bottom:0;color:rgba(255,255,255,.72);}
.wp-gb-page .gb-pagehero--photo-left .gb-pagehero-stats{margin-top:36px;}
.wp-gb-page .gb-pagehero--photo-left .gb-pagehero-stat .gb-pagehero-stat-label{color:rgba(255,255,255,.5);}

/* Responsive */
@media(max-width:1024px){
  .wp-gb-page .gb-hero{grid-template-columns:1fr;}
  .wp-gb-page .gb-hero-img,
  .wp-gb-page .gb-hero-embed{min-height:0;aspect-ratio:16/9;}
  .wp-gb-page .gb-split{grid-template-columns:1fr;}
  .wp-gb-page .gb-split.reverse .gb-split-img,
  .wp-gb-page .gb-split.reverse .gb-split-text{order:0;}
  .wp-gb-page .gb-split-img{min-height:0;aspect-ratio:4/3;}
  .wp-gb-page .gb-council-grid{grid-template-columns:repeat(2,1fr);}
  .wp-gb-page .gb-ben-grid{grid-template-columns:1fr 1fr;}
  .wp-gb-page .gb-ben-4up .gb-ben-grid{grid-template-columns:1fr 1fr;}
  .wp-gb-page .watl-kit__grid{grid-template-columns:1fr;}
  .wp-gb-page .gb-router-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .wp-gb-page .gb-email-form{flex-direction:column;}
  .wp-gb-page .gb-email.is-warm .gb-email-form,
  .wp-gb-page .gb-email.is-dark .gb-email-form{flex-direction:column;}
  .wp-gb-page .gb-email.is-warm .gb-email-input{border-right:1.5px solid var(--light-border);border-radius:2px;}
  .wp-gb-page .gb-email.is-warm .gb-email-btn,
  .wp-gb-page .gb-email.is-dark .gb-email-input,
  .wp-gb-page .gb-email.is-dark .gb-email-btn{border-radius:2px;}
  .wp-gb-page .gb-season-grid{grid-template-columns:repeat(2,1fr);}
  .wp-gb-page .gb-ben-grid{grid-template-columns:1fr;}
  .wp-gb-page .gb-ben-4up .gb-ben-grid{grid-template-columns:1fr;}
  .wp-gb-page .gb-test-grid{grid-template-columns:1fr;}
  .wp-gb-page .gb-software-shots,
  .wp-gb-page .gb-software-cols{grid-template-columns:1fr;}
  .wp-gb-page .gb-specs-inner{grid-template-columns:1fr;}
  .wp-gb-page .watl-kit__items{grid-template-columns:1fr;}
  .wp-gb-page .gb-router-grid{grid-template-columns:1fr;}
  .wp-gb-page .gb-search-box{flex-direction:column;}
  .wp-gb-page .gb-pagehero-stats{display:grid;grid-template-columns:1fr 1fr;gap:24px 16px;}
  /* A 64%-wide photo panel is a hard-to-read slice on a phone — go full-bleed
     and lean on the tint instead of the horizontal fade. */
  .wp-gb-page .gb-pagehero--photo-left::before{width:100%;background-position:46% 45%;background-image:linear-gradient(180deg,rgba(8,18,34,.82) 0%,rgba(8,18,34,.74) 45%,rgba(8,18,34,.9) 100%),url('../images/flex/flex-hero.jpg');-webkit-mask-image:none;mask-image:none;}
}
@media(max-width:640px){
  .wp-gb-page .gb-council-grid{grid-template-columns:1fr;}
}
@media(max-width:420px){
  .wp-gb-page .gb-stat-row{grid-template-columns:1fr;}
  .wp-gb-page .gb-season-grid{grid-template-columns:1fr;}
}

/* "Focus" image block-style variations (registered in inc/theme-setup.php).
   Set which part of a cropped image stays in view. Only has a visible effect
   on images that crop (object-fit:cover) — i.e. the card/split images. */
.wp-gb-page .wp-block-image.is-style-focus-top img{object-position:center top !important;}
.wp-gb-page .wp-block-image.is-style-focus-center img{object-position:center center !important;}
.wp-gb-page .wp-block-image.is-style-focus-bottom img{object-position:center bottom !important;}
.wp-gb-page .wp-block-image.is-style-focus-left img{object-position:left center !important;}
.wp-gb-page .wp-block-image.is-style-focus-right img{object-position:right center !important;}

/* ===== ABOUT US — CHAMPIONS / IKTD / COMMISSIONER =====
   Ported from worldknifethrowingleague.com/about-us/ (2026-08-12). The champion
   grids are rendered by the [wktl_champions] shortcode (inc/shortcodes.php), so
   these classes are emitted by PHP, not by blocks in the page body. */

.wp-gb-page .gb-champs{max-width:1200px;margin:0 auto;padding:clamp(36px,5vw,64px) clamp(20px,5vw,48px) 0;}
.wp-gb-page .gb-champs-title{font-family:var(--heading);font-size:clamp(26px,4vw,40px);letter-spacing:2px;text-transform:uppercase;color:var(--navy);text-align:center;margin:0 0 28px;}
.wp-gb-page .gb-champs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;justify-items:center;}
/* A single duals card would stretch full width in an auto-fit track; cap it. */
.wp-gb-page .gb-champs--duals .gb-champs-grid{grid-template-columns:repeat(auto-fit,minmax(240px,320px));justify-content:center;}

.wp-gb-page .gb-champ{width:100%;max-width:340px;background:#fff;border:1px solid var(--light-border);padding:16px;box-shadow:0 2px 12px rgba(10,22,40,.10);transition:transform .2s,box-shadow .2s;}
.wp-gb-page .gb-champ:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(10,22,40,.16);}
.wp-gb-page .gb-champ-photo{width:100%;height:240px;background:var(--cream);overflow:hidden;margin-bottom:18px;}
.wp-gb-page .gb-champ-photo img{width:100%;height:100%;object-fit:cover;display:block;margin:0;}
.wp-gb-page .gb-champ-year{font-family:var(--condensed);font-size:16px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--navy);margin:0 0 2px;}
.wp-gb-page .gb-champ-name{font-family:var(--heading);font-size:22px;letter-spacing:1px;text-transform:uppercase;color:var(--navy);margin:0 0 6px;line-height:1.1;}
.wp-gb-page .gb-champ-title{font-family:var(--body);font-size:15px;color:var(--gold-muted);margin:0 0 14px;}
.wp-gb-page .gb-champ-venues{display:flex;flex-direction:column;gap:10px;}
.wp-gb-page .gb-champ-venue{display:flex;align-items:center;gap:12px;}
.wp-gb-page .gb-champ-venue-logo{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--navy) center/cover no-repeat;}
.wp-gb-page .gb-champ-venue-name{font-family:var(--body);font-size:14px;line-height:1.3;color:var(--dark-text);}

/* International Knife Throwing Day — full-bleed photo with a dark scrim */
/* Backgrounds are decorative and live in CSS so the block markup stays valid in
   the editor (an inline style Gutenberg doesn't know about trips validation).
   The Evan Walters portrait IS content, so that one is a wp:image block. */
.wp-gb-page .gb-iktd{position:relative;max-width:1200px;margin:clamp(40px,6vw,72px) auto 0;padding:clamp(40px,6vw,72px) clamp(24px,6vw,64px);background:var(--navy) url('../images/about/iktd-bg.webp') center/cover no-repeat;text-align:center;isolation:isolate;}
.wp-gb-page .gb-iktd::before{content:'';position:absolute;inset:0;background:rgba(10,22,40,.62);z-index:-1;}
.wp-gb-page .gb-iktd h2{font-family:var(--heading);font-size:clamp(30px,6vw,60px);letter-spacing:2px;text-transform:uppercase;color:#fff;margin:0;line-height:1.05;}
.wp-gb-page .gb-iktd .gb-iktd-date{font-family:var(--condensed);font-size:clamp(16px,2.4vw,24px);font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fff;margin:14px 0 0;}
.wp-gb-page .gb-iktd p:not(.gb-iktd-date){max-width:66ch;margin:26px auto 0;font-size:15.5px;line-height:1.75;color:rgba(255,255,255,.88);}

/* Commissioner — same full-bleed half-and-half treatment as the .gb-split
   boxes higher up the page (client feedback 2026-08-21: "put that image and
   text in the same style as these boxes"). Deliberately styled through the
   existing .gb-commish* classes instead of re-tagging the block markup as
   .gb-split, so the change ships with the theme and does NOT require the page
   body to be re-pasted on every environment. Values mirror .gb-split /
   .gb-split-text / .gb-split-img — keep the two in sync. */
.wp-gb-page .gb-commish{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0;max-width:none;margin:clamp(40px,6vw,72px) 0 0;background:none;min-height:340px;}
.wp-gb-page .gb-commish-card{background:none;margin:0;padding:clamp(32px,5vw,56px) clamp(24px,5vw,48px);display:flex;flex-direction:column;justify-content:center;}
.wp-gb-page .gb-commish-card h2{font-family:var(--heading);font-size:clamp(24px,3.5vw,34px);letter-spacing:2px;text-transform:uppercase;color:var(--navy);margin:0 0 12px;line-height:1.15;}
.wp-gb-page .gb-commish-card p{font-size:15px;line-height:1.7;color:var(--mid);margin:0 0 14px;}
.wp-gb-page .gb-commish-card p:last-child{margin-bottom:0;}
/* The portrait figure carries no .gb-split-img class (it is a plain wp:image
   inside a group), so the cover-fill rules are restated here. */
.wp-gb-page .gb-commish-portrait{display:block;position:relative;overflow:hidden;background:var(--cream);min-height:280px;padding:0;}
.wp-gb-page .gb-commish-portrait figure.wp-block-image{display:block;width:100%;margin:0;}
.wp-gb-page .gb-commish-portrait img{width:100%;max-width:none;height:100%;object-fit:cover;object-position:50% 0;position:absolute;inset:0;display:block;margin:0;}

@media(max-width:1024px){
  .wp-gb-page .gb-commish{grid-template-columns:1fr;min-height:0;}
  /* Photo first on narrow screens, matching how .gb-split stacks. */
  .wp-gb-page .gb-commish-portrait{order:-1;min-height:0;aspect-ratio:4/3;}
}

@media(max-width:820px){
  .wp-gb-page .gb-champ-photo{height:260px;}
}