/* =========================
   NXS Featured (În centrul atenției) - v4
   FIX: arrows outside scroll container
========================= */

.nxs-feat, .nxs-feat *{ box-sizing:border-box; }

.nxs-feat__wrap{
  max-width:1320px;
  margin:0 auto;
  padding:34px 24px 18px;
}

.nxs-feat__title{
  margin:0 0 18px;
  font-size:34px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:-0.02em;
  text-align:left;
}

/* wrapper relativ pentru săgeți */
.nxs-feat__rail{
  position:relative;
}

/* ===== Desktop slider (native scroll) ===== */
.nxs-feat__viewport{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;

  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;

  scrollbar-width:none;
}
.nxs-feat__viewport::-webkit-scrollbar{ display:none; }

.nxs-feat__track{
  display:flex;
  gap:24px;
  padding-right:120px; /* ca să vezi al 3-lea partial la start */
}

.nxs-feat__card{
  flex:0 0 auto;
  width:520px;
  height:330px;
  border-radius:26px;
  overflow:hidden;
  position:relative;

  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;

  text-decoration:none;
  color:#fff;
  display:block;

  scroll-snap-align:start;
}

.nxs-feat__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,0) 90%),
    linear-gradient(0deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 65%);
  pointer-events:none;
}

.nxs-feat__content{
  position:absolute;
  left:28px;
  right:28px;
  bottom:22px;
  z-index:2;
  max-width:420px;
}

.nxs-feat__h3{
  margin:0 0 10px;
  font-size:28px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:-0.02em;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}

.nxs-feat__p{
  margin:0 0 14px;
  font-size:14px;
  line-height:1.45;
  opacity:.92;
  text-shadow:0 2px 14px rgba(0,0,0,.28);
}

.nxs-feat__cta{
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-size:14px;
  font-weight:700;
  text-decoration:underline;
}
.nxs-feat__arrow{ font-size:18px; line-height:1; }

/* Desktop arrows (OVERLAY peste slider, nu scroll) */
.nxs-feat__prev,
.nxs-feat__next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:0;
  background:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.14);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  line-height:1;
  z-index:100;
}

.nxs-feat__prev{ left:10px; }
.nxs-feat__next{ right:10px; }

.nxs-feat__prev.is-hidden,
.nxs-feat__next.is-hidden{
  opacity:0;
  pointer-events:none;
}

/* Progress bars: primele 2 mereu on, a 3-a doar la end */
.nxs-feat__bars{
  display:flex;
  gap:16px;
  padding:18px 0 0;
  justify-content:space-between;
}
.nxs-feat__bar{
  height:2px;
  flex:1;
  background:#cfcfcf;
}
.nxs-feat__bar.is-on{ background:#ffdd00; }

/* Responsive sizes */
@media (max-width: 1200px){
  .nxs-feat__card{ width:480px; height:320px; }
}
@media (max-width: 980px){
  .nxs-feat__card{ width:440px; height:310px; }
}

/* ===== Mobile: stacked ===== */
@media (max-width: 860px){
  .nxs-feat__wrap{ max-width:none; padding:28px 16px 10px; }

  .nxs-feat__title{
    text-align:left;
    font-size:30px;
    margin-bottom:14px;
  }

  .nxs-feat__viewport{
    overflow:visible;
    scroll-snap-type:none;
  }

  .nxs-feat__track{
    display:block;
    padding-right:0;
  }

  .nxs-feat__card{
    width:100%;
    height:420px;
    border-radius:28px;
    margin-bottom:18px;
    scroll-snap-align:none;
  }

  .nxs-feat__content{
    left:22px;
    right:22px;
    bottom:22px;
    max-width:none;
  }

  .nxs-feat__h3{ font-size:30px; }
  .nxs-feat__p{ font-size:15px; }

  .nxs-feat__prev,
  .nxs-feat__next{ display:none; }

  .nxs-feat__bars{ display:none; }
}
.nxs-feat__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 52px;
  padding: 0 32px;

  background: #ffdd00;
  color: #111;

  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;

  border-radius: 9999px;
  text-decoration: none;

  box-shadow: 0 10px 28px rgba(0,0,0,.28);

  transition: all .25s ease;
}

.nxs-feat__cta {
  border-radius: 0 9999px 9999px 0;
}

.nxs-feat__arrow {
  display: none !important;
}

/* =========================================================
   DESKTOP FIX: progress bars nu mai depasesc sectiunea
   + raman exact cat latimea cardurilor
========================================================= */
@media (min-width: 861px){

  /* variabile */
  .nxs-feat{
    --nxs-feat-card-w: 520px;
    --nxs-feat-gap: 24px;
  }

  /* sincronizam gap-ul */
  .nxs-feat__track{ gap: var(--nxs-feat-gap); }

  /* (optional) card width prin variabila */
  .nxs-feat__card{ width: var(--nxs-feat-card-w); }

  /* IMPORTANT: scoatem max-content ca sa nu mai "iasa" */
  .nxs-feat__bars{
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(3, var(--nxs-feat-card-w));
    column-gap: var(--nxs-feat-gap);
    justify-content: start;
    padding: 18px 0 0;

    overflow: hidden; /* extra safety */
  }

  .nxs-feat__bar{
    width: 100%;
  }
}

/* pastreaza proportiile la breakpoints */
@media (max-width: 1200px) and (min-width: 861px){
  .nxs-feat{ --nxs-feat-card-w: 480px; }
}
@media (max-width: 980px) and (min-width: 861px){
  .nxs-feat{ --nxs-feat-card-w: 440px; }
}