/* ==========================================================================
   pages/wesela.css: bloki specyficzne dla wesela.html (prefiks .wesela-).
   Tylko tokeny z base.css, zero hexów. Kąty proste, zero cieni (design-system §1).
   Breakpointy: 480 / 768 / 1024 / 1280 (mobile-first).
   ========================================================================== */

/* ---------- 2. W skrócie + fakty + kadr kinowy ---------- */
.wesela-brief__grid{display:grid;gap:var(--s-8) var(--gap)}
.wesela-brief__body{display:grid;gap:var(--s-6);align-content:start}
.wesela-brief__more p{color:var(--ink-2);max-width:56ch}
.wesela-brief .wesela-brief__band{margin:var(--s-9) auto 0}
@media (min-width:1024px){
  .wesela-brief__grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:end}
  .wesela-brief__body{grid-column:1 / span 7}
  .wesela-brief__facts{grid-column:9 / -1;grid-template-columns:minmax(0,1fr) !important;gap:var(--s-6)}
  .wesela-brief__facts .t-num-xl{font-size:clamp(3rem, 1.6rem + 3.2vw, 5rem)}
}

/* ---------- 3. Ślub w plenerze: tekst + kolaż dwóch kadrów ---------- */
.wesela-plener__grid{display:grid;gap:var(--s-8) var(--gap)}
.wesela-plener__body{display:grid;gap:var(--s-5);justify-items:start;align-content:start}
.wesela-plener__body .horizon{width:100%;margin:0 0 var(--s-2)}
.wesela-plener__list{margin-top:var(--s-2)}
.wesela-plener__list li{color:var(--ink-2)}
.wesela-plener__list strong{color:var(--ink)}
.wesela-plener__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-4);margin-block:var(--s-2)}
.wesela-plener__price .t-price{color:var(--ink)}
.wesela-plener__price-note{color:var(--ink-2);max-width:22ch}
.wesela-plener__media{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.wesela-plener__main{grid-column:1 / -1;grid-row:1}
.wesela-plener__main .frame__caption{text-align:right}
.wesela-plener .wesela-plener__side{grid-column:1 / span 6;grid-row:2;margin-top:calc(var(--s-8) * -1);position:relative;z-index:1;border:6px solid var(--paper);border-left:0;border-bottom:0}
@media (min-width:1024px){
  .wesela-plener__grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}
  .wesela-plener__body{grid-column:1 / span 5}
  .wesela-plener__media{grid-column:7 / -1}
  .wesela-plener__main{grid-column:2 / -1}
  .wesela-plener .wesela-plener__side{grid-column:1 / span 5;margin-top:-34%;border-width:10px}
}

/* ---------- 4. Dzień wesela (jedyny ciemny blok): sceny + cennik + kalkulator ---------- */
.wesela-scenes{margin-top:var(--s-8)}
.wesela-scenes .scenes__head{margin-bottom:var(--s-6)}
.wesela-scenes__hint{color:var(--on-night-2)}
@media (max-width:767px){ .wesela-scenes__hint{display:none} }
.wesela-steps{display:grid;gap:var(--s-2);list-style:none;margin:0;padding:0}
.wesela-steps li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:var(--s-3);align-items:baseline;color:var(--on-night);
  font-size:1.0625rem;line-height:1.4;max-width:38ch}
.wesela-steps__n{color:var(--accent-on-night);font-size:1.125rem}
.wesela-scene--end .scene__text{max-width:30ch}
@media (min-width:1024px){
  /* przypięty przejazd: tekst kroków nie może rozepchnąć 100dvh */
  .wesela-scenes.scenes--pinned .scene{gap:var(--s-2)}
  .wesela-scenes.scenes--pinned .scene .frame{max-height:46vh}
}

.wesela-offer{display:grid;gap:var(--s-8) var(--gap);margin-top:var(--s-10);scroll-margin-top:calc(var(--header-h) + 60px)}
.wesela-offer__prices{display:grid;gap:var(--s-5);align-content:start}
.wesela-offer__title{max-width:16ch}
.wesela-offer__lead{max-width:44ch}
@media (min-width:1024px){
  .wesela-offer{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .wesela-offer__prices{grid-column:1 / span 6;padding-right:var(--s-7)}
  .wesela-calc{grid-column:7 / -1}
}
@media (min-width:1280px){ .wesela-calc{grid-column:8 / -1} .wesela-offer__prices{grid-column:1 / span 7;padding-right:var(--s-9)} }

/* tabela progów na ciemnym tle; aktywny próg i rok podświetla wesela.js */
.wesela-tiers-wrap{margin-top:var(--s-3)}
.wesela-tiers{background:transparent;color:var(--on-night)}
.wesela-tiers thead th{color:var(--on-night-2);border-bottom-color:var(--line-dark)}
.wesela-tiers tbody th{position:relative;font-weight:500;color:var(--on-night);padding-left:28px}
.wesela-tiers tbody th::before{content:"";position:absolute;left:8px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--accent-on-night);
  transform:scale(0);transition:transform var(--d-ui) var(--ease-ui)}
