/* --- HERO GRAN (FULL WIDTH / FULL BLEED) --- */

/* Rompe el contenedor y ocupa 100vw */
#home-slider{
    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw); /* full-bleed */
  }
  
  /* Opcional: si el track recorta sombras del contenido */
  #home-slider .splide__track{
    overflow: visible;
  }
  
  .hero-slide {
    position: relative;
    color: var(--color-text);
    background-color: var(--color-bg-soft);
    overflow: hidden;
    block-size: clamp(480px, 65vh, 760px);
    aspect-ratio: auto;              /* dejamos que llene a lo alto */
  }
  
  /* imatge de fons */
  .hero-slide__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  /* contingut superposat */
  .hero-slide__content {
    position: absolute;
    inset-block-end: clamp(16px, 5vh, 40px);
    inset-inline-start: clamp(16px, 5vw, 48px);
    z-index: var(--z-sticky, 20);
    max-inline-size: min(70ch, 88vw);
    padding: clamp(16px, 2.4vw, 28px);
    color: var(--color-text);
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(1px);
  }
  
  .hero-slide__content .display-xl {
    margin: 0 0 .3em;
  }
  .hero-slide__content .heading-m {
    margin: 0 0 .9em;
  }
  .hero-slide__content .cluster {
    gap: clamp(8px, 1.6vw, 16px);
  }
  
  /* Responsiu */
  @media (max-width: 768px) {
    #home-slider{
      margin-inline: calc(50% - 50vw); /* manté el full-bleed en mòbil */
    }
    .hero-slide {
      block-size: clamp(380px, 58vh, 600px);
    }
    .hero-slide__content {
      inset-inline: clamp(12px, 4vw, 20px) auto;
      inset-block-end: clamp(12px, 4vh, 24px);
      padding: clamp(14px, 3.5vw, 20px);
      max-inline-size: 92vw;
    }
  }
  
  /* fletxes i punts */
  #home-slider .splide__arrows .splide__arrow {
    background: rgba(0, 0, 0, .45);
  }
  #home-slider .splide__arrows .splide__arrow svg {
    fill: #fff;
  }
  #home-slider .splide__pagination {
    bottom: 10px;
  }
  #home-slider .splide__pagination__page {
    background: rgba(255,255,255,.8);
  }
  #home-slider .splide__pagination__page.is-active {
    transform: scale(1.1);
  }
  
  /* permet pan horitzontal només dins sliders */
.splide {
  touch-action: pan-x;
}

/* assegura que el track no “escupi” amplada fora del contenidor */
.splide__track {
  overflow: hidden; /* reforç per si algun CSS el sobreescriu */
}

/* HERO: CTA secundario “solo subrayado”, sin cambio de color */


.hero-slide__content .btn--ghost:hover,
.hero-slide__content .link:hover{
  color: var(--color-text) !important; /* no pasar a soft */
 
}
/* ==== HERO: panel de texto ajuste moderado ==== */
@media (min-width: 992px){
  .hero-slide__content{
    max-inline-size: min(62ch, 68vw);          /* antes 70ch/88vw */
    padding: clamp(14px, 2.1vw, 26px);         /* un pelín menos */
    inset-inline-start: clamp(20px, 4.5vw, 52px);
    inset-block-end: clamp(16px, 4.5vh, 36px);
    background: rgba(255,255,255,.46);         /* mantiene legibilidad */
    box-shadow: var(--shadow-sm);
  }
  .hero-slide__content .display-xl{ margin: 0 0 .25em; }
  .hero-slide__content .heading-m{  margin: 0 0 .85em; }
  .hero-slide__content .cluster{    gap: clamp(8px, 1.3vw, 15px); }
}


/* ===== Mobile: slider al 60% del alto de pantalla ===== */
@media (max-width: 768px){
  /* Fuerza la altura de todo el stack de Splide */
  #home-slider,
  #home-slider .splide__track,
  #home-slider .splide__list,
  #home-slider .splide__slide{
    block-size: 60svh;
    min-block-size: 60svh;
  }

  /* Tu slide/imagen llenan esa altura */
  .home-hero .hero-slide{
    block-size: 60svh !important; /* sobrescribe clamps previos */
    aspect-ratio: auto;
  }
  .home-hero .hero-slide__img{
    height: 100%;
    object-fit: cover;
  }

  /* (Opcional) Si quieres mantener el texto empezando al 30% */
  /* .home-hero .hero-slide__content{ top: 30%; left: 50%; transform: translateX(-50%); } */
}


/* 3) Flechas Splide — grandes, sin fondo, color --color-text */
#home-slider .splide__arrows{
  z-index: 30; /* por encima del panel de texto */
}
#home-slider .splide__arrows .splide__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inline-size: 56px;
  block-size: 56px;
  padding: 0;
  background: transparent !important; /* sin fondo */
  border: 0;
  box-shadow: none;
  color: var(--color-text);           /* color del icono */
  opacity: 1;
  display: grid;
  place-items: center;
}


#home-slider .splide__arrows .splide__arrow svg{
  inline-size: 34px;
  block-size: 34px;
  fill: currentColor;                 /* usa --color-text */
}

#home-slider .splide__arrows .splide__arrow:hover{ transform: translateY(-50%) scale(1.04); }
#home-slider .splide__arrows .splide__arrow:active{ transform: translateY(-50%) scale(1); }
#home-slider .splide__arrows .splide__arrow:focus-visible{
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 999px;
}
/* Estado disabled: leve atenuación */
#home-slider .splide__arrows .splide__arrow.is-disabled{ opacity: .35; pointer-events: none; }



/* Arrows pegadas al borde, sin invadir el panel de texto */
#home-slider .splide__arrows .splide__arrow--prev{ left: 4px; }
#home-slider .splide__arrows .splide__arrow--next{ right: 4px; }

/* Desktop un pelín más dentro para estética */
@media (min-width: 769px){
  #home-slider .splide__arrows .splide__arrow--prev{ left: 4px; }
  #home-slider .splide__arrows .splide__arrow--next{ right: 4px; }
}

/* Por si el panel es muy ancho, bajamos 1 punto el tamaño en móvil */
@media (max-width: 768px){
  #home-slider .splide__arrows .splide__arrow{
    inline-size: 44px;
    block-size: 44px;
  }
  #home-slider .splide__arrows .splide__arrow svg{
    inline-size: 26px;
    block-size: 26px;
  }
}

/* Deja pasar el scroll vertical aunque el gesto empiece sobre el slider */
.splide,
.splide__track,
.splide__list {
  touch-action: pan-y !important; /* permite scroll vertical; mantiene los eventos para el swipe horizontal del slider */
}