/* Podstrona /studio/. Tylko to, czego nie ma w szablonie: tabela cennika,
   opis pod kaflem filmu, dwa pola formularza w rzędzie i lista wyboru.
   Kolory, szerokości i przyciski biorą się z tokenów w _zrodlo/szablon.html.
   Po zmianie podnieś ?v= przy arkuszu w zbuduj.py (cache CSS trzyma 30 dni). */

.studio-cena{margin-top:22px;color:#fff;font-size:clamp(1.06rem,1.5vw,1.3rem);font-weight:600;max-width:64ch}
.studio-cena b{color:var(--amber);font-weight:800;white-space:nowrap}
.studio-h3{margin:clamp(40px,4vw,64px) 0 clamp(18px,2vw,26px);font-size:clamp(1.3rem,2vw,1.7rem);font-weight:800;text-transform:uppercase;letter-spacing:.01em;color:var(--navy)}
.studio-foto{width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow-card)}
.kafel h3{text-transform:none}

/* kafel filmu: opis pod tytułem i odtwarzacz w miejscu kadru */
.tube .m p{margin-top:8px;color:var(--muted-2);font-size:.96rem;line-height:1.5}
.tube .th iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
div.tube:hover{transform:none}
div.tube:hover .th img{transform:none}

/* pakiety: nazwa jako nagłówek karty, kwota pod nią */
.price h3{margin-top:10px}
.price .amt{font-variant-numeric:tabular-nums}

/* cennik */
.cennik{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-card);border-spacing:0;display:table}
.cennik caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cennik th,.cennik td{padding:clamp(16px,1.6vw,24px) clamp(16px,1.8vw,28px);text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cennik tr:last-child>*{border-bottom:0}
.cennik thead th{background:var(--navy);color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;border-bottom:0}
.cennik thead th+th,.cennik tbody td[data-l]{text-align:right;white-space:nowrap}
.cennik tbody th{font-weight:800;color:var(--navy);font-size:clamp(1.05rem,1.3vw,1.25rem)}
.cennik tbody th small{display:block;margin-top:6px;font-weight:400;font-size:.94rem;line-height:1.5;color:var(--muted);max-width:58ch}
.cennik tbody td{color:var(--ink)}
.cennik tbody td[data-l]{font-weight:800;font-size:clamp(1.1rem,1.5vw,1.4rem);font-variant-numeric:tabular-nums}
.cennik--dodatki tbody th{width:34%;font-size:1.02rem}
.cennik--dodatki tbody td{line-height:1.55}

/* formularz: dwa pola w rzędzie, lista wyboru jak pozostałe pola */
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form select{width:100%;padding:15px 16px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff;color:var(--ink);min-height:54px}
.form select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(249,160,11,.25)}

@media (max-width:640px){
  /* wiersz cennika jako karta: nazwa kolumny przed kwotą */
  .cennik:not(.cennik--dodatki) thead{display:none}
  .cennik:not(.cennik--dodatki),.cennik:not(.cennik--dodatki) tbody,.cennik:not(.cennik--dodatki) tr,.cennik:not(.cennik--dodatki) th,.cennik:not(.cennik--dodatki) td{display:block;width:100%}
  .cennik:not(.cennik--dodatki) tbody th{border-bottom:0;padding-bottom:8px}
  .cennik:not(.cennik--dodatki) tbody td[data-l]{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:10px;border-bottom:0;text-align:right}
  .cennik:not(.cennik--dodatki) tbody td[data-l]::before{content:attr(data-l);font-weight:600;font-size:.94rem;color:var(--muted)}
  .cennik:not(.cennik--dodatki) tbody tr{border-bottom:1px solid var(--line);padding-bottom:10px}
  .cennik:not(.cennik--dodatki) tbody tr:last-child{border-bottom:0}
  .cennik--dodatki tbody th,.cennik--dodatki tbody td{display:block;width:100%}
  .cennik--dodatki tbody th{border-bottom:0;padding-bottom:2px}
  .cennik--dodatki tbody td{padding-top:0}
  .form-2{grid-template-columns:1fr}
}