/* =============================================================================
 * The Grit Blueprint Podcast - page styles
 * Ported from the Design Component export's inline <style> (head) and scoped
 * under body.gb-grit-blueprint-podcast-tpl so nothing leaks onto other pages.
 * The page markup is 100% inline-styled; this file only carries keyframes,
 * the grain/scrollbar/selection chrome, the responsive @media rules, the
 * header offset, and the sticky jump-strip offset. Design tokens
 * (--font-display/--font-sans/--ease-out/--gb-plaster) come from the shared
 * assets/colors_and_type.css foundation.
 * ========================================================================== */

/* ---- Header offset: pull the hero up under the transparent Elementor header
 * (desktop 130 / tablet 120 / mobile 100). ----------------------------------*/
body.gb-grit-blueprint-podcast-tpl { --gb-header-h: 130px; }
@media (max-width:920px){ body.gb-grit-blueprint-podcast-tpl { --gb-header-h: 120px; } }
@media (max-width:760px){ body.gb-grit-blueprint-podcast-tpl { --gb-header-h: 100px; } }

body.gb-grit-blueprint-podcast-tpl #content,
body.gb-grit-blueprint-podcast-tpl .site-content { padding-top:0!important; margin-top:0!important; }
body.gb-grit-blueprint-podcast-tpl .gb-app {
  margin-top: calc(-1 * var(--gb-header-h)) !important;
  background:#0E1E36; color:#fff;
}
/* hero clears the header while its video-wall background still fills behind it */
body.gb-grit-blueprint-podcast-tpl [data-hero] { padding-top: var(--gb-header-h); }
/* on-air pulse dots must stay perfect circles (don't let flex squish them) */
body.gb-grit-blueprint-podcast-tpl [data-onair] { flex: none; }

