/* LAB sekcja edukacyjna z YouTube nowej strony głównej aslandi.pl, v1 (30.09.2026).
   Polecenie Igora: tło ciemne z liśćmi jak w opiniach, cztery filmy (każdy pod inną kategorię) w siatce 2 x 2, prosto
   pod UX; play otwiera film większy, wyśrodkowany, z przyciemnieniem dookoła; nagłówek „Jesteśmy na YouTube” z logo
   i licznikami kanału. Język wizualny jak w opiniach (sąsiednia ciemna sekcja): zdjęcie pod przyciemnieniem głęboką
   zielenią, biała pigułka pod nagłówkiem (tu kanał, tam Google), białe karty 12 px z miniaturą 16:9 i białym kołem
   odtwarzania, siatka 1040 px jak w opiniach i realizacjach. Tytuł kafla to kategoria filmu (żeby każdy wybrał swój),
   zdanie pod nim mówi, o czym jest film; miniatury bez plakietek, bo mają własny duży napis.
   Tło: liście ze ściany roślin w biurze Aslandi (DSC_5614 z WordPressa, „brandowe liście”), kadr w kształcie ekranu,
   mocno przyciemniony (Igor 30.09: „delikatnie mocniej przyciemnić… liście mniej widoczne”). Przewijanie jak w opiniach
   (Igor: tło ma się zachowywać tak samo): na komputerze okładka, tło stoi, a treść płynie nad nim; na telefonie kadr
   przyklejony do góry ekranu; przy ograniczonym ruchu tło stoi razem z sekcją. Ruch: tylko najechanie i nacisk (krzywa z hero) oraz wejście okna
   z filmem (ease-out, 220 ms); zamknięcie od razu. Przy ograniczonym ruchu bez skalowania. */
