/*
 * Wspólne uzupełnienia do eksportu Webflow (flames-45b539.webflow.css), ładowane na wszystkich stronach.
 * Nawigacja ma osobny plik: css/navbar.css.
 */

/* Poppins hostowany lokalnie (fonts/) zamiast Google Fonts — RODO + wydajność.
   Tylko grubości faktycznie używane w CSS: 300/400/500/700 (sprawdzone w webflow.css +
   flames-45b539.webflow.css + tym pliku). Świadomie BEZ 600, mimo że jest gdzieś użyte —
   dziś i tak renderuje się jako syntetyzowany bold (najbliższa dostępna grubość, 700),
   więc dodanie prawdziwej wagi 600 zmieniłoby wygląd tamtych elementów. Bez kursywy
   (jedyne <em> w treści ma wyglądać jak syntetyzowana kursywa przeglądarki, tak jak dziś).
   font-family "Poppins" identyczna jak w webflow.css — tamten plik nie wymaga zmian. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/poppins-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/poppins-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Baner "Dni otwarte 2026" na index.html — komponent banner-champ-sec / cta9_* jak "Scena czeka na Ciebie!".
   Tamten baner ma zdjęcie w tle CSS z przezroczystością .69 (.62 <= 991px); tu zdjęcie jest jako <img>
   z srcset (telefon pobiera mniejszy plik) i jest nieco ciemniejsze, bo tłum w kadrze utrudniał
   czytanie białego tekstu. */
.cta9_background-image.is-dni-otwarte {
  opacity: .55;
  object-position: 50% 35%;
}

@media screen and (max-width: 991px) {
  .cta9_background-image.is-dni-otwarte {
    opacity: .5;
  }
}

/* Przyciski w banerach cta9 ("Dni otwarte 2026", "Scena czeka na Ciebie!"): Webflow zmniejsza padding
   na mobile (10px <= 767px, 4px <= 479px), przez co obszar klikalny miał ~26px. Min. 44px wysokości
   (zalecenie dla dotyku), tekst wyśrodkowany; desktop bez zmian (tam przycisk ma padding 23px). */
@media screen and (max-width: 767px) {
  .banner-button {
    justify-content: center;
    align-items: center;
    min-height: 44px;
    display: inline-flex;
  }
}

/* Przycisk Play/Pause filmu w hero (index.html). Przełączanie filmu i ikon: webflow.js,
   aria-label i synchronizacja ikon ze stanem filmu: js/hero-video.js.
   Pozycja z projektu Webflow: .play-pause-button { inset: auto auto 0% 0% } (lewy dolny róg hero).
   Wcześniej przycisk miał 0 px (ikony SVG bez wymiarów + loading="lazy" nigdy się nie wczytywały),
   więc nie dało się go zobaczyć ani kliknąć. */
.w-background-video--control.play-pause-button {
  z-index: 2;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  min-width: 44px;
  min-height: 44px;
  line-height: 0;
}

/* Na mobile autoplay bywa zablokowany (iOS Low Power Mode, oszczędzanie danych) — wideo i tak
   pokazuje plakat (poster + inline background-image), więc przycisk tylko zajmowałby miejsce
   w rogu małego ekranu. display:none (nie visibility/opacity), żeby nie był osiągalny
   z klawiatury ani czytnika ekranu. */
@media screen and (max-width: 767px) {
  .w-background-video--control.play-pause-button {
    display: none;
  }
}

.play-pause-button img {
  width: 44px;
  height: 44px;
  display: block;
}

/* Hero ma overflow: hidden, a przycisk stoi w rogu — obrys rysowany do środka, żeby nie został ucięty */
.play-pause-button:focus-visible {
  outline: 3px solid var(--orange-flames);
  outline-offset: -3px;
}

/* Hero "Letni Obóz Taneczny" (oboz-taneczny.html) — dwie kolumny na desktopie/tablecie: tekst +
   pionowe wideo 9:16 w zaokrąglonej ramce; na mobile wideo jako pełne tło sekcji z gradientem pod
   tekstem. Widget wideo i przycisk Play/Pause: ta sama struktura co hero na index.html (webflow.js
   + js/hero-video.js obsługują autoplay/loop/reduced-motion oraz przełącznik, bez zmian w JS —
   .play-pause-button jest już ukrywany na <=767px regułą wyżej). Nazwa pliku wideo/plakatu zostaje
   bez zmian, gdyby materiał został podmieniony na wersję w wyższej rozdzielczości (te same proporcje). */
.camp-hero {
  background-color: var(--black);
}

.camp-hero_grid {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4rem;
  padding: 6rem 0;
  display: grid;
}

.camp-hero_media {
  height: 70vh;
  max-height: 70vh;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  justify-self: end;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.camp-hero_video-frame.w-background-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 991px) {
  .camp-hero_grid {
    gap: 2.5rem;
    padding: 4rem 0;
  }

  .camp-hero_media {
    height: 55vh;
    max-height: 55vh;
  }
}

