/* =========================
   PHHERO (RTL) – Full Bleed Hero Slider
   - Controlled by CSS vars:
     --phh-vh, --phh-min, --phh-accent, --phh-ov, --phh-fade, --phh-ken
========================= */

.phh-hero{
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  font-family: inherit !important;
}

/* Height modes */
.phh-hero.phh-h-fullscreen{
  height: calc(var(--phh-realvh, 1vh) * 100) !important; /* dynamic viewport fix */
  min-height: 100svh !important;
}

.phh-hero.phh-h-custom{
  height: var(--phh-hd, var(--phh-vh, 100vh)) !important;
  min-height: var(--phh-min, 520px) !important;
}

@media (max-width: 768px){
  .phh-hero.phh-h-custom{
    height: var(--phh-hm, var(--phh-hd, var(--phh-vh, 100vh))) !important;
  }
}

/* Auto height: only one slide visible, height driven by content */
.phh-hero.phh-h-auto{
  height: auto !important;
  min-height: 0 !important;
}
.phh-hero.phh-h-auto .phh-slider{ height:auto; }
.phh-hero.phh-h-auto .phh-slide{
  position: relative;
  inset: auto;
  opacity: 1;
  display: none;
}
.phh-hero.phh-h-auto .phh-slide.active{
  display: block;
  z-index: 2;
}
.phh-hero.phh-h-auto .phh-shell{
  height: auto;
  min-height: var(--phh-min, 520px);
  padding-top: clamp(72px, 10vh, 140px);
  padding-bottom: clamp(64px, 8vh, 120px);
}

/* Content width */
.phh-hero.phh-w-full .phh-shell{ width: 100%; max-width: 100%; }
.phh-hero.phh-w-full .phh-content{ max-width: min(980px, 100%); }

/* Full-bleed (TagDiv safe) */
.phh-hero.phh-full{
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}
html, body{ overflow-x:hidden !important; }

/* Base */
.phh-slider{ position: relative; height: 100%; }

.phh-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--phh-fade, 900ms) ease;
  will-change: opacity;
}
.phh-slide.active{
  opacity: 1;
  z-index: 2;
}

/* Background layer (KenBurns / Motion applies here only) */
.phh-bg{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.12);
  transition: transform var(--phh-ken, 6500ms) ease;
  will-change: transform;
}

/* Motion OFF */
[data-phh-root][data-ken-enable="0"] .phh-bg{
  transform: none;
  transition: none;
}

/* Motion modes (from root data-ken-type) */
[data-phh-root][data-ken-type="zoom-in"] .phh-bg{ transform: scale(1.12); }
[data-phh-root][data-ken-type="zoom-in"] .phh-slide.active .phh-bg{ transform: scale(1.0); }

[data-phh-root][data-ken-type="zoom-out"] .phh-bg{ transform: scale(1.0); }
[data-phh-root][data-ken-type="zoom-out"] .phh-slide.active .phh-bg{ transform: scale(1.12); }

[data-phh-root][data-ken-type="pan-left"] .phh-bg{ transform: translateX(3%) scale(1.12); }
[data-phh-root][data-ken-type="pan-left"] .phh-slide.active .phh-bg{ transform: translateX(-3%) scale(1.12); }

[data-phh-root][data-ken-type="pan-right"] .phh-bg{ transform: translateX(-3%) scale(1.12); }
[data-phh-root][data-ken-type="pan-right"] .phh-slide.active .phh-bg{ transform: translateX(3%) scale(1.12); }

[data-phh-root][data-ken-type="pan-up"] .phh-bg{ transform: translateY(3%) scale(1.12); }
[data-phh-root][data-ken-type="pan-up"] .phh-slide.active .phh-bg{ transform: translateY(-3%) scale(1.12); }

[data-phh-root][data-ken-type="pan-down"] .phh-bg{ transform: translateY(-3%) scale(1.12); }
[data-phh-root][data-ken-type="pan-down"] .phh-slide.active .phh-bg{ transform: translateY(3%) scale(1.12); }

.phh-overlay{
  position:absolute;
  inset:0;
}

