/* ============================================================
   Hybrid Renovations — Shingle Installation Process (Module 7, Rendition 3)
   --------------------------------------------------------
   Scoped under .hr-spr. Tokens only. No hex/rgb/hsl anywhere
   except ONE documented gradient stop in the closing block, where
   CSS cannot apply alpha to a var-held hex inside a gradient (it
   uses color-mix, already used across this codebase, so even that
   stays token-based). No :root, no @import, no @font-face,
   no added fonts, no JS. Mobile-first.

   Two independent pieces:
   - .hr-spr__rail  : 4-stage photo timeline. Subgrid so the rail
                      row is identical height across stages and the
                      dots line up. Rotates vertical at <=640px.
   - .hr-spr__cards : 6 step cards, 3-across, slate number spine.

   Colour: numbers navy, icons + rail dots blue, the ONE green is
   the closing CTA. Never gradient-mix blue and green.
   ============================================================ */

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

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

/* ---------- Header ---------- */
.hr-spr__head {
  max-width: 760px;
  margin: 0 auto var(--sp-8);
  text-align: center;
}
.hr-spr__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-spr__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-spr__intro {
  font-family: var(--font-sans);
  font-size: var(--fs-lede);
  line-height: var(--lh-relaxed);
  color: var(--hr-body);
  margin: 0;
}

/* ============================================================
   RAIL — photo timeline (4 stages), horizontal by default
   ============================================================ */
.hr-spr__rail {
  list-style: none;
  margin: 0 0 var(--sp-9);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--stage-count, 4), minmax(0, 1fr));
  grid-template-rows: auto 30px auto;   /* image | rail | label */
  column-gap: var(--sp-5);
}
.hr-spr__stage {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;          /* borrow the three parent rows */
  min-width: 0;
}
.hr-spr__stage-img { grid-row: 1; margin: 0; }
.hr-spr__stage-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;                  /* SQUARE at every breakpoint */
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--hr-border);
  box-shadow: var(--shadow-md);
  background: var(--hr-surface-alt);
}
/* Empty stage image keeps the square so the rail never collapses. */
.hr-spr__stage-img:empty,
.hr-spr__stage-img:not(:has(img)) {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  border: 1px solid var(--hr-border);
  background: var(--hr-surface-alt);
}

.hr-spr__stage-rail { grid-row: 2; position: relative; }
/* Connector: THIS dot centre to the NEXT dot centre, across the gap. */
.hr-spr__stage-rail::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + var(--sp-5));
  height: 2px;
  transform: translateY(-50%);
  background: var(--hr-border-strong);
  z-index: 0;
}
.hr-spr__stage:last-child .hr-spr__stage-rail::before { display: none; }
/* The dot sits ON TOP of the line. */
.hr-spr__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--hr-surface);
  border: 3px solid var(--hr-blue);
  box-shadow: 0 0 0 4px var(--hr-bg);   /* halo punches through the line */
}

.hr-spr__stage-lbl { grid-row: 3; text-align: center; }
.hr-spr__stage-lbl b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--hr-navy);
}
.hr-spr__stage-lbl em {
  display: block;
  margin-top: var(--sp-1);
  font-style: normal;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  line-height: var(--lh-base);
  color: var(--hr-text-muted);
}

/* Fallback: no subgrid. Flex column with a fixed 30px rail row.
   Square images are equal height, so the dots still align. */
@supports not (grid-template-rows: subgrid) {
  .hr-spr__stage {
    display: flex;
    flex-direction: column;
  }
  .hr-spr__stage-rail { height: 30px; flex: 0 0 30px; }
}

/* ---------- Rail rotates 90deg at <=640px ---------- */
@media (max-width: 640px) {
  .hr-spr__rail {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 0;
  }
  .hr-spr__stage {
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: var(--sp-4);
    align-items: start;
    padding-bottom: var(--sp-6);
  }
  .hr-spr__stage-rail {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: stretch;
  }
  /* Vertical connector: from this dot's centre, through the photo,
     all the way INTO the next dot's centre, so the line is unbroken
     at every stage boundary. The connector starts at the dot centre
     (top:12px), so reaching the next dot centre needs the full cell
     height plus the inter-stage gap: 100% + sp-6. The next dot sits
     on top (z-index 2) and hides the overlap. (An earlier draft used
     100% + sp-6 - 12px, which stopped 12px short and left a hairline
     gap the dot didn't fully cover.) */
  .hr-spr__stage-rail::before {
    top: 12px;
    left: 50%;
    width: 2px;
    height: calc(100% + var(--sp-6));
    transform: translateX(-50%);
  }
  .hr-spr__stage:last-child .hr-spr__stage-rail::before { display: none; }
  .hr-spr__dot { top: 12px; left: 50%; transform: translate(-50%, -50%); }
  .hr-spr__stage-lbl {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    padding-bottom: var(--sp-3);
  }
  .hr-spr__stage-lbl b { font-size: var(--fs-body); }
  .hr-spr__stage-img { grid-column: 2; grid-row: 2; }
  /* Fallback stages go back to grid at this width. */
  @supports not (grid-template-rows: subgrid) {
    .hr-spr__stage { display: grid; }
    .hr-spr__stage-rail { height: auto; flex: none; }
  }
}