.yt {
  --yt-sosna: #123f2d;
  --yt-noc: 6, 33, 23; /* #062117 jak w opiniach */
  --yt-atrament: #1c3428;
  --yt-szary: #58685f;
  --yt-linia: #dce3da;
  --yt-szalwia: #eaf0e3;
  --yt-zloto-jasne: #dcc78f;
  --yt-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --yt-r: 12px;
  position: relative;
  isolation: isolate;
  background: #092d20;
  color: #fff;
  font-family: Poppins, system-ui, sans-serif;
  padding-block: clamp(64px, 7vw, 104px);
}
.yt *, .yt *::before, .yt *::after { box-sizing: border-box; }
.yt h2, .yt h3, .yt p, .yt ul { margin: 0; }
.yt ul { padding: 0; list-style: none; }
.yt a { -webkit-tap-highlight-color: transparent; }
.yt ::selection { background: var(--yt-zloto-jasne); color: #092d20; }
.yt :focus-visible { outline: 3px solid var(--yt-zloto-jasne); outline-offset: 3px; }
.yt-ukryte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Tło: warstwa na całą sekcję, w niej kadr wysokości ekranu przyklejony do góry ekranu; przyciemnienie na kadrze. */
.yt-tlo { position: absolute; inset: 0; z-index: -1; }
.yt-tlo-kadr { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.yt-tlo-kadr::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--yt-noc), 0.94) 0%, rgba(var(--yt-noc), 0.85) 45%, rgba(var(--yt-noc), 0.9) 100%); }
.yt-tlo picture, .yt-tlo img { display: block; width: 100%; height: 100%; }
.yt-tlo img { object-fit: cover; object-position: 50% 40%; }
/* Komputer i laptop: okładka jak w opiniach. Kadr przypięty do ekranu (fixed), sekcja przycina go do swojego obszaru
   (clip-path: inset(0)), więc tło stoi, a treść płynie nad nim. Tryb włącza skrypt, gdy sekcja jest 600 px od ekranu
   (klasa yt--okladka); wcześniej nie, bo przypięty obraz liczyłby się jako widoczny i ładował razem z hero. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .yt.yt--okladka { clip-path: inset(0); }
  .yt.yt--okladka .yt-tlo-kadr { position: fixed; inset: 0; height: auto; }
}

.yt-wew { width: min(1040px, 100% - 64px); margin-inline: auto; }

/* Nagłówek jak w opiniach: biały, jedno słowo jasnym złotem; pod nim biała pigułka kanału z logo YouTube. */
.yt-naglowek { max-width: 46rem; margin: 0 auto clamp(36px, 4.5vw, 56px); text-align: center; }
.yt h2 { font-size: clamp(30px, 2.2vw + 16px, 48px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: #fff; text-wrap: balance; }
.yt h2 em { font-style: normal; color: var(--yt-zloto-jasne); }
.yt-lead { margin-top: 14px; font-size: clamp(16.5px, 0.3vw + 15px, 18.5px); line-height: 1.55; color: rgba(255, 255, 255, 0.84); text-wrap: balance; }
/* Kanał (do 02.10.2026 biała pigułka, od 02.10 karta profilu, niżej) jak ocena Google w opiniach, ale z dowodem w pełnych liczbach (Igor 30.09: „całe liczby
   i trochę większe, żeby był efekt wow”): liczba nad podpisem, liczy się od zera przy wejściu w ekran (2 s, skrypt). */
/* od 02.10.2026 karta kanału jak profil (Igor): u góry awatar, nazwa i adres kanału, po prawej logo YouTube; pod linią
   trzy liczby; cała karta jest jednym linkiem do kanału */
.yt-kanal { display: inline-flex; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 26px; min-height: 48px;
  padding: 16px 24px 18px; border-radius: 22px; background: #fff; color: var(--yt-atrament); text-decoration: none;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.65); touch-action: manipulation;
  transition: transform 180ms var(--yt-ease), box-shadow 180ms var(--yt-ease); }
/* oficjalne logo YouTube z napisem (brand.youtube, 02.10.2026): bez zmian, wolne pole co najmniej szerokości trójkąta
   z ikony (ok. 8,5 px przy 104 px; w karcie kanału co najmniej 16 px), nie mniejsze niż 100 px szerokości */
.yt-logo { display: block; flex: none; width: 104px; height: auto; margin-left: auto; }
.yt-profil { display: flex; align-items: center; gap: 12px; text-align: left; }
/* awatar w kółku jak na YouTube; selektor z klasą karty, bo style motywu i Elementora ustawiają obrazom border-radius: 0 */
.yt-kanal .yt-awatar { display: block; flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.yt-profil-tekst { display: grid; gap: 1px; min-width: 0; margin-right: 12px; }
.yt-profil-nazwa { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--yt-sosna); }
.yt-profil-adres { font-size: 13.5px; font-weight: 500; line-height: 1.3; color: #58685f; }
.yt-kanal-liczby { display: flex; align-items: stretch; justify-content: center; padding-top: 14px; border-top: 1px solid var(--yt-linia); }
.yt-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-inline: 22px; text-align: center; }
.yt-stat + .yt-stat { border-left: 1px solid var(--yt-linia); }
.yt-stat:first-child { padding-left: 0; }
.yt-stat:last-child { padding-right: 0; }
.yt-liczba { font-size: clamp(22px, 0.9vw + 13px, 28px); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--yt-sosna);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.yt-podpis { margin-top: 3px; font-size: 13.5px; font-weight: 500; line-height: 1.2; color: #58685f; white-space: nowrap; }
.yt-kanal:active { transform: scale(0.97); }

/* Cztery filmy 2 x 2 (telefon: jeden pod drugim). Cały kafel jest jednym linkiem do filmu: miniatura, tytuł i opis
   otwierają okno; bez skryptu prowadzi do YouTube. Kafle w rzędzie tej samej wysokości. */
.yt-siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.yt-siatka > li { display: flex; min-width: 0; }
.yt-karta { display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: var(--yt-r); background: #fff;
  color: var(--yt-atrament); text-decoration: none; touch-action: manipulation;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 28px 56px -30px rgba(0, 0, 0, 0.6);
  transition: transform 220ms var(--yt-ease), box-shadow 220ms var(--yt-ease); }
.yt-karta:focus-visible { outline-offset: 4px; }
.yt-karta:active { transform: scale(0.985); }
.yt-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--yt-szalwia); }
.yt-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--yt-ease); }
.yt-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.94); color: var(--yt-sosna); transform: translate(-50%, -50%);
  box-shadow: 0 10px 28px -8px rgba(8, 32, 22, 0.6); transition: transform 220ms var(--yt-ease); }
