/* ============================================================================
 * Mini-slides Splide — CSS dédié et personnalisable élément par élément.
 * Chaque sélecteur ci-dessous cible un morceau précis du DOM d'un mini-slide.
 * ==========================================================================*/

/* Conteneur global : pleine largeur de la colonne, hauteur déduite d'un
 * RATIO rectangulaire (le cadre reste un rectangle, quelle que soit la taille
 * réelle des images). Ajuste le ratio via --oaka-mini-ratio (ex. 4/3, 3/2,
 * 21/9...) globalement ici ou par tuile sur .oaka-mini-slide-wrapper. */
.oaka-mini-slide-wrapper {
    --oaka-mini-ratio: 16 / 9;
    position: relative;
    display: block;                 /* utile quand le wrapper est un <a> */
    width: 100%;
    aspect-ratio: var(--oaka-mini-ratio);
    overflow: hidden;
    text-decoration: none;          /* pas de soulignement si lien */
}
/* Curseur "main" quand la tuile est cliquable */
a.oaka-mini-slide-wrapper { cursor: pointer; }

/* Le slider remplit tout le cadre. On le met en absolu (inset:0) pour lui
 * donner une hauteur DÉFINIE calée sur l'aspect-ratio du wrapper : ainsi les
 * height:100% enfants se résolvent de façon fiable (contourne le bug de
 * résolution des % de hauteur sur un parent en aspect-ratio). */
.oaka-mini-slide {
    position: absolute;
    inset: 0;
}

/* Toute la mécanique interne prend la pleine hauteur.
 * !important : bat une hauteur inline éventuellement posée par Splide. */
.oaka-mini-slide .splide__track,
.oaka-mini-slide .splide__list,
.oaka-mini-slide .splide__slide {
    height: 100% !important;
}

.oaka-mini-slide .splide__slide {
    position: relative;
    overflow: hidden;
}

/* Médias en "background cover" : positionnement absolu pour remplir toute la
 * slide (quitte à rogner) et harmoniser toutes les hauteurs. !important pour
 * neutraliser un éventuel height:auto imposé par le thème. */
.oaka-mini-slide .splide__slide img,
.oaka-mini-slide .oaka-mini-slide__video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    max-width: none;
}

/* ---- Titre superposé PAR-DESSUS le slider ---- */
.oaka-mini-slide__title {
    position: absolute;
    z-index: 3;
    margin: 0;
    padding: 0 15px;
    box-sizing: border-box;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    pointer-events: none;
}
/* Défaut (film plein écran ou absent) : centré sur toute la tuile. */
.oaka-mini-slide__title:not(.oaka-title-boxed) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
/* Titre calé sur la zone du film : le placement vient des classes
 * .oaka-ov-pos-* (comme le film), la taille de l'inline, texte centré. */
.oaka-mini-slide__title.oaka-title-boxed {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Placeholder (bloc couleur affiché hors survol) ----
 * z-index 1 : juste au-dessus des médias, SOUS le film (qui reste permanent).
 * Hors survol il masque la galerie (aplat de couleur) ; au survol il s'efface. */
.oaka-mini-slide__placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
/* Média (image ou vidéo) du placeholder : remplit le cadre */
.oaka-placeholder-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Au survol : on révèle la galerie/vidéo */
.oaka-hover-reveal:hover .oaka-mini-slide__placeholder {
    opacity: 0;
}

/* ============================================================================
 * Film / overlay : couleur + opacité en inline, forme & position en classes.
 * ==========================================================================*/
.oaka-mini-overlay {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

/* --- Formes --- */
.oaka-ov-full      { inset: 0; width: 100%; height: 100%; }
.oaka-ov-rectangle { left: 0; width: 100%; }                 /* hauteur = taille (inline) */
.oaka-ov-square    { aspect-ratio: 1 / 1; }                  /* largeur = taille (inline) */
.oaka-ov-diamond   { aspect-ratio: 1 / 1; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

/* --- Positions (formes non plein écran) --- */
.oaka-ov-pos-top-left      { top: 0;    left: 0; }
.oaka-ov-pos-top-center    { top: 0;    left: 50%; transform: translateX(-50%); }
.oaka-ov-pos-top-right     { top: 0;    right: 0; }
.oaka-ov-pos-center-left   { top: 50%;  left: 0;   transform: translateY(-50%); }
.oaka-ov-pos-center        { top: 50%;  left: 50%; transform: translate(-50%, -50%); }
.oaka-ov-pos-center-right  { top: 50%;  right: 0;  transform: translateY(-50%); }
.oaka-ov-pos-bottom-left   { bottom: 0; left: 0; }
.oaka-ov-pos-bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); }
.oaka-ov-pos-bottom-right  { bottom: 0; right: 0; }