/* Listicle / answer pages — /kauanko-…/, /voiko-…/, /mika-viini-…/
 *
 * The imported bodies are clean semantic HTML and nothing more:
 *
 *     <section>  h2 + p                     the direct answer
 *     <section>  h2 + N x <article>(h3 + p) the numbered tips
 *
 * On WordPress the theme gave those a tinted answer panel and a card grid. The
 * markup survived the migration; only the styling did not, so these pages have
 * been rendering as a wall of headings and paragraphs. They are the pages that
 * earn AI-Overview citations, so they take real human traffic and cannot look
 * like a draft.
 *
 * Scoped to .rich-text on this site only — NOT added to packs/recipe, which
 * eleven other sites share and whose pages have different body shapes.
 *
 * Structural selectors, no new classes: the importer writes the export's markup
 * verbatim, so there is nothing to hang a class on without rewriting bodies.
 */

/* The answer block: first section, the one that answers the title question. */
.rich-text > section:first-of-type {
  background: color-mix(in srgb, var(--accent, #AC1430) 6%, #fff);
  border-radius: 14px;
  padding: 22px 26px;
  margin: 0 0 40px;
}
.rich-text > section:first-of-type > h2 {
  margin-top: 0;
  color: var(--accent-deep, #69143A);
}
.rich-text > section:first-of-type > p:last-child { margin-bottom: 0; }

/* The tips. :has() picks only the section that actually holds cards, so a page
   with no <article> children is left exactly as it was. */
.rich-text > section:has(> article) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-bottom: 40px;
}
/* The heading is a full-width row above the cards, not a grid cell beside them. */
.rich-text > section:has(> article) > h2 {
  grid-column: 1 / -1;
  margin: 0 0 4px;
}

.rich-text article {
  border: 1px solid color-mix(in srgb, var(--accent, #AC1430) 16%, #fff);
  border-radius: 14px;
  padding: 20px 22px;
  background: #fff;
}
.rich-text article > h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--accent-deep, #69143A);
}
.rich-text article > p:last-child { margin-bottom: 0; }

/* Fallback for browsers without :has() — Firefox shipped it in 121, so this is
   a small tail. Cards still read as cards, just stacked rather than in a grid;
   nothing overlaps or breaks. */
@supports not selector(:has(*)) {
  .rich-text article { margin-bottom: 18px; }
}

/* The recipe card at the foot of an answer page.
 *
 * These pages are read by people who came for one fact ("how long in the
 * oven"). The card is the first thing offering them something to DO with it, so
 * it is a single large target rather than an inline link in a paragraph -- but
 * it sits after the answer, never before it.
 *
 * Styled to read as a distinct object from the tip cards above: filled rather
 * than outlined, so it does not look like an eighth tip.
 */
.answer-recipe { margin: 44px 0 8px; }

.answer-recipe-card {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  text-decoration: none;
  background: color-mix(in srgb, var(--accent, #AC1430) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, #AC1430) 18%, #fff);
}
.answer-recipe-media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 700 / 394;
  object-fit: cover;
}
.answer-recipe-kicker {
  display: block;
  padding: 16px 20px 0;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #AC1430);
}
.answer-recipe-title {
  display: block;
  padding: 4px 20px 18px;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--accent-deep, #69143A);
}
/* Keyboard users get the same affordance as the hover state. */
.answer-recipe-card:hover,
.answer-recipe-card:focus-visible {
  border-color: var(--accent, #AC1430);
}