/* ============================================================
   PRODUCT BLOCKS — content blocks of product pages
   (first used on /facebook-ads/auto-boost-facebook-posts, 02.10.2026).
   Requires: tokens.css, page.css, button.css

   .steps       — "How it works": a surface panel, a block head, 3 cells
   .feature-row — heading (Birch/H2) + check list beside an image (text on columns 1–6 with half-column air, image 7–12;
                  --reverse puts the image on the left)
   .link-cards  — "Related links": cards with cover, title and a chip
   ============================================================ */

/* ---------- Steps ---------- */
/* the fill, radius and padding come from .panel (surface.css), the heading from .block-head (patterns.css) */
.steps__grid {
  /* stacked steps (phones) are separated like sections, so a caption clearly belongs to the picture above it */
  row-gap: var(--section-space);
}
.steps__cell img { width: 100%; height: auto; border-radius: var(--radius-md); }
.steps__cell h3 { margin-top: var(--space); }
.steps__cell p { margin-top: var(--space-xs); }

/* ---------- Feature row ---------- */
.feature-row { align-items: center; row-gap: var(--block-gap); }
/* Text on half of the grid (6 columns) with half a column of air on each side — 5 columns of text set back half a
   column from the container edge and from the image (decision 02.10.2026). Half a column is computed from the
   grid itself: a percentage padding of a grid item resolves against its 6-column area = 6 cols + 5 gaps. */
.feature-row__text { grid-column: 1 / span 6; } /* + .inset-half (page.css) */
.feature-row__media { grid-column: 7 / span 6; }
.feature-row--reverse .feature-row__media { grid-column: 1 / span 6; grid-row: 1; }
.feature-row--reverse .feature-row__text { grid-column: 7 / span 6; }
@media (max-width: 47.9375rem) {
  .feature-row__text, .feature-row__media, .feature-row--reverse .feature-row__text, .feature-row--reverse .feature-row__media { grid-column: 1 / -1; grid-row: auto; }
  /* phones: the text sits on the content line of the panels around it */
  .feature-row__text { padding-inline: var(--pad-card-fluid); }
}
.feature-row__list { margin-top: var(--space-md); } /* a .check-list (patterns.css) */
.feature-row__media img { width: 100%; height: auto; border-radius: var(--radius-lg); } /* a standalone picture is a surface */

/* ---------- Link cards ---------- */
.link-cards__grid { row-gap: var(--block-gap); column-gap: var(--gap-sm); } /* heading: .block-head */
/* the cards' own 16 around the hover frame already separate them: the grid adds only gap-sm (visible gap ≈ live 44) */
.link-cards__grid > * { height: 100%; }
/* Copied state by state from the live card (Webflow .blogpost-item + .blogpost-hover-frame + its hover interaction,
   measured 02.10.2026):
   rest   — picture, title, a chip (category or "Video tutorial");
   hover  — a 4px frame 1em (16) outside the card's own box: yellow on the course card, green on blog cards;
            the chip gives way to a second line: date + author on a blog card, the description on the course card.
   The frame sits on the column edge and the box 16 inside it, so a hovered card stays within its column. */
.link-card { display: block; height: 100%; } /* + .hover-frame (patterns.css): frame, gap, touch behaviour */
.link-card__box { display: flex; flex-direction: column; gap: var(--space-sm); height: 100%; border-radius: var(--radius-lg); }
.link-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md); /* pictures 12 */
}
.link-card__body { display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; padding-inline: var(--space-xs); }
/* text inset from the picture's edge, as live (.blogpost-heading-wrapper: 0.55em at the sides) */
/* The course card: a yellow box, 8 inside it, radius 16 (a surface — radii by role, 02.10.2026; live had 8). */
.link-card--accent { --frame-color: var(--color-primary); --frame-inner-radius: var(--radius-lg); }
.link-card--accent img { border-radius: var(--radius-sm); } /* nested: the box 16 − its 8 padding */
.link-card--accent .link-card__box { background: var(--color-primary); color: var(--color-text-inverted); padding: var(--space-xs); }
.link-card--accent .link-card__body { padding: 0 var(--space-xs) var(--space-xs); }
/* Chip and its hover replacement share one place. */
.link-card__meta { display: grid; align-items: center; }
.link-card__meta > * { grid-area: 1 / 1; }
.link-card__alt { opacity: 0; }
.link-card:hover .link-card__chip, .link-card:focus-visible .link-card__chip { opacity: 0; }
.link-card:hover .link-card__alt, .link-card:focus-visible .link-card__alt { opacity: 1; }
.link-card__alt { display: flex; flex-wrap: wrap; gap: 0 var(--space-sm); }
.link-card__chip { justify-self: start; } /* a .chip (patterns.css) */
/* Touch screens and phones: no hover there, so no frame and no chip swap — the card takes the full column and the
   chip stays; stacked cards are separated like sections so a caption clearly belongs to its picture (02.10.2026). */
