/**
 * Componente Selector de acreditación — SEAFORMEC
 *
 * Clase base:
 * .sf-accreditation-selector
 *
 * Objetivo:
 * Orientar al usuario hacia el tipo de acreditación adecuado
 * según su perfil o necesidad.
 *
 * Norma de espaciado vertical:
 * - Escritorio: 64px
 * - Tablet:     48px
 * - Móvil:      32px
 */


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

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

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

    background: var(--wp--preset--color--light-gray);
    box-sizing: border-box;
}


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

.sf-accreditation-selector__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-accreditation-selector__container > h2 {
    max-width: 760px;
    margin: 0 !important;

    text-align: left;
}

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

    margin: 16px 0 0 !important;

    text-align: left;
    text-wrap: pretty;
}


/* ==========================================================
   OPCIONES
   ========================================================== */

.sf-accreditation-selector__options {
    width: 100% !important;
    max-width: none !important;

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

    gap: 24px !important;
    align-items: stretch !important;
}

.sf-accreditation-selector__options > .wp-block-column {
    display: flex;
    min-width: 0;
}


/* ==========================================================
   CARD / RUTA
   ========================================================== */

.sf-accreditation-selector__card {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100%;

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

    background: #fff;

    border: 1px solid var(--wp--preset--color--light-gray);
    border-top: 4px solid var(--wp--preset--color--seaformec-yellow);
    border-radius: 8px;

    box-shadow: 0 4px 14px rgb(0 0 0 / 7%);

    box-sizing: border-box;

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


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

.sf-accreditation-selector__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

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

    color: #000;
    background: var(--wp--preset--color--seaformec-yellow);

    border-radius: 50%;
}

.sf-accreditation-selector__icon > * {
    margin: 0 !important;
}


/* ==========================================================
   ETIQUETA DE PERFIL
   ========================================================== */

.sf-accreditation-selector__eyebrow {
    margin: 0 0 12px !important;

    color: var(--wp--preset--color--dark-gray);

    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}


/* ==========================================================
   CONTENIDO DE LA CARD
   ========================================================== */

.sf-accreditation-selector__card h3 {
    margin: 0 !important;

    font-size: clamp(1.5rem, 2vw, 1.875rem);
    line-height: 1.15;
    text-wrap: balance;
}

.sf-accreditation-selector__card h3 + p {
    margin: 16px 0 0 !important;

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


/* ==========================================================
   ENLACES DE DECISIÓN
   ========================================================== */

.sf-accreditation-selector__links {
    width: 100%;

    margin-top: auto !important;
    padding-top: 28px !important;
}

/* En la card profesional, el único enlace continúa
 * inmediatamente después del contenido descriptivo.
 */
.sf-accreditation-selector__card--professional
.sf-accreditation-selector__links {
    margin-top: 0 !important;
}

.sf-accreditation-selector__links p {
    margin: 0 !important;
}

.sf-accreditation-selector__links a {
    display: block;

    width: 100%;
    padding: 14px 0;

    color: #000;

    border-top: 1px solid var(--wp--preset--color--light-gray);

    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;

    transition:
        color 160ms ease,
        padding-left 160ms ease;
}

.sf-accreditation-selector__links p:first-child a {
    border-top: 0;
}


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

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

    .sf-accreditation-selector__card:hover {
        transform: translateY(-3px);

        border-color: rgb(240 171 0 / 55%);
        border-top-color: var(--wp--preset--color--seaformec-yellow);

        box-shadow: 0 8px 22px rgb(0 0 0 / 10%);
    }

    .sf-accreditation-selector__links a:hover {
        color: var(--wp--preset--color--dark-gray);
        padding-left: 6px;
    }
}


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

@media (max-width: 1100px) {

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

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

    .sf-accreditation-selector__card {
        padding: 32px !important;
    }
}


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

@media (max-width: 600px) {

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

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

    .sf-accreditation-selector__options {
        margin-top: 32px !important;
        gap: 20px !important;
    }

    .sf-accreditation-selector__card {
        padding: 28px 24px !important;
    }

    .sf-accreditation-selector__icon {
        width: 46px;
        height: 46px;

        margin-bottom: 20px !important;
    }

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

    .sf-accreditation-selector__links {
        padding-top: 20px !important;
    }
}