/* Strona główna (/): 80 % właściciel ścianki, 20 % wspinacz (decyzja foundera 2026-09-24).
   Hero z telefonem 3D (przybliżenie mapy), routesetting w przyklejonym telefonie, panel w
   karuzeli, oferta, pas wspinacza. Tylko zmienne z base.css i motion.css. Ruch: MOTION.md. */

/* ---------- 1. Hero ---------- */

.home-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--s-6) var(--s-16);
}
.home-hero__grid { row-gap: var(--s-8); align-items: center; }
.home-hero__label { color: var(--c-accent); margin-bottom: var(--s-3); }
.home-hero__copy > .lead { margin-top: var(--s-4); max-width: 46ch; }
.home-hero__copy > .actions { margin-top: var(--s-8); }
.home-hero__note { max-width: 44ch; }
.home-hero__climber,
.home-hero__demo { margin-top: var(--s-4); }
.home-hero__demo + .home-hero__climber { margin-top: var(--s-2); }
.home-hero__climber .link-action,
.home-hero__demo .link-action { gap: var(--s-2); }
.home-hero__climber .icon,
.home-hero__demo .icon { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .home-hero__climber .link-action:hover .icon,
  .home-hero__demo .link-action:hover .icon { transform: translateX(4px); }
}

@media (max-width: 47.99rem) {
  .home-hero h1 { font-size: 2.75rem; }
}

@media (min-width: 48rem) {
  .home-hero { padding-top: var(--s-12); }
}

@media (min-width: 64rem) {
  .home-hero {
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100svh - var(--nav-h));
    display: grid;
    align-items: center;
    padding-block: var(--s-10);
  }
  /* Nota i link wspinacza są w DOM za telefonem (patrz index.html); tu wracają pod przyciski. */
  .home-hero__grid { row-gap: 0; }
  .home-hero__copy { grid-column: 1 / span 6; grid-row: 1; align-self: end; }
  .home-hero__copy h1 { font-size: clamp(4.5rem, 2rem + 4.4vw, 6.5rem); }
  .home-hero__media { grid-column: 8 / span 5; grid-row: 1 / span 2; }
  .home-hero__after { grid-column: 1 / span 6; grid-row: 2; align-self: start; padding-top: var(--s-3); }
}

/* ---------- Nagłówek sekcji (etykieta, H2, lead) ---------- */

.home-head { display: grid; gap: var(--s-4); justify-items: start; max-width: 60ch; }
.home-head__label { color: var(--c-accent); }

/* ---------- 2. Routesetting (przyklejony telefon) ---------- */
/* Układ kroków i numer kroku należą do motion.css; tu tylko odstęp od nagłówka. */

.home-setting__story { margin-top: var(--s-12); }

/* ---------- 3. Panel w przeglądarce (karuzela z ramką przeglądarki) ---------- */

.home-panel .carousel { margin-top: var(--s-10); }
.carousel--browser .carousel__media { --browser-w: 100%; }
.carousel--browser .carousel__copy { max-width: 44ch; }

@media (min-width: 64rem) {
  /* Ramka przeglądarki jest pozioma: tekst węższy, nagranie szerokie. */
  .carousel--browser .carousel__slide {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--s-10);
  }
  .carousel--browser .carousel__media { justify-self: stretch; }
}

/* ---------- 4. Oferta dla ścianki ---------- */

.home-offer__grid { row-gap: var(--s-10); align-items: start; }
.home-offer__lead { display: grid; gap: var(--s-4); justify-items: start; }
.home-offer__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-2);
}
.home-offer__amount {
  font-family: var(--font-display);
  font-size: var(--fs-price);
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.home-offer__per { font-size: var(--fs-small); line-height: 1.4; color: var(--c-text-2); }
/* Dwa wiersze cennika obok siebie (od 390 px jeden pod drugim, gdy brak miejsca). */
.home-offer__rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--s-3);
  width: 100%;
  margin-top: var(--s-2);
}
.home-offer__row {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
}
.home-offer__row--first { border-color: var(--c-accent); }
.home-offer__row .home-offer__price { margin-top: 0; }
.home-offer__row-label { font-size: var(--fs-small); font-weight: 600; color: var(--c-text); }
.home-offer__row-note { font-size: var(--fs-small); line-height: 1.45; color: var(--c-text-2); }
/* Suma za rok pod ceną miesięczną: pełna kwota roczna jawnie, cyfry w kolumnach jak kwota wyżej. */
.home-offer__row-year { font-size: var(--fs-small); font-weight: 600; color: var(--c-text); font-variant-numeric: tabular-nums; }
.home-offer__actions { margin-top: var(--s-4); }

.home-offer__body {
  padding: var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
}
.home-offer__list { display: grid; gap: var(--s-4); }
.home-offer__list li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  color: var(--c-text-2);
  line-height: 1.5;
}
.home-offer__list strong { color: var(--c-text); font-weight: 600; }
.home-offer__list .icon { flex: none; color: var(--c-accent); margin-top: 2px; }

@media (min-width: 48rem) {
  .home-offer__body { padding: var(--s-8); }
}
@media (min-width: 64rem) {
  .home-offer__lead { grid-column: 1 / span 5; position: sticky; top: calc(var(--nav-h) + var(--s-8)); }
  .home-offer__body { grid-column: 7 / span 6; }
}

/* ---------- 5. Pas wspinacza (mniejszy) ---------- */

.home-climber__grid { row-gap: var(--s-10); align-items: center; }
.home-climber__copy { display: grid; gap: var(--s-4); justify-items: start; }
.home-climber__copy .actions { margin-top: var(--s-2); }

@media (min-width: 64rem) {
  .home-climber__copy { grid-column: 2 / span 6; }
  .home-climber__media { grid-column: 9 / span 3; }
}