/* Zendejas — Home rhythm + global logo-turn consistency */

/* Keep categories without a video visually aligned with the video bands.
   No replacement media is introduced: the intentionally empty media area stays black. */
.home .home-band.text-band:not(.studio-band){
  height:clamp(215px,17vw,325px)!important;
  min-height:215px!important;
  display:block!important;
  position:relative!important;
  overflow:hidden!important;
  border-bottom:3px solid #000!important;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.018),transparent 44%),
    #050505!important;
}

/* Put the category title in the same lower position used by media bands. */
.home .home-band.text-band:not(.studio-band) .band-name{
  position:absolute!important;
  left:24px!important;
  bottom:18px!important;
  margin:0!important;
  opacity:1!important;
  display:flex!important;
  align-items:center!important;
  color:#fff!important;
  text-shadow:none!important;
  letter-spacing:.025em!important;
}

/* Keep the old subtle interaction on the empty band without faking a video. */
.home .home-band.text-band:not(.studio-band)::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.055));
  transition:opacity .25s ease;
}
.home .home-band.text-band:not(.studio-band):hover::before,
.home .home-band.text-band:not(.studio-band):focus-visible::before{
  opacity:1;
}

/* The original project already owns the exact rotateY turn animation.
   This fallback guarantees the same motion even if the recovered React handler is absent. */
.site-header .logo-solid.za-global-turn{
  animation:.56s cubic-bezier(.45,.02,.28,1) both za-global-logo-turn!important;
}
@keyframes za-global-logo-turn{
  0%{transform:rotateY(0)}
  45%{transform:rotateY(170deg)}
  100%{transform:rotateY(360deg)}
}

@media (max-width:1250px){
  .home .home-band.text-band:not(.studio-band){
    height:225px!important;
    min-height:225px!important;
  }
}

@media (max-width:700px){
  .home .home-band.text-band:not(.studio-band){
    height:190px!important;
    min-height:190px!important;
  }
  .home .home-band.text-band:not(.studio-band) .band-name{
    left:14px!important;
    bottom:14px!important;
  }
}