/*
 * Redesign block — Final CTA ("Let's Get Your Door Working Again").
 * Replaces the current <section class="rd-final-cta"> in footer.php.
 *
 * Scoped entirely to "rd-cta2-" prefixed classes so it never collides with
 * the existing ".rd-final-cta" component still live in redesign.css.
 *
 * Colors reuse the shared theme variables defined in assets/css/redesign.css
 * (:root) — var(--rd-red), var(--rd-ink), var(--rd-paper) — this file
 * assumes that stylesheet is already loaded on the page.
 *
 * The only hard-coded colors in this file are the black/red gradient stops
 * used for the photo scrim (.rd-cta2::before). Per the block brief these are
 * allowed as long as they are documented:
 *   #050505 / #0a0303 — near-black, darker than --rd-ink (#212529) on
 *     purpose, to match how black the mockup's CTA band actually is
 *     (pixel-sampled from mockup-home-desktop.jpeg: background reads
 *     ~ (1,1,1)-(20,15,18), not the theme's lighter charcoal token).
 *   rgba(120,6,20,.6) / rgba(90,4,14,.35) — dark red glow, mixed from the
 *     mockup's red family (~#C10A20) darkened for a background glow rather
 *     than a flat fill.
 *
 * Layout primitives re-used from redesign.css on purpose (not redefined
 * here): .rd-wrap (page container), .rd-btn / .rd-btn-red (button
 * component, so the CTA button matches every other red button on the site).
 */

.rd-cta2{
  position:relative;
  background-color:var(--rd-ink); /* fallback while the photo loads */
  background-repeat:no-repeat;
  background-size:cover;
  background-position:right center;
  overflow:hidden;
  padding-block:clamp(56px,7vw,96px);
}

/* black → dark red scrim over the photo; keeps the left (copy) side fully
   opaque and lets the photo/red glow show only on the right, behind the
   badge/phone/button column — this is where the mockup's photo is visible. */
.rd-cta2::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    100deg,
    #050505 0%,
    #050505 40%,
    rgba(9,3,4,0.88) 54%,
    rgba(120,6,20,0.55) 70%,
    rgba(90,4,14,0.32) 86%,
    rgba(10,2,3,0.12) 100%
  );
  z-index:1;
}

.rd-cta2-inner{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
  flex-wrap:wrap;
}

/* ---------- copy (left) ---------- */
.rd-cta2-copy{
  flex:1 1 380px;
  max-width:520px;
}
.rd-cta2-heading{
  margin:0;
  font-family:'Oswald', sans-serif;
  font-weight:700;
  text-transform:uppercase;
  color:var(--rd-paper);
  font-size:clamp(1.7rem,3.1vw,2.5rem);
  line-height:1.18;
}
.rd-cta2-accent{color:var(--rd-red);}
.rd-cta2-sub{
  margin:14px 0 0;
  color:var(--rd-paper);
  opacity:0.72;
  max-width:46ch;
  font-size:0.98rem;
  line-height:1.65;
}

/* ---------- actions (right): badge · phone/button ---------- */
.rd-cta2-actions{
  position:relative;
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  padding-left:32px;
}
.rd-cta2-actions::before{
  content:"";
  position:absolute;
  left:0; top:4px; bottom:4px;
  width:1px;
  background:var(--rd-paper);
  opacity:0.16;
}

/* circular "Proudly Canadian" badge */
.rd-cta2-badge{
  position:relative;
  flex:none;
  width:100px;
  height:100px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:8px;
}
.rd-cta2-badge-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid var(--rd-red);
  opacity:0.55;
}
.rd-cta2-badge-leaf{
  width:20px;
  height:20px;
  fill:var(--rd-red);
  margin-bottom:4px;
}
.rd-cta2-badge-text{
  font-family:'Oswald', sans-serif;
  font-weight:700;
  font-size:0.64rem;
  line-height:1.25;
  letter-spacing:0.01em;
  text-transform:uppercase;
  color:var(--rd-paper);
  white-space:nowrap;
}
.rd-cta2-badge-sub{
  display:block;
  margin-top:3px;
  font-size:0.46rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--rd-paper);
  opacity:0.55;
  white-space:nowrap;
}

/* phone + button column */
.rd-cta2-contact{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.rd-cta2-phone{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none !important;
  color:var(--rd-paper) !important;
  font-family:'Oswald', sans-serif;
  font-weight:700;
  font-size:1.15rem;
  white-space:nowrap;
  transition:opacity .15s ease;
}
.rd-cta2-phone:hover{opacity:0.8;}
.rd-cta2-phone-icon{
  width:20px;
  height:20px;
  flex:none;
  color:var(--rd-paper);
}
/* Assembly fix 2026-07-29: the mockup sets this button in caps. Scoped to the
   final-CTA button only — the shared .rd-btn keeps text-transform:none, so
   buttons elsewhere on the site are untouched. */
.rd-cta2-btn{
  white-space:nowrap;
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:0.03em;
}

/* =========================================================================
   Responsive — breakpoints match the theme (991 / 767 / 560)
   ========================================================================= */

@media (max-width:991px){
  .rd-cta2-inner{flex-direction:column; align-items:flex-start;}
  .rd-cta2-actions{
    width:100%;
    padding-left:0;
    justify-content:flex-start;
  }
  .rd-cta2-actions::before{display:none;}
}

@media (max-width:767px){
  .rd-cta2{
    background-position:center bottom;
    padding-bottom:clamp(90px,24vw,130px);  /* QA bug-03: was 150-230px of dead black */
  }
  .rd-cta2::before{
    background:linear-gradient(
      180deg,
      #050505 0%,
      #050505 50%,
      rgba(9,3,4,0.85) 62%,
      rgba(120,6,20,0.5) 76%,
      rgba(90,4,14,0.28) 90%,
      rgba(10,2,3,0.12) 100%
    );
  }
  .rd-cta2-badge{display:none;}
  .rd-cta2-actions{padding-left:0; gap:14px; width:100%;}
  .rd-cta2-contact{flex-direction:column; align-items:stretch; width:100%; gap:12px;}
  .rd-cta2-phone{
    justify-content:center;
    background:var(--rd-paper);
    color:var(--rd-ink) !important;
    border-radius:8px;
    padding:14px 18px;
    font-size:1.05rem;
    width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  .rd-cta2-phone-icon{color:var(--rd-ink);}
  .rd-cta2-btn{width:100%; min-width:0; box-sizing:border-box;}
}

@media (max-width:560px){
  .rd-cta2{padding-block:44px clamp(80px,26vw,110px);  /* QA bug-03 */}
  .rd-cta2-heading{font-size:1.55rem;}
  .rd-cta2-sub{font-size:0.92rem;}
}