/* =========================
   SIGNLAB TEAM COLLAGE — PIXEL GRID
========================= */

.signlab-team{ width: 100%; }

.signlab-team__grid{
  --big: 547px;
  --small: 257px;
  --gap: calc(var(--big) - (var(--small) * 2)); /* 33px */

  display: grid;
  grid-template-columns: var(--big) var(--small);
  grid-template-rows: var(--small) var(--small);
  gap: var(--gap);

  justify-content: center;
  align-content: start;
}

.signlab-team__card{
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: #e9eef2;
  box-shadow: 0 18px 45px rgba(15,23,42,.14);
}

.signlab-team__card--main{
  grid-column: 1;
  grid-row: 1 / span 2;
  width: var(--big);
  height: var(--big);
}

.signlab-team__card--side-1{
  grid-column: 2;
  grid-row: 1;
  width: var(--small);
  height: var(--small);
}

.signlab-team__card--side-2{
  grid-column: 2;
  grid-row: 2;
  width: var(--small);
  height: var(--small);
}

.signlab-team__card > img,
.signlab-team__card .signlab-team__img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Overlay */
.signlab-team__overlay{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 3;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
  text-shadow: 0 6px 24px rgba(0,0,0,.42);
}

.signlab-team__card::after{
  content:"";
  position:absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background .22s ease;
  pointer-events: none;
}

.signlab-team__card:hover::after{ background: rgba(0,0,0,.28); }
.signlab-team__card:hover .signlab-team__overlay{ opacity: 1; transform: translateY(0); }

.signlab-team__name{ color: #fff; }
.signlab-team__role{ color: #43ac8b; }
.signlab-team__desc{ color: rgba(255,255,255,.88); }

/* Tablet: 2x2 */
@media (max-width: 900px){
  .signlab-team__grid{
    --gap: 16px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    justify-content: stretch;
    align-content: start;
    gap: var(--gap);
  }

  .signlab-team__card--main{
    grid-column: 1 / span 2;
    grid-row: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 22px;
  }

  .signlab-team__card--side-1{
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 22px;
  }

  .signlab-team__card--side-2{
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 22px;
  }
}

/* Móvil: 1 columna */
@media (max-width: 560px){
  .signlab-team__grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 14px;
  }

  .signlab-team__card--main{
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 1 / 1;
  }

  .signlab-team__card--side-1,
  .signlab-team__card--side-2{
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 1 / 1;
  }

  .signlab-team__overlay{
    left: 14px;
    right: 14px;
    bottom: 12px;
  }
}

/* Móvil: overlay visible (no hay hover real) + tipografías/padding */
@media (max-width: 560px){

  /* En móvil, mejor que el overlay se vea siempre */
  .signlab-team__overlay{
    opacity: 1;
    transform: none;
    pointer-events: none;
  }

  /* Oscurecer un poco la imagen para legibilidad sin hover */
  .signlab-team__card::after{
    background: rgba(0,0,0,.28);
  }

  /* Ajustes finos de overlay */
  .signlab-team__overlay{
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  /* Si tienes textos grandes dentro del overlay, limítalos */
  .signlab-team__name{ font-size: 16px; line-height: 1.15; }
  .signlab-team__role{ font-size: 13px; line-height: 1.2; }
  .signlab-team__desc{ font-size: 12px; line-height: 1.35; }

  /* Un pelín menos radio en móvil suele verse mejor */
  .signlab-team__card{ border-radius: 18px; }
}

/* Móvil pequeño: que no quede “apretado” */
@media (max-width: 420px){
  .signlab-team__grid{ gap: 12px; }
  .signlab-team__overlay{ left: 10px; right: 10px; bottom: 10px; }
}