/* =============================================================================
   Iktató — HERO-SZEKCIÓ a termék-nyitólapon, az absec.hu formanyelvével.
   Átvéve a far360 hero.css-éből.

   Amit átveszünk: a hűvös törtfehér lap 40 px-es sarkokkal, az óriás Archivo-címsor
   szoros betűközzel és sortávval, a DM Mono szemöldök-felirat, a pirula-gombok sora.

   A dekoratív formák a doboz NÉGY SARKÁBAN ülnek (shapes.css), a szöveg pedig a
   sarkoktól befelé eső sávban: a hero belső margója tartja őket távol egymástól.
   860 px alatt a formák eltűnnek, mert ott a szöveg a teljes szélességet megkapja.
   A hero CSAK a termék-nyitólapon jelenik meg; a munkafelületeken és a bérlői
   nyitólapon nincs (DESIGN.md: a formák csak a publikus lapokon, a sarkokban).

   A far360 egy soros (nowrap) címsorát nem vettük át: az iktató címe hosszabb, és
   641–1000 px között a zsugorítás nélkül is kilógna. Itt a cím kiegyensúlyozva törik.
   ============================================================================= */
.f-hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  margin: 1rem 0 0;
  padding: clamp(2.25rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4.25rem);
  border-radius: var(--r-section);
  background: var(--f-hero);
}

.f-hero__inner {
  position: relative;
  z-index: 1;
  /* A formák a sarkokban ülnek, ezért a szövegoszlop szélesebb lehet; a felső és alsó
     sarok-sávot a hero függőleges belső margója tartja szabadon. */
  max-width: min(52rem, 82%);
}

.f-hero h1 {
  margin-bottom: 0.5em;
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: 0.99;
  letter-spacing: -0.048em;
  text-wrap: balance;
}

.f-hero .f-lead {
  max-width: 38rem;
  font-size: var(--t-lead);
}

.f-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.75rem;
}

/* DM Mono szemöldök-felirat a címsor fölött. */
.f-eyebrow {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--f-primary-ink);
}

/* A szemöldök színe a háttérhez igazodik: formaszínes (menta) szekción sötét szöveg, sötét szekción
   mustár (mindkettő ≥ 4,5:1). */
.f-eyebrow--sotet { color: var(--f-on-shape); }
.f-eyebrow--vilagos { color: var(--f-mustard); }

/* A hero keretének alján hely marad a következő, felülről lekerekített szekció ráfedésének. */
.f-keret--hero { padding-bottom: calc(var(--r-section) + 1.5rem); }

@media (max-width: 860px) {
  /* Nincs forma (shapes.css), tehát a szöveg megkapja a teljes szélességet. */
  .f-hero__inner { max-width: 100%; }
}

@media (max-width: 640px) {
  .f-hero { border-radius: var(--r-card); }
  .f-hero__actions .btn-f,
  .f-hero__actions .btn-f-outline { flex: 1 1 auto; }
}