/* =========================================================================
   AIDH HERO — CORPORATE (Al Duffa)
   -------------------------------------------------------------------------
   Loads after aidh-hero.css — reuses that file's shared, unscoped
   primitives (.aidh-hero__eyebrow, __title, __lead, __cta, .aidh-hbtn,
   __dots/__dot, __stage) and only adds what's new or different here:
   the horizontal scrim, the proof strip, the caption+dots footer bar,
   and the layout that pins content to the top and the footer to the
   bottom of a full-height hero — matching the Al Duffa design exactly.

   Nothing in aidh-hero.css is edited; the Aurora and Split heroes are
   completely unaffected by this file (everything below is scoped under
   .aidh-hero--corporate).
========================================================================= */

.aidh-hero--corporate {
  position: relative;
  min-height: 640px;
  display: flex;
  /* Copy on top, caption bar underneath (as in the design's .slide-ui,
     which sits inside the content column below the copy). */
  flex-direction: column;
  overflow: hidden;
  /* The section is inset to the shared content column (--wrap-max, from
     the theme's alduffa-tokens.css): on wide screens the extra space goes
     outside, then the copy and the caption bar add the same --wrap-pad as
     the header — so the eyebrow/title and the caption start exactly under
     the logo and the dots end exactly under the Apply button. The photo
     stage and scrim are absolutely positioned, so they stay full-bleed. */
  padding-inline: max(0px, calc((100% - var(--wrap-max, 1280px)) / 2));
}
@media (max-width: 767px) {
  .aidh-hero--corporate { min-height: 720px; }
}

.aidh-hero--corporate .aidh-hero__stage { position: absolute; inset: 0; z-index: 0; }
/* aidh-hero.css (Aurora/Split) has its own UNSCOPED .aidh-hero__slide rule
   with visibility:hidden + a "opacity .9s, visibility .9s" transition. Our
   selector here is more specific, so it was replacing that whole
   `transition` shorthand — visibility dropped out of transition-property
   entirely and started snapping instantly instead of waiting for the
   fade. Net effect: the outgoing photo popped away in a single frame
   while only the incoming one actually faded over 1.2s, which is exactly
   the "text swaps in sync but the photo doesn't" desync. Owning
   `visibility` explicitly here (delayed until the fade-out finishes, and
   instant on fade-in, which is the standard crossfade trick) fixes it
   without touching the shared file. */
.aidh-hero--corporate .aidh-hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}
.aidh-hero--corporate .aidh-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.2s ease, visibility 0s linear 0s;
}
.aidh-hero--corporate .aidh-hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Horizontal wash — strong navy on the text side, fading out over the
   photo, exactly matching the Al Duffa source's .hero::before. */
.aidh-hero--corporate .aidh-hero__scrim {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(5, 23, 33, .92) 0%,
    rgba(5, 23, 33, .74) 40%,
    rgba(5, 23, 33, .2) 100%);
}
html[dir="rtl"] .aidh-hero--corporate .aidh-hero__scrim {
  background: linear-gradient(270deg,
    rgba(5, 23, 33, .92) 0%,
    rgba(5, 23, 33, .74) 40%,
    rgba(5, 23, 33, .2) 100%);
}

/* Full-height column: copy block at the top, footer bar pinned to the
   bottom — the container itself stretches the full hero height so
   "space-between" has room to work. */
.aidh-hero--corporate .aidh-hero__container {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: none;
  padding-block: 72px 40px;
}
.aidh-hero--corporate .aidh-hero__copy { max-width: 600px; }

/* This variant only ever shows one copy block (the headline doesn't
   change with the photo) so none of the is-active show/hide animation
   the other heroes use applies here. */
.aidh-hero--corporate .aidh-hero__title { margin-top: 18px; letter-spacing: -.005em; opacity: 1 !important; animation: none !important; }
.aidh-hero--corporate .aidh-hero__rot {
  color: var(--aidh-accent);
  border-bottom: 3px solid var(--aidh-accent);
  padding-bottom: 2px;
  display: inline-block;
  min-width: 1ch;
}
.aidh-hero--corporate .aidh-hero__lead { max-width: 44ch; }

/* ---------------------------------------------------------------------
   Proof strip — three-column credential row under the buttons
--------------------------------------------------------------------- */
.aidh-hero--corporate .aidh-hero__proof {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 610px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.aidh-hero--corporate .aidh-hero__proof-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-inline-end: 14px;
  margin-inline-end: 14px;
  border-inline-end: 1px solid rgba(255, 255, 255, .18);
}
.aidh-hero--corporate .aidh-hero__proof-item:last-child {
  padding-inline-end: 0;
  margin-inline-end: 0;
  border-inline-end: 0;
}
.aidh-hero--corporate .aidh-hero__proof-item span {
  font-family: var(--aidh-head);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--aidh-accent);
}
.aidh-hero--corporate .aidh-hero__proof-item strong {
  font-family: var(--aidh-body);
  font-size: .8rem;
  line-height: 1.35;
  font-weight: 600;
  color: #f6f8f7;
}

/* ---------------------------------------------------------------------
   Footer bar — a hairline across the full content width, caption at the
   left edge (under the proof strip), dots pushed to the right edge.
   Values from the design's .slide-ui / .slide-dots.
--------------------------------------------------------------------- */
.aidh-hero--corporate .aidh-hero__footbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
  /* margin, not padding, on the sides: the border then spans exactly the
     content width (logo edge → Apply-button edge), like the design. */
  margin-inline: var(--wrap-pad, 20px);
  padding: 18px 0 40px;
  border-top: 1px solid rgba(255, 255, 255, .20);
}
.aidh-hero--corporate .aidh-hero__caption {
  font-size: .78rem;
  color: #e3ebed;
  /* Crossfades with the photo instead of snapping — aidh-hero-corporate.js
     toggles .is-fading, swaps the text at the midpoint of the photo's own
     1.2s crossfade (above), then removes it, so caption and photo always
     land together. */
  transition: opacity .45s ease;
}
.aidh-hero--corporate .aidh-hero__caption.is-fading { opacity: 0; }
.aidh-hero--corporate .aidh-hero__dots { margin-inline-start: auto; }

/* Small circular dots, growing to a gold pill when active — distinct
   from the Aurora/Split bar-style dots, scoped so those are untouched. */
.aidh-hero--corporate .aidh-hero__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
}
.aidh-hero--corporate .aidh-hero__dot.is-active {
  width: 26px; height: 10px;
  border-radius: 5px;
  background: var(--aidh-accent);
}

@media (max-width: 767px) {
  .aidh-hero--corporate .aidh-hero__proof { flex-wrap: wrap; row-gap: 14px; }
  .aidh-hero--corporate .aidh-hero__proof-item { flex: 1 1 45%; }
  .aidh-hero--corporate .aidh-hero__footbar { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .aidh-hero--corporate .aidh-hero__slide { transition: none; }
  .aidh-hero--corporate .aidh-hero__caption { transition: none; }
}