/**
 * Utilities — Estilos globais reutilizáveis
 * Gerado pelo tema rei-do-cbd
 * -------------------------------------------------------
 * Contém helpers genéricos que podem ser aplicados em
 * qualquer template part via classes utilitárias ou
 * CSS custom properties injetadas inline pelo PHP.
 */

/* -------------------------------------------------------
 * 1. ASPECT RATIO — .ar-{ratio}
 *    Uso: <div class="ar-16-9"> ou via --aspect-ratio
 *    Funciona em qualquer elemento com overflow:hidden
 * ------------------------------------------------------- */

.ar-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Ratios pré-definidos */
.ar-1-1   { aspect-ratio: 1 / 1; }
.ar-4-3   { aspect-ratio: 4 / 3; }
.ar-3-4   { aspect-ratio: 3 / 4; }
.ar-16-9  { aspect-ratio: 16 / 9; }
.ar-9-16  { aspect-ratio: 9 / 16; }
.ar-3-2   { aspect-ratio: 3 / 2; }
.ar-2-3   { aspect-ratio: 2 / 3; }
.ar-21-9  { aspect-ratio: 21 / 9; }

/* Ratio dinâmico via CSS custom property injetada inline */
.ar-custom {
    aspect-ratio: var(--ar, auto);
}

/* Imagem dentro de qualquer ar-wrap cobre o container */
.ar-wrap img,
.ar-1-1 img,
.ar-4-3 img,
.ar-3-4 img,
.ar-16-9 img,
.ar-9-16 img,
.ar-3-2 img,
.ar-2-3 img,
.ar-21-9 img,
.ar-custom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* -------------------------------------------------------
 * 2. SECTION BG IMAGE — .has-bg-image
 *    A URL é injetada via style="--bg-image: url(...)"
 * ------------------------------------------------------- */

.has-bg-image {
    background-image: var(--bg-image, none);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* -------------------------------------------------------
 * 3. OVERLAY GRADIENT — .has-overlay
 *    Posição: absolute, z-index 0, cobre 100% da seção.
 *    A seção pai precisa de position: relative.
 *    Gradiente configurável via CSS custom properties:
 *      --overlay-color-start  (padrão: rgba(0,0,0,0.5))
 *      --overlay-color-end    (padrão: rgba(0,0,0,0))
 *      --overlay-direction    (padrão: to right)
 *      --overlay-opacity      (padrão: 1)
 * ------------------------------------------------------- */

.has-overlay {
    position: relative;
}

.has-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        var(--overlay-direction, to right),
        var(--overlay-color-start, rgba(0, 0, 0, 0.5)),
        var(--overlay-color-end, rgba(0, 0, 0, 0))
    );

    
    opacity: var(--overlay-opacity, 1);
    pointer-events: none;
}

/* -------------------------------------------------------
 * 4. CONTEÚDO ACIMA DO OVERLAY — .above-overlay
 *    Garante z-index >= 2 e position relative em qualquer
 *    filho direto que precise ficar acima do overlay.
 * ------------------------------------------------------- */

.above-overlay {
    position: relative;
    z-index: 2;
}