/*
 * Sekcja 2 „Jak to działa”: interaktywne karty z artifactu właściciela (refs/sekcja-2-jak-to-dziala.html),
 * na grafitowym tle (decyzja właściciela). Zachowanie kart bez zmian (js/sekcja2.js).
 * Wygląd dopasowany do reszty strony (decyzja 61):
 *   nagłówek jak w innych sekcjach (nadtytuł ze złotą kreską, szeryfowy tytuł z kursywą, wyrównanie do lewej),
 *   karty w równym rzędzie zamiast wachlarza, kąty i linie z systemu wizualnego (włosowe linie, małe promienie),
 *   numer kroku nad złotą linią jak w gwarancjach, przycisk .btn jak w hero.
 * Kolory ilustracji na kafelkach quizu to rysunek, nie interfejs, więc zostają lokalnie w sekcji.
 */
.nf-how{
  --nf-black:var(--bg-dark); --nf-char:var(--bg-graphite); --nf-card:var(--surface);
  --nf-gold:var(--accent); --nf-cream:var(--text); --nf-cream-2:var(--text-muted);
  --nf-line:color-mix(in srgb, var(--accent) 24%, transparent);
  --nf-soft:color-mix(in srgb, var(--nf-cream) 10%, transparent);
  --nf-serif:var(--font-display);
  --nf-sans:var(--font-text);
  --nf-r:var(--n-radius-1);
  /* ilustracja kafelków: ciepły i chłodny klimat */
  --nf-warm:radial-gradient(120% 90% at 85% 10%,#E6C88E 0%,#B9854A 35%,#5a3b1f 75%,#2a1c10 100%);
  --nf-cool:radial-gradient(120% 90% at 85% 10%,#DCE4E0 0%,#98AAA6 35%,#4d5c5a 75%,#1f2626 100%);
  font-family:var(--nf-sans);
}

/* ================= SEKCJA: JAK TO DZIAŁA ================= */
.nf-how{padding-block:var(--n-space-8);overflow:hidden;background:var(--nf-char);color:var(--nf-cream);scroll-margin-top:4rem}
.nf-how__head,.nf-steps,.nf-how__cta{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.nf-how__lead{color:var(--nf-cream-2)}
/* kursywa w osobnej linii: „Cztery kroki” / „do Twojego zapachu”, bez sierot na końcu pierwszej linii */
.nf-how__head .t-accent{display:block}

.nf-steps{list-style:none;margin-block:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--n-space-6)}
.nf-step{display:flex;flex-direction:column;min-width:0}

.nf-card{position:relative;width:100%;height:372px;padding:20px;overflow:hidden;container-type:inline-size;
  background:var(--nf-card);border:var(--n-hairline) solid var(--nf-line);border-radius:var(--nf-r);
  box-shadow:0 28px 48px -32px rgba(0,0,0,.9), inset 0 1px 0 color-mix(in srgb, var(--nf-cream) 5%, transparent);
  transition:transform var(--n-spring-lift-ms) var(--n-spring-lift), border-color var(--n-dur-base) var(--n-ease-out)}
@media (hover:hover){.nf-step:hover .nf-card{transform:translateY(-4px);border-color:color-mix(in srgb, var(--nf-gold) 60%, transparent)}}
.nf-step:focus-within .nf-card{border-color:color-mix(in srgb, var(--nf-gold) 60%, transparent)}
.nf-card__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px;
  font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--nf-cream-2)}
.nf-card__top strong{font-family:var(--nf-serif);font-style:italic;font-weight:500;font-size:20px;letter-spacing:0;text-transform:none;color:var(--text-strong)}
/* wąska karta (ok. 250 px: 4 kolumny na bardzo szerokim ekranie, gdzie margines rośnie z vw, albo telefon 320 px) */
@container (max-width:270px){.nf-card__top{gap:8px;letter-spacing:.1em}.nf-card__top strong{font-size:18px}}

/* opis kroku: numer nad złotą linią, jak w gwarancjach */
.nf-step__text{margin-top:var(--n-space-6);padding-top:var(--n-space-4);border-top:var(--n-hairline) solid color-mix(in srgb, var(--nf-gold) 55%, transparent)}
.nf-step__num{display:block;margin-bottom:var(--n-space-3);font-size:var(--n-size-micro);font-weight:500;letter-spacing:.2em;color:var(--text-accent);font-variant-numeric:lining-nums tabular-nums}
.nf-step__title{font-family:var(--nf-serif);font-weight:500;font-size:1.625rem;line-height:1.15;margin:0 0 var(--n-space-2);color:var(--text-strong)}
.nf-step__desc{font-size:.9375rem;line-height:1.6;margin:0;color:var(--nf-cream-2)}