/* ============================================================
   STEP CARDS — 6 steps, slate number spine
   ============================================================ */
.hr-spr__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 640px) {
  .hr-spr__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .hr-spr__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.hr-spr__card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  background: var(--hr-surface);
  border: 1px solid var(--hr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.hr-spr__card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* The spine is SLATE, not navy. */
.hr-spr__side {
  background: var(--hr-surface-alt);
  border-right: 1px solid var(--hr-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
}
.hr-spr__side b {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--hr-navy);
}
.hr-spr__side svg { width: 19px; height: 19px; color: var(--hr-blue); }

.hr-spr__card-body { padding: var(--sp-6); }
.hr-spr__card-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--hr-navy);
  margin: 0 0 var(--sp-3);
}
.hr-spr__card-text {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--hr-body);
}
.hr-spr__card-text p { margin: 0; }
.hr-spr__card-text b,
.hr-spr__card-text strong { color: var(--hr-text-strong); font-weight: var(--fw-bold); }

/* ============================================================
   CLOSING BLOCK — navy, optional background photo
   ============================================================ */
.hr-spr__close {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: var(--sp-9);
  background: var(--hr-navy);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 40px);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
}
@media (min-width: 768px) {
  .hr-spr__close {
    grid-template-columns: 1.5fr 1fr;
    gap: var(--sp-7);
  }
}
.hr-spr__close-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Contrast guardrail: keeps the LEFT side (where the text lives)
   darkest regardless of the photo. The transparent stop is the one
   place alpha on a token hex is unavoidable; color-mix keeps it
   token-based. No background-attachment: fixed (janks on iOS). */
.hr-spr__close.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(--close-tint, 0.90);
}
.hr-spr__close-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-3);
}
.hr-spr__close-text {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  /* Softer than pure white on navy (the prompt's #C7D2DC), kept
     token-based via color-mix. ~#CAD0D4, clears 4.5:1 on navy with
     the guardrail behind it. */
  color: color-mix(in srgb, var(--hr-text-on-color) 78%, var(--hr-navy));
  margin: 0;
}
.hr-spr__close-r {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}
@media (min-width: 768px) {
  .hr-spr__close-r { align-items: flex-end; text-align: right; }
}
.hr-spr__close-note {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--hr-text-on-color);
}

/* The one green: the closing CTA. Navy text on green clears contrast. */
.hr-spr__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--hr-green);
  color: var(--hr-navy);
  border: 1px solid var(--hr-green);
  font-family: var(--font-display);
  font-size: var(--fs-button);
  font-weight: var(--fw-bold);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.hr-spr__btn,
.hr-spr__btn:hover,
.hr-spr__btn:focus,
.hr-spr__btn:active { color: var(--hr-navy); text-decoration: none; }
.hr-spr__btn:hover,
.hr-spr__btn:focus,
.hr-spr__btn:active { background: var(--hr-green-700); border-color: var(--hr-green-700); }
.hr-spr__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus-green); }
.hr-spr__btn-arrow { flex: 0 0 auto; transition: transform var(--dur) var(--ease-out); }
.hr-spr__btn:hover .hr-spr__btn-arrow { transform: translateX(3px); }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hr-spr__card,
  .hr-spr__btn,
  .hr-spr__btn-arrow { transition: none !important; }
  .hr-spr__card:hover { transform: none !important; }
  .hr-spr__btn:hover .hr-spr__btn-arrow { transform: none !important; }
}

/* ---------- Background color options (bottom-of-module control) ---------- */
.hr-spr.is-bg-white { background: var(--hr-surface); }
.hr-spr.is-bg-soft  { background: var(--hr-bg); }
.hr-spr.is-bg-blue  { background: var(--hr-blue-50); }
.hr-spr.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-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);
}