/* Guide "Premia bez pułapek" (mu-plugins/md-poradnik.php): inline banner, box with form, modal and phone panel.
   Uses the theme tokens only, so light/dark follow style.css automatically. */

/* ---------- shared ---------- */
.pg-cover{display:block;width:100%;height:auto;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--amber);background:#14201A}
.pg-points{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.93rem}
.pg-points li{padding-left:22px;position:relative}
.pg-points li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--amber)}

/* ---------- inline banner (articles, promotion pages) ---------- */
.pg-banner{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px 22px;align-items:center;margin:30px 0;padding:20px 22px;background:var(--surface);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--green);max-width:76ch;color:var(--ink)}
.pg-banner-cover{display:block;transform:rotate(-2deg)}
.pg-banner .eyebrow{margin-bottom:4px;color:var(--green-ink)}
.pg-banner-title{font-family:var(--f-display);font-weight:800;font-stretch:106%;font-size:1.25rem;line-height:1.2;margin:0 0 6px;text-wrap:balance}
.pg-banner-text{font-size:.93rem;color:var(--muted);margin:0 0 12px}
.prose .pg-banner p{margin-top:0}
@media (max-width:640px){
  .pg-banner{grid-template-columns:84px minmax(0,1fr);gap:12px 14px;padding:16px;box-shadow:4px 4px 0 var(--green)}
  .pg-banner-title{font-size:1.08rem}
  .pg-banner-text{grid-column:1/-1}
  .pg-banner-copy{display:contents}
  .pg-banner-copy .eyebrow,.pg-banner-title{grid-column:2}
  .pg-banner-cover{grid-row:1/span 2}
  .pg-banner-copy .btn{grid-column:1/-1;justify-content:center}
}

/* ---------- full box with the form (/poradniki/, /newsletter/) ---------- */
.pg-box{display:grid;grid-template-columns:220px minmax(0,1fr);gap:26px 34px;align-items:start;margin:8px 0 30px;padding:26px 28px;background:var(--surface);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--amber);color:var(--ink)}
.grid>.pg-box{grid-column:1/-1;margin:0 0 8px}
.pg-box-cover{margin:0;transform:rotate(-2deg)}
.pg-box h2{margin:0 0 8px;font-size:clamp(1.6rem,3.4vw,2.3rem)}
.pg-box-lede{margin:0 0 14px;color:var(--muted)}
.pg-box .pg-points{margin-bottom:18px}
@media (max-width:760px){
  .pg-box{grid-template-columns:110px minmax(0,1fr);gap:16px;padding:18px 16px;box-shadow:5px 5px 0 var(--amber)}
  .pg-box-copy{display:contents}
  .pg-box-copy>.eyebrow,.pg-box-copy>h2{grid-column:2}
  .pg-box-cover{grid-row:1/span 2;align-self:start}
  .pg-box-lede,.pg-box .pg-points,.pg-box .pg-form{grid-column:1/-1}
}

/* ---------- modal (desktop) / bottom sheet (phone) ---------- */
.pg-modal{width:min(820px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:28px 30px 24px;border:2px solid var(--ink);border-radius:4px;background:var(--surface);color:var(--ink);box-shadow:10px 10px 0 var(--amber)}
.pg-modal::backdrop{background:color-mix(in srgb,#0E1511 62%,transparent);backdrop-filter:blur(2px)}
.pg-modal[open]{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start}
.pg-modal-cover{margin:6px 0 0;transform:rotate(-2deg)}
.pg-modal-body{display:grid;gap:12px;min-width:0}
.pg-modal-body .eyebrow{margin:0;color:var(--green-ink)}
.pg-modal h2{margin:0;font-size:clamp(1.5rem,3.2vw,2.1rem);padding-right:28px}
.pg-modal-lede{margin:0;color:var(--muted);font-size:.97rem}
.pg-close{position:absolute;top:8px;right:10px;width:40px;height:40px;background:none;border:0;font-size:1.8rem;line-height:1;color:var(--ink);cursor:pointer;border-radius:3px}
.pg-close:hover{background:var(--green-soft)}
.pg-form .md-nl-done + .pg-done-note,.pg-done-note{margin:8px 0 0;font-size:.9rem}
@media (prefers-reduced-motion:no-preference){.pg-modal[open]{animation:pg-in .2s ease-out}@keyframes pg-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}}
@media (max-width:767px){
  .pg-modal{width:100%;max-width:100%;max-height:92dvh;margin:auto 0 0;inset:auto 0 0 0;border-width:2px 0 0;border-radius:12px 12px 0 0;padding:20px 16px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 30px rgba(0,0,0,.25)}
  .pg-modal[open]{grid-template-columns:76px minmax(0,1fr);gap:14px}
  .pg-modal-body{display:contents}
  .pg-modal-cover{grid-row:1/span 2;margin:0}
  .pg-modal-body>.eyebrow{grid-column:2;align-self:end}
  .pg-modal h2{grid-column:2;font-size:1.35rem}
  .pg-modal-lede,.pg-modal .pg-points,.pg-modal .pg-form{grid-column:1/-1}
  .pg-modal .pg-points{font-size:.88rem;gap:4px}
  .pg-modal .pg-points li:nth-child(n+3){display:none} /* keep the sheet short: two promises are enough */
  @media (prefers-reduced-motion:no-preference){.pg-modal[open]{animation:pg-sheet .25s ease-out}@keyframes pg-sheet{from{transform:translateY(100%)}to{transform:none}}}
}

/* ---------- phone panel (non-blocking teaser) ---------- */
.pg-peek{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:35;display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 6px 12px 12px;background:var(--surface);color:var(--ink);border:2px solid var(--ink);border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.28),4px 4px 0 var(--amber);max-width:520px;margin:0 auto}
.pg-peek .pg-cover{box-shadow:2px 2px 0 var(--amber);border-width:1px}
.pg-peek-title{margin:0;font-family:var(--f-display);font-weight:800;font-size:1rem;line-height:1.2}
.pg-peek-text{margin:2px 0 8px;font-size:.82rem;line-height:1.35;color:var(--muted)}
.pg-peek-cta{padding:8px 14px;font-size:.9rem}
.pg-peek-close{align-self:start;background:none;border:0;color:var(--ink);font-size:1.6rem;line-height:1;padding:2px 8px;cursor:pointer;min-width:40px;min-height:40px}
/* desktop: the first page of a visit gets the small panel too (poradnik.js), in the corner instead of the middle */
@media (min-width:768px){.pg-peek{left:auto;right:20px;bottom:20px;max-width:400px;margin:0}}
@media (prefers-reduced-motion:no-preference){.pg-peek:not([hidden]){animation:pg-up .3s ease-out}@keyframes pg-up{from{transform:translateY(130%)}to{transform:none}}}
@media print{.pg-banner,.pg-box,.pg-peek,.pg-modal{display:none!important}}
.pg-box .md-nl-micro{font-size:.78rem;line-height:1.4}
.prose .pg-box{grid-template-columns:160px minmax(0,1fr);gap:20px 26px;max-width:none}
@media (max-width:760px){.prose .pg-box{grid-template-columns:110px minmax(0,1fr);gap:16px}}