/* ============================================================
   Kitchen Reasons Strip — scoped styles.
   ------------------------------------------------------------
   Tokens only — no rgba literals and no hex. Every alpha is a
   color-mix over a token.

   The cards are DARK glass. How open they are and how much they
   blur are both editor fields now, arriving as --card-op and
   --card-blur on the section; the values here are only fallbacks.

   Keeping the pane DARK rather than white is what lets it go this
   open at all: a white pane takes most of its colour from the
   photo, so the cards would drift lighter every time the tint came
   down. See-through and tint trade against each other, and the
   safe pairings are written into the card_opacity help text.
   ============================================================ */

.hr-krs {
  /* The card is a DARK glass, not a light one. That distinction is the whole
     trick: the original 8% white pane took most of its colour from whatever
     was behind it, so the cards drifted lighter every time the tint came down.
     A dark pane at 65% still takes only 35% of its colour from the photo, so
     the kitchen reads clearly through it while the card holds its weight
     across the whole tint range. */
  --card-solid: color-mix(in srgb, var(--hr-navy) 60%, var(--hr-text-strong));
  /* Both overridden inline from the fields; these are the fallbacks. */
  --card-op: 40%;
  --card-blur: 12px;
  --card-bg: color-mix(in srgb, var(--card-solid) var(--card-op), transparent);
  --card-bg-hover: color-mix(in srgb, var(--hr-green) 10%, var(--card-bg));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--hr-navy);      /* also the no-image fallback */
  padding: var(--sp-8) 0;
}
.hr-krs *,
.hr-krs *::before,
.hr-krs *::after { box-sizing: border-box; }

.hr-krs__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}
/* Flat, even, never a gradient. The opacity here is only a fallback — the
   live value is written inline from the overlay_strength field (20%–90%). */
.hr-krs__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background: var(--hr-navy);
  opacity: 0.9;
}

.hr-krs__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ---------- Head ---------- */
.hr-krs__head { margin-bottom: var(--sp-8); }
.hr-krs__eyebrow {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hr-green);
}
.hr-krs__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--fs-h3), 3.2vw, var(--fs-h2));
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--hr-text-on-color);
}
.hr-krs__lede {
  margin: var(--sp-3) 0 0;
  max-width: 58ch;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: color-mix(in srgb, var(--hr-text-on-color) 85%, transparent);
}

/* ---------- Cards ---------- */
.hr-krs__grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--sp-6);
  row-gap: var(--sp-7);
}
/* Dark glass: the photo reads faintly through the pane and a light blur softens
   it, while the card stays visually stable across the whole tint range.

   Blur scales with transparency: at 35% see-through there is far more photo
   detail landing behind the text, and 12px softens it enough to keep the copy
   comfortable while the shapes behind stay readable as a kitchen.

   Never transition backdrop-filter; it is expensive to animate. Only the
   colours and the shadow move on hover. */
.hr-krs__card {
  position: relative;
  min-width: 0;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(var(--card-blur)) saturate(125%);
  backdrop-filter: blur(var(--card-blur)) saturate(125%);
  border: 1px solid color-mix(in srgb, var(--hr-text-on-color) 22%, transparent);
  box-shadow: var(--shadow-lg);
  /* --dur-fast, not --dur. The light hands from one card to the next in a
     single frame, but a 220ms crossfade meant the outgoing glow was still
     visibly fading while the incoming one came up, which reads as two cards
     lit at once. Halving it makes the handover look like what it is. */
  transition: background-color var(--dur-fast, 140ms) var(--ease-out),
              border-color var(--dur-fast, 140ms) var(--ease-out),
              box-shadow var(--dur-fast, 140ms) var(--ease-out);
}
/* Without the blur, an 18% window onto a busy photo reads as noise rather than
   glass, so unsupported browsers get the same colour fully opaque instead. */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .hr-krs__card { background: var(--card-solid); }
}
.hr-krs__num {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-5);
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: color-mix(in srgb, var(--hr-text-on-color) 9%, transparent);
  pointer-events: none;
}
.hr-krs__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--sp-5);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--hr-green) 18%, transparent);
  color: var(--hr-green);
  transition: background-color var(--dur-fast, 140ms) var(--ease-out),
              box-shadow var(--dur-fast, 140ms) var(--ease-out);
}
.hr-krs__ic svg { width: 24px; height: 24px; display: block; }
.hr-krs__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  color: var(--hr-text-on-color);
}
.hr-krs__desc {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm, var(--fs-small));
  line-height: 1.6;
  color: color-mix(in srgb, var(--hr-text-on-color) 78%, transparent);
}

/* Hover: a green light washing over the card. Still colour only — no
   transform, no lift. The glow is a green outer shadow plus a green rim and a
   faint green wash through the fill, so the whole card lights rather than just
   its edge. The resting --shadow-lg is kept underneath so the panel does not
   appear to flatten as the glow comes up. */
/* .is-active is set by module.js on phones: the card taking up most of the
   screen lights, and the light moves as the next one scrolls up. Touch has
   no hover, so without it the glow was a state a phone could never reach. */
.hr-krs__card:hover,
.hr-krs__card.is-active {
  background: var(--card-bg-hover);
  border-color: color-mix(in srgb, var(--hr-green) 60%, transparent);
  box-shadow: var(--shadow-lg),
              0 0 0 1px color-mix(in srgb, var(--hr-green) 30%, transparent),
              0 8px 34px -6px color-mix(in srgb, var(--hr-green) 40%, transparent);
}
.hr-krs__card:hover .hr-krs__ic,
.hr-krs__card.is-active .hr-krs__ic {
  background: color-mix(in srgb, var(--hr-green) 30%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--hr-green) 12%, transparent);
}

/* ---------- Tablet: two across ----------
   The blur runs at every width. It is small enough not to be worth a mobile
   opt-out, and at one card per row only a couple are ever on screen at once. */
@media (min-width: 640px) {
  .hr-krs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-krs__num { font-size: 54px; }
}

/* ---------- Desktop: four across ---------- */
@media (min-width: 1024px) {
  .hr-krs { padding: var(--section-y) 0; }
  .hr-krs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Reduced motion ----------
   Only the transitions go; the hover colours still apply instantly. */
@media (prefers-reduced-motion: reduce) {
  .hr-krs__card,
  .hr-krs__ic { transition: none !important; }
}