/* młodepary.pl, oprawa stron artykułów (ładowany po styl.css). Jasny motyw, bez pudełek: linie, kapitaliki, duże cyfry. */

/* pasek postępu czytania (element dodaje js/artykul.js) */
.postep-czytania {
  position: fixed; top: 0; left: 0; z-index: 60; width: 100%; height: 2px;
  background: var(--akcent); transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none; will-change: transform;
}

/* nagłówek: tytuł, byline w kapitalikach, lead */
.artykul-tekst .artykul-glowa h1 { margin-bottom: 0.25em; }
.byline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25em 0;
  margin: 0.4rem 0 1.9rem; font-size: 0.88rem; line-height: 1.5; letter-spacing: 0.07em;
  text-transform: none; font-variant-caps: small-caps; font-variant-numeric: lining-nums tabular-nums;
  color: var(--tekst-2);
}
.byline span + span::before { content: "·"; margin: 0 0.7em; color: var(--tekst-2); opacity: .55; }
.byline .byline-kicker { color: var(--akcent); font-weight: 600; letter-spacing: 0.12em; }
.artykul-tekst .artykul-glowa .lead { margin-bottom: 0.2rem; }

/* inicjał na pierwszym akapicie */
.artykul-tekst > .inicjal::first-letter {
  float: left; font-family: var(--font-naglowek); font-weight: 400; font-size: 4.9em; line-height: 0.78;
  padding: 0.09em 0.12em 0 0; color: var(--akcent);
}

/* „W skrócie”: numerowany box, inline na wąskich ekranach, przyklejony z boku na szerokich */
.w-skrocie { margin: 0 0 2.6rem; padding: 1.1rem 0 0.2rem; border-top: 1px solid var(--tekst); }
.w-skrocie-tytul { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tekst-2); margin: 0 0 0.4rem; }
.w-skrocie ol { list-style: none; margin: 0; padding: 0; counter-reset: skrot; }
.w-skrocie li {
  counter-increment: skrot; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0 0.9rem; align-items: start;
  margin: 0; padding: 0.75rem 0; border-top: 1px solid var(--wlos); font-size: 0.95rem; line-height: 1.5; color: var(--tekst);
}
.w-skrocie li:first-child { border-top: 0; }
.w-skrocie li::before {
  content: counter(skrot); font-family: var(--font-naglowek); font-weight: 300; font-size: 2.7rem; line-height: 0.86;
  color: var(--akcent); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.03em;
}
@media (min-width: 1180px) {
  .artykul-tekst.z-boczkiem {
    grid-template-columns:
      [pelna-start] minmax(var(--margines), 1fr)
      [szeroka-start] minmax(0, 7rem)
      [tekst-start] min(68ch, 100% - 2 * var(--margines)) [tekst-end]
      minmax(0, 7rem) [szeroka-end]
      clamp(2rem, 3vw, 3.5rem)
      [bok-start] 15rem [bok-end]
      minmax(var(--margines), 1fr) [pelna-end];
  }
  .artykul-tekst.z-boczkiem > .tabela-scroll { grid-column: szeroka; }
  .artykul-tekst.z-boczkiem > .w-skrocie {
    grid-column: bok; grid-row: var(--rzad, 3) / span 12; align-self: start;
    position: sticky; top: 6.5rem; margin: 0.4rem 0 0; padding-top: 0.9rem;
  }
  .artykul-tekst.z-boczkiem > .w-skrocie li { font-size: 0.88rem; line-height: 1.45; padding: 0.65rem 0; }
}

