/* ============================================================
   ANNA SOKÓŁ-NYGA — komponenty podstron (SCALONA WERSJA)
   Jasny motyw perła/granat/złoto. Sekcje naprzemienne:
   jasne (paper/beige) + akcentowe granatowe (on-navy).
   Zdjęcie wnętrza występuje WYŁĄCZNIE w sekcji Hero (index.html).
   Uzupełnia style.css (tokeny, nawigacja, przyciski bazowe).
   ============================================================ */

:root{
  --navy-950:#08111f;
  --navy-900:#0d1b31;
  --navy-800:#142744;
  --navy-700:#1b3153;
  --navy-line:rgba(200,165,96,.22);
  --navy-line-soft:rgba(226,226,238,.14);
  --beige-2:#e7dcc9;
  --paper:#fcfaf6;
  --ink-soft:#4d5875;
  --display:'Playfair Display', Georgia, serif;
  --body:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --wrap:1180px;
  --gut:clamp(1.25rem, 5vw, 3.5rem);
  /* odstęp sekcji – skompresowany, aby treść była widoczna zaraz po wejściu */
  --sec:clamp(2.75rem, 5vw, 5rem);
}

::selection{background:var(--gold);color:var(--navy-950)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------- układ ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec);position:relative}
.section--tight{padding-block:clamp(2.5rem,4vw,4rem)}
.section--paper{background:var(--paper)}
.section--beige{background:var(--beige)}
.section--sand{background:var(--beige-2)}
.on-navy{background:var(--navy-900);color:#eef0f8}
.on-navy h1,.on-navy h2,.on-navy h3{color:#f6f2e9}

.split{display:grid;gap:clamp(2.5rem,5vw,5rem);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--wide-l{grid-template-columns:1.15fr .85fr}
  .split--wide-r{grid-template-columns:.85fr 1.15fr}
}

/* ---------- typografia ---------- */
.eyebrow{
  display:flex;align-items:center;gap:.85rem;margin:0 0 1.4rem;
  font:600 .72rem/1 var(--body);text-transform:uppercase;letter-spacing:.24em;
  color:var(--gold-deep);
}
.eyebrow::before{content:"";width:2.4rem;height:1px;background:currentColor;flex:none;opacity:.85}
.on-navy .eyebrow{color:var(--gold)}

.section h2,.pagehead h1,.cta h2{font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1.14;color:var(--navy-900)}
.section h3,.section h4{font-family:var(--display);font-weight:600;line-height:1.2}
.on-navy h2,.on-navy h3{color:#f6f2e9}
.h-xl{font-size:clamp(2.5rem,6.2vw,4.4rem);line-height:1.08}
.h-lg{font-size:clamp(1.9rem,3.8vw,2.95rem)}
.h-md{font-size:clamp(1.5rem,2.4vw,2.05rem)}
.h-sm{font-size:1.25rem;line-height:1.25}

.lede{font-size:clamp(1.04rem,1.5vw,1.2rem);line-height:1.72;color:var(--ink-soft);max-width:60ch}
.on-navy .lede{color:rgba(238,240,248,.80)}
.measure{max-width:66ch}
.section h1 + .lede,.section h2 + .lede,.pagehead h1 + .lede,.section h2 + .measure{margin-top:1.5rem}
.center{text-align:center;margin-inline:auto}
.gold{color:var(--gold-deep)}
.on-navy .gold{color:var(--gold)}

.section p,.pagehead p,.cta p{margin:0 0 1.15em}
.section p:last-child,.measure p:last-child{margin-bottom:0}
.measure p{margin:0 0 1.15em;color:var(--ink-soft)}

/* ---------- sygnatura: smugi światła (tylko na granacie) ---------- */
.shafts{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.shafts::before,.shafts::after{
  content:"";position:absolute;top:-40%;height:180%;
  background:linear-gradient(180deg, rgba(200,165,96,.18), rgba(200,165,96,0) 76%);
  transform:rotate(17deg);filter:blur(32px);
}
.shafts::before{left:5%;width:32%}
.shafts::after{left:26%;width:12%;opacity:.5}
.shafts--right::before{left:auto;right:6%}
.shafts--right::after{left:auto;right:30%}
.on-navy > .wrap,.pagehead > .wrap,.cta > .wrap{position:relative;z-index:1}

/* ---------- przyciski dodatkowe ---------- */
.btn{display:inline-flex;align-items:center;gap:.7rem}
.btn svg{width:.85em;height:.85em;flex:none;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--outline{background:transparent;color:var(--gold-soft);border-color:rgba(200,165,96,.5)}
.btn--outline:hover{background:var(--gold);color:var(--navy-950);border-color:var(--gold)}
.btn--dark{background:var(--navy-900);color:var(--gold-soft);border-color:var(--navy-900)}
.btn--dark:hover{background:transparent;color:var(--navy-900)}
.btn--ghost{background:transparent;color:var(--navy-900);border-color:rgba(22,32,58,.30)}
.btn--ghost:hover{background:var(--navy-900);color:var(--beige);border-color:var(--navy-900)}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}

.link-more{
  display:inline-flex;align-items:center;gap:.55rem;
  font:600 .74rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);text-decoration:none;
  padding-bottom:.4rem;border-bottom:1px solid rgba(138,106,44,.35);
  transition:border-color .3s var(--ease), gap .3s var(--ease);
}
.link-more:hover{border-color:var(--gold-deep);gap:.9rem}
.on-navy .link-more{color:var(--gold);border-color:rgba(200,165,96,.35)}
.on-navy .link-more:hover{border-color:var(--gold)}

/* ---------- nagłówek podstrony (granatowy pas, bez zdjęcia) ---------- */
.pagehead{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg, var(--navy-800), var(--navy-950) 74%);
  color:#eef0f8;padding-block:clamp(1.9rem,3.6vh,3rem);
  border-bottom:1px solid rgba(200,165,96,.25);
}
.pagehead h1{color:#f8f4ec;max-width:24ch}
.pagehead .lede{margin-top:1rem;color:rgba(238,240,248,.80)}
.pagehead .eyebrow{color:var(--gold)}
.crumbs{
  display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1rem;
  font:500 .68rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;
  color:rgba(226,202,151,.65);
}
.crumbs a{text-decoration:none;color:inherit}
.crumbs a:hover{color:var(--gold)}
.crumbs span{opacity:.5}

/* ---------- siatka korzyści / kolumn ---------- */
.cross{
  display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--navy-line);border-left:1px solid var(--navy-line);
  margin-top:3.2rem;
}
@media (min-width:820px){.cross{grid-template-columns:1fr 1fr}}
.cross__cell{
  border-right:1px solid var(--navy-line);border-bottom:1px solid var(--navy-line);
  padding:clamp(1.8rem,3.4vw,2.9rem);
}
.cross__cell h3{font-size:1.3rem;color:var(--gold-soft);margin-bottom:.9rem}
.cross__cell p{color:rgba(238,240,248,.78);margin:0;font-size:.99rem}

/* ---------- karty ---------- */
.cards{display:grid;gap:1.4rem;margin-top:3rem}
@media (min-width:760px){.cards--2{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.cards--3{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--paper);border:1px solid rgba(22,32,58,.1);
  padding:clamp(1.8rem,3vw,2.5rem);
  display:flex;flex-direction:column;gap:1rem;
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover{border-color:rgba(200,165,96,.6);transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(13,27,49,.4)}
.card h3{font-size:1.4rem;color:var(--navy-900)}
.card p{color:var(--ink-soft);font-size:1rem;margin:0}
.card .link-more{margin-top:auto;align-self:flex-start}

/* ---------- pakiety (granatowe karty) ---------- */
.pkgs{display:grid;gap:1.5rem;margin-top:3.2rem}
@media (min-width:960px){.pkgs{grid-template-columns:repeat(3,1fr);align-items:start}}
.pkg{
  background:var(--navy-800);border:1px solid var(--navy-line-soft);
  display:flex;flex-direction:column;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.pkg:hover{border-color:rgba(200,165,96,.5);transform:translateY(-4px)}
.pkg--lead{border-color:rgba(200,165,96,.55);background:linear-gradient(180deg,#1b3153,#0f1f39)}
.pkg__top{padding:2.1rem 1.9rem 1.7rem;border-bottom:1px solid var(--navy-line-soft);position:relative}
.pkg__tag{
  position:absolute;top:0;left:1.9rem;transform:translateY(-50%);
  background:var(--gold);color:var(--navy-950);padding:.42rem .85rem;
  font:700 .6rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;
}
.pkg__top h3{font-size:1.8rem;color:#f8f4ec}
.pkg__price{margin-top:.7rem;font:400 1.6rem/1 var(--display);color:var(--gold)}
.pkg__price small{font:500 .68rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:rgba(226,202,151,.7);margin-right:.45rem}
.pkg__body{padding:1.9rem;display:flex;flex-direction:column;gap:1.35rem;flex:1}
.pkg__body h4{font:600 .68rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:rgba(226,202,151,.72);margin:0}
.pkg__foot{padding:0 1.9rem 1.9rem}
.pkg .btn{width:100%;justify-content:center}

/* ---------- listy „ptaszek” ---------- */
.list-check li{position:relative;padding-left:1.65rem;margin-bottom:.72rem;font-size:.99rem;line-height:1.62;color:rgba(238,240,248,.82)}
.list-check li:last-child{margin-bottom:0}
.list-check li::before{content:"";position:absolute;left:0;top:.62em;width:.55rem;height:.55rem;border-left:1px solid var(--gold);border-bottom:1px solid var(--gold);transform:rotate(-45deg)}
.list-check--sub{margin-top:.6rem;padding-left:.2rem}
.list-check--sub li{color:rgba(238,240,248,.62);font-size:.93rem;padding-left:1.1rem;margin-bottom:.4rem}
.list-check--sub li::before{width:.3rem;height:.3rem;border:0;background:var(--gold);opacity:.7;transform:none;top:.72em}
.list-light li{color:var(--ink-soft)}
.list-light li::before{border-color:var(--gold-deep)}
.list-light .list-check--sub li{color:var(--ink-soft);opacity:.85}
.list-light .list-check--sub li::before{background:var(--gold-deep)}

/* ---------- pytanie → odpowiedź ---------- */
.qa{display:grid;gap:clamp(1.6rem,3vw,2.6rem);margin-top:2.8rem}
@media (min-width:820px){.qa--2{grid-template-columns:1fr 1fr}}
.qa__item{border-top:1px solid rgba(22,32,58,.16);padding-top:1.6rem}
.qa__item h3{font-size:1.32rem;margin-bottom:.9rem;color:var(--navy-900)}
.on-navy .qa__item{border-color:var(--navy-line)}
.on-navy .qa__item h3{color:#f6f2e9}

/* ---------- miejsca na zdjęcia (bez tła wnętrza – tylko ozdobna rama) ---------- */
.slot{
  position:relative;display:grid;place-items:center;text-align:center;
  aspect-ratio:4/3;overflow:hidden;border-radius:4px;
  background:linear-gradient(158deg,#1b3153,#0a1424);
  border:1px solid rgba(200,165,96,.3);
}
.slot::after{content:"";position:absolute;inset:12px;border:1px solid rgba(200,165,96,.16);border-radius:2px;pointer-events:none;z-index:2}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:4px;transition:transform .5s var(--ease)}
.slot:hover img{transform:scale(1.03)}
.slot--tall{aspect-ratio:3/4}
.slot--wide{aspect-ratio:16/9}
.slot--light{background:linear-gradient(158deg,var(--beige-2),#dccfb6);border-color:rgba(138,106,44,.3)}
.slot--light::after{border-color:rgba(138,106,44,.18)}

.portrait{position:relative}
.portrait img{border:1px solid rgba(200,165,96,.35);border-radius:4px;width:100%}
.portrait::before{content:"";position:absolute;inset:auto -18px -18px auto;width:62%;height:62%;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);opacity:.55;z-index:-1}

/* ---------- cytat ---------- */
.pull{margin:0;padding:clamp(1.9rem,4vw,3rem) 0 0;border-top:1px solid var(--navy-line)}
.pull p{font:400 clamp(1.35rem,2.5vw,1.95rem)/1.42 var(--display);color:var(--gold-soft);margin:0}
.on-navy .pull p{color:var(--gold-soft)}
.pull cite{display:block;margin-top:1.3rem;font-style:normal;font:500 .68rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:rgba(226,202,151,.65)}

/* ---------- realizacje: suwak przed/po ---------- */
.case{margin-top:clamp(3rem,6vw,5rem)}
.case + .case{padding-top:clamp(3rem,6vw,5rem);border-top:1px solid rgba(22,32,58,.14)}
.case h2{color:var(--navy-900)}
.case__meta{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.2rem}
.tag{border:1px solid rgba(138,106,44,.35);color:var(--gold-deep);padding:.42rem .8rem;font:600 .62rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;border-radius:2px}

.ba{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid rgba(200,165,96,.35);border-radius:4px;--pos:50%}
.ba__layer{position:absolute;inset:0}
.ba__layer img{width:100%;height:100%;object-fit:cover}
.ba__layer--after{clip-path:inset(0 calc(100% - var(--pos)) 0 0);z-index:2}
.ba__layer--before{z-index:1}
.ba__divider{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--gold);z-index:3;box-shadow:0 0 10px rgba(200,165,96,.8)}
.ba__label{position:absolute;top:1rem;z-index:3;padding:.42rem .85rem;background:rgba(8,17,31,.82);border:1px solid rgba(200,165,96,.3);border-radius:2px;font:600 .62rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);backdrop-filter:blur(4px)}
.ba__label--a{left:1rem}
.ba__label--b{right:1rem}
.ba__handle{position:absolute;top:50%;left:var(--pos);z-index:4;width:46px;height:46px;margin:-23px 0 0 -23px;border:1px solid var(--gold);border-radius:50%;background:rgba(8,17,31,.82);color:var(--gold);display:grid;place-items:center;pointer-events:none;font-size:.8rem}
.ba__range{position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba__range:focus-visible + .ba__handle{outline:2px solid var(--gold);outline-offset:4px}
.ba__hint{margin-top:.9rem;font:500 .66rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- kontakt ---------- */
.contact{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
@media (min-width:960px){.contact{grid-template-columns:.85fr 1.15fr}}
.dl{border-top:1px solid var(--navy-line);margin-top:2.4rem}
.dl div{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;padding:1.05rem 0;border-bottom:1px solid var(--navy-line)}
.dl dt{flex:0 0 6.5rem;font:600 .66rem/1.6 var(--body);letter-spacing:.2em;text-transform:uppercase;color:rgba(226,202,151,.7)}
.dl dd{margin:0;flex:1;min-width:12rem}
.dl a{color:#f2f4fa;text-decoration:none;border-bottom:1px solid rgba(200,165,96,.4);transition:color .3s var(--ease)}
.dl a:hover{color:var(--gold)}

.form{display:grid;gap:1.25rem}
@media (min-width:640px){.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}}
.field{display:flex;flex-direction:column;gap:.55rem}
.field label{font:600 .66rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:rgba(226,202,151,.75)}
.field input,.field select,.field textarea{
  width:100%;padding:.95rem 1.05rem;background:rgba(255,255,255,.04);
  border:1px solid var(--navy-line-soft);border-radius:2px;color:#f2f4fa;font:400 1rem/1.5 var(--body);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea{min-height:150px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.field select option{background:var(--navy-800);color:#f2f4fa}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.07)}
.field input::placeholder,.field textarea::placeholder{color:rgba(238,240,248,.35)}
.field--error input,.field--error select,.field--error textarea{border-color:#e08a7a}
.field__err{font:500 .78rem/1.4 var(--body);color:#eba396;min-height:1.1em;margin:0}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__note{font-size:.86rem;line-height:1.6;color:rgba(238,240,248,.6)}
.form__note a{color:var(--gold-soft)}
.form__status{border-left:2px solid var(--gold);padding:.9rem 1.1rem;background:rgba(200,165,96,.09);font-size:.95rem;color:#f2f4fa}
.consent{display:flex;gap:.8rem;align-items:flex-start;font-size:.88rem;line-height:1.6;color:rgba(238,240,248,.75)}
.consent input{width:1.1rem;height:1.1rem;margin-top:.3rem;flex:none;accent-color:var(--gold)}

/* ---------- CTA (granatowy blok) ---------- */
.cta{position:relative;overflow:hidden;background:linear-gradient(140deg,var(--navy-800),var(--navy-950) 70%);color:#eef0f8;text-align:center}
.cta h2{font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:22ch;margin-inline:auto;color:#f8f4ec}
.cta .eyebrow{color:var(--gold);justify-content:center}
.cta .lede{margin:1.4rem auto 0;color:rgba(238,240,248,.80)}
.cta .btn-row{justify-content:center}

/* ============================================================
   STOPKA (granatowa, złote akcenty) — wspólna dla wszystkich stron
   ============================================================ */
.footer{background:var(--navy-950);color:rgba(238,240,248,.7);padding-block:clamp(3rem,6vw,4.5rem) 2rem;border-top:1px solid rgba(200,165,96,.25)}
.footer__grid{display:grid;gap:2.5rem;max-width:var(--container);margin:0 auto;padding:0 5rem}
@media (min-width:820px){.footer__grid{grid-template-columns:1.3fr 1fr 1fr}}
@media (max-width:1024px){.footer__grid{padding:0 2.5rem}}
@media (max-width:768px){.footer__grid{padding:0 1.5rem}}
.footer__logo-img{height:3rem;width:auto;border-radius:4px;margin-bottom:1.3rem}
.footer h4{font:600 .68rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 1.25rem}
.footer ul{list-style:none;margin:0;padding:0}
.footer a{color:rgba(238,240,248,.72);text-decoration:none;transition:color .3s var(--ease)}
.footer a:hover{color:var(--gold)}
.footer li{margin-bottom:.6rem;font-size:.95rem}
.footer__about p{font-size:.95rem;max-width:36ch;color:rgba(238,240,248,.6);line-height:1.6}
.footer__bottom{
  max-width:var(--container);margin:3rem auto 0;padding:1.6rem 5rem 0;
  border-top:1px solid rgba(238,240,248,.1);
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;
  font-size:.82rem;color:rgba(238,240,248,.5);
}
@media (max-width:1024px){.footer__bottom{padding-left:2.5rem;padding-right:2.5rem}}
@media (max-width:768px){.footer__bottom{padding-left:1.5rem;padding-right:1.5rem}}

/* ============================================================
   ANIMACJE WEJŚCIA (reveal)
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(20px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .8s var(--ease) var(--d,0ms), transform .8s var(--ease) var(--d,0ms)}
.js .pagehead .reveal{opacity:0;transform:translateY(24px);animation:enterUp .95s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes enterUp{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .reveal,.js .reveal,.js .pagehead .reveal{opacity:1;transform:none;animation:none}
  .slot img,.card,.pkg{transition:none}
}