/* ============================================================
   Capital Apps Menu — style.css
   Prefijo BEM: .cam  (capital apps menu)
   Variables del bloque inyectadas vía inline style en PHP.
   ============================================================ */

/* ── Variables globales del bloque ── */
:root {
    --cam-overlay-alpha : 0.8;
    --cam-bg            : #0d0d0d;
    --cam-banner-min-h  : 400px;
    --cam-banner-bg     : none;
    --cam-card-min-h    : 120px;
    --cam-card-cols     : repeat(auto-fill, minmax(200px, 1fr));
    --cam-card-radius   : 0.5em;
    --cam-card-bg       : #333333;
    --cam-card-img      : none;
    --cam-gap           : 12px;
    --cam-accent        : #f43151;
    --cam-text          : #ffffff;
    --cam-transition    : 0.2s ease;
}

/* ══════════════════════════════════════════════
   CONTENEDOR RAÍZ
══════════════════════════════════════════════ */

.cam {
    display        : flex;
    flex-direction : column;
    width          : 100%;
    background     : var(--cam-bg);
}

/* ══════════════════════════════════════════════
   BANNER HERO
══════════════════════════════════════════════ */

.cam-banner {
    position         : relative;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    min-height       : var(--cam-banner-min-h);
    overflow         : hidden;
    background-color : #111111;
}

/* Imagen de fondo con parallax (solo frontend) */
.cam-banner--has-bg {
    background-image    : var(--cam-banner-bg);
    background-size     : cover;
    background-position : center center;
    background-repeat   : no-repeat;
    background-attachment: fixed;
}

/* Overlay oscuro */
.cam-banner__overlay {
    position   : absolute;
    inset      : 0;
    background : rgba(0, 0, 0, var(--cam-overlay-alpha, 0.8));
    z-index    : 1;
}

/* Mensaje del banner */
.cam-banner__message {
    position   : relative;
    z-index    : 2;
    color      : var(--cam-text);
    text-align : center;
    padding    : 32px 24px;
    font-size  : 2rem;
    line-height: 1.2;
    font-weight: 300;
    max-width: 80%;
}

.cam-banner__message strong {
    font-weight : 700;
    color: #0073c1;
}



/* ══════════════════════════════════════════════
   GRILLA DE APPS
══════════════════════════════════════════════ */

.cam-grid {
    display               : grid;
    grid-template-columns : repeat(var(--cam-cols-desktop, 4), 1fr);
    gap                   : var(--cam-gap);
    padding               : 3em 0;
    max-width             : 80%;
    margin                : 0 auto;
    width                 : 100%;
    box-sizing            : border-box;
    padding-inline        : var(--cam-gap);
    align-items: start
}

.cam-grid--card {
    gap : 1rem;
}

@media (max-width: 767.98px) {
    .cam-banner {
        min-height : 250px;
    }

    .cam-grid {
        grid-template-columns : repeat(var(--cam-cols-tablet, 2), 1fr);
    }
}

@media (max-width: 399.98px) {
    .cam-banner {
        min-height : 200px;
    }

    .cam-grid {
        grid-template-columns : repeat(var(--cam-cols-mobile, 2), 1fr);
    }
}

/* ── Tarjeta base ── */
.cam-card {
    position         : relative;
    border-radius    : var(--cam-card-radius);
    overflow         : hidden;
    background-color : var(--cam-card-bg);
    transition       : transform var(--cam-transition),
                       box-shadow var(--cam-transition);
}

/* ══════════════════════════════════════════════
   MODO BOTÓN
   Descripción dentro del enlace, sobre el fondo.
══════════════════════════════════════════════ */

.cam-card--style-button {
    min-height : var(--cam-card-min-h);
    padding    : 0.5em;
}

.cam-card--style-button.cam-card--has-img {
    background-image    : var(--cam-card-img);
    background-size     : cover;
    background-position : center;
    background-repeat   : no-repeat;
}

.cam-card--style-button.cam-card--has-img::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : rgba(0, 0, 0, 0.6);
    z-index    : 1;
    transition : background var(--cam-transition);
}

.cam-card--style-button:hover.cam-card--has-img::before {
    background : rgba(0, 0, 0, 0.75);
}

.cam-card--style-button .cam-card__link {
    min-height     : var(--cam-card-min-h);
    justify-content: center;
}

.cam-card--style-button .cam-card__desc {
    display  : block;
    opacity  : 0.85;
}

/* ══════════════════════════════════════════════
   MODO TARJETA
   Enlace compacto con imagen/color arriba;
   descripción debajo fuera del enlace.
══════════════════════════════════════════════ */

.cam-card--style-card {
    display        : flex;
    flex-direction : column;
    background     : var(--cam-bg, #0d0d0d);
}

.cam-card--style-card .cam-card__link--compact {
    position            : relative;
    display             : flex;
    align-items         : center;
    justify-content     : center;
    min-height          : 80px;
    background-color    : var(--cam-card-bg);
    background-image    : var(--cam-card-img, none);
    background-size     : cover;
    background-position : center;
    background-repeat   : no-repeat;
    text-decoration     : none;
    color               : var(--cam-text);
    padding             : 12px 14px;
    transition          : filter var(--cam-transition);
}

.cam-card--style-card .cam-card__link--compact::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : rgba(0, 0, 0, 0.4);
    transition : background var(--cam-transition);
}

