/* components/logo-wall/logo-wall.css
   Grilla de logos de clientes (ver LogoWall.js). --reveal (0 a 1) lo actualiza el JS según
   la cercanía del cursor: ilumina el borde, el fondo y el logo de cada tarjeta. */

.logo-wall {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    padding-block: 6rem;
    /* Esquinas redondeadas solo arriba: abajo sigue .projects y se ven como un único bloque negro */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.logo-wall > * {
    position: relative;
    z-index: 2;
}

/* Textura de puntos, mismo recurso que .video-break (pseudo-elemento: sin divs extra) */
.logo-wall::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--black) 1px, transparent 2px);
    background-size: 4px 4px;
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
}

/* Halo que sigue al cursor */
.logo-wall::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--lw-mx, 50%) var(--lw-my, 50%), rgba(71, 210, 245, 0.16), transparent 65%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.logo-wall.is-active::after {
    opacity: 1;
}

.logo-wall__heading {
    text-align: center;
    font-size: var(--fs-body);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 3rem;
}

.logo-wall__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 96px;
    grid-auto-flow: dense;
    gap: 0.85rem;
}

.logo-wall__chip {
    --reveal: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.4rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, calc(0.05 + var(--reveal) * 0.07));
    border: 1px solid rgba(255, 255, 255, calc(0.14 + var(--reveal) * 0.28));
    /* Entrada escalonada: LogoWall.js agrega .is-visible y --i (orden de cada tarjeta) */
    opacity: 0;
    transition: opacity 1s var(--ease);
    transition-delay: calc(var(--i, 0) * 40ms);
}

.logo-wall__chip.is-visible {
    opacity: 1;
}

.logo-wall__chip--lg { grid-column: span 4; }
.logo-wall__chip--md { grid-column: span 3; }
.logo-wall__chip--sm { grid-column: span 2; }

/* Logos reales: sin placa de fondo, integrados directo sobre el vidrio oscuro. */
.logo-wall__chip--brand img {
    height: 28px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    opacity: calc(0.55 + var(--reveal) * 0.45);
}

/* Logos pensados para fondo claro: se les sube brillo y contraste para que se lean sobre el
   fondo oscuro sin perder su color (Enterlab ya trae su propia placa oscura y no lo necesita). */
.logo-wall__chip--boost img {
    filter: brightness(1.6) saturate(1.15) contrast(1.05) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

/* Ajustes por logo: cada archivo tiene márgenes internos distintos y a la misma altura no pesan igual */
.logo-wall__chip--brand .logo-wall__logo--montecitos { height: 90px; } /* logo apilado con mucho aire transparente */
.logo-wall__chip--brand .logo-wall__logo--enterlab { height: 34px; }
.logo-wall__chip--brand .logo-wall__logo--cpd { height: 44px; }

.logo-wall__word {
    font-weight: 800;
    letter-spacing: -0.03em;
    font-size: clamp(1rem, 1.4vw, 1.4rem);
    color: var(--white);
    /* Base 0.6: contraste suficiente (AA) aunque el cursor no esté cerca */
    opacity: calc(0.6 + var(--reveal) * 0.4);
    text-shadow: 0 0 calc(var(--reveal) * 22px) rgba(71, 210, 245, calc(var(--reveal) * 0.85));
    white-space: nowrap;
}

/* Táctil o movimiento reducido: todas iluminadas y quietas */
.logo-wall.is-static .logo-wall__chip {
    --reveal: 1;
}

@media (max-width: 1200px) {
    .logo-wall__grid {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 84px;
    }

    .logo-wall__chip--lg { grid-column: span 3; }
    .logo-wall__chip--md,
    .logo-wall__chip--sm { grid-column: span 2; }
}

@media (max-width: 768px) {
    .logo-wall {
        padding-block: 4rem;
    }

    .logo-wall__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 76px;
        gap: 0.6rem;
    }

    .logo-wall__chip--lg,
    .logo-wall__chip--md,
    .logo-wall__chip--sm {
        grid-column: span 1;
    }

    .logo-wall__chip--brand img { height: 22px; }
    .logo-wall__chip--brand .logo-wall__logo--montecitos { height: 70px; }
    .logo-wall__chip--brand .logo-wall__logo--enterlab { height: 26px; }
    .logo-wall__chip--brand .logo-wall__logo--cpd { height: 30px; }
    .logo-wall__word { font-size: var(--fs-body); }
}