/* ============================================================================
 * Kate Angelo — Blog Archive Accordion (Olivia Benson, motion lead) — v1.2.0
 *
 * v1.2.9 (Daria) — FIX (M1): collapsed panel wasn't reaching true 0 height.
 * `.ka-blog-archive__panel-inner` — the element the 0fr/1fr grid trick
 * squeezes to zero — had its own `padding-top: 2px; padding-bottom: 26px;`
 * (28px total, matching exactly what a verification pass measured live).
 * `min-height: 0` and `overflow: hidden` (both already present) only
 * defeat INTRINSIC CONTENT sizing; neither one can shrink an element's own
 * explicit padding, which is always added to its rendered border-box
 * regardless of content height. Fix: that padding moved OFF this element
 * and onto its own children's margins instead (`.ka-blog-archive__panel-
 * body`'s `margin-top`, `.ka-blog-archive__panel-read`'s `margin-bottom`)
 * — see the "PADDING BUG" comment further below for the full writeup.
 * Net visual spacing when expanded is unchanged.
 *
 * Companion stylesheet for assets/blog-accordion.js. Rebuilds the
 * `.ka-blog-archive__row` list from a whole-row link into a stripe.dev/blog
 * style accordion: collapsed row = date + title + thumbnail peek + "+"
 * toggle (STRICT 4-column, single line, no wrap — v1.2.8); expanded panel
 * = excerpt, category tag pills, a (separate, larger) thumbnail, and a
 * full-width Read link.
 *
 * v1.2.8 (Daria) — COLLAPSED ROW REBUILT INTO A STRICT 4-COLUMN GRID:
 * date / title / thumbnail-peek / "+", left to right, one row, never
 * wrapping on desktop. Changes:
 *   - `.ka-blog-archive__toggle` is now `display: grid` with named grid-area
 *     columns (date/title/thumb/plus) instead of the old 2-slot flex
 *     (`.ka-blog-archive__meta` + `.ka-blog-archive__plus`). The PHP
 *     template (functions.php) no longer prints `.ka-blog-archive__meta` —
 *     date, title, and the new row-thumb are three independent grid
 *     children now.
 *   - Title is now a true single-line, ellipsis-truncated 24px heading
 *     (`white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`
 *     on the width-constrained `title` grid column) — it can never wrap to
 *     a second line on desktop, per the brief. Font-family (Oswald) lives
 *     in blog-archive.css; sizing/truncation lives here since that's this
 *     file's layout responsibility.
 *   - NEW `.ka-blog-archive__row-thumb` — a small ("peek") thumbnail in the
 *     collapsed row itself, reusing the SAME visual language as the existing
 *     expanded-panel thumbnail below (`.ka-blog-archive__panel-thumb`:
 *     rounded corners, `object-fit: cover`, `rgba(2,15,36,0.06)` placeholder
 *     fill for postless-thumbnail rows) just at a smaller "peek" scale
 *     (48×48 vs. the panel's 96×96) appropriate for a compact single-line
 *     row. This is IN ADDITION to the panel's own thumbnail, which stays —
 *     the brief only asked to move the EXCERPT out of the collapsed row;
 *     the panel's larger thumbnail was already there pre-v1.2.8 and is
 *     left untouched as part of the expanded detail view.
 *   - No excerpt text of any kind appears in the collapsed row — it never
 *     did in the toggle button's own markup (confirmed: `.ka-blog-archive__
 *     panel-excerpt` has only ever lived inside `.ka-blog-archive__panel`,
 *     since the v1.2.1 accordion rework) — this round doesn't need to move
 *     anything, only confirm it and keep it that way.
 *   - Responsive: below 768px (this component's own row-layout breakpoint —
 *     distinct from blog-archive.css's existing 860px rail-stack
 *     breakpoint, which governs the unrelated rail/list two-column split)
 *     the row switches to a 2×2 grid: title (full width, up to 2 lines,
 *     wraps instead of truncating) + "+" on row one, date + thumb-peek on
 *     row two. See the media query below for the exact area map.
 *
 * Load order: this file must be enqueued AFTER blog-archive.css (declare it
 * as a dependency) — it reuses that file's tokens (--ka-ink, --ka-gold,
 * --ka-gold-ink, --ka-bg, --ka-hairline, all declared on `.ka-blog-archive`)
 * and its selectors are intentionally more specific/later in the cascade so
 * they win over that file's now-superseded `.ka-blog-archive__row-link` /
 * `.ka-blog-archive__thumb` / `.ka-blog-archive__excerpt` rules for the row
 * itself. NOTE FOR DARIA: once the PHP template stops printing those three
 * classes (replaced by the toggle/panel structure below), their rules in
 * blog-archive.css are dead code — safe to delete them there, they do
 * nothing here.
 *
 * FAILSAFE PRINCIPLE (same discipline as blog-scroll-reveal.css /
 * kate-book-manager's `.kbm-anim` guard):
 *   - blog-accordion.js adds `ka-blog-accordion-js` to <html> as its first
 *     line. Every rule that visually COLLAPSES a panel is scoped under that
 *     class. If the script never loads, throws, or is blocked, that class
 *     never appears and every panel simply renders open — a plain, fully
 *     readable list (excerpt, tags, thumbnail, Read link all visible),
 *     never a dead end behind a broken toggle.
 *
 * COLOR SYSTEM: gold #F5D000 is this component's one CTA/interactive accent
 * (already used sitewide in blog-archive.css for active-nav-state fills and
 * pagination hover/current). The Read button reuses that same gold-as-
 * background language for consistency. Pink #DF6176 (Kate's feminine accent,
 * reserved for personal-brand moments) makes a single deliberate cameo
 * here: as one of the two hues in the slow hover color-cycle sweep, never as
 * a solid fill — see the "ROW HOVER" section below for the reasoning.
 * ==========================================================================
 */

