/* ===========================================================================
   INERA Connection — offer.css
   The four Kapcsolódj sub-routes: Egyéni kísérés, Női Kör, Szülői Kör,
   Találkozások. Loaded AFTER /css/site.css and only by those four pages:

     <link rel="stylesheet" href="/css/site.css">
     <link rel="stylesheet" href="/css/pages/offer.css">

   The page reads top to bottom in one column:
     .crumb  →  .subbrand + .pageintro (+ optional hero photograph)
             →  "kinek szól" .prose  →  .facts  →  .pull
             →  the WhatsApp .branch-btn  →  .offer__siblings

   TWO OF THE FOUR PAGES HAVE A HERO PHOTOGRAPH AND TWO DO NOT.
   .offer__head is a wrapping flex row, not a two-column grid, so a page with
   no <figure class="ground ground--hero"> does not leave an empty column: the
   text simply keeps its own measure and the row is one item wide. Nothing has
   to be switched on or off per page.

   It introduces no colour, no width and no typeface of its own — everything
   here is layout.
   =========================================================================== */

.offer { max-width: 74rem; }

/* --- the opening ---------------------------------------------------------- */

.offer__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xl) clamp(2rem, 6vw, 4.5rem);
  margin-block-end: var(--space-2xl);
}

/* The words. flex-basis is the width below which the photograph drops under
   them; above it the two stand side by side. */
.offer__opening { flex: 1 1 26rem; min-inline-size: 0; }

.offer__opening .pageintro { margin-block-end: 0; }

/* The photograph, when there is one. The seed cut is the portrait's — the
   same flowing outline the arrival uses, so a hero here belongs to the page
   it opens rather than sitting on it. */
.ground--hero {
  flex: 0 1 22rem;
  --lit-floor: 88;
  --lit-gain: 0.12;
}

.ground--hero img { clip-path: url(#shape-seed); }

/* --- the body ------------------------------------------------------------- */

.offer__body { max-width: var(--measure); }

.offer__body .facts { margin-block: var(--space-xl); }

/* The WhatsApp button's row and the quiet + 112 lines under it are `.act` and
   `.quiet` / `.quiet--safety` in site.css — one component for the whole site,
   not one copy per page stylesheet. */

/* --- the other three forms ------------------------------------------------ */
/* A row of quiet sibling links, each under its own hairline — the same rule
   that holds a card together on the Útravaló index. */

.offer__siblings { margin-block-start: var(--space-3xl); }

/* Since the WhatsApp block became a band of its own (a warm one — see
   `.section--pebble` in site.css), the sibling row is what comes after it, in
   its own `.section`. That section already carries `--space-3xl` above it, so
   the row's own step up would be counted twice. */
.offer > .offer__siblings:only-child { margin-block-start: 0; }

.offer__siblings-title {
  font-size: var(--step--1);
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-m);
}

.offer__siblings-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m) clamp(1.5rem, 4vw, 3rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 44rem) {
  .offer__siblings-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.offer__sibling {
  padding-block-start: var(--space-s);
  border-block-start: var(--stroke-d2) solid var(--line);
}

.offer__sibling a {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--stroke-d3);
  text-underline-offset: 0.24em;
  transition: text-decoration-color 240ms ease;
}

.offer__sibling a:hover,
.offer__sibling a:focus-visible { text-decoration-color: var(--line); }

.offer__sibling p {
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin: var(--space-2xs) 0 0;
  max-width: 34ch;
}

/* --- phones --------------------------------------------------------------- */
/* A photograph is the width of the screen here too, exactly as on the home
   page: it bleeds through the side padding instead of sitting as an inset. */

@media (max-width: 40rem) {
  .ground--hero {
    flex: 1 1 100%;
    inline-size: calc(100% + var(--pad-start) + var(--pad-end));
    margin-inline-start: calc(var(--pad-start) * -1);
    margin-inline-end: calc(var(--pad-end) * -1);
  }
}

/* --- client 2026-08 -------------------------------------------------------- */
/* The three group pages (Női/Szülői Kör, Találkozások) carry a landscape
   companion photo reused from /kapcsolodj. Give it the presence of the
   Ismerj meg portrait instead of letting it shrink in the flex row — its own
   seed shape is unchanged. (Egyéni kísérés keeps its portrait hero, no class.) */
.ground--hero--feature { flex: 1 1 27rem; }

/* A single standalone sentence the client asked to read bolder than the body.
   Poppins tops out at 400 in the vendored set, so this renders as synthetic bold. */
.offer__body .emphasis { font-weight: 700; }