/* ============================================================
   Podstrony: Współpraca, Kontakt, Media i PR
   Warstwa "pages" jest zadeklarowana w style.css (między components a motion),
   więc ładuje się po komponentach, a przed animacjami i responsywnością.
   ============================================================ */
@layer pages {
  /* ---------- nagłówek podstrony ---------- */
  .page-hero{
    position:relative;overflow:clip;background:var(--hero-bg);
    padding-block:clamp(150px,14.4vw,230px) clamp(56px,6vw,96px);
  }
  .page-hero .container{position:relative;z-index:1}
  .breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--font-ui);font-weight:500;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
  .breadcrumb li + li::before{content:"/";margin-inline-end:8px;opacity:.4}
  .breadcrumb a:hover{text-decoration:underline;text-underline-offset:4px}
  .page-hero h1{font-weight:900;font-size:clamp(2.6rem,5vw,5rem);line-height:.96;margin-block-start:22px;text-wrap:balance}
  .page-lead{font-weight:500;font-size:clamp(1.05rem,1.2vw,1.19rem);line-height:1.5;max-inline-size:40rem;margin-block-start:22px}
  /* postać z logo jako znak wodny podstron */
  .page-figure{
    position:absolute;z-index:0;pointer-events:none;opacity:.08;
    inset-block-start:clamp(90px,9vw,140px);inset-inline-end:max(2vw,calc(50% - 700px));inline-size:clamp(170px,19vw,300px);
  }
  .site-nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:6px}

  /* ---------- sekcje i nagłówki ---------- */
  .section{padding-block:clamp(64px,7vw,112px)}
  .section--soft{background:var(--soft)}
  .section--yellow{background:var(--yellow)}
  .section--ink{background:var(--ink);color:var(--white)}
  .eyebrow{font-family:var(--font-ui);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
  .section--ink .eyebrow{color:var(--yellow)}
  .section h2{font-weight:900;font-size:clamp(2rem,2.875vw,2.875rem);line-height:1;margin-block-start:12px;text-wrap:balance}
  .section-lead{font-weight:500;font-size:19px;line-height:28px;max-inline-size:44rem;margin-block-start:20px}
  .section-actions{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:36px}
  .section--ink .btn-line{color:var(--white);border-color:var(--white)}
  .section--ink .btn-line:hover{background:var(--white);color:var(--ink)}

  .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}

  /* ---------- karty ---------- */
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-block-start:48px}
  .card{background:var(--soft);border-radius:var(--radius);padding:32px 30px 34px}
  .section--soft .card{background:var(--white)}
  .card-mark{display:block;inline-size:36px;block-size:6px;background:var(--yellow);margin-block-end:22px}
  .card h3{font-weight:900;font-size:22px;line-height:1.15}
  .card p{font-weight:500;font-size:17px;line-height:26px;margin-block-start:12px}
  .card-link{display:inline-block;margin-block-start:18px;font-family:var(--font-ui);font-weight:700;font-size:15px;border-block-end:2px solid var(--yellow);padding-block-end:2px}
  .card-link:hover{border-color:currentColor}

  /* ---------- kroki: kolejność ma znaczenie, więc numeracja ---------- */
  .steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-block-start:48px}
  .steps li{counter-increment:step;border-block-start:2px solid var(--ink);padding-block-start:20px}
  .steps li::before{content:counter(step,decimal-leading-zero);display:block;font-weight:900;font-size:40px;line-height:1;margin-block-end:14px}
  .steps h3{font-weight:700;font-size:19px;line-height:1.2}
  .steps p{font-weight:500;font-size:16px;line-height:24px;margin-block-start:8px}

  /* ---------- formularze: ostre narożniki jak przyciski ---------- */
  .form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
  .form .full{grid-column:1 / -1}
  .field{display:flex;flex-direction:column;gap:8px}
  .field label,.form legend{font-family:var(--font-ui);font-weight:700;font-size:15px}
  .req{color:#b3261e}
  .field input,.field select,.field textarea{
    box-sizing:border-box;inline-size:100%;
    font:500 17px/1.4 var(--font-main);color:var(--ink);
    background:var(--white);border:1px solid var(--ink);border-radius:0;padding:15px 16px;
  }
  .field textarea{min-block-size:150px;resize:vertical}
  .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--yellow);outline-offset:0}
  .field input:user-invalid,.field textarea:user-invalid,.form [aria-invalid="true"]{border-color:#b3261e}
  /* pułapka na boty — pole niewidoczne dla ludzi i czytników ekranu */
  .form-hp{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .form fieldset{border:0;margin:0;padding:0;min-inline-size:0}
  .choices{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:10px}
  .choices label{
    position:relative;display:inline-flex;align-items:center;min-block-size:48px;padding-inline:18px;cursor:pointer;
    border:1px solid var(--ink);background:var(--white);font-family:var(--font-ui);font-weight:700;font-size:15px;
    transition:background-color .2s,color .2s;
  }
  .choices input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
  .choices label:has(input:checked){background:var(--ink);color:var(--white)}
  .choices label:has(input:focus-visible){outline:3px solid var(--yellow);outline-offset:2px}
  .consent{display:flex;gap:12px;align-items:flex-start;font-weight:500;font-size:14px;line-height:21px}
  .consent input{flex:none;inline-size:20px;block-size:20px;margin:1px 0 0;accent-color:var(--ink)}
  .consent a{text-decoration:underline}
  .form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
  .form-msg{font-weight:500;font-size:16px;min-block-size:1.5em}
  .form-msg[data-state="error"]{color:#b3261e}
  .form-card{background:var(--white);border-radius:var(--radius);padding:clamp(24px,4vw,48px)}

  /* ---------- kontakt bezpośredni ---------- */
  .direct{display:grid;gap:26px;align-content:start;margin:0}
  .direct dt{font-family:var(--font-ui);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
  .direct dd{margin:6px 0 0;font-weight:500;font-size:19px;line-height:28px}
  .direct a{border-block-end:2px solid var(--yellow)}
  .direct a:hover{border-color:currentColor}

  /* ---------- FAQ na natywnym <details> ---------- */
  .faq{margin-block-start:40px;border-block-start:1px solid rgb(55 59 71 / .2)}
  .faq details{border-block-end:1px solid rgb(55 59 71 / .2)}
  .faq summary{
    list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;
    padding-block:22px;font-weight:700;font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.3;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";flex:none;font-weight:500;font-size:30px;line-height:1;transition:rotate .25s}
  .faq details[open] summary::after{rotate:45deg}
  .faq-body{padding-block-end:24px;max-inline-size:48rem;font-weight:500;font-size:17px;line-height:27px}
  .faq-body p + p{margin-block-start:10px}
  .faq-body a{text-decoration:underline}

  /* ---------- Media i PR ---------- */
  .facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgb(55 59 71 / .15);margin:48px 0 0;border-radius:var(--radius);overflow:clip}
  .facts div{background:var(--white);padding:28px 26px}
  .facts dt{font-family:var(--font-ui);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
  .facts dd{margin:10px 0 0;font-weight:900;font-size:clamp(1.4rem,2vw,1.9rem);line-height:1.1}
  .facts dd small{display:block;font-weight:500;font-size:15px;line-height:22px;margin-block-start:6px}
  .boilerplate{background:var(--soft);border-radius:var(--radius);padding:32px 32px 28px;margin-block-start:32px}
  .boilerplate p{font-weight:500;font-size:17px;line-height:27px;max-inline-size:52rem}
  .boilerplate p + p{margin-block-start:14px}
  .boilerplate .form-foot{margin-block-start:24px}
  .bio{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;margin-block-start:48px}
  .bio + .bio{margin-block-start:72px}
  .bio img{inline-size:100%;border-radius:var(--radius)}
  .bio h3{font-weight:900;font-size:26px;line-height:1.1}
  .bio p{font-weight:500;font-size:17px;line-height:27px;margin-block-start:14px}
  .bio ul{margin-block-start:18px;display:grid;gap:10px}
  .bio li{font-weight:500;font-size:17px;line-height:26px;padding-inline-start:22px;position:relative}
  .bio li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:10px;inline-size:8px;block-size:8px;background:var(--yellow);border-radius:50%}
  .bio-logo{background:var(--soft);border-radius:var(--radius);display:grid;place-items:center;aspect-ratio:1}
  .bio-logo img{inline-size:62%;border-radius:0;mix-blend-mode:multiply}
  .quote-block{margin:0;border-inline-start:6px solid var(--yellow);padding:6px 0 6px 28px;margin-block-start:28px}
  .quote-block p{font-weight:500;font-size:clamp(1.2rem,1.7vw,1.6rem);line-height:1.3;max-inline-size:40rem}
  .quote-block footer{font-family:var(--font-ui);font-weight:700;font-size:14px;margin-block-start:12px}
  .note{border-inline-start:6px solid var(--yellow);background:var(--white);padding:24px 28px;margin-block-start:40px}
  .note h3{font-weight:900;font-size:20px}
  .note ul{margin-block-start:12px;display:grid;gap:8px}
  .note li{font-weight:500;font-size:16px;line-height:24px}
  .downloads{margin-block-start:40px;border-block-start:1px solid rgb(255 255 255 / .2)}
  .downloads li{display:flex;align-items:center;gap:20px;padding-block:18px;border-block-end:1px solid rgb(255 255 255 / .2)}
  .dl-name{flex:1 1 auto;font-weight:700;font-size:18px}
  .dl-meta{font-weight:500;font-size:14px;opacity:.65;white-space:nowrap}
  .downloads .btn{min-inline-size:0;padding-inline:22px;min-block-size:46px;font-size:15px}

  /* ---------- podstrony: tablet i telefon ---------- */
  @media (width <= 1040px){
    .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
    .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (width <= 820px){
    .split,.bio{grid-template-columns:1fr}
    .bio img,.bio-logo{max-inline-size:340px}
    .page-figure{display:none}
    .page-hero{padding-block:120px 56px}
  }
  @media (width <= 560px){
    .form{grid-template-columns:1fr}
    .steps,.facts{grid-template-columns:1fr}
    .downloads li{flex-wrap:wrap;gap:8px 16px}
    .dl-name{flex-basis:100%}
  }
}

/* znak wodny podstron dryfuje jak postać na stronie głównej */
@layer motion {
  @media (prefers-reduced-motion:no-preference){
    @supports (animation-timeline:scroll()){
      .page-figure{animation:page-figure-drift linear both;animation-timeline:scroll(root);animation-range:0 600px}
    }
    @keyframes page-figure-drift{to{transform:translate3d(0,140px,0) rotate(6deg)}}
  }
}