/**
 * Componente Beneficios — SEAFORMEC
 *
 * Clase base:
 * .sf-benefits
 *
 * Diseño:
 * Bento grid institucional con composición asimétrica.
 *
 * Norma de espaciado vertical:
 * - Escritorio: 64px
 * - Tablet:     48px
 * - Móvil:      32px
 */


/* ==========================================================
   SECCIÓN
   ========================================================== */

.sf-benefits {
    width: 100%;
    margin-block: 0 !important;

    padding-block: 64px !important;
    padding-inline: 0 !important;

    background: #fff;

    box-sizing: border-box;
}


/* ==========================================================
   CONTENEDOR
   ========================================================== */

.sf-benefits__container {
    width: min(calc(100% - 64px), 1180px) !important;
    max-width: none !important;

    margin-inline: auto !important;
    padding: 0 !important;

    box-sizing: border-box;
}


/* ==========================================================
   CABECERA
   ========================================================== */

.sf-benefits__container > h2 {
    max-width: 760px;

    margin: 0 !important;

    text-align: left;
}

.sf-benefits__container > h2 + p {
    max-width: 760px;

    margin: 16px 0 0 !important;

    line-height: 1.6;
    text-align: left;
    text-wrap: pretty;
}


/* ==========================================================
   BENTO GRID
   ========================================================== */

.sf-benefits__grid {
    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    width: 100% !important;
    max-width: none !important;

    margin: 40px 0 0 !important;
    padding: 0 !important;

    gap: 20px !important;
}


/* ==========================================================
   BENEFICIO
   ========================================================== */

.sf-benefits__item {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 230px;

    margin: 0 !important;
    padding: 32px !important;

    background: var(--wp--preset--color--light-gray);

    border: 1px solid transparent;
    border-radius: 8px;

    box-sizing: border-box;

    overflow: hidden;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}


/*
 * Los beneficios destacados ocupan dos columnas.
 *
 * La secuencia:
 * wide + normal
 * normal + wide
 *
 * crea la composición Bento.
 */
.sf-benefits__item--wide {
    grid-column: span 2;
}


/* ==========================================================
   ICONO
   ========================================================== */

.sf-benefits__icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 48px;
    height: 48px;

    margin: 0 0 28px !important;
    padding: 0 !important;

    color: var(--wp--preset--color--seaformec-yellow);
}

.sf-benefits__icon > * {
    max-width: 100%;
    margin: 0 !important;
}

/* Imagen PNG dentro del contenedor del icono */
.sf-benefits__icon .wp-block-image {
    width: 100%;
    height: 100%;
    margin: 0 !important;
}

.sf-benefits__icon .wp-block-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================================
   TÍTULO DEL BENEFICIO
   ========================================================== */

.sf-benefits__item h3 {
    max-width: 520px;

    margin: 0 !important;

    font-size: clamp(1.375rem, 1.8vw, 1.625rem);
    line-height: 1.2;

    text-wrap: balance;
}


/* ==========================================================
   DESCRIPCIÓN
   ========================================================== */

.sf-benefits__item h3 + p {
    max-width: 580px;

    margin: 12px 0 0 !important;

    line-height: 1.55;

    text-wrap: pretty;
}


/* ==========================================================
   DETALLE VISUAL DE LOS ELEMENTOS DESTACADOS
   ========================================================== */

.sf-benefits__item--wide::after {
    content: "";

    position: absolute;
    right: -45px;
    bottom: -65px;

    width: 180px;
    height: 180px;

    border: 1px solid rgb(240 171 0 / 28%);
    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================
   INTERACCIÓN
   ========================================================== */

@media (hover: hover) and (pointer: fine) {

    .sf-benefits__item:hover {
        transform: translateY(-2px);

        border-color: rgb(240 171 0 / 45%);

        box-shadow: 0 6px 18px rgb(0 0 0 / 7%);
    }
}


/* ==========================================================
   TABLET / PORTÁTIL ESTRECHO — <= 1100px
   ========================================================== */

@media (max-width: 1100px) {

    .sf-benefits {
        padding-block: 48px !important;
    }

    .sf-benefits__container {
        width: min(calc(100% - 48px), 900px) !important;
    }

    .sf-benefits__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /*
     * En tablet eliminamos la asimetría de ancho.
     * Cada beneficio ocupa una columna.
     */
    .sf-benefits__item--wide {
        grid-column: span 1;
    }

    .sf-benefits__item {
        min-height: 220px;

        padding: 28px !important;
    }
}


/* ==========================================================
   MÓVIL — <= 600px
   ========================================================== */

@media (max-width: 600px) {

    .sf-benefits {
        padding-block: 32px !important;
    }

    .sf-benefits__container {
        width: calc(100% - 32px) !important;
    }

    .sf-benefits__grid {
        grid-template-columns: 1fr !important;

        margin-top: 32px !important;

        gap: 16px !important;
    }

    .sf-benefits__item,
    .sf-benefits__item--wide {
        grid-column: auto;

        min-height: 0;

        padding: 24px !important;
    }

    .sf-benefits__icon {
        width: 42px;
        height: 42px;

        margin-bottom: 20px !important;
    }

    .sf-benefits__item h3 {
        font-size: 1.375rem;
    }

    /*
     * Reducimos el elemento decorativo para que no interfiera
     * con la lectura en pantallas pequeñas.
     */
    .sf-benefits__item--wide::after {
        right: -55px;
        bottom: -70px;

        width: 150px;
        height: 150px;
    }
}