/*
 * DIA CAPITAL — Hero (section 01). Canonical styles: Hero V2.1 (adopted 2026-10-13).
 * Markup: src/partials/hero.html. Archived references: src/archive/hero-v1.13/ (v1.13),
 * src/archive/hero-v2/ (V2), src/archive/hero-v2.1/ (V2.1 as tested).
 * Status: COMPOSITION APPROVED / HIGH-RES ASSET PENDING — replace the 1672 px source with
 * a ≥ 2700 px master of the same visual before final optimisation (never upscale).
 * V2.1 changes vs V2: larger desktop H1 (≈ 66 px at 1440 vs 61); artwork field
 * 68 % wide and set 2 % past the right edge (headline clearance + trims the far
 * right); stronger top fade + a top-right corner fade to quiet the upper-right
 * streaks (mask only — source untouched); compact mobile stack.
 *
 * Requires the base system (main.css). Fills the dia.sections layer; scoped under
 * .dia-apex. A dark cinematic island in both themes (.dia-island). Static.
 *
 * Composition (≥ 1024px): one integrated scene instead of "headline above,
 * artwork below". The approved key visual occupies the right / centre of the
 * stage as an absolutely positioned layer and dissolves into the scene through
 * masks; the copy sits in the darker left territory (about 5 columns). Depth is
 * built only with restrained CSS layers: a deep blue-charcoal ground matched to
 * the artwork's own edges, a soft blue lift behind the ecosystem, a faint light
 * behind the copy, and an edge vignette. No added lines, grids, particles,
 * charts, modules or glow loops. The benefits band is the lower architectural
 * edge of the same scene.
 * < 1024px: copy first; the artwork follows in flow, rising slightly behind the
 * end of the copy (tablet: full 16:9; mobile: core-centred crop); then the band.
 */

