/* =============================================================================
 *  Grit Guide episode design — CANONICAL, LOCKED, SHARED.
 *
 *  Extracted verbatim from the reference build's <style>. This is the single
 *  source of the episode page's layout + look. render-episode.php strips each
 *  built file's own <style> and the module serves THIS instead, so every
 *  episode is styled identically and cannot drift, no matter what an export
 *  contains. Change the design here, once, and every episode follows.
 * ========================================================================== */
/* ===== mobile only. Nothing below applies at or above 761px. ===== */
@media (max-width: 760px){
  /* 1. containers */
  /* viewport-fit is set by the host meta; padding falls back to 10px where env() is unsupported */
  [data-m="wrap"]{ padding-left:20px !important; padding-right:20px !important; }

  /* 2. swipe carousels for card rows: next card peeks, thin pink scrollbar as the cue */
  [data-m="carousel"]{
    display:flex !important; grid-template-columns:none !important;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; overscroll-behavior-inline:contain;
    gap:14px !important; margin-left:-20px !important; margin-right:-20px !important;
    padding:0 20px 20px !important;
    scrollbar-color:#FF1894 transparent; scrollbar-width:thin;
  }
  [data-m="carousel"] > *{ flex:0 0 84% !important; scroll-snap-align:start; min-width:0; }
  [data-m="carousel"]::-webkit-scrollbar{ height:5px; }
  [data-m="carousel"]::-webkit-scrollbar-track{ background:transparent; }
  [data-m="carousel"]::-webkit-scrollbar-thumb{ background:#FF1894; border-radius:999px; }
  /* the Mentioned panel is a bordered box, so let its own padding stand */
  [data-m="carousel"][data-m-inset]{ margin-left:0 !important; margin-right:0 !important; padding:26px !important; }

  /* 3. nothing may be hidden on a phone */
  .gbp-root [style*="opacity:0"], .gbp-root .reveal, .gbp-root [data-reveal]{ opacity:1 !important; transform:none !important; }
  .gbp-root *{ animation-play-state:running; }

  /* 4. accordion: the install walkthrough opens on tap */
  [data-m="acc"] [data-acc-item]{ cursor:pointer; position:relative; padding-right:34px !important; }
  [data-m="acc"] [data-acc-item] [data-acc-d]{ display:none !important; }
  [data-m="acc"] [data-acc-item].open [data-acc-d]{ display:block !important; }
  [data-m="acc"] [data-acc-item]::after{
    content:"+"; position:absolute; right:4px; top:14px;
    font:400 22px/1 var(--font-sans); color:var(--gb-pink);
  }
  [data-m="acc"] [data-acc-item].open::after{ content:"\2013"; }

  /* 5. rhythm */
  .gbp-root section{ padding-top:52px !important; padding-bottom:52px !important; }
  .gbp-root section[data-screen-label="Episode header"]{ padding:0 !important; }
  /* the hero is one screen: badge, headline, short dek, byline. Video begins immediately after. */
  .gbp-hero-in{ padding:26px 20px 24px !important; }
  .gbp-title{ font-size:34px !important; line-height:.94 !important; margin:0 0 12px !important; }
  .gbp-dek{ font-size:16px !important; line-height:1.45 !important; margin:0 0 14px !important; }
  .gbp-byline{ gap:12px !important; padding-top:14px !important; margin-top:0 !important; }
  .gbp-byline .gbp-by-div{ display:none !important; }
  .gbp-by-av{ width:36px !important; height:36px !important; }
  .gbp-by-av img{ width:36px !important; height:36px !important; }
  .gbp-by-name{ font-size:15px !important; }
  .gbp-by-meta{ font-size:13px !important; }
  .gbp-byline{ flex-direction:column !important; align-items:center !important; }
  .gbp-by, .gbp-byline > .gbp-by-txt{ flex:0 0 auto !important; width:100% !important; min-width:0 !important; justify-content:center !important; }
  .gbp-by-txt{ text-align:center !important; }
  .gbp-by-name{ white-space:nowrap !important; }
  .gbp-by-meta{ justify-content:center !important; }
  .gbp-dek{ text-align:center !important; }
  .crumbs{ margin-bottom:12px !important; }
  /* video band starts tight against the hero */
  .gbp-root section[data-screen-label="Episode video"]{ padding-top:20px !important; }
  .gbp-root h2{ font-size:clamp(26px,7.6vw,34px) !important; }

  /* video band */
  [data-m="rail"]{ max-width:100% !important; padding:16px 4px 8px !important; }
  /* no fixed-height scroll area on a phone: it collides with what follows */
  [data-m="chapters"]{ max-height:none !important; overflow:visible !important; }
  /* compact chapter list: timestamp and title only, detail behind a toggle */
  [data-m="chblurb"]{ display:none !important; }
  [data-m="chapters"][data-detail="1"] [data-m="chblurb"]{ display:block !important; }
  [data-m="chapters"] > a{ grid-template-columns:52px minmax(0,1fr) !important; padding:12px 12px !important; min-height:44px; align-items:center !important; }
  [data-m="chdetail"]{ display:flex !important; }
  [data-m="audiotabs"]{ flex-wrap:wrap !important; }
  /* Apple and Spotify appear as tabs in the audio card, so the pill row is a duplicate */
  [data-m="platformrow"] > a, [data-m="platformrow"] > span{ display:none !important; }
  [data-m="platformrow"]{ margin-top:12px !important; }
  [data-m="platformrow"] > button{ width:100% !important; justify-content:center !important; min-height:52px !important; font-size:16px !important; }

  /* 6. touch affordances and tap targets */
  [data-audio-tab]{ min-height:44px !important; padding:0 16px !important; }
  [data-yt-play], .share-btn, [data-transcript-toggle], [data-seek]{ min-height:44px !important; }
  [data-m="carousel"] .rel-card .rel-more, .gbp-root .textlink{ opacity:1 !important; }

  /* stat panel: 4 across becomes 2 */
  [data-m="stats"]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  [data-m="stats"] > div{ border-left:0 !important; border-top:1px solid rgba(255,255,255,.14) !important; padding:16px 14px !important; }
  [data-m="stats"] > div:nth-child(2n){ border-left:1px solid rgba(255,255,255,.14) !important; }
  [data-m="stats"] > div:nth-child(-n+2){ border-top:0 !important; }
  [data-m="stats"] > div > p:first-child{ font-size:34px !important; margin:0 0 6px !important; }
  [data-m="stats"] > div > p:last-child{ font-size:15px !important; line-height:1.35 !important; }
  [data-m="statslede"]{ padding:20px 18px 4px !important; }
  [data-m="statslede"] > p:first-child{ font-size:12px !important; }
  [data-m="statslede"] > p:last-child{ font-size:16px !important; line-height:1.45 !important; }

  /* comparison + prefinish panels stack, divider rotates */
  /* a two-column grid stacked one-up interleaves the cells, so pair each
     complaint with its cause as one card and drop the column headers */
  [data-m="vs"]:not([data-m-pfpanel]){
    display:flex !important; grid-template-columns:none !important;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; overscroll-behavior-inline:contain;
    gap:16px !important; margin:32px 0 !important; padding:0 0 18px !important;
    border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important;
    scrollbar-color:#FF1894 transparent; scrollbar-width:thin;
  }
  [data-m="vs"]:not([data-m-pfpanel])::-webkit-scrollbar{ height:5px; }
  [data-m="vs"]:not([data-m-pfpanel])::-webkit-scrollbar-track{ background:transparent; }
  [data-m="vs"]:not([data-m-pfpanel])::-webkit-scrollbar-thumb{ background:#FF1894; border-radius:999px; }
  [data-m="vs"] > div[data-m="vspair"]{ display:block !important; flex:0 0 100% !important; scroll-snap-align:center; min-width:0; }
  [data-m="vspair"] > div:first-child{ border-radius:12px 12px 0 0 !important; margin:0 !important; }
  [data-m="vspair"] > div:last-child{ border-radius:0 0 12px 12px !important; margin:0 !important; }
  [data-m="vs"]:not([data-m-pfpanel]) > div{ border-left:0 !important; }
  [data-m="vs"]:not([data-m-pfpanel]) > div:not([data-m="vspair"]){ display:none !important; }
  [data-m="vspair"] > div:first-child{
    display:block !important; text-align:center !important;
    border-top:0 !important; background:var(--gb-paper) !important; padding:12px 16px 13px !important;
    font-size:16px !important; color:var(--gb-concrete) !important;
  }
  [data-m="vspair"] > div:first-child::before{
    content:"What gets blamed"; display:block;
    font:800 11px/1 var(--font-sans); letter-spacing:.14em; text-transform:uppercase;
    color:var(--gb-concrete); opacity:.8; margin-bottom:7px;
  }
  [data-m="vspair"] > div:last-child::before{
    content:"What it usually is"; display:block;
    font:800 11px/1 var(--font-sans); letter-spacing:.14em; text-transform:uppercase;
    color:var(--gb-pink); margin-bottom:7px;
  }
  [data-m="vspair"] > div:first-child > span:first-child{ display:none !important; }
  [data-m="vspair"] > div:last-child{
    display:block !important; text-align:center !important;
    border-top:0 !important; border-left:3px solid var(--gb-pink) !important;
    background:#fff !important; padding:20px 20px 22px !important; font-size:20px !important; line-height:1.35 !important;
    box-shadow:0 8px 22px -14px rgba(14,30,54,.5) !important;
    font-weight:600 !important; color:var(--gb-navy) !important;
  }

  /* transcript + definitions */
  [data-m="tline"]{ grid-template-columns:1fr !important; gap:6px !important; }
  [data-m="tline"] > div:first-child{ display:flex !important; align-items:baseline; gap:10px; }
  [data-m="defrow"]{ grid-template-columns:1fr !important; gap:4px !important; }

  /* takeaways, ghost type, guest, next card */
  /* takeaways band: tighter rhythm, numeral as a compact pink marker */
  [data-m="tkrow"]{ grid-template-columns:34px minmax(0,1fr) !important; gap:12px !important; padding:14px 0 !important; align-items:start !important; }
  [data-m="tkrow"] > span:first-child{ font-size:20px !important; line-height:1 !important; letter-spacing:.06em !important; }
  [data-m="tkrow"] > span:last-child{ font-size:17px !important; line-height:1.4 !important; }
  [data-m="tkhead"]{ font-size:30px !important; margin:0 auto 8px !important; max-width:none !important; }
  [data-m="tksub"]{ font-size:16px !important; line-height:1.45 !important; margin:0 auto 6px !important; max-width:none !important; }
  [data-m="ggmark"]{ position:static !important; display:block !important; width:110px !important; margin:0 auto 12px !important; }
  [data-m="tkeyebrow"]{ font-size:12px !important; margin:0 0 8px !important; }
  .gbp-root section[data-screen-label="Takeaways"]{ padding-top:40px !important; padding-bottom:40px !important; }
  [data-m="ghost"]{
    display:block !important; position:absolute !important;
    left:0 !important; right:0 !important; top:auto !important; bottom:14px !important;
    text-align:center !important; font-size:58px !important;
    -webkit-text-stroke:1.6px rgba(255,255,255,.09) !important;
    white-space:nowrap !important; pointer-events:none;
  }
  /* keep the portrait ratio: a landscape crop cuts the head off */
  [data-m="headshot"]{ aspect-ratio:4/5 !important; max-width:260px; margin-left:auto !important; margin-right:auto !important; }
  section[data-guest] > div{ justify-content:center !important; }
  section[data-guest] > div > div{ flex:0 0 100% !important; width:100% !important; max-width:100% !important; }
  section[data-guest] > div > div:first-child{ text-align:center !important; }
  section[data-guest] > div > div:first-child > div{ justify-content:center !important; }
  [data-m="nextcard"]{ text-align:left !important; flex-direction:row-reverse; justify-content:flex-end; }
  [data-m="nextcard"] > span:first-child{ margin-left:0 !important; }

  [data-m="hatband"]{ grid-template-columns:1fr !important; }
  [data-m="ghostband"]{ font-size:30px !important; -webkit-text-stroke-width:1.6px !important; }
  [data-m="hatportrait"]{ order:-1; min-height:190px !important; }
  [data-m="hatportrait"] > span{ background:linear-gradient(180deg,rgba(14,30,54,0) 30%,#0E1E36 100%) !important; }

  /* drop cap has nowhere to sit in a narrow column */
  [data-m="standfirst"]{ font-size:19px !important; }
  [data-m="standfirst"]::first-letter{ float:none !important; font-size:inherit !important; line-height:inherit !important; margin:0 !important; padding:0 !important; color:inherit !important; font-family:inherit !important; }

  /* images and headings must never push the page sideways */
  .gbp-root img{ max-width:100%; height:auto; }
  .gbp-root h1, .gbp-root h2, .gbp-root h3{ overflow-wrap:break-word; }

  /* visible focus for every control */
  .gbp-root a:focus-visible, .gbp-root button:focus-visible{ outline:2px solid var(--gb-pink); outline-offset:3px; }

  /* supporting quotes are support: they must not compete with the lead quote */
  [data-m="supq"]{ font-size:18px !important; line-height:1.45 !important; }
  section#pink-hat blockquote p{ font-size:26px !important; line-height:1.05 !important; }
  section#pink-hat blockquote{ padding-left:16px !important; }
  section[data-screen-label="Key quotes"] figure{ align-items:center !important; justify-content:center !important; }
  [data-m="supcap"]{ font-size:12px !important; letter-spacing:.1em !important; text-indent:.1em !important; padding-bottom:10px !important; }

  /* prefinish panel stacks, it is not a carousel */
  [data-m-pfpanel]{ grid-template-columns:1fr !important; }
  [data-m-pfpanel] > div{ border-left:0 !important; }
  [data-m-pfpanel] > div:last-child{ border-top:1px solid var(--gb-line) !important; }

  /* prefinish comparison: the numbers carry the point, detail is opt-in */
  [data-m="pfrow"]{ display:none !important; }
  [data-m-pfpanel][data-detail="1"] [data-m="pfrow"]{ display:grid !important; }
  [data-m="pftoggle"]{ display:flex !important; }

  /* audience and topic chips are metadata, not reading: collapsed by default */
  [data-m="tagpanel"]{ display:none !important; }
  [data-m="tagpanel"][data-open="1"]{ display:flex !important; }
  [data-m="tagtoggle"]{ display:flex !important; }

  /* everything centres on mobile */
  .gbp-root section, [data-m="wrap"]{ text-align:center; }
  .gb-post, .gb-post p, .gb-post h2, .gb-post h3, .gb-post figcaption, .gb-post cite,
  .gbp-tldr, .gbp-standfirst, .gbp-author, .gbp-postfoot{ text-align:center !important; }
  .gb-post ol, .gb-post ul{ text-align:center !important; list-style-position:inside !important; padding-left:0 !important; }
  .gbp-postfoot, .gbp-author, .gbp-author .au-l{ justify-content:center !important; }
  .gbp-author{ flex-direction:column !important; align-items:center !important; }
  .gbp-author .av{ margin-left:auto !important; margin-right:auto !important; }
  .gb-post div:has(> .gbp-tag){ justify-content:center !important; }
  [data-m="tkrow"], [data-m="tline"], [data-m="defrow"], [data-m="acc"] [data-acc-item],
  [data-m="stats"] > div, [data-m="pfrow"]{ text-align:center !important; }
  [data-m="tkrow"]{ grid-template-columns:1fr !important; gap:2px !important; padding:16px 0 !important; }
  [data-m="acc"] [data-acc-item]{ grid-template-columns:1fr !important; gap:6px !important; padding-right:0 !important; }
  [data-m="acc"] [data-acc-item]::after{ position:static !important; display:block; margin-top:8px; }
  [data-m="defrow"]{ gap:4px !important; }
  [data-m="pfrow"]{ grid-template-columns:1fr !important; gap:6px !important; }
  [data-m="vs"] [data-m="vspair"] > div > span:first-child{ flex:0 0 auto !important; }
  [data-m="chapters"] > a{ grid-template-columns:1fr !important; gap:4px !important; text-align:center !important; }
  .gbp-hero-in, .gbp-tldr ul, .gbp-tldr li{ text-align:center !important; }
  [data-m="hatband"]{ text-align:center !important; }
  section#pink-hat > div > div{ text-align:center !important; justify-content:center !important; }
  section#pink-hat > div > div > div{ flex:0 0 100% !important; width:100% !important; max-width:100% !important; min-width:0 !important; }
  section#pink-hat > div > div > div:first-child{ text-align:center !important; }
  section#pink-hat > div > div > div:first-child > span:first-child{ margin-left:auto !important; margin-right:auto !important; }
  section#pink-hat > div > div > div:first-child > p{ justify-content:center !important; }
  section#pink-hat > div > div > div:first-child > a{ justify-content:center !important; }
  [data-m="hatband"] > span{ align-items:center !important; }

  /* transcript is closed until asked for; CSS so it never depends on JS timing */
  [data-transcript-body]{ max-height:0 !important; padding:0 !important; overflow:hidden !important; }
  [data-transcript][data-open="1"] [data-transcript-body]{ max-height:none !important; padding:6px 18px 18px !important; }
  [data-transcript-fade]{ display:none !important; }
  [data-transcript] > div:first-child{ padding:14px 18px !important; flex-direction:column !important; align-items:center !important; gap:4px !important; text-align:center !important; }
  [data-transcript-foot]{ padding:14px 18px !important; }

  /* closing CTA: centre the headline and make both buttons full width */
  section[data-screen-label="Closing CTA"] > div{ text-align:center !important; }
  section[data-screen-label="Closing CTA"] p{ margin-left:auto !important; margin-right:auto !important; }
  section[data-screen-label="Closing CTA"] > div > div:last-child{ flex-direction:column !important; align-items:stretch !important; width:100% !important; }
  section[data-screen-label="Closing CTA"] > div > div:last-child > a{ width:100% !important; min-height:52px !important; }

  /* prev/next: arrow above the label so the text can centre cleanly */
  nav[aria-label="Episode navigation"] a{ flex-direction:column !important; align-items:center !important; text-align:center !important; gap:10px !important; }
  [data-m="nextcard"]{ flex-direction:column !important; }
  [data-m="nextcard"] > span:first-child{ margin-left:auto !important; margin-right:auto !important; }

  /* related episodes: centre the head, keep card copy centred with the page */
  .gbp-related .gbp-rel-head{ flex-direction:column !important; align-items:center !important; text-align:center !important; gap:12px !important; }
  .gbp-related .rel-body{ text-align:center !important; }
  .gbp-related .rel-more{ justify-content:center !important; }
  .gbp-related .rel-shot > div:last-child > div:last-child{ justify-content:center !important; }

  /* remaining controls that keep their own flex alignment */
  .gbp-faq-q{ justify-content:center !important; text-align:center !important; gap:10px !important; }
  [data-m="tline"] > div:first-child{ justify-content:center !important; }
  [data-m="audiotabs"]{ justify-content:center !important; }
  [data-audio-card] > div:first-child{ flex-direction:column !important; align-items:center !important; gap:10px !important; }
  [data-m="platformrow"]{ justify-content:center !important; }
  [data-m="chdetail"], [data-m="pftoggle"], [data-m="tagtoggle"], [data-transcript-toggle]{ margin-left:auto !important; margin-right:auto !important; }
  .gb-post > p > a[data-seek]{ margin-left:auto !important; margin-right:auto !important; }
  .gbp-inlinecta{ flex-direction:column !important; align-items:center !important; text-align:center !important; }
  .gbp-inlinecta img{ margin:0 auto !important; }
  .gb-post figure > img{ margin-left:auto !important; margin-right:auto !important; }
  .gbp-tldr-h, .gc-eye, .g-h, .vs-h, .au-k{ justify-content:center !important; }

  /* sticky jump bar: the design system hides the TOC below 1119px, so mobile has no nav */
  [data-m="jumpbar"]{ display:block !important; }
  [data-m="jumpbar"][data-open="1"] [data-m="jumpsheet"]{ display:block !important; }
  [data-m="jumpbar"][data-open="1"] [data-jump-caret]{ transform:rotate(180deg); }
  .gbp-root{ padding-bottom:88px; }

  /* 7. no sideways scroll */
  .gbp-root{ overflow-x:clip; }
}
@media (hover:none){
  .rel-card .rel-more, .gbp-root .textlink, .share-btn{ opacity:1 !important; }
}
@media (max-width: 420px){
  [data-m="carousel"] > *{ flex:0 0 88% !important; }
}

/* Links inside the written copy (dek, standfirst, takeaways, article, FAQ, bio, Pink Hat Take).
   The parent theme's reset turns every hovered link navy (#336); on Grit Guide a link hovers pink. */
.gbp-root :is(p, li, dd, .gbp-dek, .gbp-standfirst) a:not([class]){ color:var(--gb-pink, #FF1894); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; text-decoration-color:rgba(255,24,148,.45); transition:color .18s ease, text-decoration-color .18s ease; }
.gbp-root :is(p, li, dd, .gbp-dek, .gbp-standfirst) a:not([class]):hover,
.gbp-root :is(p, li, dd, .gbp-dek, .gbp-standfirst) a:not([class]):focus-visible{ color:var(--gb-pink, #FF1894); text-decoration-color:var(--gb-pink, #FF1894); }
/* The dek sits on dark navy: white words with a pink underline, pink on hover. */
.gbp-root .gbp-dek a:not([class]){ color:#fff; text-decoration-color:var(--gb-pink, #FF1894); }
.gbp-root .gbp-dek a:not([class]):hover,
.gbp-root .gbp-dek a:not([class]):focus-visible{ color:var(--gb-pink, #FF1894); }