/* Featured content on the homepage:
   1. Super featured — primary pinned post rendered as a full inline article
      with a gradient fade-out and a "continue reading" link.
   2. Spotlight cards — 3-up row of secondary pinned posts with a mouse-tracking
      glow effect (see js/spotlight.js for the cursor logic).

   Replaces the old pinned-card grid styles from css/pinned.css. */


/* ---------- Super featured ---------- */

/* Wraps the primary pinned post in the same neithan-style container
   used by the sidebar panels — translucent dark well, faint border,
   chunky corners, backdrop blur. Note: this overrides the original
   spec's "no card, no box, no border" call after Jeni redirected the
   design to use containers on both columns. */
/* Sibling wrapper that hosts both the super-featured card and the
   pin. The pin lives OUT here (not inside .super-featured) so it
   doesn't get trapped in that card's stacking context — .super-featured
   has backdrop-filter which silently creates one. This wrap has no
   z-index-affecting properties, so the pin's z-index participates in
   the parent stacking context and can stack above the sticky hero. */
.super-featured-wrap {
  position: relative;
  margin-bottom: 0.5rem;
}

.super-featured {
  background: rgba(36, 26, 28, 0.4);
  border: 1px solid rgba(179, 0, 0, 0.18);
  border-radius: 16px;
  padding: 1.8rem 2rem 1.5rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Soft red halo so the border reads as lit rather than just drawn. */
  box-shadow: 0 0 18px rgba(139, 0, 0, 0.12);
}

/* Push-pin "pinning" the super-featured card to the page. SVG is drawn
   in side-perspective (round head, short needle below). We offset it up
   and slightly left of the corner with a small tilt so it reads as a
   real thumbtack pressed into the card, not a clipart sticker. Drop
   shadow falls down-right to imply a top-left light source consistent
   with the card's red halo. */
.featured-pin {
  position: absolute;
  top: -20px;
  left: 6px;
  width: 30px;
  height: 38px;
  transform: rotate(-10deg);
  transform-origin: 50% 35%;
  filter: drop-shadow(2px 4px 3px rgba(0, 0, 0, 0.55));
  pointer-events: none;
  /* Sits above the sticky hero (z-index: 40) so when the super-featured
     card scrolls up behind the hero, the pin stays visible at the top
     edge — reads as the pin "holding" the page even as content moves
     under it. */
  z-index: 50;
}

.sf-article { max-width: 720px; }

.sf-article__tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}

.sf-article__title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 0.6rem;
  color: var(--color-text);
}

.sf-article__meta {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.sf-article__date {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-date);
}

.sf-article__reading-time {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-label);
}

/* Article body uses the exact same .post__body styles as the blog post
   page (loaded via blog-post.css from index.html). We only need to wrap
   the rendered body in .post__body so the existing rules apply. */

.sf-article__body-wrap {
  position: relative;
  max-height: 520px;
  overflow: hidden;
  /* Fade the body text itself to transparent at the bottom (mask-image)
     rather than overlaying a gradient bg color. This way the container
     tint + dot field stay visible behind the fade region — no dark slab
     inside a lighter container. */
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}

/* Neutralize the .post__body's centered max-width inside the wrap —
   it's already constrained by .sf-article. */
.sf-article__body-wrap .post__body {
  max-width: none;
  margin: 0;
}

.sf-article__continue {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-red-bright);
  margin-top: 1.25rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.sf-article__continue svg {
  width: 12px;
  height: 12px;
  transition: transform var(--transition-fast);
}

.sf-article__continue:hover { color: var(--color-text); }
.sf-article__continue:hover svg { transform: translateX(3px); }


/* ---------- Spotlight cards ---------- */

.spotlight-section { padding: 3rem 0 0.5rem; }

.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* The outer card is the "border layer" — its 1.5px padding shows through
   between the inner card and the visible edge. A radial gradient anchored
   to the cursor position (--lx/--ly) paints that thin ring, producing
   the bright border-glow. Default state is a faint static ring so cards
   are still visible before any mouse movement. */

