/* LAB sekcja opinii wideo nowej strony głównej aslandi.pl, v1 (28.09.2026).
   Polecenie Igora: sześć opinii wideo widocznych naraz, trzy na dwa na komputerze, duża miniatura filmu jako
   główny element kafla, prosto i konwertująco; tło ciemne i kontrastowe: prosty dom OZE (panele, pompa ciepła)
   z naszych realizacji. Marka: sosna #123f2d, złoto #ceb472, Poppins (marka/DESIGN.md): sekcja fotograficzna pod
   przyciemnieniem sosną, złoty przycisk na ciemnym tle, karta opinii z promieniem 12 px. Szerokość siatki jak
   siatka usług 2 × 2 (1040 px).
   Tło: dom o zmierzchu (Gemini z realizacji), kadr zawsze w kształcie ekranu: 16:9 na komputerze, 9:16 na
   telefonie. Na komputerze okładka (Igor 28.09): tło stoi w miejscu przez cały czas, a treść płynie nad nim; na
   telefonie kadr przyklejony do góry sekcji. Przy ograniczonym ruchu tło stoi razem z sekcją.
   Ruch: bez animacji wejścia (usługi mają już swoją kaskadę, a ta sama animacja w każdej sekcji to szablon);
   tylko najechanie i nacisk z krzywą z hero oraz płynne pojawienie się odtwarzacza nad miniaturą. */
.op {
  --op-sosna: #123f2d;
  --op-sosna-noc: #092d20;
  --op-noc: 6, 33, 23; /* #062117: przyciemnienie tła, głębsza zieleń niż sosna */
  --op-atrament: #1c3428;
  --op-gwiazdka: #d9a53a;
  --op-linia: #dce3da;
  --op-szalwia: #eaf0e3;
  --op-zloto: #ceb472;
  --op-zloto-2: #d8c287;
  --op-zloto-tekst: #182e23;
  --op-zloto-jasne: #dcc78f;
  --op-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --op-r: 12px;
  position: relative;
  isolation: isolate;
  background: var(--op-sosna-noc);
  color: #fff;
  font-family: Poppins, system-ui, sans-serif;
  padding-block: clamp(64px, 7vw, 104px);
}
.op *, .op *::before, .op *::after { box-sizing: border-box; }
.op h2, .op p, .op ul, .op figure, .op blockquote { margin: 0; }
/* motyw (Astra) daje cytatom kursywę, 20 px wcięcia i szarą kreskę z lewej */
.op blockquote { padding: 0; border: 0; font-style: normal; }
.op ul { padding: 0; list-style: none; }
.op a { -webkit-tap-highlight-color: transparent; }
.op ::selection { background: var(--op-zloto-jasne); color: var(--op-sosna-noc); }
/* jasne złoto: widoczne na ciemnym tle, na miniaturach i na złotym przycisku (przez odstęp) */
/* obrys fokusu idzie za promieniem samego elementu (border-radius tutaj zmieniał kształt pigułek i przycisków, 28.09) */
.op :focus-visible { outline: 3px solid var(--op-zloto-jasne); outline-offset: 3px; }

/* Tło: warstwa na całą sekcję, w niej kadr wysokości ekranu przyklejony do góry ekranu (sticky), więc widać zawsze
   cały dom w proporcji ekranu, a karty przesuwają się nad nim. Przyciemnienie głęboką zielenią na kadrze, nie na
   sekcji, żeby było takie samo w każdym miejscu przewijania; najmocniejsze pod nagłówkiem. */
.op-tlo { position: absolute; inset: 0; z-index: -1; }
.op-tlo-kadr { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.op-tlo-kadr::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--op-noc), 0.88) 0%, rgba(var(--op-noc), 0.74) 50%, rgba(var(--op-noc), 0.8) 100%); }
.op-tlo picture, .op-tlo img { display: block; width: 100%; height: 100%; }
.op-tlo img { object-fit: cover; object-position: 50% 62%; }

/* Komputer i laptop: okładka. Kadr przypięty do ekranu (fixed) przez cały czas, a sekcja przycina go do swojego
   obszaru (clip-path: inset(0)), więc tło stoi w miejscu, a treść płynie nad nim; sekcja działa jak okno. Tryb
   włącza skrypt, gdy sekcja jest blisko ekranu (klasa op--okladka): przypięty obraz byłby „na ekranie” od
   początku i ładowałby się razem z hero. Bez skryptu zostaje kadr przyklejony do sekcji. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .op.op--okladka { clip-path: inset(0); }
  .op.op--okladka .op-tlo-kadr { position: fixed; inset: 0; height: auto; }
}

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

/* Nagłówek jak w usługach, w barwach ciemnego tła: biały, jedno słowo jasnym złotem. */
.op-naglowek { max-width: 46rem; margin: 0 auto clamp(36px, 4.5vw, 56px); text-align: center; }
.op 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; }
.op h2 em { font-style: normal; color: var(--op-zloto-jasne); }
.op-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; }

