/* ============================================================
   HERO — first screen of a product page, and the same stack in the
   final call-to-action block (FinalCta.astro).
   Requires: tokens.css, page.css, button.css

   Structure taken from the home page's Intro block (decided 02.10.2026):
   a full first screen with one rhythm of offsets, everything centred.
   The pills and the cursor animation are the home page's own image and
   are not part of it. Background comes from the page theme.
   ============================================================ */

.hero {
  display: flex;
  align-items: center;
  /* First screen = viewport minus the menu, which reserves its height in the flow (nav.css).
     The whole composition is centred in that height, so no section offset on top (it would push it down). */
  min-height: calc(100svh - var(--nav-height));
  padding-top: 0;
}
/* Phones (decision 02.10.2026): the first screen fills the screen under the menu; the actions and the perks sit
   at the bottom, the eyebrow, heading and lead in the middle of the space above them. svh = the screen with the
   browser bars shown, so the buttons are never under Safari's toolbar. NB the 2026 embed note: Android Chrome
   miscounted svh inside a Webflow embed — check this on an Android phone. */
@media (max-width: 47.9375rem) {
  /* capped at 40rem: on tall phones (Pixel 7, 1040) the full screen left too much empty air (02.10.2026) */
  .hero { align-items: stretch; min-height: min(calc(100svh - var(--nav-height)), 40rem); padding-top: 0; }
  .hero .container { display: flex; }
  .hero .hero__stack { flex: 1; justify-content: space-between; padding-bottom: var(--space); }
  /* air at the sides of the heading block; the buttons stay full width */
  .hero .hero__head { flex: 1; justify-content: center; padding-inline: var(--space); } /* first screen only, not the final CTA */
  /* Centring with a minimum gap (02.10.2026): the 48 to the buttons goes on BOTH sides of the centred block,
     not as a gap below it — otherwise the text centres in the space above the gap and jumps up by half of it. */
  .hero .hero__stack { gap: 0; }
  .hero .hero__head { padding-block: var(--space-lg); }
}
/* Short phones (iPhone SE and alike): no room for air in the middle — the first screen follows its content. */
@media (max-width: 47.9375rem) and (max-height: 43.75rem) {
  .hero { min-height: 0; padding-top: var(--section-space); }
  .hero .hero__stack { padding-bottom: 0; gap: var(--space-lg); }
  .hero .hero__head { padding-block: 0; }
}

.hero__stack, .hero__head, .hero__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space);
  text-align: center;
}
.hero__head, .hero__foot { align-self: stretch; }
/* Rhythm (02.10.2026): the lead belongs to the heading (16), the actions are a separate group (48);
   inside the actions group: button → button 16, buttons → perks 24. */
.hero__stack { gap: var(--space-lg); }
.hero__head { gap: var(--space-sm); }
/* The eyebrow belongs to the heading: a tighter gap than the rest of the stack. */
.hero__title { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); } /* 8: the eyebrow labels the heading, tighter than heading → lead 16 (02.10.2026) */

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.hero__eyebrow img { height: 1em; width: auto; }

/* Lead and perks are narrower than the heading: 8 of 12 columns, centred. */
.hero__lead { width: calc(8 / 12 * 100%); }
@media (max-width: 47.9375rem) {
  .hero__lead { width: 100%; }
}

/* actions: a .btn-group (button.css) — equal widths, a column on phones */

/* perks: a .check-list--inline (patterns.css) */

/* ---- Final CTA: the same stack in a .panel at the end of a page (surface.css) ---- */
/* Phones — one rhythm (05.10.2026): the panel's top and bottom padding equal the gap between the text and the
   actions (.hero__stack gap, space-lg): top edge → heading = lead → buttons = perks → bottom edge.
   Desktop and tablets keep the panel's own 80 (Liliya, 05.10.2026). */
@media (max-width: 47.9375rem) {
  .final-cta__card { --panel-pad-top: var(--space-lg); --panel-pad-bottom: var(--space-lg); }
}