/* Drobne partiale współdzielone: ikona, logo, nagłówek sekcji, duży przycisk. Tylko tokeny semantyczne. */

.gs-icon {
  flex: none;
}

.gs-btn--lg {
  height: 56px;
  padding-inline: var(--gs-space-8);
}

/* Logo: znak słowny w kroju nagłówków. L-1 „GS Meble”, L-2 „gsmeble.pl”; wybór przez html[data-logo]. */
.gs-logo {
  --gs-logo-accent: var(--gs-brand);
  display: inline-flex;
  align-items: baseline;
  color: var(--gs-ink);
  font-family: var(--gs-font-display);
  font-size: 26px;
  font-weight: var(--gs-weight-strong);
  font-variation-settings: var(--gs-h-variation);
  letter-spacing: -0.035em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.gs-logo--sm {
  font-size: 21px;
}

.gs-logo--xl {
  font-size: clamp(72px, 17vw, 260px);
  letter-spacing: -0.05em;
}

.gs-logo__accent {
  color: var(--gs-logo-accent);
}

.gs-logo__l2,
html[data-logo='l2'] .gs-logo__l1 {
  display: none;
}

html[data-logo='l2'] .gs-logo__l2 {
  display: inline;
}

/* Arkusz: logo w kolorze tekstu arkusza (brand nie ma kontrastu na brand-deep). */
.gs-sheet .gs-logo {
  --gs-logo-accent: currentColor;
  color: var(--gs-sheet-fg);
}

/* Nagłówek sekcji: tytuł i opcjonalny lead po lewej, link po prawej na linii bazowej tytułu. */
.gs-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gs-space-3) var(--gs-space-8);
  margin-bottom: var(--gs-space-10);
}

.gs-section-head__text {
  max-width: 44rem;
}

.gs-section-head__lead {
  max-width: 34em;
  margin-top: var(--gs-space-3);
  color: var(--gs-ink-muted);
}

.gs-sheet .gs-section-head__lead {
  color: inherit;
}

.gs-section-head__link {
  flex: none;
  padding-block: var(--gs-space-2);
  color: var(--gs-link);
  font-weight: var(--gs-weight-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.gs-section-head__link:hover {
  text-decoration-thickness: 2px;
}

@media (max-width: 767px) {
  .gs-section-head {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: var(--gs-space-6);
  }
}

/* Pasek postępu karuzeli (opt-in, js/carousel.js: data-carousel-progress). Cienki biały tor, granatowy
   wskaźnik: szerokość = widoczna część kadru, położenie = przewinięcie. Bez przejść: idzie za przewijaniem
   klatka po klatce, więc przy reduced-motion też jest tylko pozycja. Dekoracja (aria-hidden). */
.gs-progress {
  position: relative;
  height: 3px;
  overflow: hidden;
  border-radius: var(--gs-radius-pill);
  background: var(--gs-grey-0);
}

.gs-progress[hidden],
.gs-progress[data-full] {
  display: none;
}

.gs-progress__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--gs-progress-size, 1) * 100%);
  border-radius: inherit;
  background: var(--gs-brand-deep);
  transform: translateX(calc(var(--gs-progress-pos, 0) / var(--gs-progress-size, 1) * 100%));
}