/* ---- Base chrome (scoped) -------------------------------------------------- */
body.gb-grit-blueprint-podcast-tpl { background:#0E1E36; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
html:has(body.gb-grit-blueprint-podcast-tpl){ scroll-behavior:smooth; }
body.gb-grit-blueprint-podcast-tpl * { box-sizing:border-box; }
body.gb-grit-blueprint-podcast-tpl ::selection { background:#FF1894; color:#fff; }
body.gb-grit-blueprint-podcast-tpl ::-webkit-scrollbar { width:11px; height:11px; }
body.gb-grit-blueprint-podcast-tpl ::-webkit-scrollbar-track { background:#0a1730; }
body.gb-grit-blueprint-podcast-tpl ::-webkit-scrollbar-thumb { background:linear-gradient(#FF1894,#0092D6); border-radius:99px; }

/* anchor jump targets clear the fixed header + the sticky jump strip */
body.gb-grit-blueprint-podcast-tpl #answer,
body.gb-grit-blueprint-podcast-tpl #why,
body.gb-grit-blueprint-podcast-tpl #ways,
body.gb-grit-blueprint-podcast-tpl #episodes,
body.gb-grit-blueprint-podcast-tpl #reach,
body.gb-grit-blueprint-podcast-tpl #faq,
body.gb-grit-blueprint-podcast-tpl #proof,
body.gb-grit-blueprint-podcast-tpl #live { scroll-margin-top: calc(var(--gb-header-h) + 72px); }

/* sticky "Common questions" jump strip sits just under the real header
 * (export pinned it at 69px under its own bundled nav). */
body.gb-grit-blueprint-podcast-tpl section[aria-label="Common questions"] { top: var(--gb-header-h) !important; }

body.gb-grit-blueprint-podcast-tpl a:focus-visible,
body.gb-grit-blueprint-podcast-tpl button:focus-visible,
body.gb-grit-blueprint-podcast-tpl input:focus-visible,
body.gb-grit-blueprint-podcast-tpl textarea:focus-visible { outline:3px solid #0092D6; outline-offset:2px; border-radius:4px; }

/* ---- Keyframes (namespaced, used by inline animation declarations) --------- */
@keyframes gbOnair{0%,100%{box-shadow:0 0 0 3px rgba(255,24,148,.35);}50%{box-shadow:0 0 0 9px rgba(255,24,148,0);}}
@keyframes gbEq{0%,100%{transform:scaleY(.32);}50%{transform:scaleY(1);}}
@keyframes gbFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes gbMarquee{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
@keyframes gbSpin{to{transform:rotate(360deg);}}
@keyframes gbPing{0%{transform:scale(1);opacity:.5;}80%,100%{transform:scale(2.1);opacity:0;}}
@keyframes gbReveal{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}
@keyframes gbRiseIn{from{transform:translateY(115%);}to{transform:translateY(0);}}
body.gb-grit-blueprint-podcast-tpl .gb-rev{animation:gbReveal .7s cubic-bezier(.22,1,.36,1) both;}
body.gb-grit-blueprint-podcast-tpl .gb-rise{animation:gbRiseIn .8s cubic-bezier(.22,1,.36,1) both;}
@media(prefers-reduced-motion:reduce){
  body.gb-grit-blueprint-podcast-tpl .gb-rev,
  body.gb-grit-blueprint-podcast-tpl .gb-rise{animation:none!important;}
  body.gb-grit-blueprint-podcast-tpl *{animation:none!important;}
}

/* film grain overlay used by [data-grain] sections */
body.gb-grit-blueprint-podcast-tpl [data-grain]::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---- FAQ: larger question + answer text than the export default ----------- */
body.gb-grit-blueprint-podcast-tpl [data-faq-q] > span:first-child { font-size: clamp(19px,2.2vw,24px) !important; }
body.gb-grit-blueprint-podcast-tpl [data-faq-a] p { font-size: 16.5px !important; line-height: 1.7 !important; }

/* ---- Mobile (<=760) responsive rules (scoped) ----------------------------- */
@media(max-width:760px){
  body.gb-grit-blueprint-podcast-tpl section{padding-top:54px!important;padding-bottom:54px!important;}
  body.gb-grit-blueprint-podcast-tpl h1{font-size:clamp(38px,11vw,54px)!important;}
  /* hero: taller-than-viewport content was getting pulled up under the header by
   * align-items:center; start it from the top and add clearance below the header */
  body.gb-grit-blueprint-podcast-tpl [data-hero]{align-items:flex-start!important;padding-top:calc(var(--gb-header-h) + 40px)!important;}
  /* hero eyebrow: as a flex row the wrapped text fills the width and strands the
   * dot far left. Make it a centered block so the dot flows inline before the text. */
  body.gb-grit-blueprint-podcast-tpl [data-hero] span:has(> [data-onair]){display:block!important;}
  body.gb-grit-blueprint-podcast-tpl [data-hero] [data-onair]{display:inline-block!important;vertical-align:middle;margin-right:9px;}
  body.gb-grit-blueprint-podcast-tpl [data-reveal]{opacity:1!important;transform:none!important;}
  body.gb-grit-blueprint-podcast-tpl [data-tilt]{transform:none!important;}
  body.gb-grit-blueprint-podcast-tpl [data-hero]>img{display:none!important;}
  body.gb-grit-blueprint-podcast-tpl [data-herogrid]{display:flex!important;flex-direction:column!important;gap:26px!important;}
  body.gb-grit-blueprint-podcast-tpl [data-herogrid]>*:first-child{order:1!important;}
  body.gb-grit-blueprint-podcast-tpl [data-herogrid]>*:last-child{order:2!important;}
  body.gb-grit-blueprint-podcast-tpl [data-feature],
  body.gb-grit-blueprint-podcast-tpl [data-answergrid],
  body.gb-grit-blueprint-podcast-tpl [data-footlead],
  body.gb-grit-blueprint-podcast-tpl [data-whygrid],
  body.gb-grit-blueprint-podcast-tpl [data-ethosgrid],
  body.gb-grit-blueprint-podcast-tpl [data-sponsorgrid],
  body.gb-grit-blueprint-podcast-tpl [data-answer2]{display:grid!important;grid-template-columns:1fr!important;gap:26px!important;}
  body.gb-grit-blueprint-podcast-tpl [data-grid4]{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;}
  body.gb-grit-blueprint-podcast-tpl [data-grid3],
  body.gb-grit-blueprint-podcast-tpl [data-grid2],
  body.gb-grit-blueprint-podcast-tpl [data-ways],
  body.gb-grit-blueprint-podcast-tpl [data-steps]{display:flex!important;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px!important;margin:0 -20px!important;padding:4px 20px 20px!important;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#FF1894 rgba(140,150,170,.22);}
  body.gb-grit-blueprint-podcast-tpl [data-grid3]>*,
  body.gb-grit-blueprint-podcast-tpl [data-grid2]>*,
  body.gb-grit-blueprint-podcast-tpl [data-ways]>*,
  body.gb-grit-blueprint-podcast-tpl [data-steps]>*{flex:0 0 84%!important;scroll-snap-align:start;min-width:0;}
  body.gb-grit-blueprint-podcast-tpl [data-grid3]::-webkit-scrollbar,
  body.gb-grit-blueprint-podcast-tpl [data-grid2]::-webkit-scrollbar,
  body.gb-grit-blueprint-podcast-tpl [data-ways]::-webkit-scrollbar,
  body.gb-grit-blueprint-podcast-tpl [data-steps]::-webkit-scrollbar{height:5px;}
  body.gb-grit-blueprint-podcast-tpl [data-grid3]::-webkit-scrollbar-thumb,
  body.gb-grit-blueprint-podcast-tpl [data-grid2]::-webkit-scrollbar-thumb,
  body.gb-grit-blueprint-podcast-tpl [data-ways]::-webkit-scrollbar-thumb,
  body.gb-grit-blueprint-podcast-tpl [data-steps]::-webkit-scrollbar-thumb{background:#FF1894;border-radius:99px;}
  body.gb-grit-blueprint-podcast-tpl [data-grid3]::-webkit-scrollbar-track,
  body.gb-grit-blueprint-podcast-tpl [data-grid2]::-webkit-scrollbar-track,
  body.gb-grit-blueprint-podcast-tpl [data-ways]::-webkit-scrollbar-track,
  body.gb-grit-blueprint-podcast-tpl [data-steps]::-webkit-scrollbar-track{background:rgba(140,150,170,.18);border-radius:99px;}
  body.gb-grit-blueprint-podcast-tpl [data-watermark]{display:none!important;}
  body.gb-grit-blueprint-podcast-tpl [data-defrow]{grid-template-columns:1fr!important;gap:3px 0!important;padding:12px 0!important;}
  body.gb-grit-blueprint-podcast-tpl [data-wayband]{flex-direction:column!important;gap:8px!important;}
  /* stacked on mobile, the Be A Guest CTA sits right on top of the INCLUDED row -> add breathing room */
  body.gb-grit-blueprint-podcast-tpl [data-wayband] a{margin-bottom:36px!important;}
  /* the carousel rule above resets margin to "0 -20px", wiping each card row's inline top
   * margin. Restore breathing room above the card rows (live-event "during" cards,
   * testimonial wall, etc). Must come after the carousel rule to win on margin-top. */
  body.gb-grit-blueprint-podcast-tpl [data-grid3]{margin-top:36px!important;}
  /* enlarge the "Seen At" event ticker on mobile (it floors at 15px otherwise) */
  body.gb-grit-blueprint-podcast-tpl [data-marquee] > div{font-size:18px!important;}
  /* the research donut row is a data-grid3 nested INSIDE the white card; the
   * carousel's -20px full-bleed pushes it past the card toward the screen edge.
   * Cancel the bleed so it sits inside the card padding. */
  body.gb-grit-blueprint-podcast-tpl #proof [data-grid3]{margin:0!important;padding-left:4px!important;}
  /* center the standalone "Talk Sponsorship" CTA on mobile */
  body.gb-grit-blueprint-podcast-tpl [data-reveal]:has(> a[data-talk]){text-align:center!important;}
  body.gb-grit-blueprint-podcast-tpl [data-defrow]>span{padding-top:0!important;}
  body.gb-grit-blueprint-podcast-tpl [data-herobadge]{display:none!important;}
  body.gb-grit-blueprint-podcast-tpl [data-statgrid]{gap:16px!important;}
  body.gb-grit-blueprint-podcast-tpl [data-statgrid]>*{padding:22px 20px!important;}
  body.gb-grit-blueprint-podcast-tpl [data-mobfirst]{order:-1!important;}
  body.gb-grit-blueprint-podcast-tpl [data-testiblock]{margin-top:40px!important;}
  body.gb-grit-blueprint-podcast-tpl [data-statdiv]{display:none!important;}
  body.gb-grit-blueprint-podcast-tpl [data-qstrip]{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#FF1894 rgba(140,150,170,.2);padding-bottom:12px!important;gap:8px!important;}
  body.gb-grit-blueprint-podcast-tpl [data-qstrip]>*{flex:none!important;}
  body.gb-grit-blueprint-podcast-tpl [data-qstrip]::-webkit-scrollbar{height:5px;}
  body.gb-grit-blueprint-podcast-tpl [data-qstrip]::-webkit-scrollbar-thumb{background:#FF1894;border-radius:99px;}
  body.gb-grit-blueprint-podcast-tpl [data-qstrip]::-webkit-scrollbar-track{background:rgba(140,150,170,.18);border-radius:99px;}
  body.gb-grit-blueprint-podcast-tpl [data-qstrip]>span{font-size:10px!important;}
  body.gb-grit-blueprint-podcast-tpl [data-qstrip] a{padding:8px 13px!important;font-size:12px!important;}
  body.gb-grit-blueprint-podcast-tpl section[aria-label="Common questions"]{padding:9px 0!important;}
  body.gb-grit-blueprint-podcast-tpl [data-sponsorgrid] a{font-size:12.5px!important;letter-spacing:.04em!important;padding:15px 18px!important;text-align:center;}
  body.gb-grit-blueprint-podcast-tpl [data-ethosgrid]{gap:18px!important;text-align:center!important;}
  body.gb-grit-blueprint-podcast-tpl [data-ethosgrid] h2{max-width:none!important;}
  body.gb-grit-blueprint-podcast-tpl [data-ethosgrid]>div:last-child{align-items:center!important;}
  body.gb-grit-blueprint-podcast-tpl [data-ethosgrid] p{margin-left:auto!important;margin-right:auto!important;}
}