@media screen and (max-width: 767px) {
  .camp-hero {
    position: relative;
    overflow: hidden;
  }

  .camp-hero_grid {
    grid-template-columns: 1fr;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 85svh;
    padding: 0 0 3rem;
    display: flex;
  }

  .camp-hero_content {
    z-index: 2;
    position: relative;
  }

  .camp-hero_media {
    z-index: 0;
    aspect-ratio: auto;
    border-radius: 0;
    justify-self: auto;
    width: 100%;
    height: 100%;
    max-height: none;
    position: absolute;
    inset: 0;
  }

  .camp-hero_gradient {
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, 0) 75%);
    pointer-events: none;
    position: absolute;
    inset: 0;
  }
}

/* Sekcje 2-9 obozu tanecznego (oboz-taneczny.html) — kafelki faktów, galeria ośrodka,
   listy z ptaszkami, karty wideo (projekt video), cena/raty i przycisk kopiowania numeru konta. */

.camp-facts {
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  display: grid;
}

.camp-fact_card {
  background-color: #ffffff0d;
  border: 1px solid #ffffff33;
  border-radius: 8px;
  padding: 1.25rem;
}

.camp-fact_label {
  color: var(--orange-flames);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .8rem;
  font-weight: 600;
}

.camp-fact_value {
  color: var(--white);
  margin-top: .35rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.camp-venue_gallery {
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  display: grid;
}

.camp-venue_photo {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  width: 100%;
  object-fit: cover;
}

.camp-checklist {
  gap: .5rem .75rem;
  padding-left: 0;
  list-style: none;
  display: grid;
}

.camp-checklist li {
  color: var(--white);
  padding-left: 1.6rem;
  font-size: 1rem;
  position: relative;
}

.camp-checklist li::before {
  content: "✓";
  color: var(--orange-flames);
  font-weight: 700;
  position: absolute;
  left: 0;
}

.camp-checklist-columns {
  grid-template-columns: 1fr 1fr;
  column-gap: 3rem;
}

.camp-video-grid {
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  display: grid;
}

.camp-video-card {
  background-color: #ffffff0d;
  border-radius: 12px;
  padding: .75rem;
}

.camp-video-card_media {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  width: 100%;
  object-fit: cover;
  display: block;
}

.camp-video-card_link {
  color: var(--white);
  text-align: center;
  margin-top: .75rem;
  font-size: .9rem;
  text-decoration: none;
  display: block;
}

.camp-video-card_link:hover {
  color: var(--orange-flames);
}

@media screen and (max-width: 767px) {
  .camp-venue_gallery {
    grid-template-columns: 1fr;
  }

  .camp-checklist-columns {
    grid-template-columns: 1fr;
  }

  .camp-video-grid {
    grid-template-columns: 1fr;
  }

  .camp-facts {
    grid-template-columns: 1fr;
  }
}

/* flames-45b539.webflow.css definiuje ".is-white" jako współdzieloną klasę z ukrytym
   "margin-top: -30px" na <=767px (linia ok. 4516, prawdopodobnie relikt jednego,
   konkretnego komponentu Webflow) — powodowało nachodzenie tekstu w ciasno ułożonych
   akapitach w nowych sekcjach obozu. Nie edytujemy pliku Webflow, więc neutralizujemy
   to tylko w obrębie nowych sekcji. */
.camp-section .is-white,
.section_cta65 .is-white {
  margin-top: 0;
}

/* Ten sam problem co wyżej: flames-45b539.webflow.css ma ".margin-top.margin-small"
   z "text-align: center" na <=767px (relikt innego komponentu) — wyśrodkowywało listy
   i akapity w nowych sekcjach, które mają być wyrównane do lewej. */
.camp-section .margin-top.margin-small {
  text-align: left;
}

/* Dostępność stopki (wszystkie strony): .copyrights-link miał kontrast 1,66:1 (#333 na
   czarnym) i obszar klikalny ograniczony do wysokości linii tekstu 11px. Szary #999 na
   czarnym daje ~10:1. min-height 24px + padding-block to min. rozmiar dotykowy/klikalny;
   .flex-box dostaje gap, żeby "© Siteconcept.pl" i para dokumentów miały odstęp >=8px
   też na szerokich ekranach (dotąd tylko .doc-link-wrapper miał własny gap). */
.copyrights-link {
  color: #999;
  min-height: 24px;
  padding-block: 4px;
  display: inline-block;
}

.flex-box {
  gap: 8px;
}

/* flames-45b539.webflow.css ma na .testimonial7_logo (ikona płomienia w opiniach)
   tylko max-height, bez width/object-fit — przy width z atrybutu <img> (167) i
   przyciętej max-height (56) przeglądarka skaluje wymiary niezależnie, spłaszczając
   płomień. width: auto pozwala zachować proporcje 167:244 z atrybutów obrazka. */
.testimonial7_logo {
  width: auto;
  height: 3.5rem;
}