/* Aloldal-fejléc: a kezdőlapi hero visszafogott párja.
   Ugyanaz a hűvös törtfehér háttér (--f-hero), és ugyanúgy magára húzza a lebegő menüsort,
   hogy az aloldalakon se változzon a menü viselkedése. Formák nincsenek: az aloldal olvasólap. */

.lapfej {
  position: relative;
  z-index: 0;
  margin-top: -80px;
  padding-top: clamp(104px, 10vw, 140px);
  padding-bottom: clamp(32px, 4vw, 56px);
  background: var(--f-hero);
}

.lapfej__inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 62rem;
}

.lapfej h1 {
  font-size: clamp(2.125rem, 4.6vw, 3.75rem);
  text-wrap: balance;
}

.lapfej__lead {
  max-width: 58ch;
  color: var(--f-ink-soft);
  text-wrap: pretty;
}

.lapfej__lead strong {
  color: var(--f-ink);
}

.lapfej__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

/* Kenyérmorzsa: a belső hivatkozás-hálózat vízszintes szála. */
.morzsa {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--f-ink-soft);
}

.morzsa ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.morzsa li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.morzsa li + li::before {
  content: "/";
  opacity: 0.6;
}

.morzsa a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.morzsa a:hover {
  color: var(--f-primary-hover);
}

.morzsa [aria-current="page"] {
  color: var(--f-ink);
}

/* Fejlécbeli adatsor: frissítés dátuma, olvasási idő, hatókör. */
.lapfej__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 4px;
}

@media (max-width: 900px) {
  .lapfej {
    margin-top: 0;
    padding-top: clamp(28px, 6vw, 48px);
  }
}