/* ============================================================
   Para dla pary — ZNAK / LOCKUP (jedyne źródło prawdy)
   Kierunek: „Przenikanie — wspólna część" (p2)
   ------------------------------------------------------------
   Znak = dwie perspektywy (przykurzony błękit A + przygaszony
   śliwkowy B), których nakładanie daje SOCZEWKĘ = „wspólną część"
   pary (trzeci ton, --accent-strong). Restyluj TEN plik, a znak
   zmienia się wszędzie naraz — kontrakt markupu poniżej się NIE
   zmienia.

   Plik jest self-contained i NIE definiuje tokenów ani fontów —
   konsumuje ../tokens.css oraz ../assets/fonts.css. Marka „Para dla
   pary" nie ma tokenów --font-*, więc rodziny nazwane DOSŁOWNIE:
   "Newsreader" (serif) i "Manrope" (sans).

   ------------------------------------------------------------
   KONTRAKT MARKUPU (stabilny — nazwy klas się nie zmieniają):

     <span class="lockup" role="img" aria-label="Para dla pary">
       <span class="lockup__mark" aria-hidden="true"></span>
       <span class="lockup__word">Para&nbsp;dla&nbsp;<em>pary</em></span>
     </span>

   • .lockup__mark jest puste — znak budują pseudo-elementy (CSS-build).
     Alternatywnie można w nie wstawić inline <svg> mastera (mark.svg).
   • role="img" + aria-label="Para dla pary" na kontenerze; dekoracyjny
     znak aria-hidden="true". Gdy znak stoi SAM (favicon/avatar) kontrakt
     nadal niesie dostępną nazwę.

   SKALOWANIE: wyłącznie przez --lockup-fs na .lockup lub rodzicu.
     Wszystko (znak, wordmark, odstępy) liczone w em względem --lockup-fs,
     więc lockup skaluje się jako całość. Domyślnie 1.25rem.

   CLEAR-SPACE (pole ochronne): min. wolna przestrzeń wokół lockupu
     = 0.5 × wysokość znaku (--mk-h) ze wszystkich stron. Wariant
     --display dokłada to pole jako padding; w rzędach (inline) trzymaj
     ten margines w layoucie strony.

   MIN-SIZE: wysokość znaku nie schodzi poniżej 24 px (max(1.34em,1.5rem)).
     Favicon 32×32 to osobny, samodzielny render mastera (favicon.svg /
     mark.svg), nie ten CSS-build.

   WARIANTY (opt-in klasą, markup bez zmian):
     .lockup--inline    — rząd nagłówka (topbar); mały znak, wordmark 1 rząd.
     .lockup--display   — hero / OG / avatar 1000×1000; znak dominuje, wordmark
                          pod spodem; pełne pole ochronne.
     .lockup--inverted  — na --accent-strong (footer); jasne dyski + jasny
                          wordmark, soczewka rozjaśniona (screen). ≥3:1 na ciemnym.
     .lockup--mono      — druk 1-kolorowy; currentColor, soczewka jako JAWNY,
                          wypełniony kształt (maska), dyski jako kontury —
                          wartość, nie barwa; bez mix-blend-mode/alpha.

   MASTER SVG (mark.svg, ten sam kształt — do OG / avatara / druku / favicona):

     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81 54"
          role="img" aria-label="Para dla pary">
       <defs><clipPath id="pdp-lens"><circle cx="54" cy="27" r="27"/></clipPath></defs>
       <circle cx="27" cy="27" r="27" fill="#5E79A6" fill-opacity=".92"/>
       <circle cx="54" cy="27" r="27" fill="#95709F" fill-opacity=".92"/>
       <circle cx="27" cy="27" r="27" fill="#45386A" clip-path="url(#pdp-lens)"/>
     </svg>

   DOSTĘPNOŚĆ: wordmark/tekst ≥ 4.5:1, elementy graficzne znaku ≥ 3:1
     względem tła w każdym wariancie (policzone). Ruch tylko subtelny na
     --display i wyłączony pod prefers-reduced-motion.
   ============================================================ */

