/* ============================================================================
   Hero-to-content transition
   Decorative background layer pinned to the top of the FIRST content section
   below the hero (mk-carousel on the home page, mk-page-hero on service
   pages). A soft tint bleeds down BEHIND the section's real content and
   dissolves into the page, with a faint tech grid.

   Light mode: an extremely soft gray that fades away.
   Dark mode:  the hero's dark blue, continuing the hero downward.

   Auto-loaded by Propshaft. Do NOT @import in application.css.
   ============================================================================ */

/* The content section that flows out of the hero. Anchors the decorative
   layer and adds headroom so the heading clears the bleed above it. */
.mk-section-hero-flow {
  position: relative;
}

@media (max-width: 768px) {
  .mk-section-hero-flow {
    padding-top: var(--arp-space-12); /* match the standard mobile section spacing */
  }
}

/* Lift the real content above the decorative layer. */
.mk-section-hero-flow > .container {
  position: relative;
  z-index: 1;
}

/* Decorative layer: spans the top of the section, behind the content. */
.mk-hero-transition {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 460px; /* token-ok -- transition depth; no spacing token at this scale */
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  /* Feeds currentColor into the inline SVG grid stroke (soft gray in light) */
  color: var(--arp-gray-500);
}

@media (max-width: 768px) {
  .mk-hero-transition {
    height: 280px; /* token-ok -- proportionally smaller on mobile */
  }
}

/* Gradient layer: a soft tint at the top edge that fades out before the
   content begins, so the section background takes over underneath. */
.mk-hero-transition::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px; /* token-ok -- tint bleed depth out of the hero */
  background: linear-gradient(
    to bottom,
    var(--arp-gray-200) 0%,
    transparent 100%
  );
  z-index: 0;
}

@media (max-width: 768px) {
  .mk-hero-transition::before {
    height: 90px; /* token-ok -- shallower bleed on mobile */
  }
}

/* Geometric grid SVG: low-opacity precision overlay that dissolves toward the
   content so the grid reads as part of the transition, not a flat texture. */
.mk-hero-transition-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0.30;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 92%);
}

/* === Dark mode ============================================================ */
/* Selector mirrors [data-theme="dark"] .public-page in public.css.          */
/* The hero's dark blue continues downward and dissolves into the dark page. */

[data-theme="dark"] .public-page .mk-hero-transition {
  color: #ffffff; /* token-ok -- white grid lines over the dark gradient */
}

[data-theme="dark"] .public-page .mk-hero-transition::before {
  background: none;
}

[data-theme="dark"] .public-page .mk-hero-transition-grid {
  opacity: 0.18;
}