/* =========================================================
   REFERENCJE – SLIDE 08  (ALL-IN-ONE)
   ========================================================= */

/* ---- USTAWIENIA SEKCJI / OFFSET OD STICKY MENU ---- */
.section[data-section="slide08"]{
  --navH: 88px;                    /* podbij jeśli header jest wyższy */
  scroll-margin-top: calc(var(--navH) + 16px);
}
.section[data-section="slide08"] .section-inner{
  padding-top: calc(var(--navH) + 24px);
}
.section[data-section="slide08"] .title-block{
  margin: 0 0 28px;                /* tylko dół – offset robi section-inner */
}

/* ---- WYŁĄCZENIE DRUGIEGO TŁA/PANELU Z MOTYWU ---- */
.section[data-section="slide08"] .testimonials-section,
.section[data-section="slide08"] .testimonials-section::before,
.section[data-section="slide08"] .testimonials-slider,
.section[data-section="slide08"] .testimonials-slider::before,
.section[data-section="slide08"] .owl-stage-outer,
.section[data-section="slide08"] .owl-stage,
.section[data-section="slide08"] .owl-item{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}
.section[data-section="slide08"] .testimonials-section .item{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ---- SZKLANE KARTY (spójne z artykułami) + AUTODOPASOWANIE ---- */
.section[data-section="slide08"] .testimonial-item{
  background: rgba(0,0,0,0.45) !important;   /* ciemne, ale lżejsze szkło */
  color: #fff !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;

  /* auto-dopasowanie wysokości do treści */
  height: auto !important;
  min-height: unset !important;

  /* kompaktowe marginesy wewnętrzne */
  padding: 16px 20px !important;

  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  transition: transform .25s ease, box-shadow .25s ease;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.section[data-section="slide08"] .testimonial-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}

/* Teksty na karcie – jasno i czytelnie */
.section[data-section="slide08"] .testimonial-content h4,
.section[data-section="slide08"] .testimonial-content p,
.section[data-section="slide08"] .testimonial-content span{
  color: #fff !important;
}

/* ---- MINIATURY: prostokąt + AR z dużego obrazu
.testimonials-section .client-row img.thumb-rect{
  display: block;
  width: 240px;                    
  height: auto;
  aspect-ratio: var(--thumb-ar, 3/4);  
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}  
*/

/* Delikatny fadeUp dla tekstów */
.testimonial-content h4,
.testimonial-content p,
.testimonial-content span{
  animation: refFadeUp .5s ease both;
}
@keyframes refFadeUp {
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform:none; }
}

/* ---- OWL: równe układanie, bez „przyklejania do dołu” ---- */
.section[data-section="slide08"] .testimonials-slider .owl-stage,
.section[data-section="slide08"] .testimonials-slider .owl-stage-outer,
.section[data-section="slide08"] .testimonials-slider .owl-item{ height:auto !important; }
.section[data-section="slide08"] .testimonials-slider .owl-stage{ display:flex; align-items:stretch; }
.section[data-section="slide08"] .testimonials-slider .owl-item{ display:flex; }
.section[data-section="slide08"] .testimonials-slider .item{ display:flex; width:100%; }
.section[data-section="slide08"] .testimonial-item{ margin: 0 auto; }
.section[data-section="slide08"] .testimonials-slider .owl-dots{ margin-top:16px; }

/* ---- LIGHTBOX ---- */
#ref-lightbox{ position:fixed; inset:0; display:none; z-index:9999; }
#ref-lightbox.active{ display:block; }
#ref-lightbox .ref-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.66);
  opacity:0; animation: lbFade .2s forwards;
}
@keyframes lbFade { to{ opacity:1; } }

#ref-lightbox .ref-dialog{
  position:absolute; inset: 4% 3%;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  display:flex; flex-direction:column;
  overflow:hidden;
}
#ref-lightbox .ref-close{
  position:absolute; top:10px; right:12px;
  background: transparent; border:0; font-size:32px; line-height:1; opacity:.7; cursor:pointer;
}
#ref-lightbox .ref-close:hover{ opacity:1; }

