/*
  AB Dynamic Hero Slider – Front-end
  - Full width (edge-to-edge)
  - No border-radius
  - Inherits theme fonts/colors when available
  - RTL/LTR supported via the section's dir attribute
*/

.abHero{
  /* Theme mapping (with fallbacks) */
  --abHeroAccent: var(--color-industrial-red, var(--wp--preset--color--primary, #DC2626));
  --abHeroAccentDark: var(--color-industrial-red-dark, #B91C1C);
  --abHeroBgBase: var(--color-industrial-black, #0A0A0A);
  --abHeroTextDefault: var(--color-text-light, #F9FAFB);
  --abHeroMutedDefault: var(--color-text-gray, #D1D5DB);
  --abHeroMuted2Default: var(--color-text-gray-dark, #9CA3AF);
  --abHeroFontDefault: var(--font-primary, inherit);

  /* Derived defaults */
  --abHeroTitleColor: var(--abHeroTextDefault);
  --abHeroSubtitleColor: rgba(255,255,255,.78);
  --abHeroKickerColor: var(--abHeroMutedDefault);
  --abHeroTextColor: var(--abHeroTextDefault);

  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  min-height: var(--abHeroMinHeight, 100svh);
  overflow: hidden;
  border-radius: 0;
  background: var(--abHeroBgBase);
  color: var(--abHeroTextColor);
  font-family: var(--abHeroFontFamily, var(--abHeroFontDefault));
  isolation: isolate;
}

/* Avoid horizontal overflow caused by 100vw + scrollbar */
@supports (width: 100dvw){
  .abHero{ width: 100dvw; margin-inline: calc(50% - 50dvw); }
}

.abHero *{ box-sizing: border-box; }

/* Background crossfade layers are injected by JS */
.abHero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.abHero__bgLayer{
  position: absolute;
  inset: -6%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform: scale(1.07);
  opacity: 0;
  transition: opacity 900ms ease;
  will-change: opacity, transform;
}

.abHero__bgLayer.is-active{ opacity: 1; }

/* Mobile: show lower part of images slightly more */
@media (max-width: 640px){
  .abHero__bgLayer{ background-position: 50% 65%; inset: -4%; transform: scale(1.04); }
}

/* Overlay (professional darkening + vignette) */
.abHero__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 50% 35%, rgba(0,0,0,.28), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,.76));
}

/* Container */
.abHero__container{
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 7svh, 96px) 16px;
}

.abHero__content{
  width: min(1200px, 100%);
  /* المطلوب: جميع مكونات الهيرو تكون في منتصف السلايد */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}

/* Center every sub-component, regardless of RTL/LTR */
.abHero__kicker,
.abHero__underline{ align-self: center; }

/* Layout: Page hero (centered title + underline) */
.abHero--layout-page .abHero__container{ padding: clamp(44px, 9svh, 110px) 16px; }
.abHero--layout-page .abHero__content{ max-width: 900px; }

/* Kicker */
.abHero__kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--abHeroKickerSize, 13px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--abHeroKickerColor);
  opacity: .92;
}

.abHero__dot{
  width: 10px;
  height: 10px;
  background: var(--abHeroAccent);
  box-shadow: 0 0 0 6px rgba(220,38,38,.12);
  border-radius: 0;
  display: inline-block;
}

/* Title */
.abHero__title{
  margin: 0;
  line-height: 1.05;
  font-weight: 800;
  font-size: var(--abHeroTitleSize, 56px);
  color: var(--abHeroTitleColor);
  text-shadow: 0 18px 50px rgba(0,0,0,.55);
}

.abHero__accent{ color: var(--abHeroAccent); }
.abHero__rest{ color: var(--abHeroTitleColor); }

/* Subtitle */
.abHero__subtitle{
  margin: 0;
  font-size: var(--abHeroSubtitleSize, 18px);
  line-height: 1.75;
  color: var(--abHeroSubtitleColor);
  max-width: 70ch;
  text-shadow: 0 12px 34px rgba(0,0,0,.45);
}

/* Underline (optional via class) */
.abHero__underline{
  width: 120px;
  height: 4px;
  background: var(--abHeroUnderlineColor, var(--abHeroAccent));
  border-radius: 0;
  margin-top: 4px;
  display: none;
}

.abHero--underline .abHero__underline{ display: block; }

/* CTA (always centered) */
.abHero__cta{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  width: 100%;
  justify-content: center;
}

.abHero__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 18px;
  border-radius: 0;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  user-select: none;
}

