/*
Belinda Jackson — Radial Universe
Styling for the required block patterns (Technical Spec §7): World Portal
Grid, Cinematic Hero, Book Feature, Series Timeline, Award Ribbon, Speaking
Topic Panel, Podcast Feature, Testimonial Slider, FAQ Accordion. Book Grid
and Resource Opt-In reuse .grid/.bookCard and .crmForm from main.css.
*/

/* ---------- World Portal Grid (used on /books/ hub page) ---------- */
.worldPortalGrid{ display:grid; gap:1.4em; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); margin:2em 0; }
.worldPortal{
  position:relative; border-radius:20px; overflow:hidden; min-height:280px; display:flex; align-items:flex-end;
  text-decoration:none; color:#fff; box-shadow:0 14px 34px rgba(20,35,59,.18);
}
.worldPortal img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.worldPortal::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.75) 100%); z-index:1; }
.worldPortal .portalLabel{ position:relative; z-index:2; padding:1.4em; }
.worldPortal .portalLabel .eyebrow{ color:var(--gold); font-family:var(--fantasy); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:.3em; }
.worldPortal .portalLabel strong{ font-family:var(--display); font-size:1.4rem; display:block; }
.worldPortal:hover, .worldPortal:focus-visible{ transform:translateY(-3px); transition:transform .25s ease; }

