/* Blog styling — post pages + index grid. Built on tokens.css variables. */
/* Finalized in Task 11. Reuses site.css .wrap/.card/.crumb where possible;
   everything here is blog-specific layout/coherence on top of that. */

/* ============================================================
   Shared headings (both blog-post and blog-index use a bare <h1>)
   ============================================================ */
.blog-post h1,
.blog-index h1 {
  margin: var(--sp-6) 0 var(--sp-3);
  font-weight: var(--fw-heading);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  color: var(--hp-ink);
  overflow-wrap: anywhere;
}

/* ============================================================
   Post page
   ============================================================ */
.blog-post .wrap { max-width: 760px; }

.byline {
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--hp-muted);
}

.blog-post .chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0 0 var(--sp-8);
}
.blog-post .chips:empty { display: none; }

.hero { margin: 0 0 var(--sp-9); }
.hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-card-lg);
}
.hero .video-facade { margin: 0; }

/* ---- Prose: rendered markdown body ---- */
.prose {
  /* Long-form reading size: 14px body in a 760px column ran 104 characters per line; 18px
     brings it to ~84, inside the 45–85 readability range, without narrowing the column. */
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--hp-body);
}
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 var(--sp-6); }
.prose h2 {
  margin: var(--sp-9) 0 var(--sp-4);
  font-weight: var(--fw-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--hp-ink);
}
.prose h3 {
  margin: var(--sp-8) 0 var(--sp-3);
  font-weight: var(--fw-heading);
  font-size: var(--fs-faq-q);
  line-height: var(--lh-faq-q);
  color: var(--hp-ink);
}
.prose ul,
.prose ol {
  margin: 0 0 var(--sp-6);
  padding-left: var(--sp-8);
}
.prose li { margin-bottom: var(--sp-2); }
.prose li:last-child { margin-bottom: 0; }
.prose a { color: var(--hp-blue-link); text-decoration: underline; overflow-wrap: anywhere; }
.prose strong { color: var(--hp-ink); font-weight: var(--fw-semibold); }
.prose blockquote {
  margin: var(--sp-8) 0;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-6);
  border-left: 3px solid var(--hp-blue);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--hp-ink);
}
.prose img {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--sp-8) 0;
  border-radius: var(--r-card-sm);
}
.prose .video-facade { margin: var(--sp-9) 0; }
/* Legacy anchor ids (front-matter `anchors:`), emitted as empty spans before their heading. */
.prose .anchor-alias { display: block; height: 0; }

/* ---- Related guides ---- */
.related {
  margin-top: var(--sp-16);
  padding-top: var(--sp-12);
  border-top: 1px solid var(--hp-hairline);
}
.related h2 {
  margin: 0 0 var(--sp-6);
  font-weight: var(--fw-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--hp-ink);
}
.rel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}
.rel-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6);
  border-radius: var(--r-card);
  background: var(--hp-sand);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.rel-card:hover { transform: translateY(-3px); }
.rel-title {
  font-weight: var(--fw-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--hp-ink);
}
.rel-ex {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--hp-body);
}

/* ============================================================
   Index page
   ============================================================ */
.blog-index .lede { max-width: 640px; font-size: var(--fs-lead); color: var(--hp-body); }

.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-6) 0; }
.fbtn {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: var(--sp-2) var(--sp-5);
  border: none;
  border-radius: var(--r-pill);
  background: var(--hp-sand);
  color: var(--hp-ink);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.fbtn:hover { background: var(--hp-nav-pink); }
.fbtn.is-on { background: var(--hp-blue); color: var(--hp-on-blue); }
.fbtn.is-on:hover { background: var(--hp-blue); }

/* ---- Index: card grid ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-8);
  margin-top: var(--sp-6);
}

a.card {
  display: block;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur) var(--ease-out);
}
a.card:hover { transform: translateY(-3px); }
/* Real hero thumbnail (a direct <img> child of the card). */
.card > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-card-sm);
  background: var(--hp-sand);
  margin-bottom: var(--sp-4);
}
/* Image-less placeholder slot: flex-centers the logo lock-up. Separate from the
   hero rule above — sharing it applied `display:flex` to real <img>s, which broke
   their aspect-ratio (they fell back to the height attribute) and stretched cards. */
.card .card-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-card-sm);
  background: var(--hp-sand);
  margin-bottom: var(--sp-4);
}
/* Branded placeholder: the Hopscotch Play logo lock-up, mirroring the nav (.lock).
   The bug is a 61x43 bitmap with no higher-res/vector source, so it is rendered at
   (below) its native size — never upscaled — to stay crisp on hi-DPI screens; the
   wordmark is scaled to match. Aspect ratio preserved via width:auto. */
.card .card-noimg img { height: 21px; width: auto; }
.card .card-noimg .ni-w { font-size: 16px; letter-spacing: -0.3px; color: var(--hp-blue); line-height: 1; }
.card .card-noimg .ni-p { font-family: var(--font-display); font-size: 17px; color: var(--hp-blue); line-height: 1; }
.card-title {
  margin: 0 0 var(--sp-1);
  font-weight: var(--fw-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--hp-ink);
}
.card-ex {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--hp-body);
}
.card-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0; }
.card[hidden] { display: none; }

.card-chips .chip,
.chips .chip {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--hp-sand);
  color: var(--hp-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  text-decoration: none;
}
.card-chips .chip:hover,
.chips .chip:hover { background: var(--hp-nav-pink); }

/* ---- Click-to-load video facade (post hero + inline @video: blocks) ---- */
.video-facade { position: relative; }
.video-facade iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: var(--r-card-lg);
}
.video-play {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.video-play img { display: block; width: 100%; height: auto; border-radius: var(--r-card-lg); }
.video-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--hp-sand);
  border-radius: var(--r-card-lg);
}
.video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-11);
  height: var(--sp-11);
  transform: translate(-50%, -50%);
  border-radius: var(--r-full);
  background: var(--hp-coral);
  color: var(--hp-white);
  font-size: var(--fs-h3);
  box-shadow: var(--shadow-coral-lg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.video-play:hover .video-icon { transform: translate(-50%, -50%) scale(1.06); }

/* Keyboard focus visibility (a11y: golden rule — keyboard-operable). */
.fbtn:focus-visible,
a.card:focus-visible,
.rel-card:focus-visible,
.prose a:focus-visible,
.card-chips .chip:focus-visible,
.chips .chip:focus-visible {
  outline: 2px solid var(--hp-blue);
  outline-offset: 2px;
}
.video-play:focus-visible {
  outline: 3px solid var(--hp-blue);
  outline-offset: 3px;
  border-radius: var(--r-card-lg);
}

@media (max-width: 900px) {
  .rel-grid { grid-template-columns: 1fr; }
}