.abHero__btn--primary{
  background: var(--abHeroAccent);
  border: 1px solid var(--abHeroAccent);
  color: #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

.abHero__btn--primary:hover{ background: var(--abHeroAccentDark); border-color: var(--abHeroAccentDark); transform: translateY(-1px); }

.abHero__btn--ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--abHeroTextDefault);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.abHero__btn--ghost:hover{ border-color: rgba(255,255,255,.34); transform: translateY(-1px); }

/* Chips (always centered) */
.abHero__stats{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  width: 100%;
  justify-content: center;
}

/* Flip chip icon/text order in RTL for natural reading */
.abHero[dir="rtl"] .abHero__chip{ flex-direction: row-reverse; }
.abHero[dir="rtl"] .abHero__chipText{ text-align: right; }

.abHero__chip{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 0;
  color: var(--abHeroMutedDefault);
  font-size: 14px;
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@supports (color: color-mix(in srgb, red 50%, transparent)){
  .abHero__chip{
    background: color-mix(in srgb, #000 65%, transparent);
    border-color: color-mix(in srgb, var(--abHeroAccent) 28%, rgba(255,255,255,.08));
  }
}

.abHero__chipIcon{
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  color: #fff;
  background: rgba(220,38,38,.18);
  border: 1px solid rgba(220,38,38,.25);
}

@supports (color: color-mix(in srgb, red 50%, transparent)){
  .abHero__chipIcon{
    background: color-mix(in srgb, var(--abHeroAccent) 18%, transparent);
    border-color: color-mix(in srgb, var(--abHeroAccent) 38%, transparent);
  }
}

/* Controls */
.abHero__controls{
  position: absolute;
  inset-inline: 18px;
  bottom: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.abHero__navBtn{
  width: 44px;
  height: 44px;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.42);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.abHero__navBtn:hover{ background: rgba(0,0,0,.62); border-color: rgba(255,255,255,.28); transform: translateY(-1px); }

.abHero__dots{ display: flex; gap: 8px; align-items: center; justify-content: center; flex: 1; }

.abHero__dotBtn{
  width: 9px;
  height: 9px;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.18);
  cursor: pointer;
  padding: 0;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.abHero__dotBtn.is-active{
  background: var(--abHeroAccent);
  border-color: var(--abHeroAccent);
  transform: scale(1.2);
}

.abHero--no-controls .abHero__controls{ display: none; }

/* Responsive */
@media (max-width: 768px){
  .abHero{ min-height: var(--abHeroMinHeight, 82svh); }
  .abHero__title{ font-size: clamp(30px, 10vw, var(--abHeroTitleSize, 56px)); }
  .abHero__subtitle{ font-size: clamp(14px, 4.2vw, var(--abHeroSubtitleSize, 18px)); }
  .abHero__controls{ inset-inline: 12px; bottom: 12px; }
  .abHero__navBtn{ width: 40px; height: 40px; }
}

@media (max-width: 480px){
  .abHero{ min-height: var(--abHeroMinHeight, 74svh); }
  .abHero__container{ padding: 44px 12px; }
}

@media (prefers-reduced-motion: reduce){
  .abHero__bgLayer{ transition: none; }
  .abHero__btn, .abHero__navBtn, .abHero__dotBtn{ transition: none; }
}