/* ============================================
   Shared tutorial-detail styling
   Used by all four detail pages under tutorials/items/.
   Tutorial-specific decorative styles (cast cards,
   library badges, workflow strip, etc.) stay inline
   in the qmd that needs them.
   ============================================ */

/* ── Tutorial cinematic hero ────────────────────────────────────────────────
   The painting sits flush against the navbar's bottom edge (no bleed, no gap).
   Elements are scattered across the canvas like a film poster:
     bottom-left → title, then authors · date one line below
     bottom-right → allegorical caption (italic, right-aligned)
   Two gradient layers:
     ::before  radial vignette — clear ellipse over the focal point,
               soft edge darkening (atmospheric, no bottom stacking)
     ::after   bottom dissolve — transparent through 20% then ramps to
               solid body bg (oklch 5% 0.005 230) at the floor. Endpoint
               MUST match body bg or a hard seam appears at the boundary;
               see ~/.claude/.../memory/feedback_body_bg_color.md
   ─────────────────────────────────────────────────────────────────────────── */
.tutorial-hero {
  position: relative;
  /* positionHero() in JS sets width, margin-left, and height exactly at runtime.
     These are no-JS fallbacks only. */
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 10;
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  animation: tutorialHeroIn 1.4s ease forwards;
}

@keyframes tutorialHeroIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tutorial-hero-img { display: none; }

/* Layer 1 — radial vignette: clear ellipse over the focal point, soft edge darkening */
.tutorial-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 35%,
    transparent            25%,
    rgba(15, 20, 25, 0.22) 70%,
    rgba(15, 20, 25, 0.38) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Layer 2 — bottom dissolve into the actual site body color.
   Endpoint must match body bg (oklch 5% 0.005 230, NOT #0F1419) or a
   visible seam appears at the hero/body boundary. Mid-stops climb hard
   so the dissolve reads as a gradient over dark source imagery. */
.tutorial-hero::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70%;
  background: linear-gradient(
    to bottom,
    transparent                  0%,
    rgba(10, 13, 16, 0.18)      20%,
    rgba(10, 13, 16, 0.55)      50%,
    rgba(10, 13, 16, 0.88)      78%,
    oklch(5% 0.005 230)        100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Positioning layer — spans the full hero, no background of its own */
.tutorial-hero-content {
  position: absolute;
  inset: 0;
  background: none;
  z-index: 3;
}

/* Every child: fade + drift up on entrance */
.tutorial-hero-content > * {
  position: absolute;
  opacity: 0;
  transform: translateY(14px);
  animation: heroChildIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── Title — bottom-left ── */
.tutorial-hero-title {
  bottom: 5.2rem;
  left: 2.8rem;
  right: 36%;
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 2.6rem);
  color: rgba(255, 255, 255, 0.90);
  letter-spacing: 0.015em;
  line-height: 1.22;
  margin: 0;
  animation-delay: 0.38s;
}

/* ── Authors · Date — one line below the title ── */
.tutorial-hero-content .pub-meta { display: none; } /* date folded into authors line */
.tutorial-hero-content .pub-authors {
  bottom: 3.8rem;
  left: 2.8rem;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.30);
  letter-spacing: 0.04em;
  animation-delay: 0.55s;
}
.tutorial-hero-content .pub-authors strong {
  color: rgba(100, 181, 246, 0.55);
  font-weight: 400;
}

/* ── Allegorical caption — bottom-right, right-aligned ── */
.tutorial-allegory {
  bottom: 4.0rem;
  right: 2.8rem;
  max-width: 30%;
  text-align: right;
  margin: 0;
  padding: 0;
  border: none;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.72rem;
  font-style: italic;
  color: rgba(235, 220, 195, 0.30);
  line-height: 1.75;
  letter-spacing: 0.01em;
  animation-delay: 0.70s;
}

.tutorial-allegory .painting {
  display: block;
  font-style: normal;
  font-weight: 500;
  color: rgba(212, 178, 120, 0.75);
  margin-bottom: 0.25rem;
  font-size: 0.63rem;
  letter-spacing: 0.05em;
}

.tutorial-allegory .location {
  display: block;
  font-style: normal;
  font-size: 0.59rem;
  color: rgba(185, 160, 110, 0.52);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  font-weight: 400;
}

/* ── Mobile ─────────────────────────────────────────────────────────────────
   background-size: cover (set above) handles portrait viewports fine, so no
   mobile override needed. Just reposition text and hide the allegory caption.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .tutorial-hero-title {
    bottom: 5.2rem;
    left: 1.2rem;
    right: 1.2rem;
    font-size: clamp(1.3rem, 5.5vw, 1.8rem);
    line-height: 1.18;
  }

  .tutorial-hero-content .pub-authors {
    bottom: 3.8rem;
    left: 1.2rem;
  }

  .tutorial-allegory { display: none; }
}

/* Hide any stray pub-divider that immediately follows the hero */
.tutorial-hero + .pub-divider { display: none; }

/* ── Layout — extended width for visual breathing room ── */
.pub-detail #quarto-content {
  max-width: 1380px;
  padding: 0 2.4rem 5rem;
}
@media (min-width: 1500px) {
  .pub-detail #quarto-content { max-width: 1500px; }
}
@media (min-width: 1700px) {
  .pub-detail #quarto-content { max-width: 1620px; }
}

