/* =========================================================
   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,
.Hero-Text-Breadcrumb-6,
.Hero-Text-Breadcrumb-7{
  /* 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: 460px;
  --hero-pad-y: 26px;

  /* 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;
  alignment-baseline: center;  
  overflow: hidden;
  min-height: var(--hero-min-height);
  max-height: var(--hero-max-height);
  padding: 10px 2.5rem;
  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));
}

.Hero-Text-Breadcrumb__overlay2{
  position: absolute;
 text-align: left;
  inset: -5px;
  z-index: 1;
  background:
    radial-gradient(900px 520px at 10% 20%, rgba(255,214,0,.18), transparent 56%),
    radial-gradient(900px 520px at 86% 35%, rgba(5,42,143,.28), transparent 68%),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.22));
}

/* ---------- 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; }
}
/* =========================================================
   Hero-Text-Breadcrumb v6/v7 (Container-aligned variants)
   - v6: compact (aligns to site container; best for inner pages)
   - v7: taller (same alignment; more dramatic spacing)
   Usage:
     <section class="Hero-Text-Breadcrumb-6" style="--hero-bg:url('...');">...</section>
     <section class="Hero-Text-Breadcrumb-7" style="--hero-bg:url('...');">...</section>
   ========================================================= */

/* Remove the tiny base padding so left edge matches the site container exactly */
.Hero-Text-Breadcrumb-6,
.Hero-Text-Breadcrumb-7{
  padding: 0;
}

/* Variant sizing (you can tweak, but these mirror v5 (compact) and v3 (taller)) */
.Hero-Text-Breadcrumb-6{
  --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;
}

.Hero-Text-Breadcrumb-7{
  --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;
}

/* Container that matches a Bootstrap-like .container gutter and width */
.Hero-Text-Breadcrumb__container{
  position: relative;
  z-index: 2;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 34px;
  padding-bottom: var(--hero-pad-y);
}

/* Bootstrap 5 container widths (so hero aligns with your header/logo container) */
@media (min-width: 576px){  .Hero-Text-Breadcrumb__container{ max-width: 540px; } }
@media (min-width: 768px){  .Hero-Text-Breadcrumb__container{ max-width: 720px; } }
@media (min-width: 992px){  .Hero-Text-Breadcrumb__container{ max-width: 960px; } }
@media (min-width: 1200px){ .Hero-Text-Breadcrumb__container{ max-width: 1140px; } }
@media (min-width: 1400px){ .Hero-Text-Breadcrumb__container{ max-width: 1320px; } }

/* Optional: tighter inner max-width so long paragraphs don't span too wide */
.Hero-Text-Breadcrumb__container .Hero-Text-Breadcrumb__inner{
  max-width: 980px; /* keep your existing inner cap */
}

/* Responsive tuning for v6/v7 (mirrors your existing breakpoints) */
@media (max-width: 991.98px){
  .Hero-Text-Breadcrumb-6{
    --hero-min-height: 24vh;
    --hero-pad-y: 20px;
  }
  .Hero-Text-Breadcrumb-7{
    --hero-min-height: 32vh;
    --hero-pad-y: 30px;
  }
}
@media (max-width: 575.98px){
  .Hero-Text-Breadcrumb-6{
    --hero-min-height: 22vh;
    --hero-pad-y: 18px;
  }
  .Hero-Text-Breadcrumb-7{
    --hero-min-height: 30vh;
    --hero-pad-y: 26px;
  }
}