/* ===========================================================================
   INERA Connection — egyesulet.css
   Page-specific additions for /egyesulet.html. Three things the shared
   stylesheet does not already give an interior narrative page: a full-bleed
   hero (defined locally because it is index.html's own component, in
   css/pages/index.css, which is not loaded here), a quiet-emphasis paragraph
   treatment for the page's two turn lines, and a spacing fix for the
   Angyalprogram donation tiers, where a WhatsApp .act button sits between two
   .prose blocks that each open on an <h3>.
   No new colour, font or stroke width — everything below reads existing
   tokens only.
   =========================================================================== */

/* ---------------------------------------------------------------- hero */
/* Full-bleed, image-only, first thing in <main>. Same recipe as the home
   page's own hero (css/pages/index.css): a fixed-height figure with the
   photograph cropped to fill it, scaling toward the frame's own centre as
   the shared scroll driver (site.js) advances --p from 0 to 100. Centred
   origin, per the brief — this photograph's two women and the candle
   between them already sit close to the frame's middle, so a centre zoom
   draws the eye inward without cropping either woman out. */
.hero__figure {
  margin: 0;
  overflow: hidden;
  height: min(88svh, 60rem);
}

.hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(clamp(1, calc(1 + var(--p) * 0.008), 1.09));
  transform-origin: 50% 50%;
  will-change: transform;
}

/* hero zoom always runs (client 2026-08) — reduced-motion opt-out removed */

/* ---------------------------------------------------------------- emphasis */
/* A quiet lift on the page's two turn lines — the intro's closing sentence
   and the line that closes "A támogatás alapelvei" — not a pull-quote (.pull
   is the site's louder, step-3 display treatment), just enough presence to
   read as the thought the paragraphs above were building toward. Same
   quiet-emphasis vocabulary /amiben-melletted-allok.html defines for its own
   closing line (Cormorant italic, ink colour, one step below a heading);
   defined again here rather than shared because each page's CSS file is only
   the one page's own load. */
.emphasis {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--ink);
}

/* ---------------------------------------------------------------- tiers */
/* Angyalprogram lists three donation tiers, each its own .prose opening on
   an <h3> so the WhatsApp .act button between them can be a true sibling
   (nesting .act inside .prose would lose its margin to .prose p's higher
   specificity). site.css deliberately zeroes an <h2>/<h3> first-child's own
   top margin — right for a prose block that follows a photo or a bare
   heading, which already carries its own space — but here the block above is
   .act, whose margin is top-only. Restore the gap on the tier's own wrapper
   instead of touching that shared rule. */
.egyesulet__tier {
  margin-block-start: var(--space-xl);
}

/* client 2026-08: the three Angyalprogram tier titles read bold. Cormorant tops
   out at 600 in the vendored set. All <h3> on this page are tier titles. */
h3 { font-weight: 600; }

/* client 2026-08: balance + tighten the space around the intro's closing
   "Mert a támogatás…" line — a symmetric, moderate gap instead of a big
   asymmetric one — and pull "A támogatás alapelvei" up under the last tier
   button instead of a full section gap. */
.egy-intro { padding-block-end: 0; }
.egy-intro .pageintro { margin-block-end: var(--space-xl); }
.egy-after-intro { padding-block-start: var(--space-xl); }
.egy-angyal { padding-block-end: var(--space-l); }
.egy-after-angyal { padding-block-start: var(--space-l); }