/* Hub pages (/guides/, /treatment/): an editorial index in the Wirecutter/Which? lane.
   One lead story, a row of three, then sections of thumbnail rows separated by hairlines. Tokens only.
   Markup: partials/story.njk. Whole stories are clickable through the stretched .card-link on the title. */

.hub { display: grid; gap: var(--section-pad); padding-block: var(--space-10) var(--space-24); }
.hub-h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: var(--ls-snug); color: var(--color-text); text-wrap: balance; }

/* ---------- Story ---------- */
.story { position: relative; display: grid; gap: var(--space-3); align-content: start; }
.story__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-sm); outline: 1px solid var(--color-border); outline-offset: -1px;
}
.story__body { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.story__title { font-size: 1.1875rem; line-height: 1.3; font-weight: 700; color: var(--color-text); text-wrap: balance; }
.story__title a { color: inherit; text-decoration: none; }
.story:hover .story__title a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.story:has(.card-link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 6px; border-radius: var(--radius-sm); }
.story__dek { font-size: var(--fs-label); line-height: 1.55; color: var(--color-text-soft); text-wrap: pretty; }
.story__meta { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* No photo: the page's key number on a tinted panel, same 16:9 box as a photo */
.story__stat {
  display: grid; align-content: center; gap: var(--space-2); aspect-ratio: 16 / 9; padding: var(--space-6);
  background: var(--color-primary-soft); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.story__stat-value { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; font-weight: 750; letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; color: var(--color-text); }
.story__stat-label { font-size: var(--fs-sm); line-height: 1.4; color: var(--color-text-soft); }

/* Lead: big image beside the text from 960px */
.story--lead { gap: var(--space-5); }
.story--lead .story__title { font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.375rem); line-height: 1.12; letter-spacing: var(--ls-snug); }
.story--lead .story__dek { font-size: var(--fs-lead-lg); line-height: 1.5; max-width: 34ch; }
@media (min-width: 960px) {
  .story--lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-10); align-items: center; }
}

/* Row: thumbnail beside the text */
.story--row { grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--space-4); }
.story--row .story__dek { font-size: var(--fs-sm); line-height: 1.5; }
.story--row.story--noimg { grid-template-columns: minmax(0, 1fr); }
/* Phones: keep rows short; the full description is one tap away */
@media (max-width: 639px) {
  .story--row .story__dek, .story--small .story__dek { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
}
@media (min-width: 640px) {
  .story--row { grid-template-columns: 184px minmax(0, 1fr); column-gap: var(--space-5); }
  .story--row .story__dek { font-size: var(--fs-label); }
}

/* ---------- Start here ---------- */
.hub-start { display: grid; gap: var(--space-8); }
.hub-start__more { display: grid; gap: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--color-border); }
@media (min-width: 720px) { .hub-start__more { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-6); } }
/* Phones: the three smaller stories become thumbnail rows, so the lead stays the only big image */
@media (max-width: 719px) {
  .hub-start__more { gap: var(--space-6); }
  .story--small { grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--space-4); }
  .story--small .story__dek { font-size: var(--fs-sm); line-height: 1.5; }
  .story--small .story__stat { padding: var(--space-2) var(--space-3); }
  .story--small .story__stat-value { font-size: 1.0625rem; letter-spacing: 0; }
  .story--small .story__stat-label { display: none; }
}

/* ---------- Sections ---------- */
.hub-section { display: grid; gap: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--color-text); }
.hub-section__head { display: grid; gap: var(--space-2); max-width: 60ch; }
.hub-section__text { font-size: var(--fs-body); line-height: 1.55; color: var(--color-text-soft); }
.story-list { display: grid; gap: var(--space-8) var(--space-10); }
@media (min-width: 960px) { .story-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Browse by place / condition ---------- */
.hub-browse { display: grid; gap: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--color-text); }
@media (min-width: 720px) { .hub-browse { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-12); } }
.hub-browse__title { font-size: var(--fs-h3); line-height: 1.25; margin-bottom: var(--space-2); }
.hub-browse__title a { color: var(--color-text); text-decoration: none; }
.hub-browse__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hub-browse .link-list { border-top: 1px solid var(--color-border); }

.hub-next { font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text-muted); margin-top: calc(var(--section-pad) * -0.6); }
.hub-next + .hub-next { margin-top: calc(var(--section-pad) * -0.9); }