/* Type scale: every size below is a step of the scale, none is a one-off.
   --fs-1000 the lead category name; --fs-900 the h1 and the other category names; --fs-800 section headings;
   --fs-700 the lead guide title; --fs-500 item titles (pick names, review parts, guide rows) and the statement text;
   --fs-400 body and descriptions. */
/* Homepage, page-only layout. Everything else comes from design-system.css.
   Mobile-first: the base rules are the phone layout. */

/* Hero: from 64em the photo is taller than the text column and bleeds off the right edge.
   The bleed is the distance from the container's right edge to the window edge; the section clips the rest. */
.hero-split--bleed { overflow-x: clip; padding-bottom: clamp(2.5rem, 6vw, 5rem); }   /* same space above and below the photo */
@media (min-width: 64em) {
  .hero-split__inner--bleed { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .hero-split__content { align-self: center; }   /* the text block sits at the vertical middle of the photo */
  .hero-split__image--bleed {
    --bleed: calc(var(--gutter) + max(0px, (100vw - var(--container)) / 2));
    width: calc(100% + var(--bleed));
    max-width: none;   /* the base img rule caps images at 100% */
    height: 100%;
    min-height: 26rem;
    aspect-ratio: auto;
    margin-right: calc(var(--bleed) * -1);
    border-radius: var(--radius-l) 0 0 var(--radius-l);
    box-shadow: none;
  }
}

/* Top pick in each category, ranked by size.
   Knives is the lead row: full width, three columns, the largest category name. Cookware and popcorn are half-width rows that stack.
   The category name is the page's one large type moment. What we liked sits on an olive panel, what we did not on plain white;
   the marks (+ and a minus sign) from .proscons carry the meaning, the panel only adds weight to the good side. */
.verdicts { display: grid; gap: var(--space-5); }
.verdict {
  --category-size: var(--fs-900);
  --reason-size: var(--fs-400);
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--surface);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
}
.verdict--lead {
  --category-size: var(--fs-1000);
  --reason-size: var(--fs-500);
}
.verdict__category { margin-bottom: var(--space-3); font-size: var(--category-size); line-height: var(--lh-tight); }
.verdict__name { margin: 0 0 var(--space-3); font: var(--fw-semibold) var(--fs-500) / var(--lh-snug) var(--font-heading); }
.verdict__reason { margin: 0 0 var(--space-5); color: var(--text-muted); font-size: var(--reason-size); }
.verdict__liked { --pro: var(--cream); padding: var(--space-5); border-radius: var(--radius); }
.verdict__disliked { padding: var(--space-5) var(--space-2); }
@media (min-width: 40em) {
  .verdict { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-6); }
  .verdict__summary { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .verdicts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .verdict { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .verdict--lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.95fr); gap: var(--space-6); padding: var(--space-7); }
  .verdict__summary { grid-column: auto; }
  .verdict__disliked { padding-block: var(--space-5); }
}

/* How we review, on olive: heading, statement and story link on the left, the four parts of every review as tinted rows on the right.
   Same flat tinted-row treatment as the guides. No numbers. */
.method { display: grid; gap: var(--space-6) var(--space-8); }
.method__heading { margin-bottom: var(--space-4); }
.method__lead { margin-bottom: var(--space-5); }
.method__list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.method__item { padding: var(--space-5); background: var(--panel-on-dark); border-radius: var(--radius); }
.method__title { margin-bottom: var(--space-2); font-size: var(--fs-500); line-height: var(--lh-snug); }
.method__text { margin: 0; color: var(--text-muted); font-size: var(--fs-400); }
@media (min-width: 64em) {
  .method { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .method__list { gap: var(--space-4); }
  .method__item { padding: var(--space-5) var(--space-6); }
}

/* Guides, on steel: one lead guide with a photo, then white rows with a one-line deck.
   The lead is one stretched link; each row is one link. */
.reads { display: grid; gap: var(--space-6) var(--space-7); }
.reads__lead { position: relative; }
.reads__image { display: block; width: 100%; aspect-ratio: 3 / 2; margin-bottom: var(--space-4); border-radius: var(--radius-l); object-fit: cover; }
.reads__title { margin-bottom: var(--space-2); font-size: var(--fs-700); line-height: var(--lh-snug); }
.reads__deck { max-width: 52ch; margin: 0; color: var(--text-muted); }
.reads__list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.reads__link { color: var(--heading); text-decoration: none; }
.reads__link--lead::after { content: ""; position: absolute; inset: 0; }   /* stretches the link over the lead */
.reads__link--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-4);
  min-height: var(--target);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border-radius: var(--radius);
}
.reads__link--row::after { content: "\2192"; grid-column: 2; grid-row: 1 / 3; color: var(--link); }
.reads__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font: var(--fw-semibold) var(--fs-500) / var(--lh-snug) var(--font-heading);
}
.reads__text { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--fs-400); line-height: 1.45; }
@media (hover: hover) {
  .reads__link--row:hover { background: var(--highlight); }
  .reads__link--lead:hover { text-decoration: underline; }
}
@media (min-width: 64em) {
  .reads { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
}

/* Hero entrance on load: the headline, the sentence and the buttons rise one after another. The photo does not animate.
   Off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero-split__title,
  .hero-split__lead,
  .hero-split__actions { animation: hero-rise 0.8s var(--ease-out) both; }
  .hero-split__lead { animation-delay: 0.12s; }
  .hero-split__actions { animation-delay: 0.24s; }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(1.25rem); }
  to { opacity: 1; transform: none; }
}