/* Strefa Beauty — uzupełnienia do klas Webflow:
   hero: .section_header5 / .header5_* (wzorzec z oboz-taneczny.html),
   galeria: .gallery_component (masonry na CSS columns: 3 kolumny, 1 kolumna <= 767px). */

/* Hero — zdjęcie ma zawsze wypełniać header (w arkuszu Webflow height: auto) */
.section_header5.is-beauty .header5_background-image {
  height: 100%;
  object-position: 50% 45%;
}

.section_header5.is-beauty .header5_content {
  min-height: 85svh;
}

/* Przyciemnienie od lewej — tekst leży na jasnych żarówkach luster */
.section_header5.is-beauty .image-overlay-layer {
  opacity: 1;
  background-color: transparent;
  /* Tekst leży w wyśrodkowanym kontenerze 60rem — ciemna strefa sięga zawsze za jego prawą krawędź */
  background-image: linear-gradient(90deg, #000000d9 0%, #000000b3 max(45%, 50% + 8rem), #00000040 88%, #00000026 100%);
}

.section_header5.is-beauty .max-width-medium {
  max-width: 40rem;
}

.beauty_nowrap {
  white-space: nowrap;
}

.section_header5.is-beauty .padding-section-large-4 {
  align-self: center;
}

.beauty_hero-subtitle {
  color: var(--white);
  text-align: left;
  margin-bottom: 0;
  font-size: 1.8rem;
  line-height: 1.3;
}

.beauty_hero-text {
  color: #ffffffd9;
  text-align: left;
  max-width: 30rem;
  margin-top: .75rem;
  margin-bottom: 0;
  font-size: 1.125rem;
  line-height: 1.5;
}

/* Sekcja tekstowa */
.beauty_intro {
  text-align: center;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

.beauty_intro .line-divider {
  width: 6rem;
  margin: .75rem auto 0;
}

.beauty_intro-text {
  color: var(--white);
  margin-top: 1.5rem;
  margin-bottom: 0;
  font-size: 1.35rem;
  line-height: 1.6;
}

/* Galeria masonry — CSS grid z ręcznie rozplanowanymi slotami, żeby wszystkie kolumny
   kończyły się równo (przy CSS columns 3 pionowe + 8 poziomych zdjęć zawsze zostawiało
   dziurę w jednej kolumnie).
   Jednostka siatki: 1 wiersz = połowa wysokości poziomego zdjęcia 3:2 minus odstęp,
   więc poziome zdjęcie = 2 wiersze (bez przycięcia), pionowe = 4 wiersze (~3:4),
   "kwadrat" = 3 wiersze (~1:1).
   Desktop (3 kolumny, 10 wierszy):  | 02 | 03■ | 04 |
                                     | 05▮| 10▮ | 08 |
                                     | 07 |  09■| 06▮|
                                     | 11 |     | 01 |
   Tablet (2 kolumny, 14 wierszy): lewa 02 03 06▮ 07 09 01, prawa 04 05▮ 11 10▮ 08.
   Mobile (<= 767px): zwykła lista, zdjęcia w naturalnych proporcjach.
   Zmiana liczby zdjęć = trzeba przeliczyć sloty (suma wierszy w każdej kolumnie musi być równa). */
.beauty_gallery-wrap {
  container-type: inline-size;
}

.gallery_component.beauty_gallery {
  --beauty-gap: 2rem;
  --beauty-cols: 3;
  column-count: auto;
  gap: var(--beauty-gap);
  grid-template-columns: repeat(var(--beauty-cols), minmax(0, 1fr));
  grid-auto-rows: calc(((100cqw - (var(--beauty-cols) - 1) * var(--beauty-gap)) / var(--beauty-cols) * 2 / 3 - var(--beauty-gap)) / 2);
  margin-top: 1rem;
  display: grid;
}

.beauty_gallery-item {
  background-color: #1a1a1a;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}

.beauty_gallery-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .4s ease;
  display: block;
}

.beauty_gallery-item:hover .beauty_gallery-img {
  transform: scale(1.03);
}

.beauty_gallery-item:focus-visible {
  outline: 2px solid var(--orange-flames);
  outline-offset: 3px;
}

/* Desktop: grid-area = wiersz-start / kolumna-start / wiersz-koniec / kolumna-koniec */
.beauty_gallery .is-photo-02 { grid-area: 1 / 1 / 3 / 2; }
.beauty_gallery .is-photo-05 { grid-area: 3 / 1 / 7 / 2; }
.beauty_gallery .is-photo-07 { grid-area: 7 / 1 / 9 / 2; }
.beauty_gallery .is-photo-11 { grid-area: 9 / 1 / 11 / 2; }
.beauty_gallery .is-photo-03 { grid-area: 1 / 2 / 4 / 3; }
.beauty_gallery .is-photo-10 { grid-area: 4 / 2 / 8 / 3; }
.beauty_gallery .is-photo-09 { grid-area: 8 / 2 / 11 / 3; }
.beauty_gallery .is-photo-04 { grid-area: 1 / 3 / 3 / 4; }
.beauty_gallery .is-photo-08 { grid-area: 3 / 3 / 5 / 4; }
.beauty_gallery .is-photo-06 { grid-area: 5 / 3 / 9 / 4; }
.beauty_gallery .is-photo-01 { grid-area: 9 / 3 / 11 / 4; }

/* CTA */
.beauty_cta {
  text-align: center;
  border-top: 1px solid var(--orange-flames);
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 3rem;
}

.beauty_cta-text {
  color: var(--white);
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.6;
}

@media screen and (max-width: 991px) {
  .gallery_component.beauty_gallery {
    --beauty-gap: 1.5rem;
    --beauty-cols: 2;
  }

  .beauty_gallery .is-photo-02 { grid-area: 1 / 1 / 3 / 2; }
  .beauty_gallery .is-photo-03 { grid-area: 3 / 1 / 5 / 2; }
  .beauty_gallery .is-photo-06 { grid-area: 5 / 1 / 9 / 2; }
  .beauty_gallery .is-photo-07 { grid-area: 9 / 1 / 11 / 2; }
  .beauty_gallery .is-photo-09 { grid-area: 11 / 1 / 13 / 2; }
  .beauty_gallery .is-photo-01 { grid-area: 13 / 1 / 15 / 2; }
  .beauty_gallery .is-photo-04 { grid-area: 1 / 2 / 3 / 3; }
  .beauty_gallery .is-photo-05 { grid-area: 3 / 2 / 7 / 3; }
  .beauty_gallery .is-photo-11 { grid-area: 7 / 2 / 9 / 3; }
  .beauty_gallery .is-photo-10 { grid-area: 9 / 2 / 13 / 3; }
  .beauty_gallery .is-photo-08 { grid-area: 13 / 2 / 15 / 3; }

  .beauty_hero-subtitle {
    font-size: 1.4rem;
  }

  .beauty_intro-text {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 767px) {
  .section_header5.is-beauty .header5_content {
    min-height: 70svh;
  }

  .section_header5.is-beauty .image-overlay-layer {
    background-image: linear-gradient(180deg, #00000066 0%, #000000b3 100%);
  }

  .gallery_component.beauty_gallery {
    display: block;
  }

  .beauty_gallery-item {
    height: auto;
    margin-bottom: 1.5rem;
  }

  .beauty_gallery-item:last-child {
    margin-bottom: 0;
  }

  .beauty_gallery-img {
    height: auto;
  }

  .beauty_hero-subtitle {
    font-size: 1.15rem;
  }

  .beauty_hero-text {
    margin-top: .5rem;
    font-size: .95rem;
  }

  .beauty_intro-text {
    font-size: 1.05rem;
  }

  .beauty_cta-text {
    font-size: 1rem;
  }
}