/* ============================================================
   Hybrid Renovations — Shingle Comparison (Architectural vs 3-Tab)
   --------------------------------------------------------
   Scoped under .hr-sc. Tokens only: no root block, no imports, no
   font-face, no added fonts. The only hex in the file is the
   pre-existing .is-bg-navy token remap at the bottom (the shared
   bg_color control), which needs literal light-on-dark values.
   The reco tint uses color-mix() rather than a raw rgba().

   EQUAL-HEIGHT CARDS (the point of this layout):
   The parent .hr-sc__grid owns every row track. Both cards adopt
   those tracks with grid-template-rows:subgrid, and the <dl> nests
   a second subgrid for the spec rows. Every track sizes to the
   tallest content across BOTH cards, so a value that wraps to two
   lines on one side lifts the matching row on the other side and
   the two cards stay identical in height with every row aligned.
   Track count comes from --spec-count (set inline from the repeater
   length), and the specs/foot are placed with negative line numbers
   so they stay correct for any number of rows without calc().
   ============================================================ */

.hr-sc {
  background: var(--hr-bg);
  padding: var(--section-y) 0;
}
.hr-sc *,
.hr-sc *::before,
.hr-sc *::after { box-sizing: border-box; }

.hr-sc__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Visually-hidden helper */
.hr-sc__sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Header ---------- */
.hr-sc__head {
  max-width: 780px;
  margin: 0 auto var(--sp-8);
  text-align: center;
}
.hr-sc__eyebrow {
  display: block;
  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-blue);
  margin-bottom: var(--sp-3);
}
.hr-sc__h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  color: var(--hr-navy);
  margin: 0 0 var(--sp-4);
}
.hr-sc__intro {
  font-family: var(--font-sans);
  font-size: var(--fs-lede);
  line-height: var(--lh-relaxed);
  color: var(--hr-body);
}
.hr-sc__intro p { margin: 0; }
.hr-sc__intro p + p { margin-top: var(--sp-3); }

/* ============================================================
   Two-up card grid + subgrid row tracks
   ============================================================ */
.hr-sc__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  max-width: 1000px;
  margin: 0 auto;
  /* image, head, one track per spec row, foot */
  grid-template-rows: auto auto repeat(var(--spec-count, 5), auto) auto;
}
.hr-sc__card {
  display: grid;
  grid-row: 1 / -1;            /* the card spans every parent track */
  grid-template-rows: subgrid; /* and adopts their heights */
  background: var(--hr-surface);
  border: 1px solid var(--hr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.hr-sc__card-img { grid-row: 1; }
.hr-sc__card-head { grid-row: 2; }
.hr-sc__specs {
  grid-row: 3 / -2;            /* every spec track, whatever the count */
  display: grid;
  grid-template-rows: subgrid; /* so the rows align across both cards */
  margin: 0;
}
.hr-sc__card-foot { grid-row: -2 / -1; }   /* the last track */

/* Recommended card sits slightly proud. The 2px border vs 1px makes it
   marginally taller overall, which is intentional; subgrid keeps the
   ROWS aligned regardless. */
.hr-sc__card.is-recommended {
  border: 2px solid var(--hr-blue);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.hr-sc__card.is-recommended::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: var(--hr-blue);
  z-index: 3;
}

/* ---------- Card image ---------- */
.hr-sc__card-img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  -webkit-tap-highlight-color: transparent;
}
.hr-sc__ph {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--hr-blue) 16%, var(--hr-surface)),
    color-mix(in srgb, var(--hr-navy) 12%, var(--hr-surface)));
}

/* ---------- Card head ---------- */
.hr-sc__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-5);
  border-bottom: 1px solid var(--hr-divider);
}
.hr-sc__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--hr-text-strong);
}
.hr-sc__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--hr-blue);
  color: var(--hr-text-on-color);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--fw-extrabold);
  /* line-height:1 keeps the pill the same height as the title beside it.
     Left at the inherited 1.55 the pill is the tallest thing in the head,
     and align-items:center then pushes the title down off its padding. */
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hr-sc__pill--ghost {
  background: var(--hr-surface-alt);
  color: var(--hr-text-muted);
}

/* ---------- Spec rows ---------- */
.hr-sc__spec {
  /* 6px, not a --sp step: the divider-to-label gap is padding + the
     label's own leading, and 6 is what lands that visible gap at ~5.5px
     (half of what --sp-2 gave). Matches the raw-px geometry already
     used by the pill. */
  padding: 6px var(--sp-5);
  border-bottom: 1px solid var(--hr-divider);
}
/* The last spec row needs no rule: the card foot's background change is
   the divider. A line there would just double it up. */
.hr-sc__spec:last-child { border-bottom: 0; }
.hr-sc__spec-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--fw-extrabold);
  /* line-height:1 so the label's box hugs the glyphs. At the inherited
     1.55 it carries ~3px of dead leading above the text, which reads as
     extra gap under the divider on top of every row. */
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hr-text-subtle);
}
.hr-sc__spec-icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--hr-blue);
}
.hr-sc__spec-value {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-base);
  color: var(--hr-body);
}
.hr-sc__spec-value p { margin: 0; }
/* <b> = the headline value, on its own line. <strong> = ordinary
   emphasis inside a sentence (what the richtext editor produces). */
.hr-sc__spec-value b {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--hr-text-strong);
}
.hr-sc__spec-value strong {
  font-weight: var(--fw-bold);
  color: var(--hr-text-strong);
}

