/* ==========================================================================
   .models-intro__heading — the rod-divider section title

   "Compare Models" above the compare table (includes/compare-table.php) and
   the model gallery wall's title (includes/model-gallery.php): an uppercase
   label flanked by two tapered glass rods. One rule for every page that
   renders either, so it lives in its own sheet — the ten model detail pages
   and /gallery load this instead of the 90 KB hub sheet (models-bg.css) it
   used to sit in, which Lighthouse measured 96% unused on /ultra144
   (docs/media-performance.md, "Phase 1"). The four family hubs load both.
   ========================================================================== */

.models-intro__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 2vw, 1.5rem);
  margin: 0 0 clamp(0.85rem, 1.7vw, 1.35rem);
  text-transform: uppercase;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2em;
  color: var(--theme-text-strong);
}

/* Flanking rules as glass rods: a vertical gloss (bright top → dim core → faint
   base) masked to fade out to transparent at the outer ends, and clip-tapered so
   they also narrow from the inner (text) end out. Each pseudo flexes to fill its
   half so the label stays centered. */
.models-intro__heading::before,
.models-intro__heading::after {
  content: "";
  flex: 1 1 auto;
  height: 4px;
  /* Wedge: full height at the inner (text) end, narrowing to ~2px at the outer
     end. This is the left rule; the right rule mirrors it below. */
  -webkit-clip-path: polygon(0% 25%, 100% 0%, 100% 100%, 0% 75%);
  clip-path: polygon(0% 25%, 100% 0%, 100% 100%, 0% 75%);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.15) 45%,
    rgba(255, 255, 255, 0.3) 100%
  );
  -webkit-mask-image: linear-gradient(to right, transparent, #000);
  mask-image: linear-gradient(to right, transparent, #000);
}