/* Ścieżka wspinacza (/wspinacz): hero, karuzela korzyści, mapa hali z przybliżeniem, oferta 0 zł, polecenie, FAQ.
   Tylko zmienne z base.css i motion.css. Mobile first. */

/* ---------- 1. Hero: split, jedno CTA ---------- */

.climber-hero { padding-block: var(--s-8) var(--s-16); }
.climber-hero__grid { row-gap: var(--s-10); align-items: center; }
.climber-hero__copy > .lead { margin-top: var(--s-4); }
/* Fraza SEO nad h1 (plan SEO A12), jak etykieta w hero strony głównej. */
.climber-hero__label { color: var(--c-accent); margin-bottom: var(--s-3); }
.climber-hero__note { margin-top: var(--s-3); max-width: 44ch; }

/* CTA to <summary> w wyglądzie przycisku; formularz rozwija się pod nim. */
.notify { margin-top: var(--s-8); }
.notify > summary { list-style: none; }
.notify > summary::-webkit-details-marker { display: none; }
.notify[open] > summary { background: var(--c-accent-deep); }
.notify__body {
  margin-top: var(--s-3);
  padding: var(--s-5);
  max-width: 440px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
}
html.motion-ok .notify[open] .notify__body { animation: climber-drop var(--t-toggle) var(--ease-out); }
@keyframes climber-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.notify__form { gap: var(--s-4); }
.notify .form-success { background: var(--c-surface); padding: 0; border: 0; border-radius: 0; }

@media (min-width: 64rem) {
  .climber-hero { padding-top: var(--s-16); }
  .climber-hero__copy { grid-column: 1 / span 6; }
  .climber-hero__media { grid-column: 8 / span 5; }
}

/* ---------- 2. Karuzela korzyści ---------- */
/* Mechanika i wygląd karuzeli są w base.css (wspólne z /). Tu tylko nagłówek i CTA sekcji. */

.perks__head { display: grid; gap: var(--s-4); justify-items: start; }
.perks__head .label { color: var(--c-accent); }
.perks__cta { display: grid; gap: var(--s-3); justify-items: start; margin-top: var(--s-12); }

/* ---------- 3. Mapa hali ---------- */

.map-find__grid { row-gap: var(--s-10); align-items: center; }
.map-find__copy { display: grid; gap: var(--s-4); justify-items: start; }

@media (min-width: 64rem) {
  .map-find__copy { grid-column: 1 / span 6; }
  .map-find__media { grid-column: 8 / span 5; }
}

.map-find__facts { display: grid; gap: var(--s-3); margin-top: var(--s-2); }
.map-find__facts li { display: flex; gap: var(--s-3); align-items: flex-start; line-height: 1.5; }
.map-find__facts .icon { flex: none; color: var(--c-accent); margin-top: 2px; }

/* ---------- 3b. Oferta: wszystko za 0 zł, pierwsze 5 minut ---------- */

.climber-offer__grid { row-gap: var(--s-10); align-items: start; }
.climber-offer__head { display: grid; gap: var(--s-4); justify-items: start; }
.climber-offer__label { color: var(--c-accent); }
.climber-offer__list { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.climber-offer__list li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--c-text-2); line-height: 1.5; }
.climber-offer__list strong { color: var(--c-text); font-weight: 600; }
.climber-offer__list .icon { flex: none; color: var(--c-accent); margin-top: 2px; }

.climber-offer__steps {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
  padding: var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
}
.climber-offer__steps-title { font-size: var(--fs-h3); font-weight: 800; }
.climber-steps { display: grid; gap: var(--s-4); counter-reset: none; }
.climber-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-3); align-items: start; line-height: 1.5; }
.climber-steps__num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--c-field-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  color: var(--c-accent);
}
.climber-steps li > span:last-child { padding-top: 4px; }
.climber-offer__cta { margin-top: var(--s-2); }

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

/* ---------- 4. Pas polecenia ---------- */

.refer__form { margin-top: var(--s-8); }
.refer__success { margin-top: var(--s-8); }
.refer__submit { display: grid; gap: var(--s-3); justify-items: start; }
.refer__more > summary { list-style: none; cursor: pointer; }
.refer__more > summary::-webkit-details-marker { display: none; }
.refer__more-body { display: grid; gap: var(--s-4); margin-top: var(--s-3); max-width: 560px; }

@media (min-width: 48rem) {
  .refer__form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--s-4);
    row-gap: var(--s-4);
    align-items: end;
  }
  .refer__submit { justify-items: stretch; }
  .refer__submit .btn { width: 100%; }
  .refer__more { grid-column: 1 / -1; }
}

/* ---------- 5. FAQ i pasek nastrojów Cuzco ---------- */

.faq-section__grid { row-gap: var(--s-8); }
.moods { display: flex; gap: var(--s-2); margin-top: var(--s-6); }
.moods .cuzco { --cz: 52px; }
@media (min-width: 64rem) {
  .faq-section__side { grid-column: 1 / span 4; }
  .faq-section__list { grid-column: 5 / span 8; }
  .moods { flex-wrap: wrap; max-width: 240px; row-gap: var(--s-4); }
  .moods .cuzco { --cz: 64px; }
}

/* Fraza SEO w h1 (2026-09-25, „aplikacja wspinaczkowa”): osobny wiersz krojem tekstu nad hasłem, jak na /scianki. */
.climber-hero__kicker {
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  color: var(--c-text);
  text-wrap: pretty;
}