/* Strona „Oferta” — style tylko dla tej podstrony.
   Bazuje na kicie podstron ze styles.css (sub-section, sub-head, sub-split,
   sub-cards, sub-figure, side-box, cta-band) i tokenach strony głównej. */

/* ---------- 01 — formy pomocy ---------- */

.oferta-uslugi .sub-head,
.oferta-choose .sub-head {
  margin-bottom: clamp(32px, 4vw, 56px);
}

.oferta-aside {
  display: grid;
  gap: 12px;
  align-content: start;
}

.oferta-stages {
  display: grid;
}

.oferta-stage {
  display: grid;
  gap: 18px;
  padding-block: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--line);
}

.oferta-stage:first-child {
  padding-top: 0;
  border-top: 0;
}

.oferta-stage:last-child {
  padding-bottom: 0;
}

.oferta-stage__head {
  display: grid;
  gap: 6px;
  align-content: start;
}

.oferta-stage__step {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-transform: uppercase;
}

.oferta-intake {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius);
  background: var(--green-tint);
}

.oferta-intake p {
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.oferta-stage__head h3 {
  font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.5rem);
}

.oferta-stage__count {
  color: var(--muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.oferta-stage__cards {
  grid-template-columns: minmax(0, 1fr);
}

.oferta-card {
  gap: 6px;
  padding: clamp(20px, 2.2vw, 26px);
  border-color: var(--line);
  background: var(--cream);
}

.oferta-card h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}

.oferta-card p {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (min-width: 620px) {
  .oferta-stage__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .oferta-stage {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    column-gap: clamp(32px, 4vw, 56px);
    align-items: start;
  }
}

/* ---------- 02 — rodzice, dzieci i młodzież ---------- */

.oferta-family__main {
  display: grid;
  gap: 14px;
  align-content: start;
}

.oferta-family__rows {
  display: grid;
  margin-top: 10px;
  list-style: none;
  border-top: 1px solid var(--line);
}

.oferta-family__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.oferta-family__row-main {
  display: grid;
  gap: 4px;
}

.oferta-family__row h3 {
  font-size: 1.125rem;
  line-height: 1.3;
}

.oferta-family__row-text {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.oferta-family__row-arrow {
  color: var(--accent);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.18s;
}

.oferta-family__row:hover h3 {
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

.oferta-family__row:hover .oferta-family__row-arrow {
  transform: translateX(4px);
}

.oferta-family__media {
  display: grid;
  gap: 16px;
  align-content: start;
}

@media (min-width: 620px) and (max-width: 899.98px) {
  .oferta-family__media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 03 — jak wybrać formę pomocy ---------- */

.oferta-choose__list {
  display: grid;
  list-style: none;
  border-top: 1px solid var(--line);
}

.oferta-choose__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.oferta-choose__num {
  padding-top: 0.35em;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.oferta-choose__body {
  display: grid;
  gap: 6px;
}

.oferta-choose__body h3 {
  font-size: 1.125rem;
}

.oferta-choose__body p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.side-box--accent .link-arrow {
  color: #FFFFFF;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

.side-box--accent .link-arrow:hover {
  color: #FFFFFF;
}

@media (max-width: 899.98px) {
  .side-box--accent .link-arrow,
  .oferta-intake .link-arrow {
    min-height: 44px;
  }
}

@media (min-width: 900px) {
  .oferta-choose__split .sub-split__aside {
    align-self: stretch;
  }

  .oferta-choose__box {
    position: sticky;
    top: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oferta-family__row-arrow {
    transition: none;
  }
}