/* Home page layout only. Shared components live in main.css, components.css and fig.css. */

/* ---------- H-1 Hero: globe poster (A10) ---------- */
.hero-globe .globe-poster,
.hero-globe noscript img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.hero-globe .globe-poster {
  transform: scale(.81);
  transition: opacity 600ms var(--ease-out);
}
#globe.is-ready .globe-poster { opacity: 0; }
/* Without JS the flat dotted map (noscript) stands in for the globe */
html:not(.js) .hero-globe .globe-poster { display: none; }
@media (max-width: 640px) { .hero-copy .eyebrow { max-width: 100%; flex-wrap: wrap; line-height: 1.6; } }
/* on a phone the eyebrow breaks at its first separator, which is dropped, so no line ends in a dot */
@media (max-width: 640px) { .hero-copy .eyebrow .home-eb-sep { display: block; height: 0; overflow: hidden; } }

@media (min-width: 1025px) {
  body[data-page="home"] .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
.hero-grid > * { min-width: 0; }

/* ---------- H-2 Strip ---------- */
.strip-track a .home-keep-case { text-transform: none; }

/* ---------- Chapters: space after the dotted rule ---------- */
body[data-page="home"] .chapter-section > .rule-dots + * { margin-top: var(--s-12); }

/* ---------- H-3 Index: room for the marginal note at >= 1200 px ---------- */
@media (min-width: 1200px) {
  .home-index { margin-right: calc(var(--margin-col) + var(--s-8)); }
}

/* ---------- H-4 AI ---------- */
.home-ai-split > * { min-width: 0; }
.home-ai-split .chapter { margin-bottom: 0; }
.home-ai-split .fig { align-self: start; }
.home-ai-rows {
  list-style: none;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
}
.home-ai-rows > li { display: flex; min-width: 0; }
.home-ai-rows .ai-row { flex: 1; color: inherit; }
.home-ai-rows .ai-row:focus-visible { border-color: var(--accent-soft); }
@media (min-width: 640px) {
  .home-ai-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .home-ai-rows { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .home-ai-rows > li { grid-column: span 2; }
  .home-ai-rows > li:nth-child(n + 4) { grid-column: span 3; }
}

/* ---------- H-5 Products ---------- */
.home-product-link { margin-top: var(--s-6); font-size: var(--t-small); font-weight: 500; }
.home-products .product-flagship .home-product-link { margin-top: var(--s-8); }
.home-products .product-card { display: flex; flex-direction: column; }
.home-products .product-card .home-product-link { margin-top: auto; padding-top: var(--s-6); }

/* ---------- H-6 How we work ---------- */
.home-statement-head { position: relative; isolation: isolate; }
.home-statement .h2 { margin-top: var(--s-4); }
.home-path { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.home-more { margin-top: var(--s-6); font-size: var(--t-small); font-weight: 500; }

/* ---------- H-7 Regions ---------- */
/* seven stubs: rows close up and the short last row is centred (4 + 3 at >= 1024 px) */
.home-stubs { display: flex; flex-wrap: wrap; justify-content: center; }
.home-stubs > li { flex: 0 1 100%; min-width: 0; display: flex; }
.home-stubs > li > .stub { flex: 1; }
@media (min-width: 640px) { .home-stubs > li { flex-basis: calc((100% - var(--s-2)) / 2); } }
@media (min-width: 1024px) { .home-stubs > li { flex-basis: calc((100% - 3 * var(--s-2)) / 4); } }
.home-body { margin-top: var(--s-4); color: var(--text-2); max-width: var(--measure); }
.home-world { display: grid; gap: var(--s-6); min-width: 0; }
.home-world-map { min-width: 0; width: 100%; max-width: 60rem; margin-inline: auto; }
.home-hyd { color: var(--text-2); }
.home-hyd .clock:empty::before { content: "--:--"; }
.home-world .home-more { margin-top: 0; }

/* the figure column is wide enough for the landscape drawing (labels stay >= 10 px, fig.js J1),
   so the split stays balanced: copy beside a ~260 px tall drawing, not a 660 px portrait one */
@media (min-width: 1100px) {
  .home-ai-split { grid-template-columns: minmax(0, 1fr) minmax(0, 40rem); align-items: center; }
}
@media (max-width: 1099.98px) {
  .home-ai-split { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); }
}

/* ---------- Reduced motion ---------- */
html[data-motion="reduce"] .hero-globe .globe-poster { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-globe .globe-poster { transition: none; }
}

/* H-5: without an owner screenshot the flagship sets its body and chips in two columns, so no
   empty half reads as a missing picture */
@media (min-width: 900px) {
  .home-products .product-flagship-inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .home-products .product-flagship-inner > * { grid-column: 1; }
  .home-products .product-flagship-inner > .tech-chips { grid-column: 2; grid-row: 3; align-self: end; margin-top: 0; }
  .home-products .product-flagship .product-body { max-width: none; }
}