.ka-blog-archive__row-heading {
  margin: 0;
}

/* ── Collapsed row: the toggle button ─────────────────────────────────── */
.ka-blog-archive__toggle {
  /* Reset UA button chrome — this needs to look and lay out exactly like
     the old whole-row <a>, just as a <button> now (real button = free,
     native Enter/Space keyboard activation, see the JS file header). */
  appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;

  position: relative;
  isolation: isolate; /* keeps the ::before glow layer behind this button's
                          own text without needing z-index on the spans */
  display: grid;
  /* Strict 4-column single row: date | title (flexible, truncates) |
     thumbnail peek | "+" toggle. Column widths are fixed for date/thumb/
     plus so the flexible `minmax(0, 1fr)` title column gets all remaining
     space — required for its ellipsis truncation to work at all (a
     min-width:0 grid track, not the default `auto`, is what lets
     `text-overflow: ellipsis` actually clip instead of overflowing the
     row). */
  grid-template-columns: 96px minmax(0, 1fr) 48px 20px;
  grid-template-areas: "date title thumb plus";
  align-items: center;
  width: 100%;
  column-gap: 20px;
  padding: 22px 10px;
  border-radius: 4px;
}

/* Static base tint — applied immediately on hover/focus, independent of
   the animated cycle below, so keyboard/mouse users always get instant
   feedback even before the cycle layer has faded in. */
.ka-blog-archive__toggle:hover,
.ka-blog-archive__toggle:focus-visible {
  background: rgba(2, 15, 36, 0.03);
}

.ka-blog-archive__toggle:focus-visible {
  outline: 2px solid var(--ka-gold-ink);
  outline-offset: 2px;
}

.ka-blog-archive__toggle:hover .ka-blog-archive__title,
.ka-blog-archive__toggle:focus-visible .ka-blog-archive__title {
  color: var(--ka-gold-ink);
}