/* ---------- Card foot ---------- */
.hr-sc__card-foot {
  padding: var(--sp-5);
  background: var(--hr-surface-alt);
}
.hr-sc__card.is-recommended .hr-sc__card-foot { background: var(--hr-blue-50); }
.hr-sc__foot-label {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--fw-extrabold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hr-text-subtle);
}
.hr-sc__foot-text {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-base);
  color: var(--hr-text);
}
.hr-sc__foot-text p { margin: 0; }

/* ---------- Subgrid fallback ----------
   Subgrid ships in all current evergreen browsers, so this is a
   safety net rather than a real target. Fixed row minimums get the
   two cards near-identical without subgrid. */
@supports not (grid-template-rows: subgrid) {
  .hr-sc__card { display: flex; flex-direction: column; }
  .hr-sc__specs { flex: 1; display: flex; flex-direction: column; }
  .hr-sc__spec { min-height: 104px; }   /* label + two lines of value */
  .hr-sc__card-foot { margin-top: auto; }
}

/* ============================================================
   Recommendation block: optional photo under a navy tint
   ============================================================ */
.hr-sc__reco {
  position: relative;
  isolation: isolate;          /* keeps the -z children inside the panel */
  overflow: hidden;
  background: var(--hr-navy);  /* the no-image default, unchanged */
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px);
  max-width: 1000px;
  margin: var(--sp-8) auto 0;
}
.hr-sc__reco-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Flat tint + a permanent left-dark gradient, so the copy side stays the
   darkest part of the panel no matter what photo is behind it. */
.hr-sc__reco.has-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      var(--hr-navy) 0%,
      color-mix(in srgb, var(--hr-navy) 55%, transparent) 100%),
    var(--hr-navy);
  opacity: var(--reco-tint, .90);
}
.hr-sc__reco-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
.hr-sc__rec-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--hr-text-on-color);
  margin: 0 0 var(--sp-4);
}
.hr-sc__rec-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--hr-text-on-color);
  opacity: 0.92;
  margin: 0;
}
.hr-sc__rec-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--hr-text-on-color);
  opacity: 0.85;
  margin-bottom: var(--sp-3);
}
.hr-sc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--hr-green);
  color: var(--hr-text-on-color);
  border: 1px solid var(--hr-green);
  font-family: var(--font-display);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  /* line-height:1 makes the label's box hug the glyphs. At the inherited
     1.55 the box carries ~8px of leading, so centering the arrow against
     that box lands it below the letters' optical centre. */
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.hr-sc__btn > span { display: block; }
.hr-sc__btn,
.hr-sc__btn:hover,
.hr-sc__btn:focus,
.hr-sc__btn:active {
  color: var(--hr-text-on-color);
  text-decoration: none;
}
.hr-sc__btn:hover,
.hr-sc__btn:focus,
.hr-sc__btn:active {
  background: var(--hr-green-700);
  border-color: var(--hr-green-700);
}
.hr-sc__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hr-sc__btn-arrow { flex: 0 0 auto; transition: transform var(--dur) var(--ease-out); }
.hr-sc__btn:hover .hr-sc__btn-arrow { transform: translateX(3px); }

/* ============================================================
   Mobile — 880px and down: stack, and RELEASE the shared tracks.
   Once the cards are stacked, equal heights only create dead space.
   ============================================================ */
@media (max-width: 880px) {
  .hr-sc__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .hr-sc__card {
    grid-row: auto;
    display: flex;
    flex-direction: column;
  }
  .hr-sc__specs { display: block; }
  .hr-sc__spec { min-height: 0; }
  .hr-sc__card-foot { margin-top: auto; }

  .hr-sc__reco-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .hr-sc__rec-cta { text-align: left; }
}
@media (min-width: 881px) {
  .hr-sc__btn { width: auto; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hr-sc *,
  .hr-sc *::before,
  .hr-sc *::after { transition: none !important; animation: none !important; }
  .hr-sc__btn:hover .hr-sc__btn-arrow { transform: none; }
}

/* ---------- Background color options (bottom-of-module control) ---------- */
.hr-sc.is-bg-white { background: var(--hr-surface); }
.hr-sc.is-bg-soft  { background: var(--hr-bg); }
.hr-sc.is-bg-blue  { background: var(--hr-blue-50); }
.hr-sc.is-bg-navy {
  background: var(--hr-navy);
  color: #fff;
  --hr-surface: color-mix(in srgb, #fff 9%, var(--hr-navy));
  --hr-bg: color-mix(in srgb, #fff 6%, var(--hr-navy));
  --hr-surface-alt: color-mix(in srgb, #fff 13%, var(--hr-navy));
  --hr-border: rgba(255, 255, 255, .16);
  --hr-border-strong: rgba(255, 255, 255, .30);
  --hr-divider: rgba(255, 255, 255, .14);
  --hr-text-strong: #fff;
  --hr-text: rgba(255, 255, 255, .92);
  --hr-body: rgba(255, 255, 255, .82);
  --hr-text-muted: rgba(255, 255, 255, .66);
  --hr-text-subtle: rgba(255, 255, 255, .45);
  --hr-blue: #79b4ec;
  --hr-blue-700: #9ecbf5;
  --hr-blue-50: rgba(121, 180, 236, .16);
  --hr-green: #a6d96a;
  --hr-green-700: #a6d96a;
  --hr-green-50: rgba(140, 198, 63, .18);
}