/* ==========================================================================
   Podstrona Aktualnosci - naglowek.

   Kompozycja: pionowa etykieta przy hairline, po lewej krotkie pytanie
   w skali display (sans + serif), po prawej odpowiedz - lead i akapit
   z PRD 9.10. Calosc zamyka listwa z trzema faktami, ktora podaje szynie
   kanalu linie do stania. Zadnego CTA - naglowek oddaje akcje sekcji
   zamykajacej, zeby na stronie bylo jedno wyrazne wezwanie, nie trzy.

   Zasady:
   - jeden <h1> i jeden glos: Satoshi 300 + Zodiak 300, zero pogrubien,
   - fiolet nie pojawia sie tu wcale - naglowek oddaje go szynie ponizej,
   - zero kart, zero cieni. Dziela hairline i swiatlo.
   ========================================================================== */

.akthead {
  /* header jest przezroczysty nad pierwsza sekcja, wiec bierze pelny oddech */
  padding-block: clamp(6.5rem, 5.5rem + 4vw, 9.5rem) clamp(2.75rem, 5vw, 4.5rem);
}

/* Ponizej 1024 etykieta z .marked spada do poziomu i staje nad naglowkiem */
.akthead__in { row-gap: clamp(1.5rem, 3vw, 2rem); }

@media (min-width: 1024px) {
  /* .marked daje etykiecie height:100%, wiec kreska prowadzi wzdluz calego
     naglowka - i tak ma byc. Problem jest tylko z tekstem: w vertical-rl osia
     glowna flexa jest pion, wiec rotate(180deg) zrzuca slowo na sam dol.
     justify-content: flex-end sadza je przed obrotem na dole, czyli po obrocie
     u gory kolumny. Zero dopychania paddingiem. */
  .akthead .marked > .label {
    display: flex;
    justify-content: flex-end;
  }
}

/* --- Korpus ------------------------------------------------------------- */
.akthead__body {
  display: grid;
  gap: clamp(2rem, 4.5vw, 3.25rem);
}

@media (min-width: 900px) {
  .akthead__body {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: end;
    column-gap: clamp(2.5rem, 5vw, 5.5rem);
  }
}

/* --- Naglowek ----------------------------------------------------------- */
/* Pytanie jest krotkie, wiec moze isc wyzej niz bazowe .h1 - to tytul
   calej podstrony, nie zdanie w sekcji. */
.akthead__h {
  font-size: clamp(2.9rem, 1.3rem + 6.2vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.akthead__h .line { display: block; }
.akthead__h .serif { font-size: 1.02em; }   /* Zodiak ma nizszy x-height niz Satoshi */

/* --- Kolumna z odpowiedzia --------------------------------------------- */
.akthead__say {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Lead niesie zdanie tytulowe z PRD. Serif na drugiej polowie zdania to ten
   sam gest co w naglowkach - dwa glosy w jednej linii, bez zmiany tresci. */
.akthead__lead {
  font: 300 clamp(1.4rem, 1rem + 1.6vw, 2.15rem)/1.22 var(--sans);
  letter-spacing: -0.015em;
  max-width: 20ch;
  text-wrap: pretty;
}
.akthead__tail { color: var(--muted); }

.akthead__p {
  max-width: 46ch;
  margin-top: clamp(1.1rem, 2.2vw, 1.6rem);
  font-size: clamp(0.92rem, 0.88rem + 0.22vw, 1.0125rem);
  line-height: 1.72;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* --- Listwa faktow ------------------------------------------------------ */
.akthead__facts {
  display: grid;
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--hairline);
}

.akthead__fact {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-block: clamp(1rem, 2vw, 1.35rem);
  border-bottom: 1px solid var(--hairline);
}

@media (min-width: 768px) {
  .akthead__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--hairline);
  }
  .akthead__fact {
    padding-inline: clamp(1.25rem, 2.5vw, 2rem);
    border-bottom: 0;
    /* pionowa przegroda jak miedzy pozycjami na polce */
    border-left: 1px solid var(--hairline);
  }
  .akthead__fact:first-child { padding-inline-start: 0; border-left: 0; }
}

.akthead__fv {
  font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  line-height: 1.5;
  color: var(--ink);
}

.akthead__tel { transition: color var(--dur) var(--ease); }
.akthead__tel:hover { color: var(--purple); }