/* ── Sticky right-margin TOC (publications + right-TOC tutorials) ── */
.pub-detail #quarto-margin-sidebar {
  position: sticky !important;
  top: 90px !important;
  padding-top: 1.2rem;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  visibility: hidden; /* JS reveals after hero scrolls out — prevents TOC flash */
  background: transparent !important;
}

/* ── Left TOC: flows below the hero, not sticky ────────────────────────────
   #quarto-sidebar only appears when toc-location: left is set.
   JS positionHero() sets padding-top to the exact hero height so TOC links
   start precisely where the hero ends. visibility:hidden prevents the TOC
   flashing before JS fires; JS sets it to visible after positioning.
   ─────────────────────────────────────────────────────────────────────────── */
.pub-detail #quarto-sidebar {
  position: static !important;
  padding-top: 88vh; /* JS overrides with exact hero height */
  max-height: none !important;
  overflow-y: visible !important;
  visibility: hidden; /* JS reveals after hero is positioned */
  background: transparent !important;
}

/* Kill the white background Quarto applies to sidebar-navigation */
.pub-detail nav.sidebar.sidebar-navigation,
.pub-detail .sidebar.margin-sidebar {
  background: transparent !important;
  background-color: transparent !important;
}

/* Code chunk styling (Solarized Dark, syntax classes, copy button, inline
   code, code-fold toggle, filename labels) lives in global styles.css so
   every page on the site reads the same. No tutorial-specific overrides
   here — they used to add a top margin that broke the seamless filename ->
   code-block frame on tutorials. */

