/* =========================================================
   Hero-Text-Breadcrumb (Reusable Hero Module)
   Size variants:
     - Hero-Text-Breadcrumb-0  (XL / larger than -1)
     - Hero-Text-Breadcrumb-1  (largest standard)
     - Hero-Text-Breadcrumb-2  (medium)
     - Hero-Text-Breadcrumb-3  (small)
     - Hero-Text-Breadcrumb-4  (smaller)
     - Hero-Text-Breadcrumb-5  (smallest)
   Backwards compatible: "Hero-Text-Breadcrumb" behaves like -1
   ========================================================= */

/* ---------- Base (shared) ---------- */
.Hero-Text-Breadcrumb,
.Hero-Text-Breadcrumb-0,
.Hero-Text-Breadcrumb-1,
.Hero-Text-Breadcrumb-2,
.Hero-Text-Breadcrumb-3,
.Hero-Text-Breadcrumb-4,
.Hero-Text-Breadcrumb-5{
  /* Change per page via inline style:
     style="--hero-bg:url('images/...')" */
  --hero-bg: url("images/background/bg-hero.jpg");

  /* Palette */
  --hero-yellow: #ffd600;
  --hero-text: rgba(255,255,255,.92);
  --hero-muted: rgba(255,255,255,.72);

  /* Sizing (set by variant below) */
  --hero-min-height: 56vh;
  --hero-max-height: 760px;
  --hero-pad-y: 56px;

  /* Spacing scale (set by variant below) */
  --hero-crumb-mb: 14px;
  --hero-title-mb: 10px;
  --hero-desc-mb: 18px;

  /* Typography scale (set by variant below) */
  --hero-title-size: clamp(34px, 5vw, 52px);
  --hero-desc-size: 16px;

  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  min-height: var(--hero-min-height);
  max-height: var(--hero-max-height);
  padding: var(--hero-pad-y) 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #000;
  isolation: isolate;
}

/* ---------- Size Variants ---------- */
/* XL (bigger than -1) */
.Hero-Text-Breadcrumb-0{
  --hero-min-height: 64vh;
  --hero-max-height: 880px;
  --hero-pad-y: 70px;

  --hero-crumb-mb: 16px;
  --hero-title-mb: 12px;
  --hero-desc-mb: 22px;

  --hero-title-size: clamp(38px, 5.6vw, 62px);
  --hero-desc-size: 17px;
}

/* Largest standard */
.Hero-Text-Breadcrumb,
.Hero-Text-Breadcrumb-1{
  --hero-min-height: 56vh;
  --hero-max-height: 760px;
  --hero-pad-y: 56px;

  --hero-crumb-mb: 14px;
  --hero-title-mb: 10px;
  --hero-desc-mb: 18px;

  --hero-title-size: clamp(34px, 5vw, 52px);
  --hero-desc-size: 16px;
}

/* Medium */
.Hero-Text-Breadcrumb-2{
  --hero-min-height: 44vh;
  --hero-max-height: 640px;
  --hero-pad-y: 42px;

  --hero-crumb-mb: 10px;
  --hero-title-mb: 8px;
  --hero-desc-mb: 14px;

  --hero-title-size: clamp(30px, 4.6vw, 46px);
  --hero-desc-size: 15px;
}

/* Small */
.Hero-Text-Breadcrumb-3{
  --hero-min-height: 34vh;
  --hero-max-height: 520px;
  --hero-pad-y: 32px;

  --hero-crumb-mb: 8px;
  --hero-title-mb: 6px;
  --hero-desc-mb: 12px;

  --hero-title-size: clamp(26px, 4.2vw, 40px);
  --hero-desc-size: 14px;
}

/* Smaller */
.Hero-Text-Breadcrumb-4{
  --hero-min-height: 26vh;
  --hero-max-height: 420px;
  --hero-pad-y: 20px;

  --hero-crumb-mb: 6px;
  --hero-title-mb: 4px;
  --hero-desc-mb: 20px;

  --hero-title-size: clamp(42px, 3.8vw, 34px);
  --hero-desc-size: 13px;
}

