/* MP Newsletter — strona listy oczekujących, strona /newsletter/ i formularz.
   Tokeny (--mp-*) z motywu hello-elementor-marta (style.css). Prefiks .mp-nl
   — sprawdzony grepem, nie koliduje z .mp-popup ani .mp-promo. */

.mp-nl,
.mp-nl-prezent,
.mp-nl-kroki{
  /* Czerwień komunikatów jak w formularzu B2B: 7,5:1 na --mp-warm. */
  --mp-nl-blad:#8A3423;
}

.mp-nl-podglad{
  margin:0; padding:10px var(--mp-gut); text-align:center;
  background:var(--mp-ink); color:var(--mp-paper);
  font:400 12px/1.5 var(--mp-sans); letter-spacing:.06em;
}

/* 1. Zdjęcie + panel z formularzem ------------------------------------------ */

.mp-nl{ background:var(--mp-cream); padding:clamp(40px,6vw,96px) 0; }
.mp-nl__uklad{
  display:grid; gap:clamp(28px,4.4vw,72px); align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.mp-nl__uklad--bez-zdjecia{ grid-template-columns:minmax(0,680px); justify-content:center; }

.mp-nl__foto,
.mp-nl-prezent__foto{ margin:0; }
.mp-nl__foto img,
.mp-nl-prezent__foto img{ display:block; width:100%; height:auto; background:var(--mp-stone); }
.mp-nl__foto{ position:sticky; top:calc(var(--mp-naglowek-przyklejony, 51px) + 24px); }

.mp-nl-zaslepka{
  display:flex; align-items:center; justify-content:center; text-align:center;
  aspect-ratio:4/5; background:var(--mp-stone); border:1px dashed var(--mp-rule-mocny);
  padding:24px; font:300 15px/1.6 var(--mp-sans); color:var(--mp-deep);
}
.mp-nl-zaslepka small{ font-size:12px; color:var(--mp-muted); }

.mp-nl-kicker{
  display:flex; align-items:center; gap:14px; margin:0 0 16px;
  font:400 11px/1 var(--mp-sans); letter-spacing:.2em; text-transform:uppercase; color:var(--mp-body);
}
.mp-nl-kicker__linia{ display:block; width:36px; height:1px; background:var(--mp-rule-mocny); }

.mp-nl__tytul,
.mp-nl-prezent__tytul,
.mp-nl-kroki__tytul,
.mp-nl-ogolny__tytul,
.mp-nl-wypis__tytul{
  margin:0 0 18px; font:300 clamp(30px,3.6vw,48px)/1.08 var(--mp-serif);
  color:var(--mp-ink); text-wrap:balance;
}
.mp-nl__tytul em,
.mp-nl-prezent__tytul em,
.mp-nl-kroki__tytul em,
.mp-nl-ogolny__tytul em{ font-style:italic; color:var(--mp-focus); }

.mp-nl__akapit,
.mp-nl-prezent__akapit,
.mp-nl-ogolny__akapit,
.mp-nl-wypis__akapit{
  margin:0 0 22px; max-width:520px;
  font:300 15px/1.88 var(--mp-sans); color:var(--mp-body-2); text-wrap:pretty;
}

.mp-nl__korzysci{
  list-style:none; margin:0 0 24px; padding:20px 0 0;
  border-top:1px solid var(--mp-line); display:flex; flex-direction:column; gap:12px;
}
.mp-nl__korzysci li{
  position:relative; padding-left:26px;
  font:300 15px/1.7 var(--mp-sans); color:var(--mp-deep);
}
.mp-nl__korzysci li::before{
  content:""; position:absolute; left:0; top:.8em; width:14px; height:1px; background:var(--mp-bronze);
}

.mp-nl__licznik{
  margin:0 0 20px; font:300 14px/1.6 var(--mp-sans); color:var(--mp-body);
  font-variant-numeric:var(--mp-cyfry-kolumna, lining-nums tabular-nums);
}
.mp-nl__licznik strong{ font:400 22px/1 var(--mp-serif); color:var(--mp-ink); }

/* Formularz ------------------------------------------------------------------ */

.mp-nl-form{
  border:1px solid var(--mp-line); background:var(--mp-warm);
  padding:clamp(22px,2.6vw,36px); display:flex; flex-direction:column; gap:16px;
}
.mp-nl-form__pola{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
}
.mp-nl-pole{ display:flex; flex-direction:column; }
.mp-nl-pole__etykieta{
  display:block; margin-bottom:9px;
  font:400 11px/1 var(--mp-sans); letter-spacing:.17em; text-transform:uppercase; color:var(--mp-body);
}
.mp-nl-pole__opcja{ text-transform:none; letter-spacing:.02em; color:var(--mp-muted); }
.mp-nl-pole__gwiazdka{ color:var(--mp-bronze); }
.mp-nl-pole__wpis{
  width:100%; min-height:var(--mp-tap);
  border:1px solid var(--mp-line-3); background:var(--mp-white);
  padding:15px 16px; font:300 15px/1.4 var(--mp-sans); color:var(--mp-ink);
}
.mp-nl-pole__wpis::placeholder{ color:var(--mp-muted); opacity:1; }
.mp-nl-pole__wpis:focus{ border-color:var(--mp-focus); outline:2px solid var(--mp-focus); outline-offset:1px; }
.mp-nl-pole.is-blad .mp-nl-pole__wpis{ border-color:var(--mp-nl-blad, #8A3423); }

.mp-nl-zgoda{
  display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:start;
  min-height:var(--mp-tap);
}
.mp-nl-zgoda__pole{ width:20px; height:20px; margin:3px 0 0; accent-color:var(--mp-ink); }
.mp-nl-zgoda__etykieta{ font:300 13px/1.7 var(--mp-sans); color:var(--mp-body-2); }
.mp-nl-zgoda__etykieta a{ color:var(--mp-bronze); text-decoration:underline; }
.mp-nl-zgoda.is-blad .mp-nl-zgoda__pole{ outline:2px solid var(--mp-nl-blad, #8A3423); outline-offset:2px; }

.mp-nl-form__wyslij{ align-self:flex-start; }
.mp-nl-form__wyslij[disabled]{ opacity:.6; cursor:progress; }
.mp-nl-form__nota{ margin:0; font:300 12px/1.6 var(--mp-sans); color:var(--mp-body); }

/* Pułapka na boty: poza ekranem, nie display:none (jak w formularzu B2B). */
.mp-nl-form__pulapka{ position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden; }

.mp-nl-komunikat{
  margin:0 0 18px; padding:16px 18px; background:var(--mp-white);
  border:1px solid var(--mp-rule); font:300 14px/1.6 var(--mp-sans); color:var(--mp-ink-2);
}
.mp-nl-form .mp-nl-komunikat{ margin:0; }
.mp-nl-komunikat--blad{ border-color:var(--mp-nl-blad, #8A3423); color:var(--mp-nl-blad, #8A3423); }
.mp-nl-komunikat:focus{ outline:2px solid var(--mp-focus); outline-offset:2px; }

/* 2. Prezent ------------------------------------------------------------------ */

.mp-nl-prezent{ background:var(--mp-band); padding:clamp(40px,6vw,96px) 0; border-block:1px solid var(--mp-line); }
.mp-nl-prezent__uklad{
  display:grid; gap:clamp(28px,4.4vw,72px); align-items:center;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
}
.mp-nl-prezent__uklad--bez-zdjecia{ grid-template-columns:minmax(0,680px); justify-content:center; }

/* 3. Co dalej ----------------------------------------------------------------- */

.mp-nl-kroki{ background:var(--mp-cream); padding:clamp(40px,6vw,96px) 0; text-align:center; }
.mp-nl-kroki__lista{
  list-style:none; counter-reset:mp-nl-krok; margin:28px auto 32px; padding:0; max-width:1040px;
  display:grid; gap:clamp(18px,2.4vw,36px); grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  text-align:left;
}
.mp-nl-kroki__krok{
  counter-increment:mp-nl-krok; position:relative;
  padding:24px 0 0; border-top:1px solid var(--mp-rule);
  font:300 15px/1.75 var(--mp-sans); color:var(--mp-deep);
}
.mp-nl-kroki__krok::before{
  content:counter(mp-nl-krok, decimal-leading-zero); display:block; margin-bottom:10px;
  font:300 28px/1 var(--mp-serif); color:var(--mp-focus); font-variant-numeric:var(--mp-cyfry, lining-nums);
}
.mp-nl-kroki__wroc{ margin:0; }

/* Strona /newsletter/ ---------------------------------------------------------- */

.mp-nl-strona{ max-width:680px; }
.mp-nl-wypis,
.mp-nl-ogolny{ margin:0 0 24px; }
.mp-nl-wypis form{ margin:0; }

@media (max-width:860px){
  .mp-nl__uklad,
  .mp-nl-prezent__uklad{ grid-template-columns:minmax(0,1fr); }
  .mp-nl__foto{ position:static; max-width:520px; }
  /* Na telefonie zdjęcie stoi nad formularzem — nie może zabrać całego ekranu. */
  .mp-nl__foto img{ max-height:55vh; object-fit:cover; }
  .mp-nl-zaslepka{ aspect-ratio:4/3; }
  .mp-nl-prezent__foto{ max-width:420px; }
  .mp-nl-form__wyslij{ align-self:stretch; }
}

/* Makieta zamiast zdjęcia (okładka 2027 to jeszcze tajemnica): kadr 5:7 jak
   zdjęcia kalendarzy w katalogu, makieta z assets/makieta.css. */
.mp-nl-ramka{ margin:0; }
.mp-nl-ramka__kadr{
  position:relative; display:block; aspect-ratio:5/7; overflow:hidden;
  background:var(--mp-white); border:1px solid var(--mp-line); container-type:inline-size;
}
.mp-nl-ramka .mp-badge{ position:absolute; top:0; left:0; }
.mp-nl-prezent .mp-nl-ramka{ max-width:440px; }

/* Strona zgód (link „Zarządzaj zgodami” w każdym mailu). */
.mp-nl-zgody{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.mp-nl-zgody__wiersz{
  display:flex; gap:12px; align-items:center; min-height:var(--mp-tap);
  padding:10px 14px; background:var(--mp-warm); border:1px solid var(--mp-line);
  font:300 15px/1.5 var(--mp-sans); color:var(--mp-ink-2);
}
.mp-nl-zgody__wiersz input{ width:20px; height:20px; accent-color:var(--mp-ink); }
.mp-nl-zgody__przyciski{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.mp-nl-wypis__tytul em{ font-style:italic; color:var(--mp-focus); }