/* =========================================================
   HOME — Notícies (slider), Projectes (cards), Publicacions (cards)
   Nota: tot ací és neutre d’idioma i només toca la home/front-page
   ========================================================= */

/* ---------- SLIDER DE NOTÍCIES ---------- */

/* Contenidor principal: amplada completa dins de la fila */
.noticies-hero-slider {
  width: 100%;
  max-width: none !important;
  margin: 40px 0 0 0;
  position: relative;
}

/* Cada slide fa de context per a overlay + contingut */
.noticies-hero-slider .hero-slide {
  position: relative;
  overflow: hidden; /* evita que isca res fora */
}

/* Wrapper d’imatge amb ratio “hero” perquè no brinque l’alçada */
.noticies-hero-slider .hero-img-wrap {
  position: relative;
  width: 100%;
  /* Mantén un 16:9 raonable per a heros; així evitem “ballar” en càrrega */
  aspect-ratio: 16/9;
  overflow: hidden;
}

/* Imatge responsive i nítida:
     - usem object-fit perquè es retalle elegantment sense deformar
     - object-position per centrar millor (ajusta si vols 50% 40%) */
.noticies-hero-slider .hero-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Overlay en degradat per millorar llegibilitat del text */
.noticies-hero-slider .slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.45) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Bloc de text del slide: ajustat i amb ample màxim per a no “estirar-se” massa */
.noticies-hero-slider .slide-content {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 6%;
  color: #fff;
  z-index: 2;
  max-width: 1100px;
}

.noticies-hero-slider .slide-category {
  display: inline-block;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
  background: rgba(0, 0, 0, 0.35);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.noticies-hero-slider .slide-title {
  font-size: clamp(1.25rem, 2vw, 2rem);
  margin: 0.25rem 0;
}

.noticies-hero-slider .slide-title a {
  color: #fff;
  text-decoration: none;
}

.noticies-hero-slider .slide-date {
  display: block;
  font-size: 0.9rem;
  opacity: 0.9;
}

.noticies-hero-slider .slide-button {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.4rem 0.9rem;
  background: #66a1bc;
  color: #fff;
  text-decoration: none;
  border-radius: 3px;
}

/* Slick: neteja UL/dots i oculta els pseudo-continguts per defecte (les fletxes menudetes) */
.noticies-hero-slider .slick-dots,
.noticies-hero-slider .slick-dots li,
.noticies-hero-slider ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.noticies-hero-slider .slick-dots li button {
  font-size: 0;
  line-height: 0;
}

.noticies-hero-slider .slick-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  z-index: 3;
}

/* Oculta les fletxes per defecte de Slick (les “dobles”) */
.noticies-hero-slider .slick-prev::before,
.noticies-hero-slider .slick-next::before {
  content: "" !important;
}

/* Estil de les nostres fletxes personalitzades */
.noticies-hero-slider .slick-prev,
.noticies-hero-slider .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.35);
  border: 0;
  padding: 0.4rem 0.55rem;
  color: #fff;
  cursor: pointer;
  z-index: 3;
}

.noticies-hero-slider .slick-prev {
  left: 10px;
}
.noticies-hero-slider .slick-next {
  right: 10px;
}

/* ---------- Responsiu del slider ---------- */

/* Pantalles molt estretes: un pèl més d’aire i centrat millor */
@media (max-width: 480px) {
  .noticies-hero-slider .slide-content {
    left: 6%;
    right: 6%;
    bottom: 7%;
  }
  /* Lleu “reencaix” vertical de l’enfoc de la imatge si tens cares/texts cap a dalt */
  .noticies-hero-slider .hero-img-wrap img {
    object-position: center 45%;
  }
}

/* ---------- CARDS HOME: Projectes i Publicacions ---------- */
/* Només home/front-page per a no tacar llistats interns */
body.home .projectes-grid,
body.front-page .projectes-grid,
body.home .publicacions-grid,
body.front-page .publicacions-grid {
  margin-bottom: 25px !important;
}

@media (min-width: 768px) {
  body.home .projectes-grid,
  body.front-page .projectes-grid,
  body.home .publicacions-grid,
  body.front-page .publicacions-grid {
    margin-left: 50px !important;
    margin-right: 50px !important;
  }
}