/*
 * ICE CUBE v2 – pages/home.css (brand-home group)
 * Layout for index.html only (DESIGN.md §12.2). Components, colours and type come from
 * tokens / base / components; this file only places them. Tokens only, no literal colours.
 */

/* ------------------------------------------------------------------ 1. hero */
/* As tall as its content. The snow ridge's highest peak sits 150/1440 of the width above the
 * bottom (never less than 50 px), so the bottom padding keeps copy and image clear of the snow. */
.page--home .home-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-gradient);
  color: var(--on-navy);
  --ring: var(--focus-on-navy);
  padding-top: clamp(28px, 2vw + 20px, 56px);
  padding-bottom: calc(max(50px, 10.42vw) + 16px);
}
.page--home .home-hero .hero__mtn { z-index: 0; }
.page--home .home-hero__inner { position: relative; z-index: 1; display: grid; gap: 28px; }
.page--home .home-hero__title { color: var(--on-navy); }
.page--home .home-hero__line { display: block; }
.page--home .home-hero__title em { font-style: italic; }
.page--home .home-hero__lead { margin-top: 20px; max-width: 540px; color: var(--on-navy-2); }
.page--home .home-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.page--home .home-hero__facts {
  margin-top: 22px;
  font-size: 14px; line-height: 1.5; font-weight: 500;
  color: var(--on-navy-2);
  font-variant-numeric: tabular-nums;
}
.page--home .home-hero__facts a { color: var(--on-navy); font-weight: 600; }
.page--home .home-hero__facts a:hover { color: var(--sky-soft); }

.page--home .home-hero__media { margin: 0; min-width: 0; }
.page--home .home-hero__stage { position: relative; width: 100%; max-width: 420px; margin-inline: auto; }
.page--home .home-hero__img { display: block; width: 100%; height: auto; }

/* Méretvonal overlay: only where the image is large enough to read it (DESIGN §9.5). */
.page--home .home-hero__dims,
.page--home .home-hero__dimlabel { display: none; }

@media (max-width: 479px) {
  .page--home .home-hero__actions .btn { flex: 1 1 100%; }
  .page--home .home-hero__facts > span:not(.home-hero__sep),
  .page--home .home-hero__facts > a { display: block; }
  .page--home .home-hero__sep { display: none; }
}

@media (min-width: 1024px) {
  .page--home .home-hero__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
  .page--home .home-hero__copy { grid-column: 1 / 7; padding-block: 16px; }
  .page--home .home-hero__media { grid-column: 7 / 13; }
  .page--home .home-hero__stage { max-width: 640px; margin-right: 0; margin-left: auto; }

  .page--home .home-hero__dims {
    display: block; position: absolute; inset: 0; width: 100%; height: 100%;
    overflow: visible; pointer-events: none;
  }
  .page--home .home-hero__dims path {
    fill: none; stroke: var(--dimension-line); stroke-width: 1.5px;
    stroke-linecap: square; vector-effect: non-scaling-stroke;
  }
  .page--home .home-hero__dimlabel {
    display: block; position: absolute; z-index: 1;
    padding: 2px 6px; border-radius: var(--radius-xs);
    background: var(--dimension-label-bg); color: var(--on-navy);
    font-family: var(--font-ui); font-size: 12px; line-height: 1.3; font-weight: 700; font-stretch: 87.5%;
    font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
  }
  .page--home .home-hero__dimlabel--lc { transform: translate(6px, -50%); }
  .page--home .home-hero__dimlabel--cb { transform: translate(-50%, calc(-100% - 4px)); }
  .page--home .home-hero__dimlabel--ct { transform: translate(-50%, 4px); }
}

/* ------------------------------------------------------------------ 2. families: tile A fills its two rows */
@media (min-width: 1024px) {
  .page--home .family-tile--a { grid-template-rows: minmax(0, 1fr) auto auto auto; align-content: stretch; }
  .page--home .family-tile--a .family-tile__media { position: relative; aspect-ratio: auto; min-height: 420px; }
  .page--home .family-tile--a .family-tile__media img { position: absolute; inset: 0; }
}

/* ------------------------------------------------------------------ 3. featured (the only uniform grid) */
.page--home .home-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) {
  .page--home .home-featured__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1280px) { .page--home .home-featured__grid { gap: 24px; } }