.wesela-tiers th,.wesela-tiers td{padding-block:18px;transition:background-color var(--d-ui) var(--ease-ui)}
.wesela-tiers td .t-num{font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem);color:var(--on-night-2);transition:color var(--d-ui) var(--ease-ui)}
.wesela-tiers td.is-year .t-num{color:var(--on-night)}
.wesela-tiers tr.is-active th,.wesela-tiers tr.is-active td{background:color-mix(in srgb, var(--on-night) 7%, transparent)}
.wesela-tiers tr.is-active th::before{transform:scale(1)}
.wesela-tiers tr.is-active td.is-year .t-num{color:var(--accent-on-night)}
.wesela-tiers-wrap:focus-visible{outline-color:var(--focus-on-dark)}
.wesela-offer__stamp{margin-block:var(--s-3) var(--s-2)}
.wesela-offer__note{color:var(--on-night-2) !important;max-width:50ch}
.wesela-offer__person{margin-top:var(--s-4);padding-top:var(--s-5);border-top:1px solid var(--line-dark)}
.wesela-offer__person .contact-line__name{color:var(--on-night);font-size:1.125rem}
.wesela-offer__person .contact-line a{color:var(--on-night)}

/* kalkulator: rozszerzenie .calc z base.css */
.wesela-calc__hint{font-weight:400;color:var(--on-night-2)}
.wesela-calc__kids .stepper{width:9.5rem}
.wesela-calc__kids .stepper__input{min-height:52px;font-size:1.125rem;font-stretch:var(--w-cond);font-weight:700}
.wesela-calc__year{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-5)}
.wesela-calc__label{font-weight:600}
.wesela-calc__checks{display:grid;gap:var(--s-3)}
.wesela-calc [data-wc-total]{display:block;font-size:clamp(2rem, 1.3rem + 2.2vw, 3.25rem);white-space:nowrap}
.wesela-calc__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6)}
/* przedział cen w tabeli: druga stawka lekko przygaszona (POTWIERDZIĆ znaczenie „X / Y”) */
.wesela-range{white-space:nowrap}
.wesela-range__sep{margin-inline:.08em;color:var(--on-night-2)}
.wesela-tiers td .wesela-range{color:var(--on-night)}
.wesela-tiers tr.is-active td .wesela-range{color:var(--accent-on-night)}
.wesela-calc .calc__result .t-small{color:var(--on-night-2)}

/* ---------- 5. W cenie: kadr pionowy + lista ---------- */
.wesela-included__grid{display:grid;gap:var(--s-8) var(--gap)}
.wesela-included__body{display:grid;align-content:start}
.wesela-included__list li{color:var(--ink)}
.wesela-included__more{margin-top:var(--s-7)}
@media (min-width:1024px){
  .wesela-included__grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}
  .wesela-included__media{grid-column:1 / span 5}
  .wesela-included__body{grid-column:7 / -1}
}
@media (max-width:767px){ .wesela-included__media .frame--45{aspect-ratio:4/3} }

/* ---------- 6. Zasady: trzy grupy liczb + dodatki ---------- */
.wesela-rules__grid{display:grid;gap:var(--s-8) var(--gap)}
@media (min-width:768px){ .wesela-rules__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .wesela-rules__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.wesela-rules__col{padding-top:var(--s-5);border-top:2px solid var(--ink);min-width:0}
.wesela-rules__title{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-6)}
.wesela-rules__list{display:grid;gap:var(--s-5);margin:0}
.wesela-rules__list > div{display:grid;grid-template-columns:7.25rem minmax(0,1fr);gap:var(--s-4);align-items:baseline}
.wesela-rules__list dt{font-size:1.5rem;line-height:1.1;color:var(--ink);white-space:nowrap}
.wesela-rules__list dd{margin:0;color:var(--ink-2);max-width:40ch}
.wesela-rules__bank{margin-top:var(--s-6);border-top:1px solid var(--line)}
.wesela-rules__bank summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);min-height:52px;font-weight:600;cursor:pointer;list-style:none}
.wesela-rules__bank summary::-webkit-details-marker{display:none}
.wesela-rules__bank summary .i{transition:transform var(--d-ui) var(--ease-ui)}
.wesela-rules__bank[open] summary .i{transform:rotate(45deg)}
.wesela-rules__bank-body{display:grid;gap:var(--s-3);padding-bottom:var(--s-4);color:var(--ink-2)}
.wesela-rules__iban{font-size:1.125rem;letter-spacing:.02em;color:var(--ink)}

.wesela-extras{display:grid;gap:var(--s-7) var(--gap);margin-top:var(--s-10)}
.wesela-extras__body{display:grid;gap:var(--s-6);align-content:start}
.wesela-extras__item{display:grid;grid-template-columns:7.25rem minmax(0,1fr);gap:var(--s-4);padding-top:var(--s-5);border-top:1px solid var(--line)}
.wesela-extras__item p + p{margin-top:var(--s-2);color:var(--ink-2)}
.wesela-extras__price .t-price{font-size:2rem;color:var(--ink)}
.wesela-extras__ban{background:var(--mist)}
@media (min-width:1024px){
  .wesela-extras{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}
  .wesela-extras__media{grid-column:1 / span 6}
  .wesela-extras__body{grid-column:8 / -1}
}