/* ---------- Karta 1: quiz ---------- */
.nf-progress{height:2px;background:var(--nf-soft);margin:-6px 0 16px;overflow:hidden}
.nf-progress span{display:block;height:100%;width:40%;background:var(--nf-gold)}
.nf-q{font-family:var(--nf-serif);font-size:20px;line-height:1.2;margin:0 0 12px;color:var(--nf-cream)}
.nf-tiles{display:flex;flex-direction:column;gap:8px;position:relative}
.nf-tile{all:unset;box-sizing:border-box;cursor:pointer;position:relative;height:104px;border-radius:var(--nf-r);padding:14px 16px;display:flex;flex-direction:column;justify-content:flex-end;
  text-align:left;overflow:hidden;border:1px solid transparent;opacity:.5;transform:scale(.97);transition:opacity .5s, transform var(--n-spring-snappy-ms) var(--n-spring-snappy), border-color .5s}
.nf-tile:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.nf-tile[aria-pressed="true"]{opacity:1;transform:scale(1);border-color:var(--nf-gold)}
.nf-tile--warm{background:var(--nf-warm)}
.nf-tile--cool{background:var(--nf-cool)}
.nf-tile svg.nf-deco{position:absolute;right:10px;top:8px;width:78px;height:78px;opacity:.55}
.nf-tile--warm svg.nf-deco{animation:nf-float 6s ease-in-out infinite}
.nf-tile--cool svg.nf-deco{animation:nf-float 7s ease-in-out infinite reverse}
.nf-tile b{font-family:var(--nf-serif);font-weight:600;font-size:24px;color:#fff;line-height:1;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.nf-tile small{font-size:12px;color:rgba(255,255,255,.88);margin-top:4px}
.nf-check{position:absolute;left:14px;top:12px;width:22px;height:22px;border-radius:50%;background:var(--nf-gold);color:var(--on-accent);display:grid;place-items:center;transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.nf-tile[aria-pressed="true"] .nf-check{transform:scale(1)}
.nf-or{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;background:var(--nf-card);color:var(--nf-cream-2);font-family:var(--nf-serif);font-style:italic;font-size:14px;padding:1px 10px;border-radius:var(--nf-r);border:1px solid var(--nf-line)}

/* ---------- Karta 2: koszyk ---------- */
.nf-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.nf-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--nf-r);background:color-mix(in srgb, var(--nf-cream) 3%, transparent);border:1px solid var(--nf-soft);
  opacity:0;transform:translateY(10px)}
.is-live .nf-item{animation:nf-in .6s cubic-bezier(.2,.8,.2,1) forwards}
.is-live .nf-item:nth-child(2){animation-delay:.25s}
.is-live .nf-item:nth-child(3){animation-delay:.5s}
.nf-item svg{flex:none}
.nf-vial{fill:var(--nf-gold)}
.nf-vial-band{fill:var(--nf-cream)}
.nf-vial-label{fill:var(--nf-black)}
.nf-item__name{flex:1;min-width:0;font-size:13.5px;line-height:1.25;color:var(--nf-cream)}
.nf-item__name span{display:block;font-size:11.5px;color:var(--nf-cream-2)}
.nf-ml{display:flex;gap:3px}
/* zaznaczona pojemność jak w przełącznikach strony na ciemnym tle: krem, złoto zostaje dla przycisku głównego */
.nf-ml button{all:unset;box-sizing:border-box;cursor:pointer;min-width:27px;height:24px;padding:0 4px;border-radius:var(--nf-r);font-size:11px;font-weight:500;text-align:center;line-height:22px;color:var(--nf-cream-2);border:1px solid color-mix(in srgb, var(--nf-cream) 16%, transparent);font-variant-numeric:tabular-nums;transition:background .35s,color .35s,border-color .35s}
.nf-ml button[aria-pressed="true"]{background:var(--selected-bg);color:var(--selected-fg);border-color:var(--selected-bg)}
.nf-ml button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
.nf-hold{margin-top:14px;padding:12px 14px;border-radius:var(--nf-r);border:1px solid var(--nf-line);background:color-mix(in srgb, var(--nf-gold) 6%, transparent);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;line-height:1.4;color:var(--nf-cream-2)}
.nf-hold b{font-family:var(--nf-serif);font-size:24px;font-weight:500;color:var(--nf-gold);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}

/* ---------- Karta 3: zdjęcie ---------- */
.nf-card--photo{padding:0}
.nf-photo{position:absolute;inset:0;overflow:hidden}
.nf-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;transform:scale(1.04);animation:nf-kenburns 16s ease-in-out infinite alternate}
.nf-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,4,4,.6) 0%,rgba(4,4,4,0) 28%,rgba(4,4,4,0) 58%,rgba(4,4,4,.88) 100%)}
.nf-card--photo .nf-card__top{position:relative;z-index:2;padding:20px 20px 0}
.nf-badge{position:absolute;z-index:2;right:18px;top:60px;width:80px;height:80px;border-radius:50%;background:color-mix(in srgb, var(--nf-black) 88%, transparent);border:1px solid var(--nf-gold);
  display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.nf-badge b{font-family:var(--nf-serif);font-weight:500;font-size:26px;line-height:1;color:var(--nf-gold);display:inline-block;font-variant-numeric:lining-nums}
.nf-badge b.flip{animation:nf-flip .55s ease}
.nf-badge small{font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--nf-cream-2);margin-top:4px}
.nf-photo__cap{position:absolute;z-index:2;left:20px;right:20px;bottom:18px;font-size:13px;line-height:1.45;color:var(--nf-cream)}
.nf-photo__cap i{font-family:var(--nf-serif);font-size:20px;color:var(--nf-gold)}