.spotlight-card {
  position: relative;
  display: block;
  padding: 1.5px;
  border-radius: 14px;
  text-decoration: none;
  /* Both gradient stops use CSS vars with transparent fallbacks so the
     border-ring glow is invisible at idle. The spotlight.js mousemove
     handler sets --glow-r and --glow-r-mid to the angle-based colors;
     mouseleave clears them so the ring fades back to nothing. */
  background:
    radial-gradient(circle 220px at var(--lx, 50%) var(--ly, 50%),
      var(--glow-r, transparent) 0%,
      var(--glow-r-mid, transparent) 25%,
      transparent 55%),
    rgba(255, 255, 255, 0.06);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smaller cousin of the super-featured pin, one per spotlight card.
   Anchored to the card's top-left, overlapping the upper edge. Per-card
   --tilt (set inline in spotlight HTML) gives each pin a slightly
   different angle for casual variety. GSAP drops these in from above
   in Spotlight.playEntrance() after the cards have risen into place;
   clearProps then hands rotation back to CSS using the same --tilt
   value, so the handoff is seamless. */
.spotlight-card__pin {
  position: absolute;
  top: -14px;
  left: 16px;
  width: 22px;
  height: 28px;
  transform: rotate(var(--tilt, -6deg));
  transform-origin: 50% 35%;
  filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5));
  pointer-events: none;
  z-index: 4;
}

.spotlight-card:hover { transform: translateY(-2px); }

.spotlight-card__inner {
  position: relative;
  border-radius: 12.5px;
  background: var(--color-surface);
  /* Subtle red rest-state border — matches the related-cards style on
     blog posts. Sits inside the 1.5px cursor-tracking ring on the outer
     .spotlight-card, so at idle only this faint line shows; on mousemove
     the outer ring glow lights up around it. */
  border: 1px solid rgba(204, 80, 80, 0.2);
  overflow: hidden;
  height: 100%;
}

/* Surface spotlight — sits ON TOP of the content via z-index so it
   illuminates the card face like a flashlight beam. Clipped to card
   bounds by the inner container's overflow:hidden.

   Multi-stop gradient gives the burst a real-spotlight falloff:
     0%   — hot warm-white core (bright pinpoint)
     10%  — the dynamic angle-driven color (--glow-surface from JS)
     40%  — soft warm-orange halo
     80%  — fully transparent (long diffuse fade)
   mix-blend-mode: screen makes it read as added light rather than
   overlay color, so the underlying card art shows through. */
.spotlight-card__glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle 170px at var(--lx, 50%) var(--ly, 50%),
    rgba(255, 220, 190, 0.22) 0%,
    var(--glow-surface, rgba(255, 180, 140, 0.22)) 15%,
    rgba(255, 110, 60, 0.1) 45%,
    transparent 85%);
  mix-blend-mode: screen;
  /* Default to 0 so the surface flashlight only appears when the
     cursor is actually over (or near) the card. spotlight.js sets
     this on mousemove and clears it on mouseleave. */
  opacity: var(--glow-intensity, 0);
  transition: opacity 200ms ease;
}

.spotlight-card__content {
  position: relative;
  z-index: 1;
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  height: 100%;
}

.spotlight-card__date {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-date);
}

.spotlight-card__title {
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0;
}

.spotlight-card__tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* Tag pill styling for spotlight cards is unified with the post-card
   and super-featured pills — see the shared selector group in
   css/blog-post.css. */

.spotlight-card__excerpt {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.spotlight-card__read {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-red-bright);
  margin-top: auto;
  padding-top: 0.4rem;
  transition: color var(--transition-fast);
}

.spotlight-card:hover .spotlight-card__read { color: var(--color-text); }


/* ---------- Responsive ---------- */

@media (max-width: 768px) {
  .sf-article__body-wrap { max-height: 400px; }
  .spotlight-grid { grid-template-columns: 1fr; }
  .spotlight-section { padding: 2rem 0 0.5rem; }
}