/* AI Vitraj — Hero Control (front) */

/* 1) Hero slider (all platforms): scroll-snap */
.aivh-hero-slider .aivh-track{
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom:8px;
}
.aivh-hero-slider .aivh-track::-webkit-scrollbar{ display:none; }

.aivh-hero-slider .aivh-slide{
  flex:0 0 100%;
  scroll-snap-align:start;
}

/* keep theme card full width */
.aivh-hero-slider .ai-hero__card{ width:100%; }

/* avoid multiple big headings styles for slide 2+ */
.aivh-hero-slider .aivh-h2{ margin:0; }

/* 2) Readability: gradient UNDER theme overlay */
.aivh-hero-slider .ai-thumb{ position:relative; }
.aivh-hero-slider .ai-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  z-index:1;
}
@media (min-width: 901px){
  .aivh-hero-slider .ai-thumb::after{
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.42) 35%,
      rgba(0,0,0,0.22) 65%,
      rgba(0,0,0,0.06) 100%
    );
  }
}
@media (max-width: 900px){
  .aivh-hero-slider .ai-thumb::after{
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.72) 0%,
      rgba(0,0,0,0.55) 35%,
      rgba(0,0,0,0.30) 65%,
      rgba(0,0,0,0.10) 100%
    );
  }
}

/* Put theme overlay above gradient */
.aivh-hero-slider .ai-overlay{
  position:absolute;
  inset:0;
  z-index:2;
}

/* Mobile typography baseline (JS will auto-fit to 2 lines) */
@media (max-width: 900px){
  body.home .aivh-hero-slider .ai-overlay.ai-hero__overlay h1,
  body.home .aivh-hero-slider .ai-overlay.ai-hero__overlay .aivh-h2{
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* Dots */
.aivh-hero-slider .aivh-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:10px;
}
.aivh-hero-slider .aivh-dot{
  width:6px;height:6px;border-radius:99px;
  background: rgba(0,0,0,.18);
}
.aivh-hero-slider .aivh-dot.is-active{
  width:18px;
  background: rgba(0,0,0,.35);
}

/* Desktop arrows (make slider usable with mouse) */
.aivh-hero-slider{ position: relative; }
.aivh-hero-slider .aivh-arrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.92);
  color: #111827;
  font-size: 22px;
  line-height: 1;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(6px);
}
.aivh-hero-slider .aivh-prev{ left: 10px; }
.aivh-hero-slider .aivh-next{ right: 10px; }

@media (min-width: 901px){
  .aivh-hero-slider .aivh-arrow{ display:flex; }
}

/* Keep the original hero, but align its outer height with the news rail. */
@media (min-width: 901px){
  body.home .ai-home-grid > .wp-block-group:has(.aivh-hero-slider){
    min-width:0;
    align-self:stretch;
  }
  body.home .aivh-hero-slider{
    height:100%;
    box-sizing:border-box;
  }
  body.home .aivh-hero-slider > .ai-panel__pad{
    height:100%;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
  }
  body.home .aivh-hero-slider .aivh-track{
    min-height:0;
    flex:1 1 auto;
  }
  body.home .aivh-hero-slider .aivh-slide,
  body.home .aivh-hero-slider .ai-hero__card,
  body.home .aivh-hero-slider .ai-hero__thumb{
    height:100%;
  }
  body.home .aivh-hero-slider .ai-hero__thumb{ aspect-ratio:auto; }
}