/* ============================================================
   Szablon "Darmowe materiały" (page-darmowe-materialy.php)
   Style z darmowe-materialy.html, ZAWĘŻONE pod .dm,
   żeby nie kolidowały z motywem (m.in. .btn i .prod istnieją w main.css).
   Font "Amsi Pro Narrow" oraz Swiper ładuje już motyw.
   ============================================================ */

.dm{
  --e-ink:#101717;
  --e-pink:#db0058;
  --e-pink-hover:#f30061;
  --e-line:#eaeaea;
  --e-line-strong:#e0e0e0;
  --e-grey-bg:#f3f3f3;
  --e-muted:#949494;
  --e-white:#fff;

  --e-radius-card:12px;
  --e-radius-btn:6px;
  --e-container:1440px;
  --e-gutter:56px;
  --e-section:64px;

  font-family:"Amsi Pro Narrow","Archivo Narrow",sans-serif;
  font-weight:400;font-size:16px;color:var(--e-ink);
}

.dm *,.dm *:before,.dm *:after{box-sizing:border-box}
.dm a{text-decoration:none;color:inherit}
.dm ul,.dm ul li{list-style:none;margin:0;padding:0}
.dm img{max-width:100%;height:auto;display:block}
.dm p{line-height:150%;margin:24px 0}
.dm figure{margin:0}
.dm button{font:inherit;cursor:pointer;border:none;background:none}
.dm :focus-visible{outline:3px solid var(--e-pink);outline-offset:3px;border-radius:2px}

