/* pattern-cardband.css — the blog index card band.
   Loaded by the render_block className convention for .valencia-cardband.

   Band 2 of the option C build: the recent-writing section head over the
   existing qcards grid. Both pieces already ship, so this sheet only
   spaces the band and sets the gap between head and cards. The cards
   themselves are pattern-qcards.css; the head is pattern-recent-writing
   (valencia-rw-head), which loads itself by its own class.

   Parent-qualified because core prints
   `:root :where(.is-layout-constrained) > * { margin-block-start: 24px }`
   into global-styles-inline-css AFTER the theme's enqueued sheets. At
   equal specificity the later rule wins, so a bare margin here computes
   to 24px with no warning. Cost two attempts on the single-post tags
   gap; see the 3.22.0 README. */
.valencia-content > .wp-block-group.valencia-cardband {
  margin-block-start: var(--wp--preset--spacing--xxl);
}

/* The head sits closer to its own cards than the band does to the lede
   above it, so the grouping reads without a rule between them. */
.valencia-cardband > .valencia-rw-head {
  margin-block-end: var(--wp--preset--spacing--lg);
}

/* The archive band below opens with its own head, so the card band
   closes on a hairline rather than running straight into it. */
.valencia-cardband {
  padding-bottom: var(--wp--preset--spacing--xl);
  border-bottom: 1px solid var(--wp--custom--rule);
}

/* Below the wide breakpoint, cancel `alignwide`. theme.json's wideSize is
   min(1120px, 100% - 2*md), so at phone width the band resolves NARROWER
   than the archive rows beneath it: measured 301 against 351 at 390, a
   25px inset on each side that nothing else on the page has. Same trap
   the single-post hero hit; see the 3.22.0 README.

   (0,3,0) to beat core's own `.wp-container-* > .alignwide` at (0,2,0),
   which sets the min() width and prints later in the cascade. */
@media (max-width: 781px) {
  .valencia-content > .wp-block-group.alignwide.valencia-cardband {
    max-width: none;
    margin-inline: 0;
  }
}


/* Eyebrow and title share a baseline across the row.

   The problem: the shared card rule is `justify-content: flex-end`, so
   the text stack is anchored at the BOTTOM and grows upward. A two-line
   title starts a line-height higher than a one-line one, and at 1440 the
   eyebrows sat at y=1196, 1221, 1196 across three cards — a 25px stagger
   on the first thing the eye lands on.

   Two fixes were tried and reverted, both worse:

   Top-anchoring the stack. In --plate the featured image is pinned
   top-right (top:-10px, 38% wide), and pattern-qcards.css clears it with
   `padding-right: 22%` on the title — a reserve tuned for bottom-aligned
   text, where only a three-line title ever climbed that high. Anchoring
   the top put every title AND eyebrow inside the plate's band: plate
   y 1062-1214 against a title at 1154-1203. Worse than the stagger.

   Reserving vertical space for the plate on top-anchored text. Cleared
   the title but left the eyebrow against the plate's lower edge, and
   pushed plated cards to y=1203 against unplated at y=1101 — a 100px
   split, four times the stagger it was meant to fix.

   What actually works is to keep the bottom anchor the plate depends on
   and give the TITLE a fixed height instead, so the stack above the date
   starts on a common line whatever the title length. Two lines is the
   cap the 4:3 card affords; a longer title ellipsizes rather than
   pushing the eyebrow up. Scoped to this band: the front page's grid
   uses the same pattern and is not part of this change. */
.valencia-cardband .valencia-qcard-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Exactly two lines, so a one-line title reserves the second. */
  min-height: calc(2 * 1.15em);
}

/* The section head. The label itself is a block style
   (is-style-valencia-section-label, registered in functions.php), so
   nothing about its look lives here — only the row it sits in. */