/* Ocena w Google pod opisem: biała pigułka, żeby kolorowe logo Google było w całości czytelne na ciemnym tle
   (zielone „l” ginie na ciemnej zieleni). Kolejność jak u Google: ocena, gwiazdki, liczba opinii. Link do
   wizytówki, więc każdy może sprawdzić. */
.op-google { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; min-height: 48px; padding: 8px 20px 8px 18px;
  border-radius: 999px; background: #fff; color: var(--op-atrament); text-decoration: none; white-space: nowrap;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.65); touch-action: manipulation;
  transition: transform 180ms var(--op-ease), box-shadow 180ms var(--op-ease); }
.op-google img { display: block; flex: none; width: 74px; height: auto; }
.op-google-ocena { padding-left: 12px; border-left: 1px solid var(--op-linia); font-size: 18px; font-weight: 700; line-height: 1; }
.op-google-gwiazdki { display: block; flex: none; width: 90px; line-height: 0; color: #fbbc04; }
.op-google-gwiazdki svg { width: 100%; height: auto; fill: currentColor; }
.op-google-liczba { font-size: 15.5px; font-weight: 500; line-height: 1; color: #46564d; }
.op-google:active { transform: scale(0.97); }

/* Sześć kafli naraz: 3 × 2 na komputerze, 2 × 3 na tablecie, jeden pod drugim na telefonie. Kafle w rzędzie mają
   tę samą wysokość, a osoba stoi na dole, więc imiona w rzędzie są w jednej linii przy różnej długości cytatu. */
.op-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.op-karta { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--op-r); background: #fff;
  color: var(--op-atrament); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 28px 56px -30px rgba(0, 0, 0, 0.6); }

/* Miniatura filmu: główny element kafla, cała jest przyciskiem odtwarzania (bez skryptu linkiem do YouTube).
   Kadr 16:9 jak film: kadry 2:1 z biblioteki tracą po 5% z boków, nikt nie jest ucięty (sprawdzone na sześciu). */
.op-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--op-szalwia); }
/* motyw animuje wszystko na linkach (transition: all), więc fokus dojeżdżał; tu ma być od razu */
.op-film { position: absolute; inset: 0; display: block; touch-action: manipulation; transition: none; }
.op-film img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--op-ease); }
.op-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.94); color: var(--op-sosna); transform: translate(-50%, -50%);
  box-shadow: 0 10px 28px -8px rgba(8, 32, 22, 0.55); transition: transform 220ms var(--op-ease), background-color 160ms ease; }
.op-play svg { width: 28px; height: 28px; margin-left: 3px; fill: currentColor; }
/* obramowanie fokusu do środka, bo kadr przycina wszystko, co wystaje */
.op-film:focus-visible { outline-offset: -6px; border-radius: 10px; }
.op-film:active .op-play { transform: translate(-50%, -50%) scale(0.94); }
.op-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; opacity: 0; transition: opacity 300ms ease; }
.op-karta.gotowe .op-media iframe { opacity: 1; }

/* Treść pod filmem: gwiazdki, cytat, osoba. */
.op-tresc { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: 20px 22px 22px; }
.op-gwiazdki { display: block; width: 88px; line-height: 0; color: var(--op-gwiazdka); }
.op-gwiazdki svg { width: 100%; height: auto; fill: currentColor; }
.op-cytat p { font-size: 16px; line-height: 1.6; color: var(--op-atrament); text-wrap: pretty; }
.op-osoba { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 4px; font-size: 15.5px; font-weight: 600;
  line-height: 1.3; color: var(--op-sosna); }
.op-osoba img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--op-linia); }

/* Wezwanie pod dowodem: ten sam cel co w hero (bezpłatna wycena), złoty przycisk marki na ciemnym tle, telefon. */
.op-akcje { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: clamp(32px, 4vw, 48px); }
.op-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 28px; border-radius: 10px;
  background: var(--op-zloto); color: var(--op-zloto-tekst); font-size: 16.5px; font-weight: 600; line-height: 1.2; text-decoration: none;
  touch-action: manipulation; transition: background-color 160ms ease, transform 160ms var(--op-ease); }