/* ---------- Karta 4: dostawa ---------- */
.nf-track{list-style:none;margin:6px 0 0;padding:0 0 0 30px;position:relative}
.nf-trackbox{position:relative}
.nf-track::before,.nf-track__fill{content:"";position:absolute;left:9px;top:10px;width:2px}
.nf-track__fill{top:16px}
.nf-track::before{bottom:34px;background:var(--nf-soft)}
.nf-track__fill{height:0;background:var(--nf-gold);transition:height .8s cubic-bezier(.4,0,.2,1)}
.nf-track li{position:relative;padding:0 0 18px;font-size:13.5px;line-height:1.3;color:var(--nf-cream-2);transition:color .5s}
.nf-track li span{display:block;font-size:11.5px;margin-top:2px}
.nf-track li::before{content:"";position:absolute;left:-26px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--nf-card);border:2px solid color-mix(in srgb, var(--nf-cream) 25%, transparent);transition:background-color .5s,border-color .5s}
.nf-track li.done{color:var(--nf-cream)}
.nf-track li.done span{color:var(--nf-cream-2)}
.nf-track li.done::before{background:var(--nf-gold);border-color:var(--nf-gold)}
.nf-track li.now::before{box-shadow:0 0 0 0 color-mix(in srgb, var(--nf-gold) 60%, transparent);animation:nf-pulse 1.6s infinite}
.nf-locker{margin-top:2px;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--nf-r);background:color-mix(in srgb, var(--nf-gold) 6%, transparent);border:1px solid var(--nf-line);font-size:12px;color:var(--nf-cream-2);opacity:.35;transition:opacity .6s}
.nf-locker.on{opacity:1}
.nf-locker svg{flex:none;color:var(--nf-gold)}
.nf-locker b{display:block;font-weight:500;font-size:13px;color:var(--nf-cream)}

/* ---------- CTA: przycisk jak w hero, obok krótka informacja ---------- */
.nf-how__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--n-space-3) var(--n-space-5);margin-top:var(--n-space-8)}
.nf-how__note{margin:0;font-size:var(--n-size-small);color:var(--nf-cream-2)}

/* ---------- Animacje ---------- */
@keyframes nf-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(6deg)}}
@keyframes nf-in{to{opacity:1;transform:none}}
@keyframes nf-kenburns{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.14) translate(-2%,-2%)}}
@keyframes nf-flip{0%{transform:rotateX(0);opacity:1}45%{transform:rotateX(90deg);opacity:0}55%{transform:rotateX(-90deg);opacity:0}100%{transform:rotateX(0);opacity:1}}
@keyframes nf-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--nf-gold) 55%, transparent)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.nf-how.is-paused *{animation-play-state:paused !important}

/* ---------- Responsywność ---------- */
@media (min-width:64rem){
  .nf-how{padding-block:var(--n-space-9)}
}
/* dwie kolumny poniżej 80rem: przy czterech węższych kartach nagłówek karty quizu łamie się na dwie linie
   i ucina kafelek. Karta ma wtedy do 27rem szerokości, żeby nie rozciągać makiety interfejsu. */
@media (max-width:79.99rem){
  .nf-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--n-space-8);max-width:calc(56rem + 2 * var(--gutter))}
  .nf-how__head,.nf-how__cta{max-width:calc(56rem + 2 * var(--gutter))}
}
/* telefon: rząd kroków przewijany w bok, od krawędzi do krawędzi ekranu */
@media (max-width:640px){
  .nf-steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--n-space-4);padding-block:4px 16px;scroll-padding-inline:var(--gutter);max-width:none;scrollbar-width:none;overscroll-behavior-x:contain}
  .nf-steps::-webkit-scrollbar{display:none}
  .nf-step{flex:0 0 86%;scroll-snap-align:center}
  .nf-step__text{margin-top:var(--n-space-5)}
  .nf-how__cta{margin-top:var(--n-space-6);flex-direction:column;align-items:stretch;text-align:center}
}
/* kropki pod przewijanym rzędem kroków na telefonie */
.nf-steps-dots{display:none}
@media (max-width:640px){
  .nf-steps-dots{display:flex;justify-content:center;gap:8px;margin-top:8px}
  .nf-steps-dots span{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb, var(--nf-cream) 25%, transparent);transition:background .3s, transform var(--n-spring-snappy-ms) var(--n-spring-snappy)}
  .nf-steps-dots span[data-on]{background:var(--nf-gold);transform:scale(1.25)}
}
@media (prefers-reduced-motion: reduce){
  .nf-how *,.nf-how *::before,.nf-how *::after{animation:none !important;transition:none !important}
  .nf-item{opacity:1;transform:none}
}