/* ==========================================================
   HERO SPLIT — Full-bleed background, edge-aligned columns
   ========================================================== */

/* Wrapper vertical margins */
.dsr-hero-wrapper.my-none      { margin: 0; }
.dsr-hero-wrapper.my-compact   { margin: 16px 0; }
.dsr-hero-wrapper.my-comfy     { margin: 32px 0; }
.dsr-hero-wrapper.my-spacious  { margin: 56px 0; }

/* Wrapper */
.dsr-hero-wrapper { position: relative; width: 100%; }

/* ---------- Hero shell (content grid) ---------- */
.dsr-hero{
  --dsr-gap: 32px;                      /* controlled from block */
  --dsr-gutter: clamp(16px, 4vw, 64px); /* edge padding on wide screens */

  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dsr-gap, 32px);
  align-items: center;

  /* base padding; wide screens will use gutters */
  padding: 28px var(--dsr-gutter);

  border: 1px solid rgba(15,77,158,.06);
  background: transparent;              /* bg is on ::before */
  overflow: visible;
  z-index: 0;
}

/* Full-viewport background (no side scroll) */
.dsr-hero.th-warm::before{
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);          /* center the 100vw layer */
  width: 100vw;                          /* bleed to edges */
  z-index: -1;
  background: linear-gradient(135deg,#FFE8B3 0%,#FFF5E6 38%,#FFFFFF 88%);
  pointer-events: none;
}

/* Radius options (kept for inner card edge) */
.dsr-hero.rd-16 { border-radius: 16px; }
.dsr-hero.rd-24 { border-radius: 24px; }
.dsr-hero.rd-32 { border-radius: 32px; }

/* ---------- Desktop: push columns to screen edges ---------- */
@media (min-width: 1024px){
  /* Make the grid itself span viewport, while respecting gutters */
  .dsr-hero {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;                    /* edge-to-edge look */
    border-left: none;
    border-right: none;
  }

  .dsr-hero.grid{
    grid-template-columns: 1fr 1fr;      /* equal halves */
    gap: var(--dsr-gap, 40px);
    padding-top: 56px;
    padding-bottom: 56px;
    padding-left: var(--dsr-gutter);
    padding-right: var(--dsr-gutter);
  }

  /* Left text column hugs left; right art hugs right */
  .dsr-hero > div:first-child{
    justify-self: start;
    max-width: 720px;
  }
  .dsr-hero > .dsr-art{
    justify-self: end;
    max-width: 700px;
  }
}

/* ---------- Typography ---------- */
.dsr-eyebrow{
  color:#b45309; font-weight:700; font-size:12px; letter-spacing:.2px;
  margin-bottom: 6px;
}
.dsr-heading{
  margin:.35rem 0 0; font-weight:900; line-height:1.08;
  font-size: clamp(30px, 4.6vw, 58px);
  color:#0b1730;
}

/* Stronger orange accent for a highlighted word inside heading */
.dsr-heading .accent{
  background: linear-gradient(180deg,#ff8a00 0%, #ff5a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dsr-hero__subcopy{
  color:#475569; font-size: clamp(15px, 1.8vw, 18px);
  line-height:1.65; margin-top: 14px; max-width: 640px;
}

/* ---------- CTAs (stronger orange) ---------- */
.dsr-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:24px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 20px; border-radius:14px; text-decoration:none; font-weight:800;
  letter-spacing:.2px; transition: filter .2s, box-shadow .2s, transform .02s;
  border: 1px solid rgba(0,0,0,.06);
}

