/* WSTAWKA W OGLOSZENIU - zdjecie albo film obok tresci karty,
   plus wybor tej wstawki w formularzu ogloszenia.

   Plik stoi na koncu listy arkuszy, bo wygrywa nizszy - tak jest
   napisane w CLAUDE.md i tak zostaje. */

/* ---------------------------------------------------- karta z wstawka */

/* Tresc karty zachowuje sie tak, jak zachowywala sie sama .offer:
   kolumna z odstepem, a stopka ("zglos sie" i stawka) przyklejona do
   dolu przez margin-top:auto. Bez tego wstawka podnosilaby stopke. */
.of-tresc{display:flex;flex-direction:column;gap:11px;flex:1 1 auto;min-width:0}

/* Wstawka trzyma sie GORY karty, a nie rozciaga na jej wysokosc.
   Rozciagnieta zostawala waskim paskiem (karta jest wyzsza niz szersza),
   a object-fit:cover wycinal z pionowego filmu pasek szerokosci dloni -
   z calego czlowieka zostawal kawalek rekawa. Stala ramka 4:5 pokazuje
   film tak, jak wyszedl z telefonu. */
.offer-media{flex-direction:row;align-items:flex-start;gap:14px}

/* Wstawka jest PIONOWA (4:5) niezaleznie od tego, co w niej stoi:
   film z telefonu jest pionowy, zdjecie z aparatu poziome, a karty
   w siatce musza miec rowna wysokosc. object-fit:cover przycina, ale
   nigdy nie zostawia czarnych pasow. Prawdziwe proporcje czlowiek
   widzi po stuknieciu, na pelnym ekranie. */
.of-wstawka{
  position:relative;margin:0;flex:0 0 auto;
  width:clamp(96px,27%,136px);aspect-ratio:4/5;
  border-radius:12px;overflow:hidden;cursor:pointer;
  background:#0c0c0e;border:1px solid var(--line)
}
.of-wstawka img,.of-wstawka video{width:100%;height:100%;object-fit:cover;display:block}
.of-wstawka:focus-visible{outline:2px solid var(--yl);outline-offset:2px}

/* Znaczek "graj" mowi, ze to film, a nie zdjecie - zanim film ruszy. */
.of-graj{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none
}
.of-graj svg{
  width:34px;height:34px;color:#fff;opacity:.92;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))
}

/* Na waskim telefonie wstawka zostaje z boku - tak ja wlasciciel
   narysowal: ogloszenie, a obok male wideo. Nie spychamy jej pod tekst,
   bo wtedy karta rosnie dwa razy i w siatce widac jedno ogloszenie. */
@media (max-width:520px){
  .offer-media{gap:12px}
  .of-wstawka{width:104px}
  .of-graj svg{width:26px;height:26px}
}

/* --------------------------------------------- wybor wstawki w formularzu */

.fw-opis{color:var(--ink2);font-size:14px;margin:2px 0 10px;max-width:62ch}
.fw-pusto{color:var(--ink2);font-size:14px}
.fw-pusto a{color:var(--yl);font-weight:600}

.fw-siatka{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:10px
}

.fw-kafel{
  position:relative;display:block;aspect-ratio:4/5;cursor:pointer;
  border-radius:11px;overflow:hidden;background:#0c0c0e;
  border:2px solid var(--line)
}
.fw-kafel img,.fw-kafel video{width:100%;height:100%;object-fit:cover;display:block}

/* Guzik wyboru jest niewidoczny, ale NIE schowany display:none -
   schowany tak element nie daje sie zaznaczyc z klawiatury, a
   przegladarka potrafi na nim stanac z bledem "invalid form control
   is not focusable". Zostaje wiec na miejscu, tylko przezroczysty. */
.fw-kafel input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}

.fw-kafel:has(input:checked){border-color:var(--yl)}
.fw-kafel:has(input:focus-visible){outline:2px solid var(--yl);outline-offset:2px}