.op-btn:active { transform: scale(0.97); }
/* motyw zmienia linkom kolor na złoty przy najechaniu i fokusie (a:hover, a:focus): na złotym przycisku napis znikał
   (kontrast 1:1); linki sekcji trzymają swoje kolory w każdym stanie (28.09) */
.op a.op-btn, .op a.op-btn:hover, .op a.op-btn:focus, .op a.op-btn:active, .op a.op-btn:visited { color: var(--op-zloto-tekst); }
.op a.op-tel, .op a.op-tel:hover, .op a.op-tel:focus, .op a.op-tel:active, .op a.op-tel:visited { color: #fff; }
.op a.op-google, .op a.op-google:hover, .op a.op-google:focus, .op a.op-google:active, .op a.op-google:visited { color: var(--op-atrament); }
.op-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border-radius: 6px; color: #fff; font-size: 17px; font-weight: 600;
  text-decoration: none; touch-action: manipulation; }
.op-tel svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Telefon: trzy opinie, potem „Zobacz więcej” (Igor 28.09). Przycisk drugorzędny wobec złotego „Bezpłatna wycena”:
   obrys, bez wypełnienia. Ukryte karty mają obrazy z loading="lazy", więc wczytują się dopiero po kliknięciu.
   Selektory z .op, bo motyw (Astra) stylizuje wszystkie przyciski, także przy najechaniu i fokusie. */
.op .op-wiecej { display: none; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; margin: 16px 0 0;
  padding: 12px 20px; border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 10px; background: rgba(255, 255, 255, 0.06);
  box-shadow: none; color: #fff; font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: normal;
  text-transform: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--op-ease); }
.op .op-wiecej:hover, .op .op-wiecej:focus { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.06); color: #fff; }
.op .op-wiecej:active { transform: scale(0.98); }
.op-wiecej svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* dołożone karty wchodzą krótko jedna po drugiej, żeby było widać, co doszło */
.op-karta.op-nowa { animation: op-wejdz 360ms var(--op-ease) both; }
.op-karta.op-nowa:nth-child(5) { animation-delay: 60ms; }
.op-karta.op-nowa:nth-child(6) { animation-delay: 120ms; }
@keyframes op-wejdz { from { opacity: 0; transform: translateY(10px); } }

@media (hover: hover) and (pointer: fine) {
  .op-film:hover img { transform: scale(1.03); }
  .op-film:hover .op-play { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
  .op-btn:hover { background: var(--op-zloto-2); }
  .op-tel:hover { text-decoration: underline; text-underline-offset: 4px; }
  .op-google:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.75); }
}

/* Tablet: dwa w rzędzie. */
@media (max-width: 1023px) {
  .op-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Telefon: jeden pod drugim; trzy opinie i „Zobacz więcej” (klasa op--zwiniete od skryptu); przycisk pod kciuk
   na całą szerokość. */
@media (max-width: 599px) {
  .op--zwiniete .op-siatka > .op-karta:nth-child(n + 4) { display: none; }
  .op.op--zwiniete .op-wiecej { display: flex; }
  .op-wew { width: min(1040px, 100% - 32px); }
  .op-siatka { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .op-tresc { gap: 10px; padding: 16px 18px 18px; }
  .op-cytat p { font-size: 15.5px; }
  .op-play { width: 56px; height: 56px; }
  .op-akcje { flex-direction: column; align-items: stretch; gap: 6px; }
  .op-btn { width: 100%; }
  .op-tel { justify-content: center; }
  .op-google { gap: 8px; margin-top: 18px; padding: 8px 16px 8px 14px; }
  .op-google img { width: 62px; }
  .op-google-ocena { padding-left: 10px; font-size: 16.5px; }
  .op-google-gwiazdki { width: 76px; }
  .op-google-liczba { font-size: 14.5px; }
}
/* Najwęższe telefony: przy 320 px pigułka miała 309 px i wypychała stronę o 5 px w bok (29.09). */
@media (max-width: 359px) {
  .op-google { gap: 6px; padding: 8px 12px; }
  .op-google img { width: 54px; }
  .op-google-ocena { padding-left: 8px; }
  .op-google-gwiazdki { width: 66px; }
}

/* Ograniczony ruch: tło stoi razem z sekcją (bez efektu treści płynącej nad nieruchomym obrazem). */
@media (prefers-reduced-motion: reduce) {
  .op-film img, .op-play, .op-btn, .op-media iframe, .op-google, .op .op-wiecej { transition: none; }
  .op-karta.op-nowa { animation: none; }
  .op-tlo-kadr { position: absolute; inset: 0; height: auto; }
}