/* ── ROW HOVER — the color-cycle sweep ────────────────────────────────────
 * Technique: a CSS `::before` layer holding an oversized gold/pink gradient
 * (`background-size: 260% 100%`) whose `background-position` is animated by
 * a looping keyframe. The animation is always PAUSED by default and only
 * set to `running` while `:hover`/`:focus-visible` is active — CSS keeps an
 * animation's current position when paused rather than resetting it, so:
 *   - the longer the cursor stays over a row, the further the gradient
 *     visibly travels (a full sweep takes 7s — a quick hover shows a
 *     sliver of color drift, a lingering hover completes the loop and
 *     starts again), which is the "shifts/cycles the longer you hover"
 *     behaviour the brief asks for;
 *   - re-hovering the same row later resumes from wherever it last paused,
 *     rather than always restarting at the same frame — a small, premium
 *     touch rather than a mechanical repeat.
 * Opacity (not the animation itself) controls visibility, so mouse-leave is
 * a clean 0.45s fade-out rather than an abrupt cut mid-sweep.
 * Colors are deliberately low-alpha (0.14–0.22) — a tint, not a wash — to
 * read as "premium ambient shimmer," matching the brief's "subtle enough to
 * feel premium rather than distracting."
 */
.ka-blog-archive__toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 4px;
  background-image: linear-gradient(
    115deg,
    rgba(245, 208, 0, 0.20) 0%,
    rgba(223, 97, 118, 0.16) 30%,
    rgba(245, 208, 0, 0.22) 55%,
    rgba(223, 97, 118, 0.14) 80%,
    rgba(245, 208, 0, 0.20) 100%
  );
  background-size: 260% 100%;
  background-position: 0% 50%;
  opacity: 0;
  transition: opacity 0.45s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .ka-blog-archive__toggle::before {
    animation: ka-blog-row-glow 7s ease-in-out infinite;
    animation-play-state: paused;
  }
  .ka-blog-archive__toggle:hover::before,
  .ka-blog-archive__toggle:focus-visible::before {
    opacity: 1;
    animation-play-state: running;
  }
  @keyframes ka-blog-row-glow {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
}

/* REDUCED MOTION: no continuous/looping animation at all — a single static
   gold/pink-tinted frame on hover/focus, no keyframe, no play-state. This
   is the ONLY place this component disables motion; the accordion
   expand/collapse below stays a (near-)instant functional transition per
   the brief, since it's not decorative. */
@media (prefers-reduced-motion: reduce) {
  .ka-blog-archive__toggle:hover::before,
  .ka-blog-archive__toggle:focus-visible::before {
    opacity: 1;
  }
}

/* ── Collapsed row — 4 grid columns ───────────────────────────────────────
   date / title / thumbnail-peek / "+" — see file header for the full
   v1.2.8 rationale. */
.ka-blog-archive__date {
  grid-area: date;
  white-space: nowrap;
}

.ka-blog-archive__title {
  grid-area: title;
  min-width: 0; /* required for text-overflow: ellipsis to actually clip
                   inside a grid/flex child instead of being ignored */
  font-size: 24px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ka-blog-archive__row-thumb {
  grid-area: thumb;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(2, 15, 36, 0.06);
  /* Same visual language as .ka-blog-archive__panel-thumb below (rounded,
     cropped, same placeholder fill), just at "peek" scale for the
     collapsed row. Marked aria-hidden in the PHP template — decorative
     here; the post's accessible name/description comes from the title
     text and (once expanded) the panel's own content, not this peek. */
}
.ka-blog-archive__row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ka-blog-archive__row-thumb .ka-blog-archive__thumb-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── "+" / "×" toggle icon ─────────────────────────────────────────────── */
.ka-blog-archive__plus {
  grid-area: plus;
  position: relative;
  width: 18px;
  height: 18px;
  justify-self: end;
  transition: transform 0.25s ease;
}
.ka-blog-archive__plus::before,
.ka-blog-archive__plus::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ka-ink);
  transform: translate(-50%, -50%);
}
.ka-blog-archive__plus::before {
  width: 14px;
  height: 2px;
}
.ka-blog-archive__plus::after {
  width: 2px;
  height: 14px;
}
/* Driven directly off the button's own aria-expanded — always accurate,
   no dependency on the row-level `is-open` class used for the panel below. */
