/* ==========================================================================
   HERO SLIDER – DRAMATIC FRAMELESS (no black band, no radius)
   Paste after all theme CSS. No HTML/PHP changes.
   ========================================================================== */

:root{
  --text-color: #eef2ff;
  --accent-1: #22d3ee;
  --accent-2: #7c3aed;
}

/* Hard reset (fără rotunjiri / rame / masti în slider) */
.hero-slider,
.hero-slider * ,
.hero-slider ::before,
.hero-slider ::after{
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

/* Wrapper: fără fundal/padding – cade exact sub meniu și umple containerul */
.hero-slider{
  position: relative;
  width: 100%;
  margin: 0 !important;            /* zero spațiu sus/jos */
  background: transparent !important;
  padding: 0 !important;           /* scoate rama neagră */
  border: 0 !important;
  overflow: visible;
  box-shadow: none !important;
}

/* Canvas: full-bleed, fără background, fără border/shadow */
.hero-slider .slides{
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 21/9;              /* poți schimba ori elimina dacă vrei înălțime din imagine */
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;  /* important: fără banda neagră */
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.hero-slider .slides::before{ content:none !important; display:none !important; }

/* Slide stack: 1 vizibil, tranziție “ușor dramatică” (scale subtil) */
.hero-slider .slide{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  opacity: 0;
  transform: scale(1.02);          /* dramă subtilă */
  z-index: 0;
  transition: transform .45s cubic-bezier(0.23,1,.32,1), opacity .45s ease;
  text-decoration: none;
  color: inherit;
  border: 0 !important;
  box-shadow: none !important;
}
.hero-slider .slide.active{ opacity:1; transform:scale(1); z-index:2; }
.hero-slider .slide.prev{   opacity:0; transform:scale(.985); z-index:1; }

/* Overlay editorial pe stânga (fără să afecteze margini) */
.hero-slider .slide::after{
  content:"";
  position:absolute;
  inset:0 55% 0 0;                 /* ~45% panel stânga */
  background: linear-gradient(90deg, rgba(6,8,14,.78), rgba(6,8,14,0));
  pointer-events:none;
  transition: opacity .4s ease;
  opacity:.9;
}
.hero-slider .slide.active::after{ opacity:1; }

/* Imagini: full-bleed, fără efecte de ramă, Ken Burns foarte discret */
.hero-slider .slide picture,
.hero-slider .slide figure{ position:absolute !important; inset:0 !important; margin:0 !important; }
.hero-slider .slide img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  filter: contrast(1.04) saturate(1.03) brightness(.95);
  transform: scale(1.01);
  transform-origin:center;
  transition: transform .8s ease-out, filter .3s ease-out;
  animation: kenburns-slow 18s ease-out both; /* mai lent, mai fin */
}
.hero-slider .slide.active img{ animation: kenburns-slow 18s ease-out both; }
@keyframes kenburns-slow{
  from{ transform: scale(1.02); }
  to  { transform: scale(1.06); }
}

/* Caption: stil editorial, vertical centrat pe stânga */
.hero-slider .caption{
  position:absolute;
  top:50%; left:clamp(1.25rem, 3vw, 3rem); right:auto;
  transform:translateY(-50%);
  max-width:min(46ch, 42%);
  padding:0;
  background:transparent;
  border:none;
  color:var(--text-color);
  text-shadow:0 14px 30px rgba(0,0,0,.45);
  font-size:clamp(1.25rem, 1.2vw + .8rem, 2rem);
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.01em;
  opacity:0;
  transition: transform .45s ease, opacity .45s ease;
}
.hero-slider .slide.active .caption{ opacity:1; transform:translateY(-50%) translateZ(0); }
.hero-slider .caption::after{
  content:"";
  display:block;
  width:72px; height:3px; margin-top:.75rem;
  background:linear-gradient(90deg, var(--accent-1), var(--accent-2));
}

/* Controale: în interiorul sliderului, fără a crea bandă în jur */
.hero-slider .slider-controls{
  position:absolute;
  left:50%; bottom: clamp(12px, 1.5vw, 18px);
  transform:translateX(-50%);
  display:flex; gap:12px; padding:0;
  z-index:11;
  pointer-events:none; /* doar butoanele clicabile */
}
.hero-slider .slider-controls button{
  pointer-events:auto;
  width:56px; height:56px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  border-radius: 0; /* pătrat */
}
.hero-slider .slider-controls button:hover{ background: rgba(255,255,255,.16); transform: translateY(-2px) scale(1.05); }
.hero-slider .slider-controls button:active{ transform: translateY(0) scale(.97); }

/* Dots: verticale pe dreapta (se mută jos pe mobil) */
.hero-slider .dots{
  position:absolute;
  right: clamp(12px, 1.6vw, 24px);
  top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:10px; margin:0; padding:0;
  z-index:12; pointer-events:auto;
}
.hero-slider .dots button{
  width:10px; height:10px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.35);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
  border-radius: 0; /* pătrat mic; fă-l 999px dacă le vrei rotunde */
}
.hero-slider .dots button:hover{ background: rgba(255,255,255,.6); }
.hero-slider .dots button.active{
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(124,58,237,.18);
}

/* Focus */
.hero-slider .slider-controls button:focus-visible,
.hero-slider .dots button:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-slider .slide,
  .hero-slider .caption,
  .hero-slider .slide img{
    transition:none !important;
    animation:none !important;
  }
}

/* Responsive */
@media (max-width: 768px){
  .hero-slider .slides{ aspect-ratio: 16/9; }
  .hero-slider .slide::after{
    inset: 0 0 35% 0;
    background: linear-gradient(0deg, rgba(6,8,14,.82), rgba(6,8,14,0));
  }
  .hero-slider .caption{
    top:auto; bottom: clamp(1rem, 3vw, 1.5rem);
    left: clamp(1rem, 4vw, 2rem); right: clamp(1rem, 4vw, 2rem);
    max-width:min(90%, 56ch);
    transform:none; opacity:0;
  }
  .hero-slider .slide.active .caption{ opacity:1; }
  .hero-slider .slider-controls{ bottom:8px; }
  .hero-slider .slider-controls button{ width:46px; height:46px; font-size:16px; }
  .hero-slider .dots{
    position:static; transform:none; flex-direction:row; justify-content:center;
    gap:8px; margin-top:.5rem; padding:.5rem 0 0;
  }
}
@media (max-width: 480px){
  .hero-slider .slides{ aspect-ratio: 4/3; }
  .hero-slider .slider-controls button{ width:40px; height:40px; font-size:14px; }
  .hero-slider .dots button{ width:9px; height:9px; }
}