#ref-lightbox .ref-figure{
  margin:0; padding:56px 20px 16px;
  height:100%; display:flex; flex-direction:column;
}
#ref-lightbox #ref-full{
  max-width:100%; max-height: calc(100% - 80px);
  margin:auto;
  object-fit: contain;
}
#ref-lightbox #ref-caption{
  margin-top:12px; text-align:center; font-size:.95rem; color:#333; opacity:.9;
}

/* Lightbox – nawigacja i licznik */
#ref-lightbox .ref-nav{ position:absolute; inset:auto 0 12px 0; display:flex; justify-content:center; gap:16px; }
#ref-lightbox .ref-nav button{
  border:0; padding:10px 14px; border-radius:12px; cursor:pointer;
  background: rgba(0,0,0,.07);
}
#ref-lightbox .ref-nav button:hover{ background: rgba(0,0,0,.12); }
#ref-lightbox .ref-progress{
  position:absolute; top:10px; left:14px; font-weight:600; opacity:.7;
}

/* Zablokowanie scrolla tła gdy modal otwarty */
html.no-scroll, html.no-scroll body{ overflow: hidden; }

/* ---- RESPONS ---- */
@media (max-width: 992px){
  .testimonials-section .client-row img.thumb-rect{ width: 200px; }
}
@media (max-width: 768px){
  .section[data-section="slide08"] .section-inner{ padding-top: calc(var(--navH) + 16px); }
  .testimonials-section .client-row img.thumb-rect{ width: 160px; }
}
@media (max-width: 576px){
  .testimonials-section .client-row img.thumb-rect{ width: 140px; }
  #ref-lightbox .ref-dialog{ inset: 6% 4%; }
}
/* OWL – wymuś dopasowanie wysokości do treści */
.section[data-section="slide08"] .testimonials-slider .owl-stage{
  display: flex;
  align-items: flex-start !important;   /* zamiast stretch */
}
.section[data-section="slide08"] .testimonials-slider .owl-item{
  display: flex;
  align-items: flex-start !important;
  height: auto !important;
}
.section[data-section="slide08"] .testimonials-slider .item{
  display: flex;
  width: 100%;
  height: auto !important;
}
.section[data-section="slide08"] .testimonial-item{
  height: auto !important;
  min-height: unset !important;
  margin: 0 auto;
}
/* ==== FIX: artefakty przy drag/scroll (Chrome/Edge) ==== */
.section[data-section="slide08"] .testimonials-section .owl-stage-outer{
  overflow: hidden;            /* odcina „duchy” na krawędziach */
  isolation: isolate;          /* własny stacking context */
  will-change: transform;
}

.section[data-section="slide08"] .testimonials-section .owl-stage,
.section[data-section="slide08"] .testimonials-section .owl-item{
  transform: translateZ(0);    /* wymuszenie GPU-layers */
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* przenieś blur na pseudo-element; kafelek staje się „maską” */
.section[data-section="slide08"] .testimonial-item{
  position: relative;
  overflow: hidden;            /* ważne przy blurze */
  background: transparent !important;  /* realne tło zrobi ::before */
}

.section[data-section="slide08"] .testimonial-item::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 0;
}

/* treść nad pseudo-tłem */
.section[data-section="slide08"] .testimonial-item > *{
  position: relative;
  z-index: 1;
}

