/* ===== SEO BY INDUSTRY =====
   Seccion de acceso a las landings por nicho.
   Escritorio: rejilla fija 4x2. Movil: carrusel deslizable.
   Solo se carga en local-seo-agency-long-island-city.php */

.industries_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5vw;
    padding: 5vw 5vw 3vw 5vw;
}

.industries_section > h2 {
    font-size: 2.2vw;
    color: var(--dark);
    text-align: center;
    font-weight: 600;
}

.industries_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1vw;
    width: 100%;
}

.industry_item {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1vw;
    padding: 1.6vw;
    border-radius: 1vw;
    background: #23222508;
    border: 1px solid #23222518;
    text-decoration: none;
    transition: .4s;
}

.industry_item:hover {
    background: var(--dark);
    border-color: var(--dark);
    transform: translateY(-.4vw);
}

.industry_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.4vw;
    height: 3.4vw;
    border-radius: .7vw;
    background: var(--orange);
    color: white;
    font-size: 1.8vw;
    flex-shrink: 0;
    transition: .4s;
}

.industry_item:hover .industry_icon {
    background: white;
    color: var(--orange);
}

.industry_text {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5vw;
    flex: 1;
}

.industry_name {
    font-size: 1.05vw;
    line-height: 1.35;
    font-weight: 600;
    color: var(--dark);
    transition: .4s;
}

.industry_item:hover .industry_name {
    color: white;
}

.industry_arrow {
    font-size: 1.1vw;
    color: var(--orange);
    flex-shrink: 0;
    transition: .4s;
}

.industry_item:hover .industry_arrow {
    color: white;
    transform: translate(.2vw, -.2vw);
}

@media (max-width: 996px) {
    .industries_section {
        gap: 6vw;
        padding: 10vw 0 6vw 0;
    }

    .industries_section > h2 {
        font-size: 6vw;
        padding: 0 5vw;
    }

    /* Carrusel: la rejilla pasa a fila deslizable con snap */
    .industries_grid {
        display: flex;
        grid-template-columns: none;
        gap: 4vw;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 5vw;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 1vw 5vw 2vw 5vw;
    }

    .industries_grid::-webkit-scrollbar {
        display: none;
    }

    .industry_item {
        flex: 0 0 72%;
        scroll-snap-align: start;
        gap: 4vw;
        padding: 5vw;
        border-radius: 3vw;
    }

    /* Sin hover en tactil: la tarjeta se queda como esta */
    .industry_item:hover {
        background: #23222508;
        border-color: #23222518;
        transform: none;
    }

    .industry_item:hover .industry_icon {
        background: var(--orange);
        color: white;
    }

    .industry_item:hover .industry_name {
        color: var(--dark);
    }

    .industry_item:hover .industry_arrow {
        color: var(--orange);
        transform: none;
    }

    .industry_icon {
        width: 12vw;
        height: 12vw;
        border-radius: 2.5vw;
        font-size: 6vw;
    }

    .industry_name {
        font-size: 3.8vw;
    }

    .industry_arrow {
        font-size: 4.5vw;
    }
}