@import url("colors.css");

/* --------------------------
   Sección Pinned Horizontal
-------------------------- */
#galardonadosSection{
  position: relative;
  height: 100vh;
  overflow: hidden;
  background-image: url('../img/back-hd.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0; /* stacking base */
}

/* --- RESET de overlays previos (por si quedaron en otra hoja) --- */
#galardonadosSection::before{
  content: none !important;
  display: none !important;
  background: none !important;
  width: 0 !important; height: 0 !important;
  top: auto !important; bottom: auto !important;
  left: auto !important; right: auto !important;
}

/* --- ÚNICO overlay: ABAJO y CENTRADO --- */
#galardonadosSection::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: min(30vh, 300px); /* un poco más alto para no recortar */
  background-image: url('../img/tools_bottom.svg');
  background-repeat: no-repeat;
  background-size: contain; /* 🔹 asegura que la imagen nunca se corte */
  background-position: center bottom; /* centrada y pegada al fondo */
  pointer-events: none;
  z-index: 1;
}


/* Contenido scrollable por encima del overlay */
#galardonadosSection > .galardonados-scroll-container,
#galardonadosSection .d-flex.topbar{
  position: relative;
  z-index: 2;
}

/* Contenedor horizontal (GSAP pin/scroll) */
#galardonadosSection .galardonados-scroll-container{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  will-change: transform;
}

/* Tarjetas */
.galardonados-scroll-container .card{
  flex: 0 0 auto;
  width: clamp(280px, 35vw, 450px);
  margin: 1rem;
  will-change: transform;
}

/* --------------------------
   Tarjetas de galardonados
-------------------------- */
#galardonadosSection .card-galardonados{
  position: relative;
  display: inline-block;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  will-change: transform;
}

#galardonadosSection .card-galardonados .card-img{
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(0%) brightness(0.8);
  transition: filter .3s ease-out, transform .3s ease-out;
  will-change: transform;
}

#galardonadosSection .card-galardonados:hover .card-img{
  filter: grayscale(20%) brightness(1);
  transform: scale(1.01);
}

/* Pestaña dinámica */
#galardonadosSection .card-galardonados .card-body{
  position: absolute;
  bottom: 0; left: 0; width: 100%;
  background: var(--neutral-300);
  overflow: hidden;
  max-height: 8.5rem; min-height: 8.5rem;
  padding: 1rem 1.5rem 1.25rem 1.5rem;
  line-height: 1.4;
  transition: max-height .7s ease-out, background .7s ease-in-out;
  z-index: 2;
  font-size: clamp(.75rem, 2vw, 1rem);
}

#galardonadosSection .card-galardonados:hover .card-body{
  max-height: 500px; min-height: auto;
  background: var(--neutral-100);
  border-top: 1px solid lightgray;
  padding-bottom: 2rem;
}

/* Textos */
#galardonadosSection .card-galardonados .card-title,
#galardonadosSection .card-galardonados .card-subtitle{
  margin-bottom: .4rem;
}

#galardonadosSection .card-galardonados .card-title{
  font-size: 1.2em; color: var(--grey-400);
}

#galardonadosSection .card-galardonados .card-subtitle{
  font-size: .9em; color: var(--blue-rosenkranz-500);
  font-weight: bold; text-transform: uppercase;
}

#galardonadosSection .card-galardonados .card-text{
  margin-top: .75rem;
  font-size: .9em;
  color: var(--grey-400);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .25s ease-out, max-height .4s ease-out;
}

#galardonadosSection .card-galardonados:hover .card-text{
  opacity: 1;
  max-height: 20rem;
}

/* Shine */
#galardonadosSection .card-galardonados::before{
  content:"";
  position:absolute; top:0; left:-100%;
  width:100%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.8), transparent);
  transform: skewX(-25deg);
  opacity: 0; pointer-events:none; z-index:3;
  will-change: transform, opacity;
  transition: opacity .3s ease-out;
}

#galardonadosSection .card-galardonados:hover::before{
  opacity: .15; animation: shine .8s forwards;
}

@keyframes shine{
  from{ transform: translateX(-100%); }
  to  { transform: translateX(100%); }
}

.cards-wrapper{
  flex:1; display:flex; align-items:center; justify-content:center;
}

#galardonadosSection .card-galardonados .image-container{
  display:block; position:relative; line-height:0; background:#fff; width:100%; height:100%;
  will-change: opacity, transform;
}

#galardonadosSection .card-galardonados .image-container::after{
  content:""; position:absolute; inset:0;
  background: var(--orange);
  opacity:.10; pointer-events:none; mix-blend-mode:multiply;
  transition: opacity .3s ease-out; will-change: opacity;
}

#galardonadosSection .card-galardonados .image-container>img{
  transition: opacity .3s ease-out, transform .3s ease-out;
}

#galardonadosSection .card-galardonados:hover .image-container>img{
  opacity:1; transform: scale(.95);
}

#galardonadosSection .card-galardonados:hover .image-container::after{
  opacity:0;
}

/* Fix Safari */
@supports (-webkit-touch-callout: none){
  #galardonadosSection .card-galardonados .card-img{
    transition: filter .3s ease-in-out, transform .4s ease-out;
  }
  #galardonadosSection .card-galardonados .image-container::after{
    transition: opacity .35s ease-in-out;
  }
}

/* Pinned responsive para pantallas bajas */
@media (max-height: 700px){
  #galardonadosSection .galardonados-scroll-container{
    transform: translateY(-50%) scale(.85);
    transform-origin: center;
  }
  #galardonadosSection .card{
    width: clamp(220px, 30vw, 450px);
  }
}

/* Ajustes responsivos del adorno único */
@media (max-width: 991.98px){
  #galardonadosSection{
    height: auto;
    min-height: 100vh;
    overflow: visible;
    padding-bottom: 4rem;
  }

  #galardonadosSection .galardonados-scroll-container{
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0 2rem 0;
    gap: 1rem;
  }

  #galardonadosSection .card{
    width: min(92vw, 520px);
    margin: 0.5rem 0.75rem;
  }

  #galardonadosSection .card-galardonados .card-body{
    max-height: 9.5rem;
    min-height: 9.5rem;
    font-size: clamp(0.9rem, 3.6vw, 1rem);
  }

  #galardonadosSection::after{
    height: min(16vh, 160px);
    background-size: clamp(240px, 70%, 720px);
    background-position: center bottom;
  }
}