/* ============================================================
   "WHAT WE BELIEVE" PANELS — ALTERNATIVE TREATMENTS

   ROUND-ONE FEEDBACK: "I'm not loving the opaque gradient fade at the
   bottom. I'd like to see a few stronger visual approaches for breaking
   out the three categories."

   Three options below. Switch with BROOKS_VALUES_VARIANT in functions.php;
   'comp' keeps the original gradient for side-by-side comparison.

   WHY THEY ALL DROP THE SCRIM RATHER THAN SOFTEN IT
   The comp's gradient is not decorative — it is what holds the label at
   4.51-4.86:1 over a photograph, and the comp's own notes record that a
   uniform overlay light enough to show the photo pushes the label under
   4.5:1. So "make the fade less opaque" is not available: it trades the
   accessibility the design already banked. Every option here instead
   separates text from photograph, which lets the photo run at FULL opacity
   (up from 45%) and puts the type on solid ground where contrast is not a
   negotiation. Stronger pictures and better contrast at the same time.
   ============================================================ */

/* ------------------------------------------------------------------
   A — SPLIT CARD.  Photo on top at full strength, type on solid paper
   below. The most direct answer to the note: there is no overlay at all,
   so there is nothing to fade. Quietest of the three.
   Label --earth-t on --paper = 5.12:1. Body --grey at .78 = 12.6:1.
   ------------------------------------------------------------------ */
.vals--split .val{padding:0;min-height:0;display:block}
.vals--split .val-media{position:relative;inset:auto;aspect-ratio:4/3;overflow:hidden}
.vals--split .val-media img{opacity:1;transform:none}
.vals--split .val-scrim{display:none}
.vals--split .val-in{padding:1.7rem 1.6rem 2rem}
.vals--split .val .rule{margin-bottom:.9rem}
@media(hover:hover){
  .vals--split .val:hover .val-media img{opacity:1;transform:scale(1.04)}
}

/* ------------------------------------------------------------------
   B — PLATE.  Full-bleed photograph with the type in a solid dark plate
   anchored to the foot of the panel. Boldest of the three, and the one
   that treats the photography as the hero.
   --orange on --grey-d = 9.2:1. --paper on --grey-d = 15.8:1. Both are
   comfortably clear of AA, and orange-on-dark is the comp's own rule for
   where orange is allowed.
   ------------------------------------------------------------------ */
.vals--plate .val{padding:0;justify-content:flex-end}
.vals--plate .val-media img{opacity:1}
/* A light foot-shadow only, for separation between plate and photo. It
   carries no text, so it has no contrast obligation. */
.vals--plate .val-scrim{
  background:linear-gradient(180deg,rgba(21,22,22,0) 45%,rgba(21,22,22,.45) 100%);
}
.vals--plate .val-in{
  background:var(--grey-d);color:var(--paper);
  margin:0 1rem 1rem;padding:1.35rem 1.25rem 1.45rem;
  border-left:3px solid var(--orange);
}
.vals--plate .val .rule{display:none}          /* the plate's left edge is the rule */
.vals--plate .val .k{color:var(--orange)}
.vals--plate .val p{color:var(--paper);opacity:.86}
@media(hover:hover){
  .vals--plate .val:hover .val-media img{opacity:1;transform:scale(1.045)}
}

/* ------------------------------------------------------------------
   C — NUMBERED.  Split card plus a large ordinal.
   Recommended, because the new copy argues for it: the header is
   "Safety, Quality, then Production — always in that order", and numbering
   the panels is what makes that order visible instead of asserted. It is
   also the same device the build sequence already uses further down the
   page, so it is not a new idea, it is an existing one reused.
   ------------------------------------------------------------------ */
.vals--numbered{counter-reset:val}
.vals--numbered .val{padding:0;min-height:0;display:block;counter-increment:val}
.vals--numbered .val-media{position:relative;inset:auto;aspect-ratio:4/3;overflow:hidden}
.vals--numbered .val-media img{opacity:1;transform:none}
.vals--numbered .val-scrim{display:none}
.vals--numbered .val-in{padding:1.6rem 1.6rem 2rem;position:relative}
.vals--numbered .val-in::before{
  content:counter(val,decimal-leading-zero);
  display:block;margin-bottom:.5rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;
  color:var(--earth-t);
}
.vals--numbered .val .rule{width:100%;height:1px;background:var(--line-d);margin-bottom:1rem}
.vals--numbered .val .k{margin-bottom:.6rem}
@media(hover:hover){
  .vals--numbered .val:hover .val-media img{opacity:1;transform:scale(1.04)}
  .vals--numbered .val:hover .rule{width:100%}
}

/* Shared: with the photo no longer behind the text, the comp's min-height
   guards on .val p are still what keeps the three labels on one line. */
.vals--split .val p,
.vals--plate .val p,
.vals--numbered .val p{max-width:38ch}