/* Zaznaczony kafel dostaje jeszcze ptaszka - sama ramka na malym
   ekranie w sloncu jest za cicha. */
.fw-kafel:has(input:checked)::after{
  content:'✓';position:absolute;right:5px;top:3px;
  width:20px;height:20px;border-radius:50%;
  background:var(--yl);color:#1a1200;
  font-size:13px;font-weight:700;line-height:20px;text-align:center
}

.fw-znak{
  position:absolute;left:5px;bottom:5px;
  background:rgba(0,0,0,.62);color:#fff;
  font-size:11px;padding:2px 6px;border-radius:6px
}

/* "Bez wstawki" to taki sam kafel, tylko pusty - stoi pierwszy, zeby
   cofniecie wyboru bylo tam, gdzie czlowiek go szuka. */
.fw-bez{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;background:transparent;color:var(--ink2);text-align:center
}
.fw-krzyz{font-size:22px;line-height:1}
.fw-napis{font-size:11px;padding:0 4px}

/* Na stronie samego ogloszenia wstawka jest wieksza - miejsca jest
   dosc, a film z budowy to tu glowny argument firmy. Ramka i tak
   zostaje pionowa: pelne proporcje widac na pelnym ekranie. */
.of-wstawka-duza{width:min(280px,62%);border-radius:14px}
.of-wstawka-duza .of-graj svg{width:46px;height:46px}

/* ------------------------------------------------ pasek pakietu i okno

   Pasek stoi tam, gdzie firma wyciaga reke po film - nad kafelkami
   galerii, a nie w cenniku na koncu strony. */
.pk-pasek{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;margin:0 0 12px;
  background:linear-gradient(180deg,rgba(201,162,39,.09),rgba(201,162,39,.03))
}
.pk-pasek-co{flex:1 1 220px;font-size:13.5px;color:var(--ink2);line-height:1.45}
.pk-pasek-co b{color:var(--ink);font-size:14.5px;margin-right:6px}
.pk-pasek-guzik{
  flex:0 0 auto;border:1px solid #C9A227;border-radius:999px;
  background:transparent;color:#8a6d12;
  font:600 13px/1 inherit;padding:9px 14px;cursor:pointer
}
.pk-pasek-guzik:hover{background:rgba(201,162,39,.12)}

/* Okno pakietow jest szersze od pozostalych okien (te maja 560 px):
   trzy pakiety obok siebie czyta sie jednym spojrzeniem, a jeden pod
   drugim - przewijaniem. Na telefonie i tak zostaje jedna kolumna. */
.pk-okno{width:min(980px,calc(100% - 24px))}
.pk-okno-lead{color:var(--ink2);font-size:14px;margin:0 0 14px;line-height:1.5}
.pk-okno-stopka{color:var(--ink2);font-size:12.5px;margin:14px 0 0;line-height:1.5}

/* W oknie karty pakietow sa tylko do czytania - guzika "wybieram" tu nie
   ma, bo nic sie nie kupuje.

   Kolory trzeba przestawic WPROST. Karta pakietu ma bialy spod
   (var(--card)) z mysla o jasnej stronie, a okno jest ciemne i zlote -
   z bialym spodem nazwa pakietu i lista punktow stawaly sie jasnoszare
   na bialym, czyli nieczytelne. W oknie karta jest przezroczysta, a
   tekst bierze barwe okna. */
.pk-okno .pak-c{
  padding:14px;background:transparent;color:#EDE7D8;
  border-color:rgba(212,175,55,.30)
}
.pk-okno .pak-hot{border-color:rgba(212,175,55,.75);box-shadow:none}
.pk-okno .pak-c h2{font-size:18px;color:#F2DC96}
.pk-okno .pak-c ul{color:#EDE7D8}
.pk-okno .pak-kto{color:#A8A192}
.pk-okno .pak-cena s{color:#8E887A}
.pk-okno .pak-cena b{color:#5FD39B;font-size:24px}
.pk-okno-lead,.pk-okno-stopka{color:#A8A192}