.ka-blog-archive__toggle[aria-expanded='true'] .ka-blog-archive__plus {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .ka-blog-archive__plus {
    transition: none;
  }
}

/* ── Expanded panel ────────────────────────────────────────────────────── */
/* Base (no-JS) state: fully open, fully in normal flow, fully readable.
   `grid-template-rows: 1fr` on a 1-row grid with a `min-height: 0` inner
   child is just "auto height" here — nothing is being animated yet. */
.ka-blog-archive__panel {
  display: grid;
  grid-template-rows: 1fr;
}
.ka-blog-archive__panel-inner {
  min-height: 0;
  overflow: hidden; /* clips DURING the collapse transition; harmless here */
  /* v1.2.9 fix — see the removed padding-top/padding-bottom rule further
     below (search "PADDING BUG") for why this element must carry NO
     vertical padding of its own. */
}

/* Only once JS confirms it's driving the interaction do rows default to
   collapsed. `grid-template-rows` interpolating to/from `0fr`/`1fr` is
   supported in current evergreen browsers; where it isn't, the row still
   functions correctly (JS still toggles `is-open` and `aria-expanded`) —
   it just snaps instead of animating, which is an acceptable degrade per
   the brief ("functional interaction... can keep an instant transition"). */
html.ka-blog-accordion-js .ka-blog-archive__panel {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
html.ka-blog-accordion-js .ka-blog-archive__row.is-open .ka-blog-archive__panel {
  grid-template-rows: 1fr;
}

@media (prefers-reduced-motion: reduce) {
  html.ka-blog-accordion-js .ka-blog-archive__panel {
    transition-duration: 0.01s; /* near-instant, not fully disabled — this
                                    is a functional state change, not
                                    decorative motion, per the brief. */
  }
}

/* ── Panel contents ────────────────────────────────────────────────────── */
.ka-blog-archive__panel-inner > * {
  padding-left: 10px;
  padding-right: 10px;
}

/* v1.2.9 fix — PADDING BUG (root cause of the "collapsed row is 28px, not
   0px" bug):
   `.ka-blog-archive__panel-inner` is the element the 0fr/1fr grid trick
   above actually squeezes to zero height — but it used to ALSO carry its
   own `padding-top: 2px; padding-bottom: 26px;` right here. That's the
   exact 28px the verification pass measured. `min-height: 0` (above) only
   defeats the grid item's INTRINSIC CONTENT-derived minimum size; it does
   nothing to an explicit `padding` declared directly on that same element,
   because padding is always added to an element's own rendered border-box
   on top of its (now-zero) content-box height, REGARDLESS of content size.
   `overflow: hidden` on that same element doesn't help either — overflow
   only clips a box's overflowing CHILDREN/content, it can never clip the
   box's own padding, so the two "usual" 0fr-collapse fixes (min-height:0
   + overflow:hidden) were both already in place and still couldn't reach
   a true 0px, because the actual defect (padding ON the collapsing grid
   item itself) is a different bug than the intrinsic-sizing gotcha those
   two rules fix.
   Fix: move that same 2px/26px vertical spacing OFF this element (which
   must stay padding-free so its rendered height can truly reach 0) and
   onto the NESTED children one level down instead (`.ka-blog-archive__
   panel-body`'s margin-top below, `.ka-blog-archive__panel-read`'s
   margin-bottom further down) — a descendant's own margin/padding never
   contributes to an ancestor's height when that ancestor's height is
   assigned by the grid (stretch alignment into a 0px track) rather than
   derived from its content, and any resulting visual overflow from that
   descendant is exactly what `.ka-blog-archive__panel-inner`'s own
   `overflow: hidden` DOES correctly clip (descendant content, unlike the
   element's own padding). Net visual spacing when expanded is unchanged —
   2px above the body, 26px below the Read button — this is purely a
   "move the paint, not the total space" fix. */

.ka-blog-archive__panel-body {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-top: 2px;
  margin-bottom: 20px;
}

.ka-blog-archive__panel-text {
  flex: 1 1 auto;
  min-width: 0;
}

.ka-blog-archive__panel-excerpt {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(2, 15, 36, 0.72);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ka-blog-archive__panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.ka-blog-archive__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(2, 15, 36, 0.06);
  color: var(--ka-ink);
  font-family: 'Space Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s ease;
}
.ka-blog-archive__tag:hover,
.ka-blog-archive__tag:focus-visible {
  background: var(--ka-gold);
}

/* Thumbnail — positioned where Stripe would place an author photo, but
   purely a visual thumbnail here (no byline; per brief, it's always Kate). */
.ka-blog-archive__panel-thumb {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(2, 15, 36, 0.06);
}
.ka-blog-archive__panel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ka-blog-archive__panel-thumb .ka-blog-archive__thumb-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

/* Read button — full width, gold fill / navy text (the archive's
   established gold-as-action-background language; see file header for why
   pink was reserved for the hover-cycle cameo instead of this fill).
   Hover/focus inverts to navy fill / gold text — a deliberate reversal
   micro-interaction rather than a simple darken, distinct from the ambient
   row-hover cycle above so the CTA still reads as its own decisive action. */
.ka-blog-archive__panel-read {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 20px);
  margin: 0 10px 26px; /* v1.2.9: bottom margin replaces the removed
    panel-inner padding-bottom, see the "PADDING BUG" note above */
  padding: 14px 18px;
  background: var(--ka-gold);
  color: var(--ka-ink);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.ka-blog-archive__panel-read:hover,
.ka-blog-archive__panel-read:focus-visible {
  background: var(--ka-ink);
  color: var(--ka-gold);
  transform: translateY(-1px);
}
.ka-blog-archive__panel-read-arrow {
  transition: transform 0.2s ease;
}
.ka-blog-archive__panel-read:hover .ka-blog-archive__panel-read-arrow,
.ka-blog-archive__panel-read:focus-visible .ka-blog-archive__panel-read-arrow {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .ka-blog-archive__panel-read,
  .ka-blog-archive__panel-read-arrow {
    transition: none;
  }
  .ka-blog-archive__panel-read:hover,
  .ka-blog-archive__panel-read:focus-visible {
    transform: none;
  }
}

/* ── Responsive ────────────────────────────────────────────────────────── */

/* v1.2.8 — COLLAPSED ROW, below 768px: a rigid 4-column single-row layout
   doesn't work once a 24px title has to share a line with a date, a
   thumbnail, AND a toggle on a narrow viewport, so below this breakpoint
   the row becomes a compact 2×2 grid instead:
     Row 1: title (full width, allowed to wrap up to 2 lines — NOT
            truncated on mobile, since there's more usable width here than
            in the cramped desktop title column) ...... "+" toggle
     Row 2: date .............................. thumbnail peek (smaller)
   768px matches this project's established tablet/mobile breakpoint
   convention. It's a NEW breakpoint for this specific component (the
   existing rail/list two-column split in blog-archive.css uses its own
   860px breakpoint for an unrelated concern — when the left filter rail
   drops above the post list — and is untouched by this change). */
@media (max-width: 768px) {
  .ka-blog-archive__toggle {
    /* Second column is sized for the thumbnail peek (48px) — the "+"
       toggle shares that same column on row 1 and is right-aligned within
       it via justify-self: end, so both fit cleanly without a separate,
       too-narrow column of their own. */
    grid-template-columns: 1fr 48px;
    grid-template-areas:
      "title plus"
      "date  thumb";
    row-gap: 8px;
    column-gap: 14px;
  }
  .ka-blog-archive__title {
    font-size: 19px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .ka-blog-archive__row-thumb {
    justify-self: end;
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 600px) {
  .ka-blog-archive__panel-body {
    flex-direction: column-reverse;
    gap: 14px;
  }
  .ka-blog-archive__panel-thumb {
    flex-basis: auto;
    width: 100%;
    height: 160px;
  }
}
@media (max-width: 480px) {
  .ka-blog-archive__toggle {
    padding: 18px 10px;
  }
  .ka-blog-archive__title {
    font-size: 17px;
  }
}