.cam-card--style-card .cam-card__link--compact:hover::before {
    background : rgba(0, 0, 0, 0.25);
}

.cam-card--style-card .cam-card__link--compact:focus-visible {
    outline        : 3px solid var(--cam-accent);
    outline-offset : -3px;
}

.cam-card--style-card .cam-card__label {
    position    : relative;
    z-index     : 1;
    margin      : 0;
    text-shadow : 0 1px 4px rgba(0, 0, 0, 0.8),
                  0 0px 12px rgba(0, 0, 0, 0.6);
}

.cam-card__desc-wrap {
    display    : flex;
    flex-direction : column;
    background : rgba(255, 255, 255, 0.05);
    flex       : 1;
}

.cam-card--style-card .cam-card__desc--outside {
    margin      : 0;
    padding     : 10px 14px 4px;
    font-size   : 0.775rem;
    line-height : 1.4;
    color       : rgba(255, 255, 255, 0.75);
    overflow           : hidden;
    display            : -webkit-box;
    -webkit-line-clamp : 2;
    -webkit-box-orient : vertical;
}

.cam-card__desc-wrap.is-expanded .cam-card__desc--outside {
    -webkit-line-clamp : unset;
    overflow           : visible;
}

.cam-card__toggle {
    align-self      : flex-start;
    margin          : 2px 14px 10px;
    padding         : 0;
    border          : none;
    background      : none;
    color           : var(--cam-accent);
    font-size       : 0.7rem;
    font-weight     : 600;
    letter-spacing  : 0.02em;
    cursor          : pointer;
    text-decoration : underline;
    text-underline-offset : 2px;
    transition      : color var(--cam-transition);
}

.cam-card__toggle:hover,
.cam-card__toggle:focus-visible {
    color : #fff;
}

.cam-card__toggle:focus-visible {
    outline        : 2px solid var(--cam-accent);
    outline-offset : 2px;
    border-radius  : 3px;
}

.cam-card__toggle[hidden] {
    display : none;
}

.cam-card__more {
    display         : inline-flex;
    align-items     : center;
    gap             : 5px;
    margin          : 0;
    padding         : 8px 14px 10px;
    font-size       : 0.75rem;
    font-weight     : 600;
    letter-spacing  : 0.03em;
    text-decoration : none;
    color           : var(--cam-accent);
    transition      : color var(--cam-transition),
                      gap var(--cam-transition);
}

.cam-card__more:hover,
.cam-card__more:focus-visible {
    color : #fff;
    gap   : 8px;
}

.cam-card__more:focus-visible {
    outline        : 2px solid var(--cam-accent);
    outline-offset : 2px;
    border-radius  : 3px;
}

.cam-card__more-arrow {
    display    : inline-block;
    transition : transform var(--cam-transition);
}

.cam-card__more:hover .cam-card__more-arrow {
    transform : translateX(3px);
}

/* ── Hover compartido entre modos ── */
.cam-card:hover {
    transform  : translateY(-3px);
    box-shadow : 0 8px 20px rgba(0, 0, 0, 0.45);
}

/* ── Enlace modo botón ── */
.cam-card--style-button .cam-card__link {
    position       : relative;
    z-index        : 2;
    display        : flex;
    flex-direction : column;
    text-align     : center;
    height         : 100%;
    text-decoration: none;
    color          : var(--cam-text);
}

.cam-card--style-button .cam-card__link:focus-visible {
    outline        : 3px solid var(--cam-accent);
    outline-offset : -3px;
}

.cam-card--style-button .cam-card__label,
.cam-card--style-button .cam-card__desc {
    text-shadow : 0 1px 4px rgba(0, 0, 0, 0.8),
                  0 0px 12px rgba(0, 0, 0, 0.6);
}

/* ── Etiqueta compartida entre modos ── */
.cam-card__label {
    display      : block;
    font-size    : 1.0625rem;
    font-weight  : 400;
    line-height  : 1.2;
    margin-bottom: 4px;
}

.cam-card__label strong {
    font-weight : 800;
}

/* ── Descripción modo botón (dentro del enlace) ── */
.cam-card__desc {
    display     : block;
    font-size   : 0.95rem;
    line-height : 1.35;
}

/* ── Texto solo para lectores de pantalla ── */
.cam__sr {
    position    : absolute !important;
    width       : 1px;
    height      : 1px;
    padding     : 0;
    margin      : -1px;
    overflow    : hidden;
    clip        : rect(0, 0, 0, 0);
    white-space : nowrap;
    border      : 0;
}

/* ══════════════════════════════════════════════
   INDICADOR EN EL EDITOR DE BLOQUES
══════════════════════════════════════════════ */

.block-editor-block-list__block .cam {
    outline : 1px dashed rgba(255, 255, 255, 0.15);
}

.block-editor-block-list__block .cam-banner--has-bg {
    background-attachment : scroll;
}

@media (max-width: 767.98px) {
    :root {
        --cam-card-min-h : 100px;
        --cam-gap        : 8px;
    }

    .cam-banner__message {
        font-size : clamp(1rem, 4vw, 1.5rem);
        padding   : 24px 16px;
    }
}