@layer dia.sections {
  .dia-apex .dia-hero2 {
    /* Matched to the key visual's edge pixels (≈ rgb 4 11 19). */
    --dia-hero2-ground: color-mix(in srgb, var(--dia-island-bg) 58%, #000);
    --dia-hero2-art-w: 68%;
    --dia-hero2-art-shift: -2%; /* past the right edge: trims the image's far-right streaks */
    --dia-hero2-offset: 72px; /* host header height (Osty stand-in); set at integration */

    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-block-size: clamp(640px, calc(100svh - var(--dia-hero2-offset)), 1040px);
    overflow: hidden;
    color: var(--dia-text);
    background:
      radial-gradient(ellipse 52% 62% at 70% 44%, color-mix(in srgb, var(--dia-surface) 70%, transparent) 0%, transparent 72%),
      radial-gradient(ellipse 42% 55% at 16% 42%, color-mix(in srgb, var(--dia-surface) 32%, transparent) 0%, transparent 78%),
      var(--dia-hero2-ground);
  }

  /* Edge vignette over the scene (below the copy and the band). */
  .dia-apex .dia-hero2::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 115% 100% at 56% 42%, transparent 60%, rgb(0 0 0 / 0.42) 100%);
  }

  /* ---------- Stage: artwork + copy share one field ---------- */

  .dia-apex .dia-hero2__stage {
    position: relative;
    display: grid;
    align-items: center;
  }

  /*
   * A right-anchored 16 : 9 field (no cover-cropping), vertically centred in the
   * stage: the whole composition — core and all four satellite modules — stays
   * in view, and the left third, where the copy sits, is the image's own dark
   * negative space. Masks dissolve every inner edge into the scene.
   */
  .dia-apex .dia-hero2__art {
    position: absolute;
    z-index: 0;
    inset-block-start: 50%;
    inset-inline-end: var(--dia-hero2-art-shift);
    inline-size: var(--dia-hero2-art-w);
    max-block-size: 100%;
    aspect-ratio: 16 / 9;
    margin: 0;
    transform: translateY(-50%);
    /* Left fade, top / bottom fades (top deepened to 22 %), and a top-right corner fade
       that quiets the vertical streaks without reaching the bronze module. */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 32%),
      linear-gradient(to bottom, transparent 0%, #000 22%, #000 80%, transparent 100%),
      radial-gradient(ellipse 24% 36% at 100% 0%, transparent 0%, transparent 30%, #000 100%);
    -webkit-mask-composite: source-in, source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, #000 32%),
      linear-gradient(to bottom, transparent 0%, #000 22%, #000 80%, transparent 100%),
      radial-gradient(ellipse 24% 36% at 100% 0%, transparent 0%, transparent 30%, #000 100%);
    mask-composite: intersect;
  }

  .dia-apex .dia-hero2__art picture {
    display: block;
    block-size: 100%;
  }

  .dia-apex .dia-hero2__img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    /* Keep the core and the right-hand modules; crop from the empty left first. */
    object-position: 74% 50%;
  }

  .dia-apex .dia-hero2__content {
    position: relative;
    z-index: 2;
    padding-block: var(--space-8);
  }

  .dia-apex .dia-hero2__content > * {
    max-inline-size: 38rem;
  }

  /* Sized so the longest line ends before the first satellite module (Display range). */
  .dia-apex .dia-hero2__title {
    max-inline-size: none;
    margin-block-start: var(--space-4);
    font-size: clamp(2.5rem, 0.9rem + 3.6vw, 4.25rem);
  }

  .dia-apex .dia-hero2__title > span {
    display: block;
  }

  .dia-apex .dia-hero2__lede {
    max-inline-size: 34rem;
    margin-block-start: var(--space-5);
  }

  /* Glyph halo in the ground colour: protects the copy where the scene's lit points reach it. */
  .dia-apex .dia-hero2__title,
  .dia-apex .dia-hero2__lede,
  .dia-apex .dia-hero2__actions .dia-btn--secondary {
    text-shadow:
      0 0 1px var(--dia-hero2-ground),
      0 0 3px var(--dia-hero2-ground),
      0 0 6px var(--dia-hero2-ground),
      0 0 12px var(--dia-hero2-ground);
  }

  .dia-apex .dia-hero2__actions {
    margin-block-start: var(--space-7);
  }

  .dia-apex .dia-hero2__actions .dia-btn {
    touch-action: manipulation;
  }

  /* ---------- Benefits band: the lower architectural edge of the scene ---------- */

  .dia-apex .dia-hero2__band {
    --dia-hero2-band-rule: color-mix(in srgb, var(--dia-bronze) 38%, var(--dia-border));
    --dia-hero2-band-divider: color-mix(in srgb, var(--dia-text-secondary) 34%, transparent);

    position: relative;
    z-index: 2;
    background:
      linear-gradient(to bottom, color-mix(in srgb, var(--dia-surface) 34%, transparent), transparent 75%),
      color-mix(in srgb, var(--dia-hero2-ground) 70%, transparent);
    border-block-start: 1px solid var(--dia-hero2-band-rule);
  }

  .dia-apex .dia-hero2__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    padding-block: 22px;
    list-style: none;
  }

  .dia-apex .dia-hero2__fact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-block-size: 37px;
    padding-inline: clamp(var(--space-4), 2.2vw, 40px);
  }

  .dia-apex .dia-hero2__fact + .dia-hero2__fact {
    border-inline-start: 1px solid var(--dia-hero2-band-divider);
  }

  .dia-apex .dia-hero2__fact-icon {
    flex: none;
    inline-size: 30px;
    block-size: 30px;
    color: var(--dia-bronze);
  }

  .dia-apex .dia-hero2__fact-text {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--dia-text);
  }

  @media (min-width: 1024px) and (max-width: 1279px) {
    .dia-apex .dia-hero2 {
      --dia-hero2-art-w: 74%;
      --dia-hero2-art-shift: 0%;
    }

    .dia-apex .dia-hero2__title {
      font-size: clamp(2.75rem, 0.5rem + 3.5vw, 3.25rem);
    }

    .dia-apex .dia-hero2__fact {
      gap: 10px;
      padding-inline: 12px;
    }

    .dia-apex .dia-hero2__fact-text {
      letter-spacing: 0.035em;
    }
  }

  @media (min-width: 1024px) and (max-height: 820px) {
    .dia-apex .dia-hero2__content {
      padding-block: var(--space-7);
    }

    .dia-apex .dia-hero2__facts {
      padding-block: 18px;
    }

    .dia-apex .dia-hero2__fact-icon {
      inline-size: 28px;
      block-size: 28px;
    }

    .dia-apex .dia-hero2__fact-text {
      font-size: 13px;
      line-height: 1.25;
    }
  }

  /* ---------- < 1024px: copy, then the artwork in flow, then the band ---------- */

  @media (max-width: 1023px) {
    .dia-apex .dia-hero2 {
      min-block-size: 0;
      grid-template-rows: auto auto;
    }

    .dia-apex .dia-hero2__stage {
      display: flex;
      flex-direction: column;
    }

    .dia-apex .dia-hero2__content {
      order: 1;
      min-inline-size: 0;
      padding-block: var(--space-9) 0;
    }

    .dia-apex .dia-hero2__art {
      order: 2;
      position: relative;
      inset: auto;
      inline-size: 100%;
      max-block-size: none;
      transform: none;
      aspect-ratio: 16 / 9;
      -webkit-mask-composite: source-in;
      /* Rises slightly behind the end of the copy; the top fade keeps the CTAs clean. */
      margin-block-start: calc(-1 * clamp(24px, 6vw, 64px));
      -webkit-mask-image:
        linear-gradient(to bottom, transparent 0%, #000 26%, #000 86%, transparent 100%),
        linear-gradient(to right, transparent 0%, #000 12%, #000 94%, transparent 100%);
      mask-image:
        linear-gradient(to bottom, transparent 0%, #000 26%, #000 86%, transparent 100%),
        linear-gradient(to right, transparent 0%, #000 12%, #000 94%, transparent 100%);
    }

    .dia-apex .dia-hero2__img {
      object-position: 70% 50%;
    }

    .dia-apex .dia-hero2__facts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding-block: 0;
    }

    .dia-apex .dia-hero2__fact {
      justify-content: flex-start;
      padding: 16px clamp(14px, 3vw, 28px);
    }

    .dia-apex .dia-hero2__fact + .dia-hero2__fact {
      border-inline-start: 0;
    }

    .dia-apex .dia-hero2__fact:nth-child(even) {
      border-inline-start: 1px solid var(--dia-hero2-band-divider);
    }

    .dia-apex .dia-hero2__fact:nth-child(n + 3) {
      border-block-start: 1px solid var(--dia-hero2-band-divider);
    }
  }

  /* Mobile: the core-centred crop (1024 × 852 source). */
  @media (max-width: 767px) {
    .dia-apex .dia-hero2__content {
      padding-block-start: var(--space-7);
    }

    .dia-apex .dia-hero2__lede {
      margin-block-start: var(--space-4);
    }

    /* Each sentence wraps once; the longest word ("automáticamente.") always fits. */
    .dia-apex .dia-hero2__title {
      font-size: min(2.75rem, 10vw);
    }

    /* Shorter field from the same core-centred crop (trims sky above / floor below),
       rising further under the CTA row — its top fade keeps the buttons clean. */
    .dia-apex .dia-hero2__art {
      aspect-ratio: 1.42;
      margin-block-start: calc(-1 * var(--space-7));
    }

    .dia-apex .dia-hero2__img {
      object-position: 50% 54%;
    }

    .dia-apex .dia-hero2__actions {
      margin-block-start: var(--space-5);
    }

    .dia-apex .dia-hero2__fact {
      padding-block: 12px;
    }

    .dia-apex .dia-hero2__fact-text {
      font-size: 12px;
      letter-spacing: 0.05em;
    }

    .dia-apex .dia-hero2__fact-icon {
      inline-size: 24px;
      block-size: 24px;
    }
  }
}