/* ── Section headings — gradient bar + FA icon ── */
.pub-detail h2 {
  margin-top: 3.2rem;
  padding-top: 0.6rem;
  font-family: 'Quicksand', sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.pub-detail h2::before {
  content: "";
  flex: 0 0 auto;
  width: 100%;
  max-width: 64px;
  height: 2px;
  margin: 0;
  background: linear-gradient(90deg, #64B5F6, transparent);
  border-radius: 2px;
  align-self: center;
  order: -1;
}
.pub-detail h2 i.fa-solid,
.pub-detail h2 .fa-solid {
  color: #64B5F6;
  font-size: 0.78em;
  margin-right: 0.15rem;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 6px rgba(100,181,246,0.35));
}

/* Re-enable the navbar scroll-progress line — only for tutorials, since
   this stylesheet is loaded only on tutorial detail pages. The global
   rule in styles.css hides .nav-progress on every other page. */
.nav-progress {
  display: block !important;
}

/* ───────────────────────────────────────────────
   Buttons — unified, restrained rectangle style.
   Slight 4px corner radius, hairline border,
   thin Inter Tight 400 for an editorial feel.
   Applies to:
     .pub-cta a         (bottom CTAs)
     .embed-fullscreen  (slide-embed header — quanteda)
     .pdf-fullscreen    (PDF-embed header — fairness)
   ─────────────────────────────────────────────── */
/* Render as quiet text links rather than visible buttons. No background,
   no border, no shadow — just typography with a subtle underline that
   appears on hover. */
.pub-detail .pub-cta a,
.pub-detail .embed-fullscreen,
.pub-detail .pdf-fullscreen {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  position: relative;
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  color: rgba(220, 230, 240, 0.78);
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.15rem 0 !important;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: none !important;
  transition: color 0.25s ease;
}

/* Animated underline that wipes in on hover */
.pub-detail .pub-cta a::after,
.pub-detail .embed-fullscreen::after,
.pub-detail .pdf-fullscreen::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: rgba(100, 181, 246, 0.55);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.pub-detail .pub-cta a:hover,
.pub-detail .embed-fullscreen:hover,
.pub-detail .pdf-fullscreen:hover {
  color: #ffffff;
  text-decoration: none !important;
}
.pub-detail .pub-cta a:hover::after,
.pub-detail .embed-fullscreen:hover::after,
.pub-detail .pdf-fullscreen:hover::after {
  transform: scaleX(1);
}

/* FontAwesome icons inside the buttons inherit the editorial blue accent */
.pub-detail .pub-cta a i,
.pub-detail .pub-cta a .fa-solid,
.pub-detail .pub-cta a .fa-brands,
.pub-detail .embed-fullscreen i,
.pub-detail .pdf-fullscreen i {
  color: #64B5F6;
  font-size: 0.88em;
  filter: drop-shadow(0 0 4px rgba(100, 181, 246, 0.28));
  transition: color 0.28s ease, filter 0.28s ease;
}
.pub-detail .pub-cta a:hover i,
.pub-detail .pub-cta a:hover .fa-solid,
.pub-detail .pub-cta a:hover .fa-brands,
.pub-detail .embed-fullscreen:hover i,
.pub-detail .pdf-fullscreen:hover i {
  color: #ffffff;
  filter: drop-shadow(0 0 6px rgba(100, 181, 246, 0.5));
}

/* Slide/PDF header text-links — slightly smaller than the bottom CTAs */
.pub-detail .embed-fullscreen,
.pub-detail .pdf-fullscreen {
  font-size: 0.78rem;
}

/* Bottom text-links — center-aligned row with breathing room so the three
   links sit on one tidy line, separated by a thin vertical divider. */
.pub-detail .pub-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 2.8rem;
}

/* ───────────────────────────────────────────────
   Slide / PDF embed header bar — toned-down look
   to match the new button style. Same selectors
   apply across all tutorials.
   ─────────────────────────────────────────────── */
.pub-detail .embed-head,
.pub-detail .pdf-embed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.2rem;
  background: transparent;
  border: none;
  border-radius: 0;
}

.pub-detail .embed-head-title,
.pub-detail .pdf-embed-title {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.86rem;
  letter-spacing: 0.015em;
  color: rgba(245, 248, 252, 0.94);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.pub-detail .embed-head-title i,
.pub-detail .pdf-embed-title i {
  color: #64B5F6;
  font-size: 0.88em;
}

.pub-detail .embed-frame,
.pub-detail .pdf-frame {
  width: 100%;
  border: none;
  border-radius: 4px;
  display: block;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.pub-detail .embed-frame  { aspect-ratio: 16 / 9; background: #ffffff; }
.pub-detail .pdf-frame    { aspect-ratio: 4 / 3; background: rgba(15, 20, 28, 0.5); }