/* tabele: cyfry tabelaryczne, kwoty do prawej, delikatny hover, cień przewijania na brzegach */
.artykul-tekst table { font-variant-numeric: lining-nums tabular-nums; }
.artykul-tekst td.kw, .artykul-tekst th.kw { text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.artykul-tekst td.kw { font-weight: 500; }
.artykul-tekst th:last-child, .artykul-tekst td:last-child { padding-right: 0; }
.artykul-tekst td.kw:not(:last-child), .artykul-tekst th.kw:not(:last-child) { padding-right: 1.4em; }
.artykul-tekst tbody tr { transition: background .2s; }
.artykul-tekst tbody tr:hover { background: var(--papier-2); }
.artykul-tekst .tabela-scroll {
  background:
    linear-gradient(90deg, var(--tlo) 45%, rgba(250, 246, 240, 0)) left / 48px 100% no-repeat local,
    linear-gradient(270deg, var(--tlo) 45%, rgba(250, 246, 240, 0)) right / 48px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(30, 26, 23, .16), rgba(30, 26, 23, 0)) left / 18px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(30, 26, 23, .16), rgba(30, 26, 23, 0)) right / 18px 100% no-repeat scroll;
}

/* źródła: numerowana lista z domeną i datą drobnym pismem */
.zrodla-artykul ol { list-style: none; padding: 0; margin: 0; counter-reset: zr; }
.zrodla-artykul li {
  counter-increment: zr; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: 0 0.5rem;
  margin: 0; padding: 0.6rem 0; border-top: 1px solid var(--wlos); font-size: 0.86rem; line-height: 1.45;
}
.zrodla-artykul li:last-child { border-bottom: 1px solid var(--wlos); }
.zrodla-artykul li::before { content: counter(zr, decimal-leading-zero); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; color: var(--tekst-2); padding-top: 0.3em; font-variant-numeric: tabular-nums; }
.zrodla-artykul li a { color: var(--tekst); text-decoration-color: var(--wlos); }
.zrodla-artykul li a:hover { color: var(--akcent); text-decoration-color: currentColor; }
.zrodla-artykul small { display: block; font-size: 0.72rem; letter-spacing: 0.05em; color: var(--tekst-2); margin-top: 0.15rem; }

/* FAQ: natywne details jako akordeon */
.artykul-tekst .faq h2 { font-weight: 300; }
.faq-pozycja summary { transition: color .2s; }
.faq-pozycja summary:hover { color: var(--akcent); }
.faq-pozycja summary::after { content: "+"; display: block; width: 1em; text-align: center; line-height: 1; transition: transform .3s var(--ruch); }
.faq-pozycja[open] summary::after { content: "+"; transform: rotate(45deg); }
.faq-pozycja > p { font-size: 1rem; line-height: 1.65; max-width: 62ch; animation: faq-odslon .35s var(--ruch) both; }
@keyframes faq-odslon { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* „Czytaj dalej”: trzy karty ze zdjęciem, numerowane */
.czytaj-dalej { margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: 1.2rem; }
.czytaj-dalej h2 { letter-spacing: 0.22em; }
.czytaj-dalej .czytaj-tez-siatka { counter-reset: dalej; }
.czytaj-dalej .kafel { counter-increment: dalej; }
.czytaj-dalej .kafel-tekst::before { content: counter(dalej, decimal-leading-zero); display: block; font: 500 0.68rem/1 var(--font-tekst); letter-spacing: 0.22em; color: var(--tekst-2); margin: 1rem 0 0.7rem; }
.czytaj-dalej .kafel-tekst .kicker { margin-top: 0; }
.czytaj-dalej .kafel h3 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.8rem); line-height: 1.1; }

@media (max-width: 900px) {
  .czytaj-dalej .kafel-tekst::before { margin-top: 0; }
}
@media (max-width: 640px) {
  .byline { font-size: 0.8rem; }
  .byline span + span::before { margin: 0 0.5em; }
  .artykul-tekst > .inicjal::first-letter { font-size: 4.1em; }
  .w-skrocie li::before { font-size: 2.2rem; }
  .w-skrocie li { grid-template-columns: 2rem minmax(0, 1fr); }
  .zrodla-artykul li { grid-template-columns: 1.8rem minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .postep-czytania { will-change: auto; }
  .artykul-tekst tbody tr, .faq-pozycja summary, .faq-pozycja summary::after { transition: none; }
  .faq-pozycja > p { animation: none; }
}