/* opcja: na czas przeciągania wyłącz blur (zero smug) */
.section[data-section="slide08"] .testimonials-section.dragging .testimonial-item::before{
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* ——— Anti-blur dla obrazków w sliderze ——— */
/* wyłącz ewentualne rozmycia i animacje na samym <img> */
.testimonials-section .owl-item img.thumb-rect{
  filter: none !important;
  transform: translateZ(0);        /* stabilizacja renderingu przy animacji */
  backface-visibility: hidden;
  image-rendering: auto;
  display: block;                  /* bez „inline” artefaktów */
}

/* ——— Stały box na miniaturę (koniec z 283.047px) ——— */
/* ustaw JEDNĄ, spójną wysokość dla ramek miniatur; dopasuj 160/180/200px do wyglądu */
.testimonials-section .testimonial-item .client-row{
  height: 200px;                   /* <- jeśli u Ciebie lepiej wygląda 180px, zmień tu */
}
.testimonials-section .testimonial-item .thumb-rect{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;             /* tak jak w pozostałych kartach */
}

/* ——— (opcjonalnie) zbij subpiksele na samej karcie ——— */
.testimonials-section .testimonial-item{
  transform: translateZ(0);
}
/* stały slot na miniaturę – desktop */
.testimonials-section .testimonial-item .client-row{
  height: 220px;                 /* możesz zmienić na 200/180 wg gustu */
}

/* obrazek zawsze wypełnia slot wysokością, nie szerokością */
.testimonials-section .testimonial-item .thumb-rect{
  width: auto;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* anty-blur i stabilizacja renderingu */
.testimonials-section .owl-item img.thumb-rect{
  filter: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  image-rendering: auto;
}

/* mobil/tablet – NIE ustawiaj width na <img>, tylko steruj wysokością slotu */
@media (max-width: 992px){
  .testimonials-section .testimonial-item .client-row{
    height: 180px;               /* niższy slot na węższych ekranach */
  }
  .testimonials-section .testimonial-item .thumb-rect{
    width: auto !important;
    height: 100% !important;
  }
}

/* opcjonalnie: usztywnij proporcje samego slotu, jeśli chcesz 3:2 */
.testimonials-section .testimonial-item .client-row{
  aspect-ratio: 3 / 2;           /* pomaga, gdy layout coś kombinuje */
  overflow: hidden;
}
/* ==== FINAL: Miniatury w referencjach – ostro i bez subpikseli ==== */

/* stały slot na miniaturę; obrazek wypełnia WYSOKOŚĆ (nie szerokość) */
.testimonials-section .testimonial-item .client-row{
  height: 220px;           /* desktop */
  aspect-ratio: 3 / 2;     /* ładna proporcja ramki */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* obrazek zawsze przez wysokość; żadnego width: 200px w media query */
.testimonials-section .testimonial-item .thumb-rect{
  width: auto !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  /* anty-blur */
  filter: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  image-rendering: auto;
}

@media (max-width: 992px){
  .testimonials-section .testimonial-item .client-row{ height: 180px; }
}
@media (max-width: 576px){
  .testimonials-section .testimonial-item .client-row{ height: 160px; }
}
/* === Miękkie zaokrąglenia miniatur (dla wszystkich typów opinii) === */
.testimonials-section .testimonial-item .thumb-rect {
  border-radius: 16px;             /* główne zaokrąglenie */
  box-shadow: 0 4px 14px rgba(0,0,0,.25);  /* lekki cień dla efektu „glass” */
  border: 1px solid rgba(255,255,255,.12); /* delikatna krawędź na ciemnym tle */
  overflow: hidden;                /* żeby żadne rogi nie wystawały */
  transition: transform .25s ease, box-shadow .25s ease;
}

.testimonials-section .testimonial-item .thumb-rect:hover {
  transform: scale(1.03);          /* delikatne powiększenie w hover */
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
/* === Zaokrąglenia w podglądzie (duże okno z opinią) === */

/* Obrazek w modalu (podgląd po kliknięciu) */
#google-review-modal img,
.ref-lightbox img {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Sam box modala też lekko zaokrąglony, by wszystko grało stylistycznie */
#google-review-modal .grm-box,
.ref-lightbox {
  border-radius: 18px;
  overflow: hidden;
}
/* === Miniatury: stałe zaokrąglenie NA KAŻDYM poziomie === */

/* 1) kontener miniatury „maskuje” rogi */
.testimonials-section .testimonial-item .client-row{
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

/* 2) jeśli wewnątrz jest <a> – on też zaokrąglony i maskuje */
.testimonials-section .testimonial-item .client-row > a{
  display:block;
  height:100%;
  width: auto !important;
  border-radius: inherit;
  overflow: hidden;
}

/* 3) samo <img> dziedziczy promień i wypełnia slot wysokością */
.testimonials-section .testimonial-item .thumb-rect{
  border-radius: inherit !important;
  width: auto !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  filter: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 4) także Google’owy kafelek (na wszelki wypadek) */
.testimonials-slider .item[data-source="google"] .client-row,
.testimonials-slider .item[data-source="google"] .client-row > a,
.testimonials-slider .item[data-source="google"] .thumb-rect{
  border-radius: 16px !important;
  overflow: hidden;
}

/* Magnific Popup: czytelny licznik i pozycja w lewym górnym rogu */
.mfp-counter{
  position: absolute;
  left: 12px;             /* przenosimy z prawej */
  right: auto;
  top: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.9); /* jasne tło = czytelne na każdym zdjęciu */
  color: #0a203c;         /* ciemny tekst */
  font-weight: 600;
  line-height: 1.2;
  z-index: 1060;
}
/* Czytelny licznik w lewym górnym rogu – nadpisujemy na pewno */
.mfp-wrap .mfp-counter{
  position: absolute !important;
  left: 12px !important;
  right: auto !important;
  top: 10px !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.92) !important;
  color: #0a203c !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  z-index: 1060 !important;
}
/* === FIX 2025-10-17 – miniatury panoramiczne === */
.testimonials-section .testimonial-item .client-row{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  overflow:hidden;
}
.testimonials-section .testimonial-item .client-row > a{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  overflow:hidden;
}
.testimonials-section .testimonial-item .thumb-rect{
  border-radius:inherit!important;
  width:auto!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover;
  object-position:center center;   /* nie ciągnie do góry */
  display:block;
  filter:none!important;
  transform:translateZ(0);
  backface-visibility:hidden;
}
/* ukryjemy licznik lightboxa (bez dotykania JS) */
.ref-progress { display: none !important; visibility: hidden !important; opacity: 0 !important; }
/* === FINAL OVERRIDES – miniatury zawsze wyśrodkowane i z zaokrągleniem === */
.testimonials-section .testimonial-item .client-row{
  border-radius:16px !important;
  overflow:hidden !important;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:220px;
  aspect-ratio:3 / 2;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.testimonials-section .testimonial-item .client-row > a{
  display:block; width:100% !important; height:100%;
  border-radius:inherit; overflow:hidden;
}
.testimonials-section .testimonial-item .thumb-rect{
  border-radius:inherit !important;
  width:auto !important; height:100% !important; max-width:none !important;
  object-fit:cover; object-position:center center;
  display:block; image-rendering:auto; transform:translateZ(0); backface-visibility:hidden;
}

/* respons */
@media (max-width: 992px){ .testimonials-section .testimonial-item .client-row{ height:180px; } }
@media (max-width: 576px){ .testimonials-section .testimonial-item .client-row{ height:160px; } }

/* [REVIEWS v7.1] Miniatury pod karuzelą */
.reviews-thumbs{display:flex;gap:8px;overflow-x:auto;padding:8px 4px;-webkit-overflow-scrolling:touch}
.review-thumb{border:0;background:none;padding:0;cursor:pointer;position:relative}
.review-thumb img{width:72px;height:72px;object-fit:cover;border-radius:8px;display:block}
.review-thumb.is-active::after{content:"";position:absolute;inset:0;border:2px solid currentColor;border-radius:8px;pointer-events:none}
@media (min-width: 992px){ .review-thumb img{width:84px;height:84px} }