/* -----------------------------------------------
   PATTERN: valencia/query-list

   A dated index: date left, title centre, category right, hairline
   rules between. Reads as a table of contents rather than a feed.

   DELIBERATELY MINIMAL. The post count, order, date format, and every
   spacing and colour token are BLOCK ATTRIBUTES in
   patterns/query-list.php — select the block and change them in the
   editor sidebar. Anything a block support can express belongs there,
   not here: file CSS at 0-1-0 out-specifies what the editor writes, so
   a rule in this file makes the matching sidebar control silently do
   nothing.

   What follows is only what block supports cannot reach: the three
   column grid (the row's children are three sibling blocks with no
   layout of their own), the hairlines, and the entry-content underline
   reset.
   ----------------------------------------------- */

/* The row is a grid so the three columns align down the whole list
   rather than each row sizing itself. `auto` on the last column keeps
   the category tight to its text and hard against the right edge. */
.valencia-qlist-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: var(--wp--preset--spacing--md);
  align-items: baseline;
  /* xs, not sm: with three columns on a shared baseline the row already
     stands as tall as its tallest line box, so sm on top of that made
     each entry read as a paragraph rather than a line in an index. */
  padding: var(--wp--preset--spacing--xs) 0;
  border-bottom: 1px solid var(--wp--custom--hairline);
  /* The columns carry different line-heights; without this the row
     inherits the loosest of them and the rules drift apart. */
  line-height: 1.4;
}

/* The list's own top rule, so the first row is closed on both sides. */
.valencia-qlist .wp-block-post-template {
  border-top: 1px solid var(--wp--custom--hairline);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Post Template lays its items out with the root blockGap between them,
   which on top of each row's own padding makes the list twice as tall
   as it should be. The rules are the separation; the gap is not needed. */
.valencia-qlist .wp-block-post-template > li {
  margin: 0;
}

.valencia-qlist .wp-block-post-template.is-layout-flow > * + * {
  margin-block-start: 0;
}

/* Hover: a caret appears past the category and the right column slides
   left to meet it. Only that column moves, so the motion points at
   where the row goes rather than nudging the whole line for its own
   sake — and the date and title, which are what you are reading, stay
   exactly where your eye left them.

   The caret is a ::after rather than markup: there is no block to hang
   it on inside a Query Loop, and it is decoration that should never
   reach a screen reader. It also needs somewhere to live — the meta
   column ends flush with the row's right edge, so without the reserved
   padding below it renders outside the row and is clipped.

   Timing is spyglass.org's: 333ms cubic-bezier(.4, 0, .22, 1) on every
   opacity and transform they move. The long duration is what reads as
   smooth rather than snappy — a slow start, a quick middle, then a long
   settle. Their own row hover does exactly this
   (`.feed:hover .feed-icon { transform: translateX(.4rem) }`), so the
   0.4rem distance is theirs too. */
.valencia-qlist-meta {
  position: relative;
  padding-right: 14px;
  transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.valencia-qlist-meta::after {
  content: "›";
  position: absolute;
  right: 0;
  color: var(--wp--preset--color--accent-strong);
  opacity: 0;
  transform: translateX(-0.4rem);
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1),
    transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.valencia-qlist-row:hover .valencia-qlist-meta {
  transform: translateX(-0.4rem);
}

.valencia-qlist-row:hover .valencia-qlist-meta::after {
  opacity: 1;
  transform: translateX(0);
}

/* Keyboard users get the same signal as the mouse. */
.valencia-qlist-row:focus-within .valencia-qlist-meta {
  transform: translateX(-0.4rem);
}

.valencia-qlist-row:focus-within .valencia-qlist-meta::after {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .valencia-qlist-meta,
  .valencia-qlist-meta::after {
    transition: none;
  }
  .valencia-qlist-row:hover .valencia-qlist-meta,
  .valencia-qlist-row:focus-within .valencia-qlist-meta {
    transform: none;
  }
}

/* Date: small caps in ink-deep. Doubled class beats core's own
   .wp-block-post-date margins, which print after the theme sheet. */
.valencia-qlist-date.valencia-qlist-date {
  margin: 0;
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-deep);
  white-space: nowrap;
}

.valencia-qlist-title.valencia-qlist-title {
  margin: 0;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  line-height: 1.35;
}

/* Two resets in one rule. core-single-post.css puts a 2px accent
   underline on every link in entry content, which on a list that is
   entirely links reads as damage — the row's hover shift is the
   affordance instead. And `inherit` is not enough for the colour: core
   prints its own link colour after the theme sheet, so the title has to
   name what it wants. Contrast, not accent-strong — a page of red
   titles reads as a page of warnings. */
.valencia-qlist-title a {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  border-bottom: none;
}

.valencia-qlist-meta,
.valencia-qlist-meta a {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
  text-decoration: none;
  border-bottom: none;
  white-space: nowrap;
}

/* Phone: the date moves above the title and the category holds the
   right of that first line, so a long title gets the full width
   instead of a 5.5rem column eating into it. */
@media (max-width: 640px) {
  .valencia-qlist-row {
    grid-template-columns: 1fr auto;
    gap: 4px var(--wp--preset--spacing--sm);
  }
  .valencia-qlist-date.valencia-qlist-date {
    grid-column: 1;
    grid-row: 1;
  }
  .valencia-qlist-meta {
    grid-column: 2;
    grid-row: 1;
  }
  .valencia-qlist-title.valencia-qlist-title {
    grid-column: 1 / -1;
    grid-row: 2;
    /* 1.25rem = 20px, up from the medium preset's 17px at this width.
       Measured against comparable indexes at 390px on 2026-09-10: The
       Verge 20px, Smashing 22px, rachelandrew.co.uk 18px — 17px was the
       smallest of the set. Set here rather than on the `medium` preset,
       which three other sheets share. */
    font-size: 1.25rem;
  }
}

/* Editor wrapper mirror: the editor wraps each child block in
   .block-editor-block-list__layout > .wp-block, whose default vertical
   margin breaks the row's baseline alignment. Inert on the frontend. */
.valencia-qlist-row .block-editor-block-list__layout > .wp-block {
  margin-top: 0;
  margin-bottom: 0;
}