/* The category pages (owner 2026-11-04): /challenge-coins, /acrylic-prints and /photo-blanks. They use the home page's
   sections, steps strip, FAQ and footer from styles.css; this adds the page's own hero, price table, the pictures in a
   row, and the closing call to action. Role tokens only (design/brand.md). */

/* the page you're on, in the header and the phone menu */
.site-nav a[aria-current="page"], .mobile-nav a[aria-current="page"] {
  color: var(--color-accent-ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px;
}

/* Hero: on a phone the words, the photo, then the four facts; on a laptop the words and facts beside the photo */
.page-hero { padding-block: var(--space-10) var(--space-16); }
.page-hero-inner { display: grid; gap: var(--space-10); }
@media (min-width: 900px) {
  .page-hero { padding-block: var(--space-12) var(--space-20); }
  .page-hero-inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "copy media" "facts media";
    column-gap: var(--space-16); row-gap: var(--space-8);
  }
  .page-hero-copy { grid-area: copy; }
  .page-hero-media { grid-area: media; align-self: center; }
  .page-hero-inner > .page-facts { grid-area: facts; align-self: start; }
}
.page-hero h1 {
  margin-top: var(--space-6);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.5rem, 1.7rem + 3vw, 4.25rem); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance;
}
.page-hero .lead { max-width: 38rem; }
.page-hero-media { margin: 0; display: grid; gap: var(--space-3); }
.page-hero-media img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.page-hero-media figcaption { color: var(--color-text-muted); font-size: var(--text-sm); }
/* phones: the two buttons the same width, side by side or stacked */
@media (max-width: 479px) { .page-hero .hero-actions .btn { flex: 1 1 auto; } }

/* four short facts under the lead: what it costs, the smallest order, how fast, how you get it */
.page-facts { display: grid; gap: var(--space-4) var(--space-6); list-style: none; }
@media (min-width: 480px) { .page-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page-facts li { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--color-border-strong); }
.page-facts strong { font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.page-facts span { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Prices: the tiers beside what changes them */
.price-layout { display: grid; gap: var(--space-10); }
@media (min-width: 900px) { .price-layout { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); column-gap: var(--space-16); align-items: start; } }
.tiers-lg { font-size: var(--text-md); }
.tiers-lg th, .tiers-lg td { padding: var(--space-3) var(--space-4); }
.tiers-lg td:last-child { font-weight: 600; }
.price-note { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }
/* photo cards' and acrylic's tables (pages.js priceTables): a size a row, quantities across; they scroll sideways on a
   narrow phone rather than squeeze */
.price-tables { display: grid; gap: var(--space-8); max-width: 48rem; }
.price-tables + .price-note + .price-list { margin-top: var(--space-8); }
.table-scroll { overflow-x: auto; }
.tiers-grid { min-width: 18rem; }
@media (max-width: 600px) { .tiers-grid th, .tiers-grid td { padding-inline: var(--space-2); } }
.tiers-grid td, .tiers-grid th[scope="col"]:not(:first-child) { text-align: right; }
.tiers-grid th, .tiers-grid td { vertical-align: top; }
.tiers th[scope="row"] { color: var(--color-text); font-weight: 600; }
.tier-sub { display: block; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 400; }
.tier-cards { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.price-list { display: grid; max-width: 40rem; list-style: none; border-top: 1px solid var(--color-border); }
.price-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-6); align-items: baseline;
  padding-block: var(--space-4); border-bottom: 1px solid var(--color-border);
}
.price-list .price-what { font-weight: 600; }
/* text colour: gold is kept for the actions (brand: 5-10 % of a screen) */
.price-list .price-amount { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
@media (max-width: 479px) {
  .price-list li { grid-template-columns: minmax(0, 1fr); }
  .price-list .price-amount { text-align: left; }
}
.price-list .price-why { grid-column: 1 / -1; color: var(--color-text-muted); font-size: var(--text-sm); }
.price-example {
  margin-top: var(--space-6); padding: var(--space-4) var(--space-6);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}

/* pictures in a row: the finishes, the print sides, the work. Two a row on a phone, four on a laptop. */
.look-grid { display: grid; gap: var(--space-6); list-style: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .look-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.look-grid-2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .look-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.look { display: grid; align-content: start; gap: var(--space-2); margin: 0; }
.look h3 { margin-top: var(--space-2); font-size: var(--text-lg); font-weight: 600; }
.look p { color: var(--color-text-muted); font-size: var(--text-sm); }
.look .look-price { color: var(--color-accent-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
/* a way to print with no photo yet: its words under the pictures */
.look-text { max-width: 44rem; margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--color-border-strong); }
.look-text h3 { font-size: var(--text-lg); font-weight: 600; }
.look-text p { margin-top: var(--space-2); color: var(--color-text-muted); }
.section-more { margin-top: var(--space-8); }

/* words beside a list: two columns on a laptop */
.split { display: grid; gap: var(--space-10); }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-16); align-items: start; } }
.split p + p { margin-top: var(--space-4); }
.split > div > p { color: var(--color-text-muted); }
.plain-list { display: grid; gap: var(--space-3); padding-left: var(--space-6); }
.plain-list li::marker { color: var(--color-accent-ink); }
.sizes-list { display: grid; list-style: none; border-top: 1px solid var(--color-border); font-variant-numeric: tabular-nums; }
.sizes-list li { padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); }

/* the closing call to action */
.cta-band {
  display: grid; gap: var(--space-6); padding: var(--space-10) var(--space-8);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
@media (min-width: 900px) { .cta-band { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-12); } }
.cta-band h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-section); line-height: var(--leading-tight); }
.cta-band p { margin-top: var(--space-3); color: var(--color-text-muted); }
.cta-band .hero-actions { margin-top: 0; }
@media (max-width: 479px) { .cta-band { padding: var(--space-8) var(--space-6); } }

/* the steps' words start in one line, whatever the number's width (ui-review 2026-11-04) */
.steps-strip .steps-num { min-width: 1.4ch; text-align: right; }