/* ---------- Cinematic Hero ---------- */
.cinematicHero{
  position:relative; min-height:70vh; display:flex; align-items:center; overflow:hidden; padding:4em 1.6em;
}
.cinematicHero .heroMedia{ position:absolute; inset:0; z-index:0; }
.cinematicHero .heroMedia img{ width:100%; height:100%; object-fit:cover; }
.cinematicHero .heroMedia::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,35,59,.82) 0%, rgba(20,35,59,.35) 60%, rgba(20,35,59,.15) 100%); }
.cinematicHero .heroContent{ position:relative; z-index:1; max-width:640px; color:#fff; }
.cinematicHero .heroContent .eyebrow{ color:var(--gold); }
.cinematicHero .heroContent h1, .cinematicHero .heroContent h2{ color:#fff; }

/* ---------- Book Feature ---------- */
.bookFeature{ display:grid; grid-template-columns:220px 1fr; gap:2em; align-items:start; margin:2em 0; }
@media (max-width:640px){ .bookFeature{ grid-template-columns:1fr; } }
.bookFeature img{ border-radius:14px; box-shadow:0 20px 40px -20px rgba(20,35,59,.4); aspect-ratio:2/3; object-fit:cover; }
.bookFeature blockquote{ font-family:var(--display); font-style:italic; font-size:1.15rem; border-left:3px solid var(--gold); padding-left:1em; margin:1em 0; }

/* ---------- Series Timeline ---------- */
.seriesTimeline{ list-style:none; padding:0; margin:2em 0; border-left:2px solid var(--sand); }
.seriesTimeline li{ position:relative; padding:0 0 2em 1.6em; }
.seriesTimeline li::before{ content:""; position:absolute; left:-7px; top:.3em; width:12px; height:12px; border-radius:50%; background:var(--gold); border:2px solid #fff; box-shadow:0 0 0 2px var(--sand); }
.seriesTimeline .seriesTimeline-title{ font-family:var(--display); font-size:1.1rem; font-weight:600; }
.seriesTimeline .seriesTimeline-status{ font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; opacity:.65; }

/* ---------- Award Ribbon ---------- */
.awardRibbon{ display:flex; flex-wrap:wrap; gap:1em; margin:1.6em 0; }
.awardBadge{ display:flex; align-items:center; gap:.6em; background:rgba(200,155,60,.12); border:1px solid var(--gold); border-radius:999px; padding:.5em 1.1em .5em .7em; font-size:.85rem; }
.awardBadge .awardIcon{ width:28px; height:28px; border-radius:50%; background:var(--gold); color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:.85rem; flex:none; }

/* ---------- Speaking Topic Panel ---------- */
.speakingPanel{ background:rgba(255,255,255,.6); border:1px solid rgba(0,0,0,.08); border-radius:20px; padding:1.8em; margin:1.4em 0; }
.world-watchers .speakingPanel, .world-speaking .speakingPanel{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.speakingPanel h3{ margin-bottom:.3em; }
.speakingPanel .speakingMeta{ display:flex; gap:1em; flex-wrap:wrap; font-size:.82rem; opacity:.75; margin-bottom:1em; }
.speakingPanel ul{ padding-left:1.2em; }
.speakingPanel ul li{ margin-bottom:.4em; }

/* ---------- Podcast Feature ---------- */
.podcastFeature{ display:flex; gap:1.6em; align-items:center; background:rgba(45,111,115,.08); border-radius:20px; padding:1.6em; margin:1.6em 0; flex-wrap:wrap; }
.podcastFeature .podcastArt{ width:120px; height:120px; border-radius:14px; object-fit:cover; flex:none; }
.podcastFeature .podcastMeta{ flex:1; min-width:220px; }
.podcastFeature .podcastPlatforms{ display:flex; gap:.7em; margin-top:.8em; flex-wrap:wrap; }
.podcastFeature .podcastPlatforms a{ font-size:.8rem; text-decoration:underline; }

/* ---------- Testimonial Slider (accessible, static-first: a horizontally
   scrollable row with scroll-snap — works with zero JS, keyboard and
   screen-reader friendly, and reads as a simple list if CSS fails) ---------- */
.testimonialSlider{ display:flex; gap:1.2em; overflow-x:auto; scroll-snap-type:x mandatory; padding:.5em .2em 1.2em; margin:1.6em 0; }
.testimonialSlider .testimonialCard{
  scroll-snap-align:start; flex:0 0 min(340px,85vw); background:rgba(255,255,255,.7); border-radius:18px;
  padding:1.4em; border:1px solid rgba(0,0,0,.06);
}
.world-watchers .testimonialSlider .testimonialCard, .world-speaking .testimonialSlider .testimonialCard{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); }
.testimonialSlider blockquote{ font-family:var(--display); font-style:italic; margin:0 0 .8em; }
.testimonialSlider cite{ font-style:normal; font-size:.82rem; opacity:.7; }


/* Cinematic Hero: full-bleed breakout. The block editor's layout CSS doesn't
   provide an alignfull grid rule inside .entry-content, so it renders
   constrained to the content column without this. */
.entry-content .cinematicHero.alignfull{
  width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
.cinematicHero.heroVideo .wp-block-cover__video-background{
  object-fit:cover; object-position:center 35%;
}
.cinematicHero .wp-block-cover__inner-container .eyebrow{ text-shadow:0 2px 12px rgba(0,0,0,.4); }
.cinematicHero .wp-block-cover__inner-container h1{ text-shadow:0 4px 24px rgba(0,0,0,.45); }

/* ---------- Cinematic video gallery ("World of the Watchers") ---------- */
.watcherReel{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:1em; margin:2em 0 2.5em;
}
@media (max-width:900px){ .watcherReel{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .watcherReel{ grid-template-columns:1fr; } }
.watcherReel-card{
  position:relative; border-radius:16px; overflow:hidden; aspect-ratio:9/16;
  box-shadow:0 16px 34px rgba(0,0,0,.35); background:#0c1728;
}
.watcherReel-card video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.watcherReel-card::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.85) 100%);
  pointer-events:none;
}
.watcherReel-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1em .9em; color:#fff;
  font-family:var(--fantasy); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
}

/* ---------- Trailer showcase ("Rise of the Nephilim") ---------- */
.trailerShowcase{
  margin:2em auto 2.5em; border-radius:20px; overflow:hidden; box-shadow:0 20px 50px -10px rgba(0,0,0,.5);
  background:#000; max-width:420px;
}
.trailerShowcase video{ width:100%; display:block; }