.btn-primary{
  /* brighter, punchier orange gradient + stronger glow */
  background: linear-gradient(135deg,#ff8a00 0%, #ff5a00 100%);
  color:#fff;
  box-shadow: 0 14px 32px rgba(255,100,20,.30), 0 2px 0 rgba(255,255,255,.6) inset;
}
.btn-primary:hover{ filter:brightness(1.06); }
.btn-primary:active{ transform: translateY(1px); }

.btn-ghost{
  background:#fff;
  color:#1E73BE;                 /* project blue */
  box-shadow: 0 6px 16px rgba(2,6,23,.06);
}

/* ---------- Right “device/card” art panel ---------- */
.dsr-art{
  position: relative;
  height: 320px;
  border-radius: 22px;
  border: 1px solid rgba(15,77,158,.10);
  overflow: hidden;
  box-shadow:
    0 18px 40px rgba(15,77,158,.10),
    0 1px 0 rgba(255,255,255,.75) inset;
}
@media (min-width: 768px){
  .dsr-art{ height: 440px; border-radius: 26px; }
}

/* soft top/bottom bands for the mock device look */
.dsr-art::before,
.dsr-art::after{
  content:"";
  position:absolute; left:0; right:0; filter: blur(18px); pointer-events:none;
}
.dsr-art::before{
  top:-24px; height: 140px;
}
.dsr-art::after{
  bottom:-24px; height: 160px;
}

/* Keep SVG/image rounded */
.dsr-svg, .dsr-img{
  position: relative; width: 100%; height: 100%;
  border-radius: inherit; object-fit: cover;
}
.dsr-svg{ outline: 1px solid rgba(2,6,23,.04); outline-offset:-1px; }
/* 1) compute scrollbar width once */
:root{ --sbw: calc(100vw - 100%); }

/* 2) keep the full-bleed hero without creating overflow */
@media (min-width:1024px){
  .dsr-hero{
    margin-left:  calc(50% - 50vw + var(--sbw)/2);
    margin-right: calc(50% - 50vw + var(--sbw)/2);
  }
}

/* 3) if you keep the ::before background, cap it to the visual viewport */
.dsr-hero.th-warm::before{
  left:50%; transform:translateX(-50%);
  width: calc(100vw - var(--sbw));
}
/* 0) scrollbar width helper so we can go full-bleed without overflow */
:root{ --sbw: calc(100vw - 100%); }

/* 1) Let ONLY the hero wrapper escape WP's constrained container */
:where(.wp-site-blocks, .wp-block-post-content, .entry-content, .is-layout-constrained, .has-global-padding)
  > .dsr-hero-wrapper{
  max-width: none !important;
  width: auto !important;
  /* full-bleed trick, compensated for scrollbar width */
  margin-left:  calc(50% - 50vw + var(--sbw)/2) !important;
  margin-right: calc(50% - 50vw + var(--sbw)/2) !important;
}

/* 2) The hero itself should NOT use viewport margins anymore */
@media (min-width:1024px){
  .dsr-hero{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left:  var(--dsr-gutter);
    padding-right: var(--dsr-gutter);
    box-sizing: border-box;
    border-left: none;  /* keep the clean edge-to-edge look */
    border-right:none;
    border-radius:0;
  }
}

/* 3) Background fills the hero (no 100vw here) */
.dsr-hero.th-warm::before{
  content:"";
  position:absolute;
  inset:0;                /* match the hero’s width exactly */
  background: linear-gradient(135deg,#FFE8B3 0%,#FFF5E6 38%,#FFFFFF 88%);
  z-index:-1;
  pointer-events:none;
}

/* (optional belt-and-suspenders so nothing nudges a scroll) */
.dsr-hero-wrapper{ overflow-x: clip; } /* or hidden if your linter dislikes clip */
/* Make sure the hero itself stretches inside the wrapper */
.dsr-hero{ width:100%; position:relative; z-index:1; }

/* The wrapper is the full-bleed element now — paint the warm bg on it */
.dsr-hero-wrapper{ position:relative; }
.dsr-hero-wrapper.th-warm::before{
  content:"";
  position:absolute;
  inset:0;                 /* fill the whole wrapper */
  background: linear-gradient(135deg,#FFE8B3 0%,#FFF5E6 38%,#FFFFFF 88%);
  pointer-events:none;
  z-index:0;               /* sit behind the hero */
}

/* If you added th-warm on .dsr-hero before, keep it working too */
.dsr-hero.th-warm::before{ content:none; } /* prevent the half-width paint */
/* ==========================================================
   FULL-BLEED HERO — FINAL, no scroll + full warm background
   ========================================================== */

/* scrollbar compensation */
:root{ --sbw: calc(100vw - 100%); }

/* let wrapper break out of WP container and paint bg */
:where(.wp-site-blocks, .wp-block-post-content, .entry-content, .is-layout-constrained, .has-global-padding)
  > .dsr-hero-wrapper{
  position: relative;
  max-width: none !important;
  width: auto !important;
  margin-left:  calc(50% - 50vw + var(--sbw)/2) !important;
  margin-right: calc(50% - 50vw + var(--sbw)/2) !important;
  overflow-x: clip; /* prevent horizontal scroll */
}

/* warm soft background across full width */
.dsr-hero-wrapper::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background: linear-gradient(
    135deg,
    #FFF2DD 0%,   /* light peach start */
    #FFE8B3 25%,  /* warm beige */
    #FFF5E6 55%,  /* creamy white center */
    #FFFFFF 100%  /* white fade out */
  );
}

/* hero content sits above */
.dsr-hero{
  position:relative;
  z-index:1;
  width:100%;
  margin:0;
  padding-left:var(--dsr-gutter);
  padding-right:var(--dsr-gutter);
  border:none;
  border-radius:0;
  box-sizing:border-box;
}

/* remove the old pseudo background */
.dsr-hero.th-warm::before{ content:none !important; }