/* ==========================================================
   MoreTech BMP360 – HERO SYSTEM
   Version: v2026.1 FINAL
   Architecture:
   - Modular
   - Theme-Ready
   - Slideshow-Ready
   - No Global Pollution
========================================================== */


/* ==========================================================
   HERO DESIGN TOKENS (Semantic Only)
========================================================== */
:root {

  /* Core Brand (from global theme) */
  --mt-hero-accent: var(--mt-brand-primary);

  /* Text */
  --mt-hero-text-main: #ffffff;
  --mt-hero-text-muted: rgba(255,255,255,.86);

  /* Overlay Layers */
  --mt-hero-overlay-main: rgba(12,14,20,.82);
  --mt-hero-overlay-strong: rgba(10,12,18,.92);

  /* Glow */
  --mt-hero-glow-color: rgba(40,120,255,.25);

  /* Layout */
  --mt-hero-min-height: 86vh;
  --mt-hero-content-width: 920px;

  /* Motion */
  --mt-hero-ease: cubic-bezier(.22,1,.36,1);
}


/* ==========================================================
   HERO ROOT
========================================================== */
.hero-industrial{
  position: relative;
  min-height: var(--mt-hero-min-height);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  isolation: isolate;
}


/* ==========================================================
   BACKGROUND LAYERS
========================================================== */

/* Dark readability layer */
.hero-industrial::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      var(--mt-hero-overlay-main),
      var(--mt-hero-overlay-strong)
    );
  z-index:0;
}

/* Soft radial glow (premium depth) */
.hero-industrial::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(
      circle at 50% 35%,
      var(--mt-hero-glow-color),
      transparent 60%
    );
  z-index:1;
  pointer-events:none;
}


/* ==========================================================
   HERO INNER WRAPPER
========================================================== */
.hero-overlay{
  position: relative;
  z-index: 2;
  min-height: var(--mt-hero-min-height);
  display:flex;
  align-items:center;
}

.hero-industrial .container{
  max-width: var(--mt-hero-content-width);
  text-align:center;
}


/* ==========================================================
   MICRO TEXT
========================================================== */
.hero-micro{
  font-size:.72rem;
  letter-spacing:1.8px;
  text-transform:uppercase;
  font-weight:700;
  color: var(--mt-hero-text-muted);
  margin-bottom:14px;
  animation: heroFadeUp .6s var(--mt-hero-ease) both;
}


/* ==========================================================
   TITLE
========================================================== */
.hero-title{
  font-size:clamp(2.6rem,4.2vw,3.4rem);
  font-weight:900;
  line-height:1.12;
  color: var(--mt-hero-text-main);
  margin-bottom:18px;
  animation: heroFadeUp .75s var(--mt-hero-ease) both;
}


/* ==========================================================
   SUBTITLE
========================================================== */
.hero-subtitle{
  font-size:1.05rem;
  line-height:1.6;
  color: var(--mt-hero-text-muted);
  margin-bottom:34px;
  animation: heroFadeUp .9s var(--mt-hero-ease) both;
}


/* ==========================================================
   HIGHLIGHTS / VALUE POINTS
========================================================== */
.hero-proof{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:36px;
}

.hero-proof span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 16px;
  font-size:.78rem;
  font-weight:600;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  backdrop-filter: blur(8px);
}

.hero-proof span::before{
  content:"●";
  font-size:.6rem;
  color: var(--mt-hero-accent);
}


/* ==========================================================
   HERO ACTIONS (BUTTONS – SCOPED)
========================================================== */
.hero-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px;
  animation: heroFadeUp 1.05s var(--mt-hero-ease) both;
}

/* Base */
.hero-industrial .mt-hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 30px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.2px;
  text-decoration:none;
  cursor:pointer;
  transition:
    transform .18s var(--mt-hero-ease),
    box-shadow .18s var(--mt-hero-ease),
    background .18s var(--mt-hero-ease),
    border-color .18s var(--mt-hero-ease);
}

.hero-industrial .mt-hero-btn:hover{
  transform: translateY(-1px);
}

.hero-industrial .mt-hero-btn:active{
  transform: translateY(1px);
}

/* Primary */
.hero-industrial .mt-hero-btn-primary{
  background: var(--mt-hero-accent);
  color:#fff;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 14px 36px rgba(0,0,0,.35);
}

/* Secondary */
.hero-industrial .mt-hero-btn-secondary{
  background: rgba(255,255,255,.06);
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(10px);
}


/* ==========================================================
   SLIDESHOW PREP (NO JS YET)
========================================================== */
.hero-slider{
  position:relative;
  width:100%;
  height:100%;
}

.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity .9s ease;
}

.hero-slide.is-active{
  opacity:1;
}


/* ==========================================================
   OPTIONAL NAV (DOTS)
========================================================== */
.hero-nav{
  position:absolute;
  bottom:26px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:5;
}

.hero-nav span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
  cursor:pointer;
}

.hero-nav span.is-active{
  background: var(--mt-hero-accent);
}


/* ==========================================================
   ANIMATIONS
========================================================== */
@keyframes heroFadeUp{
  from{
    opacity:0;
    transform: translateY(14px);
  }
  to{
    opacity:1;
    transform:none;
  }
}
/* ==========================================================
   HERO CONTEXT VARIANT
   Used for inner / detail pages (Projects, Services details)
========================================================== */

/* Reduce hero height for context pages */
.hero-industrial.context-hero {
  min-height: 360px;
}

/* Adjust vertical alignment */
.hero-industrial.context-hero .hero-overlay {
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Slightly reduce title emphasis if present */
.hero-industrial.context-hero .hero-title {
  font-size: clamp(2rem, 4vw, 2.6rem);
  margin-bottom: 0.5rem;
}

/* Hide non-essential elements if they exist */
.hero-industrial.context-hero .hero-proof,
.hero-industrial.context-hero .hero-actions {
  display: none;
}