/* mrksylvstr — Visual Overlay Layer
   iframe embed containers, stat band mobile polish, and section visual treatments.
   Loaded via functions.php > mrksylvstr_enqueue_assets().
   Design tokens come from theme.json; this file handles layout and overlay styling. */

/* ─── Hero iframe embed containers ──────────────────────────────────────── */
.mrk-hero-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.mrk-hero-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
}

/* ─── Stat band — desktop default (keep as-is) ──────────────────────────── */
/* .mrk-stat-band renders with inline background-color:primary on all sizes.
   Desktop layout is intentional. Mobile override below. */

/* ─── Stat band — mobile only: quiet warm + white cards ─────────────────── */
/* Scoped to .page-template-page-knowledge to avoid unintended cross-page impact.
   WP renders inline styles; !important is required to override them at mobile. */
@media (max-width: 767px) {
  /* Outer wrapper: replace solid orange slab with a subtle warm tint */
  .page-template-page-knowledge .mrk-stat-band.wp-block-group {
    background-color: rgba(245, 241, 234, 0.06) !important;
    border-top: 1px solid rgba(194, 68, 10, 0.12);
    border-bottom: 1px solid rgba(194, 68, 10, 0.12);
    padding-left: var(--wp--preset--spacing--5, 1.25rem) !important;
    padding-right: var(--wp--preset--spacing--5, 1.25rem) !important;
    overflow-x: hidden;
  }

  /* Column grid: let columns stack (WP already does this by default at mobile) */
  .page-template-page-knowledge .mrk-stat-band .wp-block-columns {
    gap: 0.75rem;
  }

  /* Each column becomes a white card */
  .page-template-page-knowledge .mrk-stat-band .wp-block-column {
    background: #ffffff;
    border: 1px solid rgba(194, 68, 10, 0.1);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    box-sizing: border-box;
    text-align: left !important;
  }

  /* Stat number: legible dark text (override primary-foreground inline style) */
  .page-template-page-knowledge .mrk-stat-band .wp-block-column .wp-block-heading,
  .page-template-page-knowledge .mrk-stat-band .wp-block-column h3 {
    color: var(--wp--preset--color--foreground, #18120d) !important;
    font-size: var(--wp--preset--font-size--3xl, 1.875rem) !important;
  }

  /* Stat label: muted text (override primary-foreground inline style) */
  .page-template-page-knowledge .mrk-stat-band .wp-block-column p {
    color: var(--wp--preset--color--muted-foreground, #6b5f55) !important;
  }
}

/* ─── Reduced motion safety ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mrk-hero-embed,
  .mrk-hero-embed iframe {
    animation: none !important;
    transition: none !important;
  }
}