.yt-play svg { width: 30px; height: 30px; margin-left: 3px; fill: currentColor; }
.yt-czas { position: absolute; right: 12px; bottom: 12px; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.78);
  color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.yt-karta:active .yt-play { transform: translate(-50%, -50%) scale(0.94); }
@media (max-width: 1023px) {
  .yt-play { width: 56px; height: 56px; }
  .yt-play svg { width: 24px; height: 24px; margin-left: 2px; }
}

.yt-tresc { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 18px 22px 22px; }
.yt-tytul { font-size: clamp(18px, 0.5vw + 14.5px, 21px); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--yt-sosna); text-wrap: balance; }
.yt-opis { display: block; font-size: 15.5px; line-height: 1.5; color: var(--yt-szary); text-wrap: pretty; }

/* Pod filmami jeden link tekstowy na kanał (pigułka w nagłówku też prowadzi na kanał); bez przycisku, żeby nie
   konkurował ze złotą „Bezpłatną wyceną” sąsiednich sekcji. */
.yt-akcje { display: flex; justify-content: center; margin-top: clamp(28px, 3.5vw, 44px); }
.yt-wszystkie { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border-radius: 6px; color: var(--yt-zloto-jasne);
  font-size: 15.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.yt-wszystkie svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 220ms var(--yt-ease); }
/* motyw (Astra) zmienia linkom kolor przy najechaniu i fokusie (a:hover, a:focus); linki sekcji trzymają swoje barwy */
.yt a.yt-karta, .yt a.yt-karta:hover, .yt a.yt-karta:focus, .yt a.yt-karta:active, .yt a.yt-karta:visited { color: var(--yt-atrament); }
.yt a.yt-kanal, .yt a.yt-kanal:hover, .yt a.yt-kanal:focus, .yt a.yt-kanal:active, .yt a.yt-kanal:visited { color: var(--yt-atrament); }
.yt a.yt-wszystkie, .yt a.yt-wszystkie:focus, .yt a.yt-wszystkie:active, .yt a.yt-wszystkie:visited { color: var(--yt-zloto-jasne); }

@media (hover: hover) and (pointer: fine) {
  .yt-karta:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14), 0 34px 60px -30px rgba(0, 0, 0, 0.7); }
  .yt-karta:hover:active { transform: translateY(-1px) scale(0.985); }
  .yt-karta:hover .yt-media img { transform: scale(1.04); }
  .yt-karta:hover .yt-play { transform: translate(-50%, -50%) scale(1.04); }
  .yt-kanal:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.7); }
  .yt a.yt-wszystkie:hover { color: #fff; }
  .yt-wszystkie:hover svg { transform: translateX(3px); }
}

/* Okno z filmem: dialog na cały ekran (klik poza ramką trafia w sam dialog i zamyka), ramka na środku, film 16:9,
   nad nim tytuł i zamknięcie. Tło przyciemnione głęboką zielenią. Strona pod spodem nie przewija się (klasa na html). */
