/*
  PackshotHouse — nowe sekcje Flexible
  Ten plik jest wczytywany PO prod/css/main.css.
  Nie dopisujemy juz niczego do main.css.

  Zawiera: faq, faq2, video_gallery, services_grid, separator
*/

/* ============ FAQ (layout ACF: faq) ============ */
.f-faq{background:#fff;color:#000;padding:64px 0}
.f-faq--dark{background:#000;color:#fff}

.f-faq__inner{display:grid;gap:40px}
.f-faq__header .heading{margin-top:0}
.f-faq__header article{color:rgba(0,0,0,.8)}
.f-faq--dark .f-faq__header article{color:hsla(0,0%,100%,.75)}

.f-faq__list{display:flex;flex-direction:column;border-top:1px solid #d7d7d7}
.f-faq--dark .f-faq__list{border-top-color:hsla(0,0%,100%,.25)}

.f-faq__item{border-bottom:1px solid #d7d7d7}
.f-faq--dark .f-faq__item{border-bottom-color:hsla(0,0%,100%,.25)}

.f-faq__question{align-items:flex-start;cursor:pointer;display:flex;font-family:Clash Display,sans-serif;font-size:clamp(20px,2.4vw,28px);font-weight:500;gap:24px;justify-content:space-between;line-height:1.15;list-style:none;padding:24px 0;transition:color .3s}
.f-faq__question::-webkit-details-marker{display:none}
.f-faq__question:hover{color:#737986}
.f-faq--dark .f-faq__question:hover{color:#a1a1a1}

.f-faq__icon{border:1px solid #d7d7d7;border-radius:50%;flex:none;height:40px;margin-top:2px;position:relative;transition:transform .3s;width:40px}
.f-faq--dark .f-faq__icon{border-color:hsla(0,0%,100%,.35)}
.f-faq__icon:before,.f-faq__icon:after{background:currentColor;content:"";left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}
.f-faq__icon:before{height:1.5px;width:14px}
.f-faq__icon:after{height:14px;transition:opacity .3s,transform .3s;width:1.5px}
.f-faq__item[open] .f-faq__icon{transform:rotate(180deg)}
.f-faq__item[open] .f-faq__icon:after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}

.f-faq__answer{padding:0 0 28px;max-width:820px;color:rgba(0,0,0,.8)}
.f-faq--dark .f-faq__answer{color:hsla(0,0%,100%,.7)}
.f-faq__answer article p:last-of-type{margin-bottom:0}

@media only screen and (min-width:992px){
  .f-faq{padding:96px 0}
  .f-faq__inner{grid-template-columns:minmax(320px,420px) 1fr;gap:64px;align-items:start}
  .f-faq__question{padding:28px 0}
  .f-faq__answer{padding:0 96px 32px 0}
}


/* ============ FAQ 2 — dużo pytań, grupy tematyczne (layout ACF: faq2) ============ */
.f-faq2{background:#fff;color:#000;padding:64px 0}
.f-faq2--dark{background:#000;color:#fff}

.f-faq2__top{align-items:flex-end;border-bottom:1px solid #000;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;padding-bottom:32px}
.f-faq2--dark .f-faq2__top{border-bottom-color:#fff}
.f-faq2__top .heading{max-width:820px}
.f-faq2--dark .f-faq2__top .label{color:hsla(0,0%,100%,.8)}

.f-faq2__meta{align-items:center;display:flex;gap:12px}
.f-faq2__toggle-all{display:none;background:none;border:1px solid #d7d7d7;border-radius:48px;color:inherit;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;letter-spacing:2%;line-height:1.5;padding:10px 20px;text-transform:uppercase;transition:.3s}
.f-faq2__toggle-all:hover{background:#000;border-color:#000;color:#fff}
.f-faq2--js .f-faq2__toggle-all{display:inline-flex}
.f-faq2--dark .f-faq2__toggle-all{border-color:hsla(0,0%,100%,.35)}
.f-faq2--dark .f-faq2__toggle-all:hover{background:#fff;border-color:#fff;color:#000}

.f-faq2__group{border-bottom:1px solid #d7d7d7;display:grid;gap:24px;padding:32px 0}
.f-faq2--dark .f-faq2__group{border-bottom-color:hsla(0,0%,100%,.25)}
.f-faq2__group__title{margin:0}
.f-faq2__group__count{color:#a1a1a1;font-size:14px;font-weight:600;letter-spacing:2%;margin-top:8px;text-transform:uppercase}

.f-faq2__list{display:flex;flex-direction:column}
.f-faq2__item{border-top:1px solid #f0f0f0}
.f-faq2--dark .f-faq2__item{border-top-color:hsla(0,0%,100%,.15)}

.f-faq2__question{align-items:baseline;cursor:pointer;display:flex;font-size:18px;font-weight:500;gap:24px;justify-content:space-between;line-height:1.35;list-style:none;padding:18px 0;transition:color .3s}
.f-faq2__question::-webkit-details-marker{display:none}
.f-faq2__question:hover{color:#737986}
.f-faq2--dark .f-faq2__question:hover{color:#a1a1a1}

.f-faq2__icon{flex:none;height:18px;position:relative;top:4px;width:18px}
.f-faq2__icon:before,.f-faq2__icon:after{background:#a1a1a1;content:"";left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}
.f-faq2__icon:before{height:1.5px;width:16px}
.f-faq2__icon:after{height:16px;transition:opacity .3s,transform .3s;width:1.5px}
.f-faq2__item[open] .f-faq2__icon:after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}

.f-faq2__answer{color:rgba(0,0,0,.8);max-width:820px;padding:0 0 20px}
.f-faq2--dark .f-faq2__answer{color:hsla(0,0%,100%,.7)}
.f-faq2__answer article p:last-of-type{margin-bottom:0}

.f-faq2__outro{align-items:center;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;padding-top:32px}
.f-faq2__outro__text{font-size:18px;font-weight:500;margin:0;max-width:620px;text-wrap:pretty}

/* grupa bez nazwy (np. jedna wspólna lista) — pytania na pełną szerokość */
.f-faq2__group--no-header{border-bottom:0;padding-bottom:0}

@media only screen and (min-width:992px){
  .f-faq2{padding:96px 0}
  .f-faq2__top{padding-bottom:40px}
  .f-faq2__group{align-items:start;gap:64px;grid-template-columns:280px 1fr;padding:48px 0}
  .f-faq2__group__header{position:sticky;top:100px}
  .f-faq2__group--no-header{grid-template-columns:1fr}
  .f-faq2__question{font-size:20px;padding:20px 0}
  .f-faq2__answer{padding:0 64px 24px 0}
  .f-faq2__outro{padding-top:48px}
  .f-faq2__outro__text{font-size:20px}
}


/* ============ Galeria filmow (layout ACF: video_gallery) ============ */
.f-video-gallery{background:#fff;color:#000;padding:56px 0}
.f-video-gallery--dark{background:#000;color:#fff}

.f-video-gallery__top{align-items:flex-end;border-bottom:1px solid #000;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-bottom:16px;padding-bottom:14px}
.f-video-gallery--dark .f-video-gallery__top{border-bottom-color:#fff}
.f-video-gallery__top .heading{margin:0}

.f-video-gallery__filters{display:flex;flex-wrap:wrap;gap:8px}
.f-video-gallery__filter{background:none;border:1px solid #d7d7d7;border-radius:48px;color:inherit;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:2%;padding:7px 14px;text-transform:uppercase;transition:.3s}
.f-video-gallery__filter.active,.f-video-gallery__filter:hover{background:#000;border-color:#000;color:#fff}
.f-video-gallery--dark .f-video-gallery__filter{border-color:hsla(0,0%,100%,.35)}
.f-video-gallery--dark .f-video-gallery__filter.active,.f-video-gallery--dark .f-video-gallery__filter:hover{background:#fff;border-color:#fff;color:#000}

/* mobile: kazdy wiersz to wlasna siatka 2 kolumn.
   NIE uzywamy display:contents - Safari nie przepuszcza przez nie grid-column
   i czesc kafli znika. */
.f-video-gallery{--vg-gap:10px}
.f-video-gallery__rows{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--vg-gap)}
.f-video-gallery__spacer{display:none}

.f-video-gallery__item{aspect-ratio:1/1;min-width:0}
.f-video-gallery__item[hidden],.f-video-gallery__spacer[hidden]{display:none!important}

.f-video-gallery__link{background:#000;border-radius:16px;display:block;height:100%;overflow:hidden;position:relative;width:100%}
.f-video-gallery__poster,.f-video-gallery__video{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}
.f-video-gallery__poster{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.f-video-gallery__video{opacity:0;transition:opacity .35s;z-index:1}
.f-video-gallery__item.is-playing .f-video-gallery__video{opacity:1}
.f-video-gallery__item.is-hover .f-video-gallery__poster{transform:scale(1.06)}
.f-video-gallery__link:after{background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 55%);content:"";inset:0;position:absolute;z-index:2}

.f-video-gallery__badge{background:rgba(0,0,0,.65);border-radius:48px;color:#fff;font-size:10px;font-weight:600;left:12px;letter-spacing:2%;padding:4px 9px;position:absolute;text-transform:uppercase;top:12px;z-index:3}

.f-video-gallery__play{align-items:center;border:1px solid hsla(0,0%,100%,.6);border-radius:50%;display:flex;height:52px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .3s;width:52px;z-index:3}
.f-video-gallery__play:before{border-color:transparent transparent transparent #fff;border-style:solid;border-width:7px 0 7px 11px;content:"";display:block;margin-left:3px}
.is-hover .f-video-gallery__play{opacity:0}

.f-video-gallery__meta{bottom:0;color:#fff;display:block;left:0;padding:14px;position:absolute;right:0;z-index:3}
.f-video-gallery__title{display:block;font-family:Clash Display,sans-serif;font-size:16px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f-video-gallery__cat{color:hsla(0,0%,100%,.65);display:block;font-size:10px;font-weight:600;letter-spacing:2%;margin-top:4px;text-transform:uppercase}

@media only screen and (min-width:768px){
  .f-video-gallery__rows{grid-template-columns:repeat(3,1fr)}
  .f-video-gallery__item{aspect-ratio:1/1}
  .f-video-gallery__title{font-size:18px}
}

/* desktop: wiersze po 3 kwadraty, najazd rozszerza kafel wypierajac sasiadow */
@media only screen and (min-width:992px) and (hover:hover) and (pointer:fine){
  .f-video-gallery{padding:96px 0}
  .f-video-gallery__top{margin-bottom:20px;padding-bottom:16px}
  /* wiersze buduje skrypt (klasa is-rowed); bez JS zostaje zwykla siatka 3 kolumn */
  .f-video-gallery__rows.is-rowed{display:flex;flex-direction:column;gap:var(--vg-gap)}
  .f-video-gallery__row{display:flex;gap:var(--vg-gap)} /* wysokosc = szerokosc kolumny, ustawiana skryptem */
  .f-video-gallery__rows.is-rowed>.f-video-gallery__item[hidden]{display:none}
  .is-rowed .f-video-gallery__item{aspect-ratio:auto;flex:1 1 0;height:100%;transition:flex-grow .5s cubic-bezier(.22,.61,.36,1)}
  .f-video-gallery__item.is-hover,.f-video-gallery__item:hover{flex-grow:1.8}
  .f-video-gallery__row:hover .f-video-gallery__item:not(.is-hover):not(:hover){flex-grow:.6}
  .f-video-gallery__spacer{display:block;flex:1 1 0}
  .f-video-gallery__meta{padding:16px}
  .f-video-gallery__title{font-size:20px}
  .f-video-gallery__play{height:64px;width:64px}
}

/* ---- lightbox galerii (wlasny; darmowy fslightbox nie odtwarza mp4) ---- */
.f-video-gallery__lightbox{align-items:center;background:rgba(0,0,0,.94);display:flex;flex-direction:column;gap:16px;inset:0;justify-content:center;padding:24px;position:fixed;z-index:9999}
.f-video-gallery__lightbox[hidden]{display:none}

.f-video-gallery__stage{background:#000;border-radius:16px;max-height:78vh;max-width:1100px;overflow:hidden;position:relative;width:100%}
.f-video-gallery__stage[data-vg-ratio=horizontal]{aspect-ratio:16/9}
.f-video-gallery__stage[data-vg-ratio=vertical]{aspect-ratio:9/16;max-width:min(440px,42vh*.5625);width:auto;height:78vh}
.f-video-gallery__stage iframe,.f-video-gallery__stage video{border:0;display:block;height:100%;-o-object-fit:contain;object-fit:contain;width:100%}

.f-video-gallery__lightbox-meta{color:#fff;font-size:14px;font-weight:600;letter-spacing:2%;text-align:center;text-transform:uppercase}

.f-video-gallery__close{background:none;border:1px solid hsla(0,0%,100%,.4);border-radius:50%;cursor:pointer;height:44px;position:absolute;right:20px;top:20px;transition:.3s;width:44px}
.f-video-gallery__close:hover{background:#fff}
.f-video-gallery__close:before,.f-video-gallery__close:after{background:#fff;content:"";height:16px;left:50%;position:absolute;top:50%;width:1.5px}
.f-video-gallery__close:before{transform:translate(-50%,-50%) rotate(45deg)}
.f-video-gallery__close:after{transform:translate(-50%,-50%) rotate(-45deg)}
.f-video-gallery__close:hover:before,.f-video-gallery__close:hover:after{background:#000}


/* ============ Siatka uslug (layout ACF: services_grid) ============ */
.f-services-grid{background:#fff;color:#000;padding:56px 0}
.f-services-grid--dark{background:#000;color:#fff}

.f-services-grid__top{display:flex;flex-direction:column;gap:24px;margin-bottom:32px}
.f-services-grid__intro .heading{margin:0}
.f-services-grid__top .button{align-self:flex-start;width:100%;justify-content:center}

.f-services-grid__list{border-top:1px solid currentColor;display:grid;grid-template-columns:1fr}

.f-services-grid__item{border-bottom:1px solid #d7d7d7;display:flex;flex-direction:column;justify-content:space-between;min-height:220px;overflow:hidden;padding:24px 16px;position:relative;transition:color .3s ease .05s;z-index:0}
.f-services-grid--dark .f-services-grid__item{border-bottom-color:hsla(0,0%,100%,.25)}
.f-services-grid__item:before{background:#000;content:"";inset:0;position:absolute;transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.22,.61,.36,1);z-index:-1}
.f-services-grid--dark .f-services-grid__item:before{background:#fff}

.f-services-grid__no,.f-services-grid__title,.f-services-grid__text{color:inherit;position:relative;z-index:1}
.f-services-grid__no{display:block;font-family:ui-monospace,Menlo,monospace;font-size:12px;margin-bottom:12px;opacity:.55;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.f-services-grid__body{margin-top:auto;position:relative;z-index:1}
.f-services-grid__title{font-family:Clash Display,sans-serif;font-size:24px;font-weight:500;line-height:1.1;margin:0;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.f-services-grid__text{font-size:15px;line-height:1.55;margin:10px 0 0;opacity:.8;transition:transform .5s cubic-bezier(.22,.61,.36,1) .04s}

/* stan aktywny: dotyk (klasa) oraz desktop (:hover / :focus-visible) */
.f-services-grid__item.is-active:before{transform:scaleY(1)}
.f-services-grid__item.is-active,.f-services-grid__item.is-active .f-services-grid__no,.f-services-grid__item.is-active .f-services-grid__title,.f-services-grid__item.is-active .f-services-grid__text{color:#fff}
.f-services-grid--dark .f-services-grid__item.is-active,.f-services-grid--dark .f-services-grid__item.is-active .f-services-grid__no,.f-services-grid--dark .f-services-grid__item.is-active .f-services-grid__title,.f-services-grid--dark .f-services-grid__item.is-active .f-services-grid__text{color:#000}

@media only screen and (min-width:768px){
  .f-services-grid__list{grid-template-columns:repeat(2,1fr);border-left:1px solid #d7d7d7}
  .f-services-grid--dark .f-services-grid__list{border-left-color:hsla(0,0%,100%,.25)}
  .f-services-grid__item{border-right:1px solid #d7d7d7;min-height:280px;padding:32px}
  .f-services-grid--dark .f-services-grid__item{border-right-color:hsla(0,0%,100%,.25)}
  .f-services-grid__title{font-size:26px}
}

@media only screen and (min-width:992px){
  .f-services-grid{padding:96px 0}
  .f-services-grid__top{align-items:flex-end;flex-direction:row;justify-content:space-between;margin-bottom:40px}
  .f-services-grid__top .button{width:auto}
  .f-services-grid--cols-3 .f-services-grid__list{grid-template-columns:repeat(3,1fr)}
  .f-services-grid--cols-4 .f-services-grid__list{grid-template-columns:repeat(4,1fr)}

  .f-services-grid__item{min-height:300px}
  .f-services-grid__item:hover:before,.f-services-grid__item:focus-visible:before{transform:scaleY(1)}
  .f-services-grid__item:hover,.f-services-grid__item:hover .f-services-grid__no,.f-services-grid__item:hover .f-services-grid__title,.f-services-grid__item:hover .f-services-grid__text,
  .f-services-grid__item:focus-visible,.f-services-grid__item:focus-visible .f-services-grid__no,.f-services-grid__item:focus-visible .f-services-grid__title,.f-services-grid__item:focus-visible .f-services-grid__text{color:#fff;outline:0}
  .f-services-grid--dark .f-services-grid__item:hover,.f-services-grid--dark .f-services-grid__item:hover .f-services-grid__no,.f-services-grid--dark .f-services-grid__item:hover .f-services-grid__title,.f-services-grid--dark .f-services-grid__item:hover .f-services-grid__text,
  .f-services-grid--dark .f-services-grid__item:focus-visible,.f-services-grid--dark .f-services-grid__item:focus-visible .f-services-grid__no,.f-services-grid--dark .f-services-grid__item:focus-visible .f-services-grid__title,.f-services-grid--dark .f-services-grid__item:focus-visible .f-services-grid__text{color:#000}
  .f-services-grid__item:hover .f-services-grid__no,.f-services-grid__item:focus-visible .f-services-grid__no{transform:translateX(4px)}
  .f-services-grid__item:hover .f-services-grid__title,.f-services-grid__item:hover .f-services-grid__text,
  .f-services-grid__item:focus-visible .f-services-grid__title,.f-services-grid__item:focus-visible .f-services-grid__text{transform:translateX(8px)}
}

@media (prefers-reduced-motion:reduce){
  .f-services-grid__item,.f-services-grid__item:before,.f-services-grid__no,.f-services-grid__title,.f-services-grid__text{transition:none}
}


/* ============ Separator z wideo/zdjeciem i pisanym naglowkiem (layout ACF: separator) ============ */
.f-separator{--separator-overlay:.55;--separator-height:33vh;--separator-min:320px;align-items:center;background:#000;display:flex;min-height:max(var(--separator-min),var(--separator-height));overflow:hidden;position:relative}
.f-separator--h25{--separator-height:25vh;--separator-min:260px}
.f-separator--h33{--separator-height:33vh;--separator-min:320px}
.f-separator--h50{--separator-height:50vh;--separator-min:420px}
.f-separator--h100{--separator-height:100vh;--separator-min:520px}

.f-separator__media{inset:0;position:absolute}
.f-separator__image,.f-separator__video,.f-separator__embed img{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}
/* Safari bez postera renderuje czarne pole - poster jest wiec wymagany w ACF,
   a gdy odtwarzanie zostanie zablokowane, zostaje sam poster */
.f-separator__video.is-blocked{opacity:0}
.f-separator__overlay{background:#000;inset:0;opacity:var(--separator-overlay);position:absolute}

.f-separator__inner{color:#fff;padding-bottom:48px;padding-top:48px;position:relative;width:100%}
.f-separator--center .f-separator__inner{text-align:center}
.f-separator--center .f-separator__inner .buttons,.f-separator--center .f-separator__inner .button{margin-left:auto;margin-right:auto}

.f-separator__title{color:#fff;margin:0;max-width:1000px}
.f-separator--center .f-separator__title{margin-left:auto;margin-right:auto}
.f-separator__static{display:block}
.f-separator__typed{display:block}
.f-separator__typed-rest{visibility:hidden}

/* kursor tylko w trakcie pisania */
.f-separator__caret{display:none}
.f-separator__typed.is-typing .f-separator__caret{animation:f-separator-caret 1.1s steps(1) infinite;background:currentColor;display:inline-block;height:.82em;margin-left:6px;vertical-align:-2px;width:3px}
@keyframes f-separator-caret{0%,45%{opacity:1}50%,95%{opacity:0}to{opacity:1}}

/* pelna tresc dla czytnikow i wyszukiwarek */
.f-separator__sr{clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

@media only screen and (min-width:992px){
  .f-separator__inner{padding-bottom:64px;padding-top:64px}
}

@media (prefers-reduced-motion:reduce){
  .f-separator__typed.is-typing .f-separator__caret{animation:none;display:none}
}