/* Smallest */
.Hero-Text-Breadcrumb-5{
  --hero-min-height: 20vh;
  --hero-max-height: 360px;
  --hero-pad-y: 16px;

  --hero-crumb-mb: 6px;
  --hero-title-mb: 5px;
  --hero-desc-mb: 9px;

  --hero-title-size: clamp(20px, 3.4vw, 30px);
  --hero-desc-size: 12px;
}

/* ---------- Background image layer ---------- */
.Hero-Text-Breadcrumb__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .55;
  transform: scale(1.04);
  filter: saturate(1.10) contrast(1.10);
}

/* ---------- Readability overlay ---------- */
.Hero-Text-Breadcrumb__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(900px 520px at 10% 20%, rgba(255,214,0,.18), transparent 60%),
    radial-gradient(900px 520px at 86% 35%, rgba(5,42,143,.28), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.92));
}

/* ---------- Content wrapper ---------- */
.Hero-Text-Breadcrumb__inner{
  position: relative;
  z-index: 2;
  max-width: 980px;
}

/* ---------- Breadcrumbs ---------- */
.Hero-Text-Breadcrumb__crumbs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
  margin-bottom: var(--hero-crumb-mb);
}
.Hero-Text-Breadcrumb__crumbs a{
  color: rgba(255,255,255,.78);
  text-decoration: none;
}
.Hero-Text-Breadcrumb__crumbs a:hover{
  color: rgba(255,255,255,.95);
  text-decoration: none;
}
.Hero-Text-Breadcrumb__crumb-sep{
  opacity: .55;
}

/* Tighten crumbs on very small variants */
.Hero-Text-Breadcrumb-4 .Hero-Text-Breadcrumb__crumbs,
.Hero-Text-Breadcrumb-5 .Hero-Text-Breadcrumb__crumbs{
  font-size: 12px;
  gap: 6px;
}

/* ---------- Title ---------- */
.Hero-Text-Breadcrumb__title{
  margin: 0 0 var(--hero-title-mb) 0;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--hero-text);
  text-shadow: 0 18px 60px rgba(0,0,0,.75);
  line-height: 1.05;
  font-size: var(--hero-title-size);
}

/* ---------- Description ---------- */
.Hero-Text-Breadcrumb__desc{
  margin: 0 0 var(--hero-desc-mb) 0;
  max-width: 820px;
  color: var(--hero-muted);
  line-height: 1.55;
  font-size: var(--hero-desc-size);
}

/* Hide long descriptions on smallest hero unless you want them */
.Hero-Text-Breadcrumb-5 .Hero-Text-Breadcrumb__desc{
  max-width: 760px;
}

/* ---------- CTA button ---------- */
.Hero-Text-Breadcrumb__cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,214,0,.30);
  background: rgba(0,0,0,.45);
  box-shadow: 0 0 26px rgba(255,214,0,.18);
  color: rgba(255,255,255,.92);
  text-decoration: none;
  user-select: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.Hero-Text-Breadcrumb__cta strong{
  color: var(--hero-yellow);
  font-weight: 500;
}
.Hero-Text-Breadcrumb__cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 34px rgba(255,214,0,.22);
  background: rgba(0,0,0,.55);
}

/* CTA scales down on smallest versions */
.Hero-Text-Breadcrumb-4 .Hero-Text-Breadcrumb__cta{
  padding: 10px 14px;
  font-size: 14px;
}
.Hero-Text-Breadcrumb-5 .Hero-Text-Breadcrumb__cta{
  padding: 9px 12px;
  font-size: 13px;
}