.lockup{
  --lockup-fs: 1.25rem;                 /* jedyny hook skali — steruje wszystkim */
  --mk-h: max(1.34em, 1.5rem);          /* wysokość znaku (+ podłoga min-size 24px) */
  --lockup-gap: .52em;                  /* odstęp znak ↔ wordmark (soczewka „celuje" w słowo) */

  display: inline-flex;
  align-items: center;
  gap: var(--lockup-gap);
  font-size: var(--lockup-fs);
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---- ZNAK (CSS-build): dwa dyski + soczewka z nakładania (vesica) ----
   Box 3:2. Dyski o średnicy = --mk-h, środki oddalone o r (d = r) → soczewka
   piscis. Dysk B na multiply: nakładanie A×B ≈ --accent-strong (trzeci ton),
   z twardą krawędzią (dyski są kryjące), więc soczewka czyta się ostro. */
.lockup__mark{
  position: relative;
  flex: 0 0 auto;
  width: calc(1.5 * var(--mk-h));
  height: var(--mk-h);
  isolation: isolate;                   /* multiply blenduje tylko dyski, nie tło strony */
}
.lockup__mark::before,
.lockup__mark::after{
  content: "";
  position: absolute;
  top: 0;
  width: var(--mk-h);
  height: var(--mk-h);
  border-radius: 50%;
}
.lockup__mark::before{ left: 0;  background: var(--accent-a); }              /* perspektywa A */
.lockup__mark::after{  right: 0; background: var(--accent-b);               /* perspektywa B */
  mix-blend-mode: multiply; }

/* ---- WORDMARK: „Para dla pary" — Newsreader 500, „pary" kursywą ---- */
.lockup__word{
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;
  font-size: 1em;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;                  /* twarde spacje i tak w markupie */
}
.lockup__word em{ font-style: italic; color: var(--accent-strong); }

/* ---- fokus (gdy lockup jest linkiem/focusowalny) ---- */
.lockup:focus-visible{
  outline: 3px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ============ WARIANTY ============ */

/* --inline — kompaktowy rząd nagłówka (topbar) */
.lockup--inline{ --lockup-fs: 1.2rem; --mk-h: max(1.32em, 1.5rem); --lockup-gap: .5em; }

/* --display — hero / OG / avatar 1000×1000: znak dominuje, wordmark pod spodem,
   pełne pole ochronne (clear-space) jako padding */
.lockup--display{
  flex-direction: column;
  --lockup-fs: clamp(2rem, 1.2rem + 4vw, 4rem);
  --mk-h: 2em;
  --lockup-gap: .55em;
  padding: calc(.5 * var(--mk-h));      /* clear-space = 0.5 × wysokość znaku */
  text-align: center;
  transition: transform .24s ease;
}

/* --inverted — na --accent-strong (footer). Dyski rozjaśnione (≥3:1 na ciemnym),
   nakładanie na screen → soczewka jaśnieje; wordmark w --on-accent, „pary" w --accent-soft */
.lockup--inverted{ color: var(--on-accent); }
.lockup--inverted .lockup__mark::before{ background: color-mix(in srgb, var(--accent-a) 52%, var(--on-accent)); }
.lockup--inverted .lockup__mark::after{
  background: color-mix(in srgb, var(--accent-b) 52%, var(--on-accent));
  mix-blend-mode: screen;
}
.lockup--inverted .lockup__word{ color: var(--on-accent); }
.lockup--inverted .lockup__word em{ color: var(--accent-soft); }
.lockup--inverted:focus-visible{ outline-color: var(--accent-soft); }

/* --mono — druk 1-kolorowy. Bez mix-blend-mode/alpha: soczewka to JAWNY, wypełniony
   kształt (maska), a dyski to kontury → różnica wartości, nie barwy. Kanoniczny
   materiał do druku to mark.svg; ta klasa daje ten sam znak w jednym tuszu w CSS. */
.lockup--mono{
  --pdp-mono-ink: #1a1a1a;
  color: var(--pdp-mono-ink);
}
.lockup--mono .lockup__mark::before,
.lockup--mono .lockup__mark::after{ display: none; }
.lockup--mono .lockup__mark{
  background: var(--pdp-mono-ink);
  -webkit-mask: var(--pdp-mono-mask) center / contain no-repeat;
          mask: var(--pdp-mono-mask) center / contain no-repeat;
}
.lockup--mono .lockup__word,
.lockup--mono .lockup__word em{ color: var(--pdp-mono-ink); }
/* maska: dwa kontury dysków + wypełniona soczewka (A∩B), viewBox 0 0 81 54 */
.lockup--mono{
  --pdp-mono-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2081%2054'%3E%3CclipPath%20id='l'%3E%3Ccircle%20cx='54'%20cy='27'%20r='27'/%3E%3C/clipPath%3E%3Ccircle%20cx='27'%20cy='27'%20r='25.2'%20fill='none'%20stroke='%23000'%20stroke-width='3.6'/%3E%3Ccircle%20cx='54'%20cy='27'%20r='25.2'%20fill='none'%20stroke='%23000'%20stroke-width='3.6'/%3E%3Ccircle%20cx='27'%20cy='27'%20r='27'%20fill='%23000'%20clip-path='url(%23l)'/%3E%3C/svg%3E");
}

/* ============ RUCH — celowy, oszczędny; tylko na --display ============ */
@media (hover: hover){
  .lockup--display:hover{ transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce){
  .lockup, .lockup *, .lockup::before, .lockup::after{
    transition: none !important;
    animation: none !important;
  }
  .lockup--display:hover{ transform: none; }
}

/* ============ DRUK ============ */
@media print{
  /* w druku wymuś jednokolorowy, jawny kształt soczewki (bez blend/alpha) */
  .lockup .lockup__mark::before,
  .lockup .lockup__mark::after{ display: none; }
  .lockup .lockup__mark{
    background: #1a1a1a;
    -webkit-mask: var(--pdp-mono-mask, url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2081%2054'%3E%3CclipPath%20id='l'%3E%3Ccircle%20cx='54'%20cy='27'%20r='27'/%3E%3C/clipPath%3E%3Ccircle%20cx='27'%20cy='27'%20r='25.2'%20fill='none'%20stroke='%23000'%20stroke-width='3.6'/%3E%3Ccircle%20cx='54'%20cy='27'%20r='25.2'%20fill='none'%20stroke='%23000'%20stroke-width='3.6'/%3E%3Ccircle%20cx='27'%20cy='27'%20r='27'%20fill='%23000'%20clip-path='url(%23l)'/%3E%3C/svg%3E")) center / contain no-repeat;
            mask: var(--pdp-mono-mask, url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2081%2054'%3E%3CclipPath%20id='l'%3E%3Ccircle%20cx='54'%20cy='27'%20r='27'/%3E%3C/clipPath%3E%3Ccircle%20cx='27'%20cy='27'%20r='25.2'%20fill='none'%20stroke='%23000'%20stroke-width='3.6'/%3E%3Ccircle%20cx='54'%20cy='27'%20r='25.2'%20fill='none'%20stroke='%23000'%20stroke-width='3.6'/%3E%3Ccircle%20cx='27'%20cy='27'%20r='27'%20fill='%23000'%20clip-path='url(%23l)'/%3E%3C/svg%3E")) center / contain no-repeat;
  }
}