/* Frontend styles for NWS Slider */

.nws-slider {
  --nws-dot: #ffffff;

  /* ✅ NEW: global solid background (optional) */
  --nws-bg-solid: transparent;

  --nws-r-tl: 24px;
  --nws-r-tr: 24px;
  --nws-r-br: 24px;
  --nws-r-bl: 24px;

  --nws-ar-d: 21/9;
  --nws-ar-t: 16/9;
  --nws-ar-m: 4/3;

  --nws-hw-d: 50%;
  --nws-tw-d: 50%;

  --nws-overlay: 55; /* 0..90 (global) */

  position: relative;

  /* ✅ FIX: nigdy nie przekraczaj szerokości kontenera/ekranu */
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* ✅ FIX: box-sizing w obrębie slajdera, żeby paddingi nie robiły overflow */
.nws-slider,
.nws-slider * {
  box-sizing: border-box;
}

.nws-viewport {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-top-left-radius: var(--nws-r-tl);
  border-top-right-radius: var(--nws-r-tr);
  border-bottom-right-radius: var(--nws-r-br);
  border-bottom-left-radius: var(--nws-r-bl);

  aspect-ratio: var(--nws-ar-m);

  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

@media (min-width: 768px) {
  .nws-viewport {
    aspect-ratio: var(--nws-ar-t);
  }
}

@media (min-width: 1024px) {
  .nws-viewport {
    aspect-ratio: var(--nws-ar-d);
  }
}

.nws-track {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  will-change: transform;

  /* ✅ FIX: zapobiega wpływowi overflow na dokument */
  max-width: 100%;
}

.nws-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;

  /* ✅ FIX: “flex children overflow” */
  min-width: 0;
}

.nws-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;

  /* ✅ solid background: per-slide overrides global */
  background-color: var(--nws-slide-bg, var(--nws-bg-solid, transparent));

  /* ✅ per-slide pion obrazu */
  background-position: center var(--nws-bg-y, center);

  background-repeat: no-repeat;
  transform: scale(1.01);
}

.nws-slide-bg--empty {
  background: var(--nws-slide-bg, var(--nws-bg-solid, #111));
}

/* Default overlay (global) */
.nws-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, calc(var(--nws-overlay) / 100)) 0%,
    rgba(0, 0, 0, calc(var(--nws-overlay) / 180)) 45%,
    rgba(0, 0, 0, 0) 80%
  );
  pointer-events: none;
}

/* Custom overlay per-slide */
.nws-slide-overlay--custom {
  background: linear-gradient(
    var(--nws-ov-angle, 90deg),
    rgba(var(--nws-ov-rgb, 0, 0, 0), var(--nws-ov-a1, 0.55)) var(--nws-ov-p1, 0%),
    rgba(var(--nws-ov-rgb, 0, 0, 0), var(--nws-ov-a2, 0.31)) var(--nws-ov-p2, 45%),
    rgba(var(--nws-ov-rgb, 0, 0, 0), var(--nws-ov-a3, 0)) var(--nws-ov-p3, 80%)
  );
}

.nws-slide-overlay--custom.nws-slide-overlay--cover {
  background: rgba(var(--nws-ov-rgb, 0, 0, 0), var(--nws-ov-a1, 0.55));
}

.nws-slide-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;

  /* ✅ per-slide pozycja kontenera */
  justify-content: var(--nws-content-x, flex-start);
  align-items: var(--nws-content-y, center);

  /* ✅ bazowy padding + odsunięcia w % */
  --nws-pad: clamp(18px, 4vw, 48px);

  padding-left: calc(var(--nws-pad) + var(--nws-pad-l, 0%));
  padding-right: calc(var(--nws-pad) + var(--nws-pad-r, 0%));
  padding-top: calc(var(--nws-pad) + var(--nws-pad-t, 0%));
  padding-bottom: calc(var(--nws-pad) + var(--nws-pad-b, 0%));

  /* ✅ FIX: pozwala zawartości flex się zwężać (bez overflow) */
  min-width: 0;
}

.nws-slide-inner {
  max-width: min(1024px, 90%);
  width: 100%;
  min-width: 0;

  color: #fff;
  text-align: left;
}

/* ✅ FIX: łamanie długich ciągów znaków (to usuwa poziomy scroll) */
.nws-heading,
.nws-text,
.nws-btn {
  max-width: 100%;
}