/* ---------- Responsive tuning ---------- */
@media (max-width: 991.98px){
  .Hero-Text-Breadcrumb-0{
    --hero-min-height: 54vh;
    --hero-pad-y: 56px;
  }
  .Hero-Text-Breadcrumb,
  .Hero-Text-Breadcrumb-1{
    --hero-min-height: 46vh;
    --hero-pad-y: 44px;
  }
  .Hero-Text-Breadcrumb-2{
    --hero-min-height: 38vh;
    --hero-pad-y: 36px;
  }
  .Hero-Text-Breadcrumb-3{
    --hero-min-height: 32vh;
    --hero-pad-y: 30px;
  }
  .Hero-Text-Breadcrumb-4{
    --hero-min-height: 28vh;
    --hero-pad-y: 24px;
  }
  .Hero-Text-Breadcrumb-5{
    --hero-min-height: 24vh;
    --hero-pad-y: 20px;
  }
}

@media (max-width: 575.98px){
  .Hero-Text-Breadcrumb-0{
    --hero-min-height: 50vh;
    --hero-pad-y: 50px;
  }
  .Hero-Text-Breadcrumb,
  .Hero-Text-Breadcrumb-1{
    --hero-min-height: 44vh;
    --hero-pad-y: 40px;
  }
  .Hero-Text-Breadcrumb-2{
    --hero-min-height: 36vh;
    --hero-pad-y: 32px;
  }
  .Hero-Text-Breadcrumb-3{
    --hero-min-height: 30vh;
    --hero-pad-y: 26px;
  }
  .Hero-Text-Breadcrumb-4{
    --hero-min-height: 26vh;
    --hero-pad-y: 22px;
  }
  .Hero-Text-Breadcrumb-5{
    --hero-min-height: 22vh;
    --hero-pad-y: 18px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .Hero-Text-Breadcrumb__bg{ transform: none !important; }
  .Hero-Text-Breadcrumb__cta{ transition: none !important; }
}
"""

js_content_v3 = """/* =========================================================
   Hero-Text-Breadcrumb JS (Optional)
   - Smooth scroll with sticky-header offset
   - Safe to include site-wide
   ========================================================= */

(function () {
  function getHeaderOffset() {
    // Change selector if your site header uses another class/id
    const header = document.querySelector(".sticky-header");
    return header ? Math.ceil(header.getBoundingClientRect().height || 0) : 0;
  }

  function scrollToTarget(target) {
    if (!target) return;

    const headerOffset = getHeaderOffset();
    const y =
      target.getBoundingClientRect().top +
      window.pageYOffset -
      headerOffset -
      12;

    try {
      window.scrollTo({ top: y, behavior: "smooth" });
    } catch (e) {
      window.scrollTo(0, y);
    }

    // Safety settle for some mobile browsers
    window.setTimeout(() => {
      try {
        window.scrollTo({ top: y, behavior: "auto" });
      } catch (e2) {
        window.scrollTo(0, y);
      }
    }, 520);
  }

  document.addEventListener("click", function (e) {
    const a = e.target.closest(
      ".Hero-Text-Breadcrumb a[href^='#'], " +
      ".Hero-Text-Breadcrumb-0 a[href^='#'], " +
      ".Hero-Text-Breadcrumb-1 a[href^='#'], " +
      ".Hero-Text-Breadcrumb-2 a[href^='#'], " +
      ".Hero-Text-Breadcrumb-3 a[href^='#'], " +
      ".Hero-Text-Breadcrumb-4 a[href^='#'], " +
      ".Hero-Text-Breadcrumb-5 a[href^='#']"
    );
    if (!a) return;

    const href = a.getAttribute("href");
    if (!href || href === "#") return;

    const target = document.querySelector(href);
    if (!target) return;

    e.preventDefault();

    // Optional: update hash without jump
    try {
      history.pushState(null, "", href);
    } catch (err) {}

    scrollToTarget(target);
  });
})();
"""

out_dir = Path("/mnt/data")
css_path = out_dir / "hero-text-breadcrumb.css"
js_path = out_dir / "hero-text-breadcrumb.js"

css_path.write_text(css_content_v3, encoding="utf-8")
js_path.write_text(js_content_v3, encoding="utf-8")

print("Updated:", css_path, js_path)