/* The hub (index.html and its translations only). Builds on styles.css: colors, type, sections, .media. */

/* Hero: a headline longer than the other pages', so a size smaller */
.hero h1 { font-size: clamp(2.2rem, 1.3rem + 2.6vw, 3.2rem); }
/* More room for the text than on the other pages, so the routes under the buttons stay in the first screen */
@media (min-width: 980px) { .hero .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.hero { padding-top: 44px; }

/* Download buttons: on a narrow screen the label wraps, and the small print goes under it in one piece */
.btn-label { line-height: 1.3; }
.btn-label small { white-space: nowrap; }

/* Hero: the two text links under the buttons, to the divers' page and the moments page */
.hub-router { display: grid; gap: 4px; font-size: 0.95rem; color: var(--muted); line-height: 1.6; }
.hero .media { align-self: center; }
/* Tracks that can shrink below their content: a long word, or an image still loading and showing its alt text,
   must not make the page wider than the screen */
@media (max-width: 979px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } }
.hero .media, .hub-proof .media { grid-template-columns: minmax(0, 1fr); }

/* Back from the trip: four short cards, in one row on wide screens and two on medium ones, never three and one */
.hub-pains { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .hub-pains { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .hub-pains { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* What it does: the line under the cards */
.hub-measured { margin-top: 18px; color: var(--muted); max-width: 70ch; }
.hub-measured strong { color: var(--ink); font-weight: 600; }

/* Proof, in the deep band: the stabilization clip across the width, the screenshot under it */
.hub-proof { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); }
.hub-proof .section-head { margin-bottom: 0; }
.dive .media figcaption, .dive .media .halves { color: var(--deep-muted); }
.dive .media .halves span:last-child { color: #FF9A63; }
.dive .media video, .dive .media img { border-color: rgba(255, 255, 255, 0.12); }
/* The screenshot with its caption beside it on wide screens */
@media (min-width: 900px) {
  .hub-shot { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px 32px; align-items: end; }
  .hub-shot figcaption { font-size: 1rem; max-width: 34ch; }
}

/* Closing download: a card, right under the FAQ */
.hub-cta { display: grid; gap: 18px; justify-items: start; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.hub-cta .note { margin-top: 4px; }

/* Each card of What it does links to its guide page */
.feature .feature-more { justify-self: start; font-size: var(--step--1); }
.hub-guides { line-height: 1.9; }

/* Who makes it: a short note and a photo, linking to about.html */
.hub-maker { display: grid; gap: 28px; align-items: center; }
.hub-maker .section-head { margin-bottom: 0; }
@media (min-width: 900px) { .hub-maker { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.hub-maker-photo { aspect-ratio: 4 / 5; max-width: 340px; width: 100%; justify-self: center; display: grid; place-items: center; border: 2px dashed var(--line); border-radius: var(--radius); color: var(--muted); font-family: var(--f-mono); font-size: var(--step--1); background: var(--surface); }