.nws-heading,
.nws-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (min-width: 1024px) {
  .nws-slide-inner {
    max-width: 100%;
  }

  .nws-heading {
    max-width: var(--nws-hw-d);
  }

  .nws-text {
    max-width: var(--nws-tw-d);
  }
}

.nws-heading {
  margin: 0 0 10px;

  /* ✅ per-slide align nagłówka */
  text-align: var(--nws-heading-align, left);

  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(26px, 4vw, 52px);
  font-weight: 700;
}

.nws-text {
  margin: 0 0 16px;

  /* ✅ per-slide align tekstu */
  text-align: var(--nws-text-align, left);

  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.5;
  opacity: 0.95;
}

.nws-text p {
  margin: 0 0 10px;
}

.nws-text p:last-child {
  margin-bottom: 0;
}

.nws-cta {
  margin-top: 14px;

  /* ✅ per-slide align przycisku */
  display: flex;
  justify-content: var(--nws-btn-justify, flex-start);

  /* ✅ FIX: flex overflow */
  min-width: 0;
}

.nws-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;

  padding: 12px 18px;
  border-radius: 9999px;

  background: #ffffff;
  color: #111111;

  font-weight: 700;
  font-size: 14px;

  transition: transform 160ms ease, opacity 160ms ease;

  /* ✅ FIX: jeśli label jest bardzo długi */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.nws-btn:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

/* Dots */
.nws-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
}

/* ✅ HARD RESET for dot buttons (theme-safe) */
.nws-dot {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none;
  font: inherit;

  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;

  /* własny wygląd kropek */
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  border: 2px solid var(--nws-dot) !important;

  cursor: pointer;
  opacity: 0.9;
  transition: transform 150ms ease, opacity 150ms ease, background 150ms ease;
}

.nws-dot:hover {
  transform: scale(1.08);
  opacity: 1;
}

.nws-dot.is-active {
  background: var(--nws-dot) !important;
  opacity: 1;
}

.nws-dot:focus-visible,
.nws-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ================================
   ✅ Nav arrows (prev/next) — responsive + preset/custom SVG
   ================================ */

/* Domyślnie (desktop) */
.nws-slider {
  --nws-nav-size: var(--nws-nav-size-d, 44px);
}

@media (max-width: 767px) {
  .nws-slider {
    --nws-nav-size: var(--nws-nav-size-m, 34px);
  }
}

/*
  Reset + wygląd:
  - przycisk ma stały, responsywny rozmiar (touch target)
  - SVG skaluje się do środka przycisku
*/
.nws-nav-btn {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  text-decoration: none;
  font: inherit;
  line-height: 0;
  border-radius: 0 !important;

  position: absolute;
  z-index: 6;
  cursor: pointer;
  user-select: none;

  width: var(--nws-nav-size);
  height: var(--nws-nav-size);

  display: none; /* pokażemy przez klasy show-d/show-m */

  color: var(--nws-nav-color, #ffffff);
  transition: color 160ms ease, opacity 160ms ease;
}

/* SVG wypełnia przycisk (nie polega na width/height w SVG) */
.nws-nav-btn svg {
  display: block;
  width: 70%;
  height: 70%;
}

/* hover: tylko zmiana koloru */
.nws-nav-btn:hover {
  color: var(--nws-nav-hover, var(--nws-nav-color, #ffffff));
  opacity: 0.95;
}

/* disabled */
.nws-nav-btn[disabled],
.nws-nav-btn[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}

.nws-nav-btn--prev {
  left: 12px;
}

.nws-nav-btn--next {
  right: 12px;
}

/* Vertical positions */
.nws-nav-pos--top {
  top: 12px;
}

.nws-nav-pos--middle {
  top: 50%;
  transform: translateY(-50%) !important;
}

.nws-nav-pos--bottom {
  bottom: 12px;
}

/* Widoczność desktop/mobile (osobno per przycisk) */
@media (min-width: 768px) {
  .nws-nav-btn.nws-nav-show-d {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 767px) {
  .nws-nav-btn.nws-nav-show-m {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Focus ring */
.nws-nav-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (hover: none) and (pointer: coarse) {
  .nws-btn:hover {
    transform: none;
  }
}

/* HARDEN: absolutna blokada poziomego overflow */
.nws-slider {
  display: block;
  max-inline-size: 100%;
  overflow-x: clip; /* nowoczesne; bezpieczniejsze niż hidden */
}

/* Dodatkowa asekuracja na media (gdy motyw coś narzuca globalnie) */
.nws-slider img,
.nws-slider svg,
.nws-slider video {
  max-width: 100%;
  height: auto;
}