@media (hover: none), (max-width: 47.9375rem) {
  .link-card:hover .link-card__chip { opacity: 1; }
  .link-card:hover .link-card__alt, .link-card__alt { display: none; }
}
@media (max-width: 47.9375rem) {
  .link-cards__grid { row-gap: var(--section-space); }
}

/* ---- Case study card (CaseCard.astro) — the card from the live Hub page (decided 05.10.2026) ----
   Colour rule, generalised from the two Hub cards: each case sets one colour, --case-tint (a token, usually the
   backdrop of its picture); the card background is that colour lightened and muted, the numbers are the same hue
   deep and saturated. Browsers without relative colours fall back to Surface and the text colour.
   The picture sits in the bottom-right corner, cut by the card edge (overflow + radius); the button lies over it. */
.case-card {
  --case-bg: oklch(from var(--case-tint) 0.93 calc(c * 0.45) h); /* fixed lightness: AA with --case-ink for any tint (05.10.2026) */
  --case-ink: oklch(from var(--case-tint) 0.45 min(calc(c * 0.6), 0.12) h); /* L 0.45: AA 4.5 for the small labels on phones; chroma muted and capped — deep, not loud (05.10.2026) */
  /* + .grid: the card's columns are the page's columns (the inner padding lives on the text, not the card) */
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  background: var(--color-surface);
  background: var(--case-bg);
}
.case-card__body {
  grid-column: 1 / span 7;
  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
  padding: var(--pad-card-fluid) 0 var(--pad-card-fluid) var(--pad-card-fluid);
}
.case-card__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
/* Client logos (05.10.2026): equal area, not equal height — a 10:1 wordmark and a 2:1 badge carry the same
   visual weight. height = base / √(width / height), clamped; --logo-ratio comes from the file (CaseCard.astro).
   Base 2.75rem ≈ the area of the live Hub logo (110×18). Empros 10:1 → ~14 × 139; a 2:1 badge → 2rem high. */
.case-card__logo {
  height: clamp(0.75rem, calc(2.75rem / sqrt(var(--logo-ratio, 4))), 2rem);
  width: auto;
}
.case-card__stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
/* rows «qualifier / number / label» shared across the stats (subgrid): the numbers stand on one line
   whether or not a stat has a qualifier above it */
.case-card__stat { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.case-card__stat::before { content: none; }
.case-card__num, .case-card__label, .case-card__prefix { margin: 0; color: var(--color-text-inverted); color: var(--case-ink); }
.case-card__num { white-space: nowrap; } /* weight from t-h2 (600) — the system style, not the live Regular (05.10.2026) */
.case-card__prefix { font-weight: 600; align-self: end; } /* «Up to»: a qualifier above the number, in the label style */ /* the live numbers are Regular — large figures read lighter */
.case-card__media { grid-column: 8 / -1; align-self: end; justify-self: end; width: 100%; }
/* Hover (decided 05.10.2026): the picture grows a little from its corner — the card edge clips it. Mouse only.
   Motion settings are --motion-* variables: the review tool's Motion panel tunes them live (lab/review/review.js);
   .rv-play is its Play button. Timing: the hover motion tokens (tokens.css). */
.case-card {
  --motion-dur: var(--duration-hover);
  --motion-ease: var(--ease-hover);
  --motion-scale: 1.05;
}
.case-card__media img { display: block; width: 100%; height: auto; transform-origin: 100% 100%; transition: transform var(--motion-dur) var(--motion-ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .case-card:hover .case-card__media img { transform: scale(var(--motion-scale)); }
}
.case-card.rv-play .case-card__media img { transform: scale(var(--motion-scale)); }
/* the whole card is the link: hovering it moves the button's arrow (button.css); the button keeps its colour */
.case-card:focus-visible { outline: var(--border-thick) solid var(--color-accent-indigo); outline-offset: var(--border-thick); }
.case-card__action { position: absolute; right: var(--space-sm); bottom: var(--space-sm); }
/* Tablets and phones: text above, the picture below (beside the numbers there is no room) */
@media (max-width: 61.9375rem) {
  .case-card { grid-template-columns: 1fr; }
  .case-card__body, .case-card__media { grid-column: 1; }
  .case-card__body { padding-right: var(--pad-card-fluid); }
  .case-card__media { padding-inline: var(--pad-card-fluid); }
}
@media (max-width: 47.9375rem) {
  .case-card__stats { grid-template-columns: repeat(2, 1fr); }
  .case-card__stat:nth-child(n + 3) { margin-top: var(--space); }
  .case-card__stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .case-card__action { left: var(--space-xs); right: var(--space-xs); bottom: var(--space-xs); }
}