/*
 * WÖRTH Selection · pie de página corporativo
 *
 * Medidas tomadas del pie de worthselection.com: fondo #032F27, márgenes
 * de 48 px, columnas de 270 / 265 / 500 / 220 px con 44 px entre ellas,
 * títulos 16 px verde menta, enlaces 14 px, letra Inter.
 */

.ws-site-footer {
    overflow: hidden; /* la última columna fija puede pasar el borde, igual que en la web */
    margin-top: 64px;
    background: #032F27;
    color: #fff;
    font-family: "Inter", Arial, Helvetica, sans-serif;
}

.ws-site-footer__shell {
    margin: 0 48px;
    padding: 48px 0 42px;
}

.ws-site-footer__layout {
    display: grid;
    grid-template-columns:
        minmax(190px, 270px)
        minmax(190px, 265px)
        minmax(300px, 500px)
        minmax(150px, 220px);
    gap: 44px;
}

/* Pantallas anchas: las mismas columnas fijas que la web */
@media (min-width: 1380px) {
    .ws-site-footer__layout {
        grid-template-columns: 270px 265px 500px 220px;
    }
}

.ws-site-footer__logo {
    display: inline-block;
    margin-top: 26px;
    line-height: 0;
}

.ws-site-footer__logo img {
    display: block;
    width: 231px;
    height: auto;
}

.ws-site-footer__description {
    max-width: 255px;
    margin: 44px 0 0;
    font-size: 15px;
    line-height: 1.45;
    color: #fff;
}

.ws-site-footer__heading {
    margin: 0 0 14px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0;
    color: #A7F3D0;
}

.ws-site-footer__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ws-site-footer__links li {
    margin: 0;
    line-height: 18.2px;
}

.ws-site-footer__links a {
    font-size: 14px;
    line-height: 18.2px;
    color: rgba(255, 255, 255, .96);
    text-decoration: none;
}

.ws-site-footer__links a:hover {
    color: #A7F3D0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ws-site-footer a:focus-visible {
    outline: 2px solid #A7F3D0;
    outline-offset: 3px;
    border-radius: 2px;
}

.ws-site-footer__areas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 38px;
}

.ws-site-footer__section--stack .ws-site-footer__section + .ws-site-footer__section {
    margin-top: 28px;
}

.ws-site-footer__bottom {
    margin: 0 48px;
    padding: 16px 0 18px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.ws-site-footer__copy {
    margin: 0;
    font-size: 11px;
    line-height: 16px;
    color: rgba(255, 255, 255, .72);
}

/* Tablet: marca arriba y tres columnas */
@media (max-width: 1100px) {
    .ws-site-footer__layout {
        grid-template-columns: 1fr 1.6fr 1fr;
        gap: 36px 32px;
    }

    .ws-site-footer__brand {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px 32px;
    }

    .ws-site-footer__logo {
        margin-top: 0;
    }

    .ws-site-footer__logo img {
        width: 190px;
    }

    .ws-site-footer__description {
        margin: 0;
    }
}

/* Tablet vertical: dos columnas, áreas de empleo a todo el ancho */
@media (max-width: 900px) {
    .ws-site-footer__layout {
        grid-template-columns: 1fr 1fr;
    }

    .ws-site-footer__section--areas {
        grid-column: 1 / -1;
        grid-row: 3;
    }
}

/* Móvil: una columna */
@media (max-width: 720px) {
    .ws-site-footer__shell {
        margin: 0 20px;
        padding: 40px 0 32px;
    }

    .ws-site-footer__bottom {
        margin: 0 20px;
    }

    .ws-site-footer__layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .ws-site-footer__section--areas {
        grid-row: auto;
    }

    .ws-site-footer__logo img {
        width: 160px;
    }

    .ws-site-footer__areas {
        gap: 8px 20px;
    }
}