.yt-okno { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 24px;
  border: 0; background: transparent; color: #fff; overflow: auto; }
.yt-okno[open] { display: grid; place-items: center; }
.yt-okno::backdrop { background: rgba(3, 17, 11, 0.93); }
.yt-okno-ramka { width: min(1120px, 100%, (100vh - 150px) * 16 / 9); width: min(1120px, 100%, (100dvh - 150px) * 16 / 9); }
.yt-okno-pasek { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.yt-okno-tytul { font-size: clamp(15px, 0.4vw + 13px, 18px); font-weight: 600; line-height: 1.35; color: #fff; text-wrap: balance; }
.yt .yt-zamknij { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; box-shadow: none; touch-action: manipulation;
  transition: background-color 160ms ease, transform 160ms var(--yt-ease); }
.yt .yt-zamknij:hover, .yt .yt-zamknij:focus { background: rgba(255, 255, 255, 0.24); color: #fff; }
.yt .yt-zamknij:active { transform: scale(0.94); }
.yt-zamknij svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* do czasu wczytania odtwarzacza widać miniaturę klikniętego filmu (skrypt ustawia ją jako tło), potem film wchodzi
   płynnie, jak odtwarzacz nad plakatem w opiniach */
.yt-okno-film { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--yt-r); background: #000 center / cover no-repeat;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8); }
.yt-okno-film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 300ms ease; }
.yt-okno-film.gotowe iframe { opacity: 1; }
html.yt-otwarte { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .yt-okno[open] .yt-okno-ramka { transition: opacity 220ms var(--yt-ease), transform 220ms var(--yt-ease); }
  .yt-okno[open]::backdrop { transition: opacity 220ms ease; }
  @starting-style {
    .yt-okno[open] .yt-okno-ramka { opacity: 0; transform: scale(0.96); }
    .yt-okno[open]::backdrop { opacity: 0; }
  }
}

/* Telefon (Igor 02.10.2026: „te filmy zrobiłbym większe… jak na PC duża miniatura i film, a pod nim nagłówek albo
   temat”): każdy film jako duża karta jak w aplikacji YouTube, miniatura 16:9 na całą szerokość, pod nią temat;
   cztery karty jedna pod drugą, więc wszystkie widać bez przewijania w bok. Opis filmu zostaje dla czytnika (nazwa
   kafla), bo miniatury mają własny duży napis, a krótsza karta to mniej przewijania. Do 02.10 były tu wiersze z małą
   miniaturą po lewej. Okno bez marginesów bocznych poza 12 px. */
@media (max-width: 599px) {
  .yt-wew { width: min(1040px, 100% - 32px); }
  .yt-siatka { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .yt-czas { right: 10px; bottom: 10px; font-size: 12.5px; }
  .yt-tresc { gap: 4px; padding: 14px 16px 16px; }
  .yt-tytul { font-size: 18px; line-height: 1.3; }
  /* pod miniaturą sam temat; opis zostaje dla czytnika (nazwa kafla) */
  .yt-opis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* karta kanału: wiersz profilu nad trzema liczbami w jednym rzędzie (wszystkie widoczne naraz, bez łamania) */
  .yt-kanal { display: flex; gap: 12px; width: 100%; padding: 14px 16px 16px; }
  .yt-kanal .yt-awatar { width: 48px; height: 48px; }
  .yt-profil-nazwa { font-size: 17px; }
  .yt-profil-adres { font-size: 13px; }
  .yt-kanal-liczby { padding-top: 12px; }
  .yt-kanal-liczby { width: 100%; justify-content: center; }
  .yt-stat { flex: 1 1 auto; padding-inline: 8px; }
  .yt-liczba { font-size: 20px; }
  .yt-podpis { font-size: 12.5px; }
  .yt-okno { padding: 12px; }
}
@media (max-width: 359px) {
  .yt-stat { padding-inline: 5px; }
  .yt-liczba { font-size: 18px; }
  .yt-podpis { font-size: 12px; }
}

/* Ograniczony ruch: tło stoi razem z sekcją (jak w opiniach), liczby od razu końcowe (skrypt nie liczy). */
@media (prefers-reduced-motion: reduce) {
  .yt-tlo-kadr { position: absolute; inset: 0; height: auto; }
  .yt-karta, .yt-media img, .yt-play, .yt-kanal, .yt-wszystkie svg, .yt-okno-film iframe { transition: none; }
  .yt-karta:hover, .yt-karta:active, .yt-karta:hover .yt-media img { transform: none; }
}