/* ---------- 7. Filmy: 3 fasady (duża + dwie w kolumnie) ---------- */
.wesela-films__grid{display:grid;gap:var(--s-7) var(--gap);list-style:none;margin:0;padding:0}
.wesela-film{display:grid;gap:var(--s-2);align-content:start;max-width:none}
.wesela-film .video{margin-bottom:var(--s-2)}
.wesela-film__title{font-size:var(--t-h4);font-stretch:var(--w-text);font-weight:600;line-height:1.3;color:var(--ink);max-width:34ch;text-wrap:balance}
.wesela-film__meta{color:var(--ink-3)}
.wesela-film__meta .t-num{color:var(--ink-2)}
.wesela-films__note{margin-top:var(--s-7);color:var(--ink-3)}
@media (min-width:768px){
  .wesela-films__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wesela-film--lead{grid-column:1 / -1}
}
@media (min-width:1024px){
  .wesela-films__grid{grid-template-columns:repeat(12,minmax(0,1fr));row-gap:var(--s-6)}
  .wesela-film--lead{grid-column:1 / span 8;grid-row:1 / span 2}
  .wesela-film:nth-child(2){grid-column:9 / -1;grid-row:1}
  .wesela-film:nth-child(3){grid-column:9 / -1;grid-row:2}
  .wesela-film--lead .wesela-film__title{font-size:clamp(1.375rem, 1.1rem + .6vw, 1.625rem)}
}
.video__btn:focus-visible{outline:2px solid var(--focus-on-dark);outline-offset:-6px}

/* ---------- 8. Opinie: duży cytat + mniejszy + ocena ---------- */
.wesela-reviews__grid{display:grid;gap:var(--s-8) var(--gap)}
.wesela-reviews__main .t-quote{font-size:clamp(1.75rem, 1.2rem + 2vw, 2.75rem);line-height:1.2}
.wesela-reviews__main blockquote{max-width:24ch}
.wesela-reviews__side .t-quote{font-size:clamp(1.25rem, 1.1rem + .6vw, 1.5rem)}
@media (min-width:1024px){
  .wesela-reviews__grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .wesela-reviews__main{grid-column:1 / span 7;grid-row:1 / span 2}
  .wesela-reviews__side{grid-column:9 / -1;grid-row:1;margin-top:var(--s-3)}
  .wesela-reviews__rating{grid-column:9 / -1;grid-row:2;align-self:end}
}

/* ---------- 9. FAQ: trzy kategorie, nagłówek po lewej, pytania po prawej ---------- */
.wesela-faq .horizon{margin-bottom:0}
.wesela-faq__groups{display:grid}
.wesela-faq__group{display:grid;gap:var(--s-3) var(--gap);padding-top:var(--s-7)}
.wesela-faq__group + .wesela-faq__group{margin-top:var(--s-5)}
.wesela-faq__cat{font-size:clamp(1.25rem, 1rem + .6vw, 1.625rem);display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-4)}
.wesela-faq__count{color:var(--ink-3);font-weight:400}
.wesela-faq__list{border-top:2px solid var(--ink)}
@media (min-width:1024px){
  .wesela-faq__group{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .wesela-faq__cat{grid-column:1 / span 4;flex-direction:column;gap:var(--s-2);padding-top:var(--s-5);position:sticky;top:calc(var(--header-h) + 52px + var(--s-5))}
  .wesela-faq__list{grid-column:5 / -1}
}

/* ---------- 10-11. Zobacz też, formularz ---------- */
.wesela-more .tiles{margin-top:var(--s-2)}
.wesela-reviews__rating .link{justify-self:start}
.wesela-nw{white-space:nowrap}
.wesela-visit{color:var(--ink-2);max-width:42ch}

/* ---------- 1. Hero: jasne zdjęcie sali potrzebuje mocniejszego scrimu po lewej ---------- */
.wesela-hero .hero__title{font-size:clamp(2.25rem, 1.3rem + 2.9vw, 3.5rem);max-width:28ch}
.wesela-hero .hero__scrim::before{content:"";position:absolute;inset:0;
  background:linear-gradient(to right, color-mix(in srgb, var(--night) 70%, transparent) 0%, color-mix(in srgb, var(--night) 38%, transparent) 55%, color-mix(in srgb, var(--night) 8%, transparent) 100%)}
@media (max-width:1023px){
  /* fakty z długimi podpisami: liczba obok opisu zamiast trzech wąskich kolumn */
  .wesela-brief__facts{grid-template-columns:minmax(0,1fr) !important;gap:var(--s-5)}
  .wesela-brief__facts .fact{grid-template-columns:minmax(7ch,auto) minmax(0,1fr);align-items:baseline;column-gap:var(--s-5)}
  .wesela-brief__facts .fact__label{max-width:36ch}
}
/* hero: na telefonie trzy akcje się łamią; „Cennik i kalkulator” jest tuż niżej w subnavie */
@media (max-width:767px){ .wesela-hero__price{display:none} }