/* ██████████████████████████████████████████████████████████
   HERO SUPPORTING COMPOSITION (2026-09-16 — Hero Architectural Audit,
   Visual Architecture Review)
   ──────────────────────────────────────────────────────────
   The two composition primitives beyond "text + CTA + one background":
   .hero-visual (a single supporting/feature image, rendered by
   web/modules/hero_content.php) and .hero-items (a small structured set
   of supporting cards — proof/stat/image). Loaded on every template
   (like hero-layouts.css) since the universal renderer must always be
   able to paint these as a real baseline, never a plain vertical list.

   Orthogonal to hero_layout — these rules do not depend on which of
   full_bleed / .hero-lyt-split / .hero-lyt-editorial is active except
   where a layout's canvas needs different contrast (editorial is light;
   see the recolor block at the bottom, same pattern hero-layouts.css
   already uses for .hero-title etc.).
   ██████████████████████████████████████████████████████████ */


/* ----------------------------------------------------------
   SUPPORTING VISUAL — a framed feature image, not an edge-to-edge
   background. Reads as a distinct visual moment below the CTA, not a
   continuation of the text stack.
---------------------------------------------------------- */
.hero-visual {
  display: inline-block;
  max-width: min(480px, 88vw);
  /* Symmetric top/bottom margin — Final Polish Pass fix: this used to be
     margin-TOP only, which is fine when .hero-visual is the last element
     (its usual position, after the CTA) but gave it nothing to collapse
     against if anything ever follows it. Kept generous and symmetric so
     spacing stays correct regardless of what's adjacent. */
  margin: var(--mt-space-10, 40px) 0;
  border-radius: var(--mt-radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  animation: heroFadeUp 1.1s var(--mt-ease-default, ease) both;
}

.hero-visual__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
}

/* Alignment follows the same text-alignment classes the rest of the
   Hero content already uses (.text-start/.text-center/.text-end on the
   ancestor .container) — .hero-visual just needs to know whether to
   center itself or hug a side. */
.text-center .hero-visual { margin-left: auto; margin-right: auto; }
.text-end    .hero-visual { margin-left: auto; }


/* ----------------------------------------------------------
   SUPPORTING ITEMS — a compact card GROUP (row, wraps), never a
   vertical list. Deliberately distinct from .hero-proof (highlights[]
   pill badges) — this is a richer, denser unit that can carry an
   image/icon + a value + a label + a caption.
---------------------------------------------------------- */
.hero-items {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
  /* Final Polish Pass fix: was margin-top only — with nothing below it
     contributing a top margin (.hero-actions has none of its own), items
     sat directly against the CTA buttons with zero gap. Symmetric margin
     collapses cleanly against whatever precedes/follows (description,
     highlights, or straight into the CTA). */
  margin: var(--mt-space-10, 40px) 0;
}

/* Balance for a low item count — 1–2 cards alone in a wide Hero read as
   sparse/orphaned at the same size as a 4-card row; a touch more
   presence keeps composition balanced without changing the card design.
   Count-aware modifier class, same pattern already used elsewhere in
   WEB360 for content-count-driven layout (web_projects' adaptive
   presentation, --nN modifier classes). */
.hero-items--n1 .hero-item,
.hero-items--n2 .hero-item {
  min-width: 168px;
  padding: 18px 20px;
}

.hero-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 132px;
  max-width: 200px;
  padding: 16px 18px;
  border-radius: var(--mt-radius-md, 12px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  text-align: left;
}

.hero-item__image {
  width: 36px;
  height: 36px;
  border-radius: var(--mt-radius-sm, 8px);
  object-fit: cover;
}

.hero-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(var(--mt-brand-primary-rgb), 0.18);
  color: var(--mt-brand-primary);
  font-size: 1rem;
}

.hero-item__value {
  font-size: 1.3rem;
  font-weight: var(--mt-weight-bold, 700);
  line-height: 1.1;
  color: var(--mt-text-inverse, #fff);
}

.hero-item__label {
  font-size: 0.78rem;
  font-weight: var(--mt-weight-semibold, 600);
  color: rgba(255, 255, 255, 0.85);
}

.hero-item__caption {
  font-size: 0.74rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}

/* Centered/right-aligned Hero content centers the card group as a
   block but keeps each card's own internal text left-aligned (cards
   read better with left-aligned internal text regardless of the
   Hero's overall alignment — matches how proof badges already behave:
   the GROUP is justified, not each item's internal text). */
.text-center .hero-items { justify-content: center; }
.text-end    .hero-items { justify-content: flex-end; }


/* ----------------------------------------------------------
   EDITORIAL — light canvas recolor (mirrors hero-layouts.css's
   .hero-title etc. treatment for the same reason: this content renders
   on a light background there, not a dark overlay).
---------------------------------------------------------- */
.hero-lyt-editorial .hero-visual {
  border-color: var(--mt-border-default, #e2e8f0);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}
.hero-lyt-editorial .hero-item {
  background: var(--mt-surface-sunken, #f1f5f9);
  border-color: var(--mt-border-default, #e2e8f0);
  backdrop-filter: none;
}
.hero-lyt-editorial .hero-item__value { color: var(--mt-text-heading, #0f172a); }
.hero-lyt-editorial .hero-item__label { color: var(--mt-text-body, #334155); }
.hero-lyt-editorial .hero-item__caption { color: var(--mt-text-muted, #64748b); }


/* ----------------------------------------------------------
   RESPONSIVE — cards wrap naturally (flex-wrap already handles this);
   tighten on small screens so 2 cards per row is the common case
   instead of an uncontrolled single column.
---------------------------------------------------------- */
@media (max-width: 575px) {
  .hero-visual { max-width: 100%; margin: var(--mt-space-8, 28px) 0; }
  .hero-visual__img { max-height: 260px; }
  .hero-items { margin: var(--mt-space-8, 28px) 0; gap: 10px; }
  .hero-item { min-width: 124px; max-width: 46%; padding: 12px 14px; }
  .hero-items--n1 .hero-item,
  .hero-items--n2 .hero-item { min-width: 124px; max-width: 60%; padding: 12px 14px; }
}


/* ----------------------------------------------------------
   REDUCED MOTION
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-visual { animation: none; }
}