/* The runtime's skeleton cards reserve the real card's body height (it grows as the card narrows), so the row does
 * not jump when the products arrive. */
.page--home .home-featured__grid .product-card--skeleton .product-card__body { min-height: 224px; }
@container card (max-width: 239px) { .page--home .home-featured__grid .product-card--skeleton .product-card__body { min-height: 203px; } }
@container card (max-width: 199px) { .page--home .home-featured__grid .product-card--skeleton .product-card__body { min-height: 242px; } }

/* ------------------------------------------------------------------ 5. ordering route (navy) */
.page--home .home-route__head { position: relative; display: grid; gap: 16px; margin-bottom: 48px; }
.page--home .home-route__lead { color: var(--on-navy-2); max-width: 560px; }
.page--home .home-route__lens { order: -1; display: flex; justify-content: flex-end; margin-top: calc(-1 * var(--section-y) - 40px); }
.page--home .home-route__lens .macro-lens { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; }
.page--home .home-route__lens .loupe { --loupe-size: 160px; }
.page--home .home-route__lens .macro-lens__caption { text-align: right; }
@media (min-width: 768px) {
  .page--home .home-route__head { padding-right: 320px; margin-bottom: 56px; }
  .page--home .home-route__lens { position: absolute; top: calc(-1 * var(--section-y) - 70px); right: 0; margin: 0; }
  .page--home .home-route__lens .loupe { --loupe-size: 280px; }
}

.page--home .home-route__row {
  display: grid; gap: 40px;
  margin-top: clamp(48px, 4vw + 24px, 80px); padding-top: clamp(40px, 3vw + 20px, 56px);
  border-top: 1px solid var(--navy-line);
}
.page--home .home-route__fees .link-arrow { color: var(--link); }
.page--home .home-route__fees .link-arrow:hover { color: var(--link-hover); }
.page--home .home-route__forms > * + * { margin-top: 16px; }
.page--home .home-route__forms p { color: var(--on-navy-2); max-width: 58ch; }
.page--home .home-route__forms-title { max-width: 24ch; }
@media (min-width: 1024px) {
  .page--home .home-route__row { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .page--home .home-route__fees { grid-column: 1 / 6; }
  .page--home .home-route__forms { grid-column: 7 / 13; padding-top: 12px; }
}

/* ------------------------------------------------------------------ 7. why ICE CUBE + partner wall (bg-2) */
.page--home .home-why__inner { display: grid; gap: 48px; }
.page--home .home-why__item { margin-top: 20px; max-width: 46ch; color: var(--text-2); }
.page--home .home-why__copy > h2 + .home-why__item { margin-top: 28px; }
.page--home .home-why__item strong { color: var(--text); }
.page--home .home-why__partners { min-width: 0; }
.page--home .home-why__partners-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 20px; }
.page--home .home-why__count { font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.page--home .home-why__reseller { display: inline-block; margin-top: 16px; font-weight: 600; }
@media (max-width: 767px) { .page--home .home-why__reseller { display: none; } } /* the wall's CTA tile carries it */
@media (min-width: 1024px) {
  .page--home .home-why__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .page--home .home-why__copy { grid-column: 1 / 5; position: sticky; top: 112px; }
  .page--home .home-why__partners { grid-column: 6 / 13; }
}

/* ------------------------------------------------------------------ 8. app band: one composition per breakpoint (§10.4) */
.page--home .home-app__tilt { display: none; }
.page--home .home-app__pair img { max-width: min(100%, 460px); }
@media (min-width: 1024px) {
  .page--home .home-app__tilt { display: block; }
  .page--home .home-app__pair { display: none; }
}

/* ------------------------------------------------------------------ 9. closing band (mascot moment, 380–420 px on desktop) */
.page--home .closing-band__mascot { height: clamp(240px, 27vw, 420px); }
.page--home .home-closing__contacts { display: grid; gap: 6px; margin-top: 8px; }
.page--home .home-closing__contacts > div { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.page--home .home-closing__contacts dt { min-width: 176px; color: var(--text-2); }
.page--home .home-closing__contacts dd { font-weight: 600; }
@media (min-width: 1024px) { .page--home .closing-band__media { display: flex; justify-content: center; } }