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

   Reference: valencia-mockups/blog/blog-redesign-cd.html, option C.
   Two columns, text LEFT and photo RIGHT. The markup is authored the
   other way round (text group first, then the featured image) so the
   reading order and the tab order both start at the headline; `order`
   on the media puts the photo on the right visually without reordering
   the DOM. Below the breakpoint the photo comes FIRST, which is why the
   order flips rather than simply unsetting.

   Everything the sidebar can express lives on the blocks in home.html:
   sizes, colours and families are presets there, not values here. What
   is left is the grid, the frame, and the hover. */

.valencia-lede-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--wp--preset--spacing--xl);
  align-items: center;
  padding-bottom: var(--wp--preset--spacing--xl);
  border-bottom: 1px solid var(--wp--custom--rule);
}

.valencia-lede-text { order: 1; min-width: 0; }
.valencia-lede-photo { order: 2; margin: 0; }

/* The framed treatment, matching is-style-valencia-framed on core/image:
   a hairline, a small pad, the base colour behind. core/post-featured-image
   cannot carry that block style (it is registered on core/image), so the
   frame is rebuilt here rather than left off. */
.valencia-lede-photo {
  border: 1px solid var(--wp--custom--rule);
  padding: var(--wp--preset--spacing--xs);
  background: var(--wp--preset--color--base);
}

.valencia-lede-photo img {
  display: block;
  width: 100%;
  transition: transform 600ms cubic-bezier(.4, 0, .22, 1);
}

/* Title and photo respond together, so the whole band reads as one
   target even though it is two separate links. */
.valencia-lede-inner:hover .valencia-lede-photo img { transform: scale(1.02); }
.valencia-lede-inner:hover .valencia-lede-title a { color: var(--wp--preset--color--ink-deep); }

.valencia-lede-title {
  margin-block: var(--wp--preset--spacing--sm) 0;
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.valencia-lede-title a {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}

.valencia-lede-dek {
  margin-block: var(--wp--preset--spacing--sm) 0;
  max-width: 50ch;
  line-height: 1.5;
}

.valencia-lede-meta {
  margin-block: var(--wp--preset--spacing--md) 0;
  gap: var(--wp--preset--spacing--xs);
  align-items: baseline;
}

/* post-terms prints its own links; keep them on the block's colour. */
.valencia-lede-cat a {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}
.valencia-lede-cat a:hover { text-decoration: underline; }

/* A separator between category and date, but only when there IS a
   category: 20 of 51 posts are uncategorised, and core renders nothing
   at all for those, so a static dot in the markup would strand itself. */
.valencia-lede-cat + .valencia-lede-date::before {
  content: "·";
  margin-right: var(--wp--preset--spacing--xs);
}

/* One column below the point where 1.15fr leaves the dek too narrow to
   read. Photo first here: on a phone the picture is the thing that
   pulls you in, and the headline reads immediately under it. */
@media (max-width: 781px) {
  .valencia-lede-inner {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--md);
    align-items: start;
  }
  .valencia-lede-text { order: 2; }
  .valencia-lede-photo { order: 1; }
  .valencia-lede-dek { max-width: none; }
}