/* ==========================================================================
   VDPL Next — Insights index
   ========================================================================== */

.i-post { display: flex; flex-direction: column; gap: var(--s-5); padding: 0; overflow: hidden; position: relative; }

/* The image is absolutely positioned so the box's aspect-ratio is what
   decides the height. With the image in normal flow, `height: 100%` against
   an auto-height parent is circular: the browser falls back to the image's
   own proportions and the ratio is ignored, which is how a square image
   produced a 722px tall "21/9" cover. */
.i-post__cover {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-surface-2);
}
.i-post__cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.i-post__body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); }
.i-post:has(.i-post__cover) .i-post__body { padding-top: 0; }

/* Whole card is the target; the heading link carries the accessible name. */
.i-post__body h2 a::after,
.i-post__body h3 a::after { content: ""; position: absolute; inset: 0; }

.i-post--lead { grid-column: span 2; }
.i-post--lead .i-post__cover { aspect-ratio: 21 / 9; }
@media (max-width: 900px) {
  .i-post--lead { grid-column: span 1; }
  .i-post--lead .i-post__cover { aspect-ratio: 16 / 10; }
}

/* The .c-pager rules moved to components.css — search results paginate too,
   and search.php loads no page stylesheet at all. */

/* The shared fallback cover, used by 87% of the archive.

   The topic is the *subject* of the tile, not a caption on it. Twelve
   identical pictures on one screen read as a broken image; twelve different
   words over the same quiet texture read as a set. The variety comes from
   real data, so it costs no artwork and no second accent colour. */
.i-post__cover--default img { opacity: .3; }
.i-post__topic {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  text-align: center;
  font-size: var(--t-lead);
  font-weight: var(--w-bold);
  letter-spacing: var(--t-lead-ls);
  color: var(--c-accent-text);
}
/* The featured tile's topic, one step up the same scale. */
.i-post--lead .i-post__topic { font-size: var(--t-d4); letter-spacing: var(--t-d4-ls); }

/* The long tail of small topics, folded away. Native <details>, so it works
   without JavaScript and announces its state correctly. */
/* The "more topics" panel is anchored to the topic ROW, not to the summary
   that opens it.

   It was anchored to the summary (`.i-topics__more { position: relative }`),
   which works only while that summary happens to sit near the left edge. The
   chips wrap, so it does not: at 375px the summary ends up at x=241, and a
   337px panel opening from its left edge reached x=578. The page itself does
   not scroll sideways, so those topics were clipped off the screen entirely -
   invisible and unreachable on a phone.

   Anchoring to the row instead makes the position independent of where the
   chips happen to wrap, at any width. */
.i-topics { position: relative; }
.i-topics__more { position: static; }
.i-topics__more summary { list-style: none; cursor: pointer; }
.i-topics__more summary::-webkit-details-marker { display: none; }
.i-topics__more summary .c-link__arrow,
.i-topics__more summary svg { transition: transform var(--dur) var(--ease); }
.i-topics__more[open] summary svg { transform: rotate(180deg); }

.i-topics__rest {
  position: absolute;
  z-index: var(--z-sticky);
  top: calc(100% + var(--s-2));
  left: 0;
  width: max-content;
  max-width: min(90vw, 520px);
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--e-lg);
}

/* On a phone the panel spans the row rather than sizing to its content: at
   this width `max-content` is wider than the screen anyway, so letting it
   match the row is both simpler and exactly as wide as there is room for. */
@media (max-width: 700px) {
  .i-topics__rest {
    right: 0;
    width: auto;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .i-topics__more summary svg { transition: none; }
}