@media (prefers-reduced-motion:reduce){
  .dm *,.dm *:before,.dm *:after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---- układ ---- */
.dm .wrapper{max-width:var(--e-container);padding:0 var(--e-gutter);margin:0 auto;width:100%}
.dm .paddings{padding:var(--e-section) 0}
.dm .section--grey{background-color:var(--e-grey-bg)}
.dm .section--line{border-bottom:1px solid var(--e-line)}

/* ---- typografia ---- */
.dm h1,.dm h2,.dm h3,.dm h4{margin:0;line-height:120%;font-weight:600}
.dm .h1{font-size:48px}
.dm .h2{font-size:35px}
.dm .h3{font-size:28px}
.dm .eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--e-pink);margin:0 0 12px
}
.dm .section__head{max-width:720px;margin-bottom:40px}
.dm .section__head p{margin:16px 0 0;color:#3a4444}

/* ---- przyciski ---- */
.dm .btn{
  background-color:var(--e-pink);color:var(--e-white);border-radius:var(--e-radius-btn);
  padding:12px 24px;display:inline-flex;font-weight:700;line-height:24px;
  transition:all .2s linear;justify-content:center;align-items:center;gap:8px;
}
.dm .btn:hover{background-color:var(--e-pink-hover)}
.dm .btn--dark{background-color:var(--e-ink)}
.dm .btn--dark:hover{background-color:var(--e-pink-hover)}
.dm .btn--ghost{background:transparent;color:var(--e-ink);box-shadow:inset 0 0 0 1px var(--e-line-strong)}
.dm .btn--ghost:hover{background:var(--e-ink);color:var(--e-white);box-shadow:inset 0 0 0 1px var(--e-ink)}
.dm .btn--light{background:var(--e-white);color:var(--e-ink)}
.dm .btn--light:hover{background:var(--e-pink-hover);color:var(--e-white)}
.dm .btn--block{width:100%}
/* wariant ghost na ciemnym tle banera akcji */
.dm .action__btn-ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.dm .action__btn-ghost:hover{color:#fff;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}

.dm .link-arrow{display:inline-flex;gap:6px;align-items:center;font-weight:700;color:var(--e-pink)}
.dm .link-arrow:hover{color:var(--e-pink-hover)}
.dm .link-arrow svg{transition:transform .2s linear}
.dm .link-arrow:hover svg{transform:translateX(3px)}

/* ============================================================
   PODCASTY
   ============================================================ */
.dm .pods{display:grid;grid-template-columns:1fr 1fr;gap:48px 32px}
.dm .pod{display:flex;flex-direction:column}
.dm .pod__num{
  font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--e-muted);
  display:flex;align-items:center;gap:12px;margin-bottom:12px
}
.dm .pod__num:after{content:"";flex:1;height:1px;background:var(--e-line)}

/* fasada YouTube — iframe ładuje się dopiero po kliknięciu */
.dm .yt{
  position:relative;aspect-ratio:16/9;border-radius:var(--e-radius-card);overflow:hidden;
  background:#0b1010 center/cover no-repeat;display:block;width:100%;border:none;padding:0;cursor:pointer
}
.dm .yt__play{
  position:absolute;inset:0;display:grid;place-items:center;transition:background .2s linear;
  background:linear-gradient(180deg,rgba(16,23,23,.05),rgba(16,23,23,.45))
}
.dm .yt:hover .yt__play{background:linear-gradient(180deg,rgba(16,23,23,.15),rgba(16,23,23,.6))}
.dm .yt__btn{
  width:72px;height:72px;border-radius:50%;background:var(--e-pink);
  display:grid;place-items:center;transition:transform .2s linear,background .2s linear
}
.dm .yt:hover .yt__btn{background:var(--e-pink-hover);transform:scale(1.06)}
.dm .yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dm .yt--empty{
  background:var(--e-grey-bg);border:1px dashed var(--e-line-strong);cursor:default;
  display:grid;place-items:center;text-align:center;padding:24px
}
.dm .yt--empty span{color:var(--e-muted);font-size:15px;font-weight:700;line-height:150%}

.dm .pod h3{font-size:24px;line-height:130%;margin:20px 0 0}
.dm .pod__guest{font-size:15px;font-weight:700;color:var(--e-pink);margin:8px 0 0}
.dm .pod p{margin:12px 0 0;color:#3a4444}
.dm .pod__foot{margin-top:auto;padding-top:16px}

/* ============================================================
   SLIDER PRODUKTÓW
   ============================================================ */
.dm .slider__top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.dm .slider__nav{display:flex;gap:8px;flex-shrink:0}
.dm .snav{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--e-line-strong);background:var(--e-white);transition:all .2s linear
}
.dm .snav:hover{background:var(--e-ink);box-shadow:inset 0 0 0 1px var(--e-ink)}
.dm .snav svg{stroke:var(--e-ink);transition:stroke .2s linear}
.dm .snav:hover svg{stroke:var(--e-white)}
.dm .snav.swiper-button-disabled{opacity:1;cursor:default;background:var(--e-white);box-shadow:inset 0 0 0 1px var(--e-line)}
.dm .snav.swiper-button-disabled svg{stroke:#adadad}
.dm .snav.swiper-button-disabled:hover{background:var(--e-white)}

/* Tło sekcji jest pełnoszerokościowe (section--grey), ale zawartość — w tym slider —
   trzymamy w gutterze .wrapper, żeby po prawej został odstęp (karty nie klejone do krawędzi).
   overflow:hidden przycina podglądany slajd na krawędzi kontenera, a nie ekranu. */
.dm .prodslider{overflow:hidden}
/* oddech w pionie */
.dm #do-pobrania .prodslider{padding-top:8px;padding-bottom:8px}
/* karta produktu jako spójny „card": ramka + zaokrąglenie (obejmuje górę zdjęcia) + padding treści */
.dm .prod{
  display:flex;flex-direction:column;height:100%;
  background:var(--e-white);
  border:1px solid var(--e-line);
  border-radius:var(--e-radius-card);
  overflow:hidden;
  transition:transform .2s linear,box-shadow .2s linear
}
.dm .prod:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(16,23,23,.10)}
.dm .prod__thumb{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  background:var(--e-grey-bg);border-bottom:1px solid var(--e-line)
}
.dm .prod__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.dm .prod:hover .prod__thumb img{transform:scale(1.04)}
.dm .prod__badge{
  position:absolute;top:12px;left:12px;background:var(--e-pink);color:var(--e-white);
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 12px;border-radius:100px;z-index:1
}
/* padding wewnątrz karty – treść nie klei się do krawędzi */
.dm .prod__body{display:flex;flex-direction:column;flex:1 1 auto;padding:16px 16px 18px}
.dm .prod__body h3{font-size:18px;font-weight:400;line-height:150%;margin:0}
.dm .prod__price{font-weight:700;font-size:16px;margin:8px 0 16px}
.dm .prod__cta{margin-top:auto}
.dm .swiper-slide{height:auto}

/* ============================================================
   AKCJA — wyróżniony baner
   ============================================================ */
.dm .action{
  display:grid;grid-template-columns:1.05fr .95fr;gap:0;
  border-radius:var(--e-radius-card);overflow:hidden;background:var(--e-ink);color:var(--e-white)
}
.dm .action__media{position:relative;min-height:420px;background:var(--e-grey-bg)}
.dm .action__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.dm .action__media--contain{background:var(--e-white)}
.dm .action__media--contain img{object-fit:contain;padding:32px}
.dm .action__body{padding:56px}
.dm .action__body .eyebrow{color:var(--e-white);opacity:.6}
.dm .action__body h2{font-size:35px;line-height:120%}
.dm .action__body p{opacity:.86}
.dm .action__list{display:grid;gap:12px;margin:24px 0 32px}
.dm .action__list li{display:flex;gap:12px;align-items:flex-start;line-height:150%;opacity:.9}
.dm .action__list svg{flex-shrink:0;margin-top:4px}
.dm .action__cta{display:flex;gap:12px;flex-wrap:wrap}

/* ============================================================
   PASEK KOŃCOWY
   ============================================================ */
.dm .outro{text-align:center;max-width:640px;margin:0 auto}
.dm .outro h2{font-size:35px}
.dm .outro p{color:#3a4444}

/* ============================================================
   RESPONSIVE — breakpointy motywu: 1280 / 1024 / 767 / 480
   ============================================================ */
@media only screen and (max-width:1280px){
  .dm{--e-gutter:32px}
}
@media only screen and (max-width:1024px){
  .dm{--e-gutter:24px;--e-section:48px}
  .dm .h1{font-size:40px}
  .dm .h2{font-size:27px}
  .dm .h3{font-size:22px}
  .dm .pods{gap:40px 24px}
  .dm .action{grid-template-columns:1fr}
  .dm .action__media{min-height:280px;order:-1}
  .dm .action__body{padding:40px 32px}
  .dm .action__body h2{font-size:27px}
}
@media only screen and (max-width:767px){
  .dm{--e-gutter:16px}
  .dm .pods{grid-template-columns:1fr;gap:40px}
  .dm .slider__top{flex-direction:column;align-items:flex-start}
  .dm .slider__nav{display:none}
  .dm .outro h2,.dm .action__body h2{font-size:27px}
  .dm .yt__btn{width:56px;height:56px}
  .dm .action__body{padding:32px 20px}
}
@media only screen and (max-width:480px){
  .dm .btn{width:100%}
  .dm .action__cta .btn{width:100%}
}