/* ============================================================
   KALKULATOR DŁUGOŚCI DESKI – nadpisania arkusza bazowego
   ============================================================
   Wspólny szkielet: includes/calculator-base.css (ładowany przez
   header.php PRZED tym plikiem – $base_css w index.php).
   Tokeny :root – includes/tokens.css. Tutaj WYŁĄCZNIE reguły
   specyficzne dla deski (wcześniej appendix na końcu pełnej kopii
   arkusza nart – konsolidacja 2026-06-12).
   ============================================================ */

/* ============================================================
   DESKI-SPECYFICZNE (na bazie wspólnego arkusza nart/kije)
   Tylko to, czego nart/kije nie mają: 3-kolumnowe siatki kart,
   profil „Dziecko" (notka + chowane pola) oraz tip szerokości talii.
   ============================================================ */

/* Tytuł deski jest dłuższy niż w nart („…deski snowboardowej") – pozwalamy
   mu się zawijać, dzięki czemu pozostaje wyśrodkowany (hero ma text-align:
   center) zamiast wychodzić poza kontener przy white-space: nowrap. */
.hero h1 {
  white-space: normal;
}

/* Siatki kart – nart bazowo ma .cards-grid 2-kol; deska używa modyfikatorów */
.cards-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cards-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 580px) {

  .cards-grid-2,
  .cards-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Pokazywanie/ukrywanie pól zależnie od profilu (toggluje script.js) */
#child-age-group {
  display: none;
}

.is-visible {
  display: block !important;
}

.is-hidden {
  display: none !important;
}

/* Notka dla profilu „Dziecko" */
.child-note {
  display: none;
}

.child-note p {
  background: #f8f2ff;
  border: 1px solid #e5d6ff;
  border-radius: var(--radius-sm);
  color: #4d2d7d;
  padding: 14px 16px;
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Tip szerokości talii (deski-specyficzny, niebieski; .result-tip żółty
   zostaje ze wspólnego arkusza) */
.waist-tip {
  margin-top: 16px;
  padding: 16px 20px;
  background: #f0f7ff;
  border: 1.5px solid rgba(23, 105, 212, 0.2);
  border-radius: var(--radius-sm);
  color: #24406d;
  font-size: 0.88rem;
  line-height: 1.6;
  display: none;
}

.waist-tip.visible {
  display: block;
}

/* „Dane fizyczne" jak w nartach – odstępy pól, ikony profilu SVG */

/* Deska układa pola pionowo (bez .inputs-row jak nart) – bez odstępu
   etykiety min/max nachodziły na kolejne pole. Dodajemy separację. */
.calculator-card .input-group {
  margin-bottom: 22px;
}

.calculator-card .input-group:last-child {
  margin-bottom: 0;
}

.slider-labels {
  margin-top: 4px;
}

/* Ikony profilu jako inline SVG (baza nart ma .gender-icon pod glif tekstowy) */
.gender-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Mobile: profil (3 pigułki M/K/Dziecko) jeden pod drugim – w rzędzie
   „Dziecko" nie mieści się na telefonie. Scoped #profile-grid → tylko deski
   (nart/kije mają 2 pigułki i brak #profile-grid → bez zmian). */
@media (max-width: 600px) {
  #profile-grid {
    flex-direction: column;
  }

  #profile-grid .gender-btn {
    flex: 0 0 auto;
    width: 100%;
    justify-content: center;
  }