/* =============================================================================
   Hero — docs/components/hero.md.

   Two variants:

     .hero              split   — navy copy panel + media column fading out of
                                  navy. Home only (video).
     .hero--compact     compact — hero.md § Compact Hero (subpages). A 300px
                                  full-bleed photo under a navy gradient, with
                                  the kicker and H1 bottom-left. About, Blog,
                                  Solutions and the seven article pages. No
                                  tagline or CTAs: what the split hero used to
                                  carry there moved into the section below it.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   HERO — docs/components/hero.md.

   Full-bleed 600px split: a 700px navy panel holding the copy, and a media
   column that bleeds to the viewport edge under a navy fade. The media is a
   muted looping video (js/main.js starts it; it never carries the autoplay
   attribute) oversized to 124% so the parallax has room to travel.

   The section carries data-tone="dark", so headings, paragraphs, buttons and
   badges inside it resolve their own dark-ground colours (section.css,
   button.css) and nothing here has to restate them.
   --------------------------------------------------------------------------- */
.hero {
  display: flex;
  min-height: 600px; /* hero.md § Layout */
  background-color: var(--color-primary);
  overflow: hidden;
}

/* The panel is a fixed column on desktop, never a fraction. 800px is
   `$panel-width` in hero.module.scss (danubius-it-solutions) — at the 1440 page
   grid that splits the hero 800 / 640, a 5:4 copy-to-media ratio. hero.md still
   documents the older 700px; the shipped app is the reference here.

   The hero is full-bleed but the page grid is capped at --page-max-width, so
   above that width the panel absorbs the left gutter — it grows by the gutter
   and pads by the same amount — and the copy lands on the same column as the
   `.container` of every section below it. Below the cap the gutter is 0px and
   this collapses to a plain 800px panel. `100%` (not `100vw`) so the scrollbar
   is excluded, the same trick hero.tsx uses. */
.hero__content {
  --hero-panel: 800px;
  --hero-gutter: max(0px, calc((100% - var(--page-max-width)) / 2));
  flex: 0 0 calc(var(--hero-panel) + var(--hero-gutter));
  max-width: calc(var(--hero-panel) + var(--hero-gutter));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-12); /* hero.md panel gap */
  padding-block: var(--section-padding-y-compact);
  padding-inline: calc(var(--content-padding) + var(--hero-gutter)) var(--content-padding);
}

/* Heading group: kicker -> 12px -> H1, then 24px to the tagline and intro. */
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.hero__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* hero.md kicker <-> H1 */
}

/* typographyNav at weight 700, per hero.md § Typography — not the uppercase
   .kicker scale used by the section headers. */
.hero__kicker {
  margin-bottom: 0;
  font-weight: 700;
  font-size: 1rem;
  line-height: 140%;
  letter-spacing: 0.02em;
  color: var(--color-primary-light);
}

.hero__title {
  margin-bottom: 0;
  color: var(--color-white);
}

.hero__tagline {
  margin-bottom: 0;
  color: var(--color-division-highlight);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5); /* hero.md actions gap */
}

.hero__visual {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

/* hero.md § Visual — the photo fades into the panel rather than butting up
   against it. Transparent is spelt as the ground at zero alpha so the gradient
   does not run through grey in browsers that interpolate via sRGB. */
.hero__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    color-mix(in srgb, var(--color-primary) 0%, transparent) 30%
  );
}

/* data-parallax="0.12" (hero.md); js/main.js writes the translate inline and
   clamps it to ±32px, so the media only needs the compositor hint and the
   oversize that gives the travel somewhere to go. */
.hero__video {
  position: absolute;
  inset: -12% 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  will-change: transform;
}

/* ---------------------------------------------------------------------------
   COMPACT — hero.md § Compact Hero (subpages), Figma `Variant6` (999:1815).

   Media, overlay and container are stacked in DOM order: the two absolute
   layers paint first and the relatively positioned container above them. The
   heading group, kicker and title are the split hero's own parts above.

   `.hero.hero--compact` (two classes) so the split hero's ≤900px column
   collapse and `min-height: 0` never reach it, whatever the source order.
   --------------------------------------------------------------------------- */
.hero.hero--compact {
  position: relative;
  flex-direction: row;
  min-height: 300px; /* hero.md § Compact — 300 / 240 / 240 / 200 */
}

/* Oversized to 124% so data-parallax="0.12" has room to travel; js/main.js
   writes the translate inline and clamps it to ±32px. */
.hero--compact .hero__media {
  position: absolute;
  inset: -12% 0;
  height: 124%;
  will-change: transform;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Always navy, darkest at the bottom where the copy sits. Until CR-004 adds
   alpha tokens the two stops are mixed from --color-primary. */
.hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-primary) 60%, transparent) 0%,
      transparent 70%
    ),
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--color-primary) 65%, transparent) 0%,
      color-mix(in srgb, var(--color-primary) 20%, transparent) 100%
    );
}

/* `.container` supplies the page grid and the inline content padding (80 / 40
   / 40 / 20); the block padding is sectionPaddingCompact (80 / 60 / 60 / 40).
   The container is a flex item of the row, so it stretches to the hero's
   height and `flex-end` drops the heading to the bottom. */
.hero__container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: var(--section-padding-y-compact);
}

/* hero.md § Compact, Typography: the kicker is white over the photo, where
   every bit of luminance counts against the 4.5:1 it needs. */
.hero--compact .hero__kicker {
  color: var(--color-white);
}

.hero--compact .hero__title {
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   RESPONSIVE — desktop-first.
   --------------------------------------------------------------------------- */
/* Tablet L (900–1200px): the panel and media stay side by side, as in
   hero.module.scss. A fixed 800px panel would leave the media no usable column,
   so the two split by ratio instead. */
@media (max-width: 1200px) {
  .hero__content {
    --hero-panel: 60%;
  }

  .hero.hero--compact {
    min-height: 240px;
  }
}

/* At $screen-md the hero is copy only: the media column is hidden and the
   panel fills the hero. */
@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    min-height: 0;
  }

  .hero__content {
    flex-basis: auto;
    max-width: none;
    width: 100%;
  }

  .hero__visual {
    display: none;
  }
}

@media (max-width: 600px) {
  .hero__cta {
    flex-direction: column;
    align-self: stretch;
  }

  .hero__cta .btn {
    width: 100%;
  }

  .hero.hero--compact {
    min-height: 200px;
  }
}