/* CHOTTO NOTE — article template (visual layer)
   Loaded AFTER /style.css, only on articles built with the template.
   Adds layout + image components; never replaces site chrome, tracking or metadata.
   Uses the site's own design tokens — no new palette. */

/* Articles on this template get a wider column: the three-across card grids
   below (checklist, picks, spec bars) and the full-width hero photo need it.
   Scoped by the fact that only template articles link this file. */
main { max-width: 1000px; }

/* ---- Lead paragraph under the title ---------------------------------- */
.article-lead {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 0 0 4px;
}

/* ---- Hero: one wide scene photo + the product line-up beside it -------
   Sits above .article-body on purpose: toc.js inserts the table of contents
   as the first child of .article-body, and the hero belongs above it.
   The large slot is a generic scene, never a specific product
   (owner decision 2026-09-22) — product photos live in the minis and cards. */
.article-hero {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 14px;
  margin: 24px 0 30px;
}

.article-hero-main {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper-raised);
  overflow: hidden;
}

.article-hero-main {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-soft);
}

.article-hero-main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A soft scrim so the copy stays readable whatever the photo does in its
   lower-left corner. Only where there IS HTML copy — the Japanese heroes
   carry their copy inside the photo and must not be darkened. */
.article-hero-main:has(.article-hero-copy)::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(to bottom, rgba(16, 43, 73, 0), rgba(16, 43, 73, 0.42));
  pointer-events: none;
}

/* Requirement: copy sitting on the photo, as in the reference sample. */
.article-hero-copy {
  position: absolute;
  z-index: 1;
  left: 20px;
  right: 20px;
  bottom: 20px;
  max-width: 74%;
  padding: 15px 18px;
  border-radius: 12px;
  background: rgba(16, 43, 73, 0.9);
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.55;
}

.article-hero-copy small {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--alabaster-grey);
}

/* Every article's hero is now the scene photo on its own: the product line-up
   that used to sit beside it repeated what the comparison table says a screen
   later (owner, 2026-09-22). `.article-hero` keeps its grid for anything that
   wants a second column again. */
.article-hero.is-single { grid-template-columns: 1fr; }

/* A figure used for a diagram inside the body. */
.article-figure { margin: 1.6em 0; }
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-raised);
}
.article-figure figcaption {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* ---- Price and buy button, one row per shop ---------------------------
   Owner instruction 2026-09-24: the table used to carry one price and two
   shop buttons, so the reader could not tell which shop the price was for.
   Now each shop states its own price next to its own button. */
.article-body table td.buy-cell { padding: 10px; vertical-align: middle; }

/* each shop is its own bordered box, so the eye pairs the price with the
   button beside it and never with the row above (owner, 2026-09-24) */
.buy-cell .buy-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-raised);
  white-space: nowrap;
}
.buy-cell .buy-row + .buy-row { margin-top: 7px; }

/* a hairline in the shop's own colour, so Amazon and Rakuten read apart
   at a glance without adding another block of colour */
.buy-cell .buy-row:has(.cta-rakuten) { border-left: 3px solid #e6007a; }
.buy-cell .buy-row:not(:has(.cta-rakuten)) { border-left: 3px solid #ff9900; }

.buy-cell .buy-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  letter-spacing: 0.01em;
}
.buy-cell .cta-link { margin: 0; min-width: 76px; text-align: center; }

/* ---- The note under a comparison table that carries prices ------------
   Owner decision 2026-09-22: the table states the price as of publication,
   so the page has to say that, near the number and not in fine print. */
.price-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--dusty-denim);
  background: var(--surface-soft);
  border-radius: 0 8px 8px 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.price-note strong { color: var(--ink); }

/* ---- Trust checklist as colour-coded ✓ cards ------------------------- */
.article-body .trust-checklist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0 28px;
  font-size: 0.85rem;
  color: var(--ink);
}

.article-body .trust-checklist li {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 600;
  align-items: flex-start;
}

.article-body .trust-checklist li::before {
  border-radius: 5px;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

/* ---- Feature / pick cards, three across, with a product photo -------- */
.article-body .feature-points { grid-template-columns: repeat(3, 1fr); }

.feature-media {
  margin: -20px -20px 12px;
  aspect-ratio: 4 / 3;
  background: var(--surface-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line);
}

.feature-media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }

/* ---- Product image strip --------------------------------------------- */
.products-visual {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 18px 0 34px;
}

.product-shot {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper-raised);
}

.product-shot figure { margin: 0; aspect-ratio: 1; background: var(--surface-soft); }
.product-shot img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }

.product-shot p {
  margin: 0;
  padding: 10px 12px 13px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
}

/* ---- Spec chart: the headline comparison, drawn instead of written --- */
.spec-chart {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-raised);
  padding: 18px 20px;
  margin: 1.4em 0;
}

.spec-chart-label {
  margin: 0 0 14px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--accent-strong);
}

.spec-bar { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; margin-bottom: 10px; }
.spec-bar:last-of-type { margin-bottom: 0; }
.spec-bar-name { font-size: 0.85rem; font-weight: 600; }
.spec-bar-track { background: var(--surface-soft); border-radius: 6px; height: 26px; position: relative; }

.spec-bar-fill {
  background: var(--accent);
  height: 100%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
}

.spec-bar.is-top .spec-bar-fill { background: var(--prussian-blue); }
.spec-chart-note { margin: 12px 0 0; font-size: 0.78rem; color: var(--ink-soft); }

/* ---- Colour-coded marks inside the comparison table ------------------ */
.mark-yes, .mark-no, .mark-mid {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  vertical-align: -4px;
}

.mark-yes { background: #2e8b57; }
.mark-mid { background: var(--dusty-denim); }
.mark-no  { background: #c0455c; }

.mark-label { font-size: 0.8rem; color: var(--ink); margin-left: 5px; }

/* ---- Decision flow: the three questions, as a chart ------------------ */
.decision-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
  margin: 1.4em 0;
}

.decision-flow-step {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}

.decision-flow-step b { display: block; margin-bottom: 6px; font-size: 0.92rem; color: var(--accent-strong); }
.decision-flow-step p { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }
.decision-flow-arrow { display: grid; place-items: center; font-size: 2rem; font-weight: 700; color: var(--accent); }

/* ---- Small illustrated note ------------------------------------------ */
.notice {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  background: var(--paper-raised);
  padding: 14px 16px;
  margin: 1.4em 0;
  font-size: 0.9rem;
}

.notice .notice-icon { font-size: 1.2rem; line-height: 1.3; }
.notice p { margin: 0; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 860px) {
  .article-hero { grid-template-columns: 1fr; }
  .article-hero-copy { max-width: 100%; font-size: 0.95rem; }
  .article-body .trust-checklist,
  .article-body .feature-points,
  .products-visual { grid-template-columns: repeat(2, 1fr); }
  .decision-flow { grid-template-columns: 1fr; }
  .decision-flow-arrow { transform: rotate(90deg); }
}

@media (max-width: 560px) {
  .article-body .trust-checklist,
  .article-body .feature-points,
  .products-visual { grid-template-columns: 1fr; }
  .spec-bar { grid-template-columns: 96px 1fr; }
}