/* Default (accent radial + gradient) */
[data-phh-root][data-overlay="default"] .phh-overlay,
[data-phh-root]:not([data-overlay]) .phh-overlay{
  background:
    radial-gradient(1200px 600px at 70% 40%, color-mix(in srgb, var(--phh-accent, #488cdb) 22%, transparent), transparent 60%),
    linear-gradient(to left, rgba(0,0,0,var(--phh-ov, .72)), rgba(0,0,0,.28));
}

/* Solid */
[data-phh-root][data-overlay="solid"] .phh-overlay{
  background: rgba(0,0,0,var(--phh-ov, .72));
}

/* Custom gradient (uses --phh-ov-from / --phh-ov-to) */
[data-phh-root][data-overlay="custom"] .phh-overlay{
  background:
    radial-gradient(1200px 600px at 70% 40%, color-mix(in srgb, var(--phh-accent, #488cdb) 18%, transparent), transparent 60%),
    linear-gradient(to left, var(--phh-ov-from, rgba(0,0,0,.82)), var(--phh-ov-to, rgba(0,0,0,.35)));
}

/* Content */
.phh-shell{
  position: relative;
  z-index: 3;
  height: 100%;
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: clamp(16px, 3vw, 40px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.phh-hero.is-center .phh-shell{
  justify-content: center;
  text-align: center;
}

/* Vertical position */
.phh-hero.phh-v-top .phh-shell{ align-items:flex-start; }
.phh-hero.phh-v-center .phh-shell{ align-items:center; }
.phh-hero.phh-v-bottom .phh-shell{ align-items:flex-end; }

.phh-content{
  max-width: 860px;
  color: #fff;
  opacity: 0;
  transform: translateY(12px);
}
.phh-slide.active .phh-content{
  animation: phhFadeUp var(--phh-fade, 900ms) ease forwards;
}

.phh-badge{
  display: inline-block;
  background: var(--phh-accent, #488cdb);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  margin-bottom: 14px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--phh-accent, #488cdb) 28%, transparent);
}

.phh-h1{
  color: #fff !important;
  font-size: var(--phh-h1, clamp(28px, 4.2vw, 56px));
  line-height: 1.15;
  margin: 0 0 14px;
  letter-spacing: .2px;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.phh-p{
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.9;
  margin: 0 0 26px;
  opacity: .92;
  max-width: 70ch;
  text-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.phh-hero.is-center .phh-p{ margin-left:auto; margin-right:auto; }

.phh-buttons{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.phh-hero.is-center .phh-buttons{ justify-content:center; }

/* Per-slide buttons alignment override */
.phh-content.phh-btns-center{ text-align:center; }
.phh-content.phh-btns-center .phh-buttons{ justify-content:center; }
.phh-content.phh-btns-start{ text-align:right; }
.phh-content.phh-btns-start .phh-buttons{ justify-content:flex-start; }

.phh-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  will-change: transform;
  user-select: none;
}
.phh-btn:hover{ transform: translateY(-2px); }

.phh-btn.primary{
  background: var(--phh-accent, #488cdb);
  color: #fff;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--phh-accent, #488cdb) 30%, transparent);
}
.phh-btn.primary:hover{ filter: brightness(.92); }

.phh-btn.ghost{
  border: 2px solid rgba(255,255,255,.8);
  color: #fff;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}
.phh-btn.ghost:hover{
  background: #fff;
  color: #111;
  border-color: #fff;
}

/* Nav */
.phh-navWrap{
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
.phh-nav{
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
  opacity: .95;
}
.phh-nav span{
  font-size: 30px;
  line-height: 1;
  transform: translateY(-1px);
}
.phh-nav:hover{
  background: rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.35);
  transform: translateY(-50%) scale(1.04);
}
.phh-prev{ left: clamp(12px, 2vw, 22px); }
.phh-next{ right: clamp(12px, 2vw, 22px); }

/* Dots */
.phh-dots{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(16px, 3.2vh, 34px);
  z-index: 7;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
}
.phh-dots button{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
  padding: 0;
}
.phh-dots button.active{
  background: var(--phh-accent, #488cdb);
  transform: scale(1.2);
}

@keyframes phhFadeUp{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Mobile */
@media (max-width: 768px){
  .phh-h1{ font-size: var(--phh-h1m, var(--phh-h1, 34px)); }
  .phh-shell{
    width: 100%;
    padding: 20px 16px;
    justify-content: center;
    text-align: center;
  }
  .phh-content{ max-width: 560px; margin: 0 auto; }
  .phh-buttons{ justify-content: center; gap: 10px; }
  .phh-btn{ width: min(260px, 100%); padding: 14px 18px; }

  .phh-nav{
    top: auto;
    bottom: 86px;
    transform: none;
    width: 46px;
    height: 46px;
  }
  .phh-nav:hover{ transform: scale(1.04); }
  .phh-prev{ left: 12px; }
  .phh-next{ right: 12px; }

  .phh-dots{ bottom: 18px; padding: 10px 14px; }

  /* Mobile toggles (per section) */
  .phh-hero.is-hide-btns-m .phh-buttons{ display:none !important; }
  .phh-hero.is-hide-dots-m .phh-dots{ display:none !important; }
}


@media (max-width:768px){
  .phh-hero.is-hide-arrows-m .phh-navWrap{ display:none !important; }
}