/*
 * Stunning Carousel — Layout grid-dark
 *
 * Grille de cartes sur fond sombre. Tout est strictement scopé sous
 * `.sc-layout-grid-dark` pour éviter tout conflit avec le thème hôte
 * ou les autres layouts du plugin.
 *
 * Notes 0.5.0 :
 *  - `--sc-gap`, `--sc-radius`, `--sc-wrapper-padding`, `--sc-text-scale`
 *    et les *_scale individuels sont consommés avec fallbacks aux valeurs
 *    pré-0.5.0 (16px gap, 8px radius, etc.).
 *  - `--sc-gradient-opacity` pilote l'opacité du gradient bas (fallback 0.7).
 *  - `--sc-border-width` + classe modifier `sc-card-border--{value}` qui
 *    déclare `--sc-border-color` skin-aware (rgba blanc ici).
 *  - `badge_position` est une option de layout (pas commune) : géré via
 *    classe modifier `sc-layout-grid-dark--badge-pos-{value}` posée par le PHP.
 */

/* Conteneur */
.sc-layout-grid-dark {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    font-family: inherit; /* Garantit l'héritage de la police du thème hôte, même face à un thème qui imposerait font-family sur un sélecteur générique. */
    padding: var(--sc-wrapper-padding, 0);
}

/* Grille responsive — 3 colonnes par défaut (default de l'option `columns`).
   `gap` consomme `--sc-gap` avec fallback 16px (= défaut historique). */
.sc-layout-grid-dark .sc-grid {
    display: grid;
    gap: var(--sc-gap, 16px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Modificateurs desktop : pilotent le nombre de colonnes selon l'option `columns`.
   La règle `--cols-3` est techniquement redondante avec la base mais explicite la
   correspondance et facilite un éventuel changement futur du défaut. */
.sc-layout-grid-dark--cols-2 .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-layout-grid-dark--cols-3 .sc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-layout-grid-dark--cols-4 .sc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-layout-grid-dark--cols-5 .sc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1023px) {
    /* Cap tablette : 2 colonnes pour les choix 2 et 3 (et la base). */
    .sc-layout-grid-dark .sc-grid,
    .sc-layout-grid-dark--cols-2 .sc-grid,
    .sc-layout-grid-dark--cols-3 .sc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Override : 3 colonnes pour les choix 4 et 5 (lisibilité du reveal). */
    .sc-layout-grid-dark--cols-4 .sc-grid,
    .sc-layout-grid-dark--cols-5 .sc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    /* Mobile : 1 colonne quel que soit le choix desktop.
       `gap` mobile à 12px par défaut — surchargeable via `--sc-gap`. */
    .sc-layout-grid-dark .sc-grid,
    .sc-layout-grid-dark--cols-2 .sc-grid,
    .sc-layout-grid-dark--cols-3 .sc-grid,
    .sc-layout-grid-dark--cols-4 .sc-grid,
    .sc-layout-grid-dark--cols-5 .sc-grid {
        grid-template-columns: 1fr;
        gap: var(--sc-gap, 12px);
    }
}

/* Cards */
.sc-layout-grid-dark .sc-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--sc-radius, 8px);
    cursor: pointer;
    isolation: isolate;
    background: var(--sc-ink, #0D0D0D);
    /* Bordure pilotée par l'option commune `card_border`. Largeur via
       `--sc-border-width` (0/1px), couleur via `--sc-border-color` injectée
       par les classes modifier ci-dessous (skin-aware). */
    border: var(--sc-border-width, 0) solid var(--sc-border-color, transparent);
}

.sc-layout-grid-dark .sc-card:focus-visible {
    outline: 2px solid var(--sc-gold, #C8A84B);
    outline-offset: 2px;
}

/* Aspect ratio piloté par les modifiers du wrapper. */
.sc-layout-grid-dark--ratio-4-5 .sc-card  { aspect-ratio: 4 / 5; }
.sc-layout-grid-dark--ratio-1-1 .sc-card  { aspect-ratio: 1 / 1; }
.sc-layout-grid-dark--ratio-3-4 .sc-card  { aspect-ratio: 3 / 4; }
.sc-layout-grid-dark--ratio-16-9 .sc-card { aspect-ratio: 16 / 9; }

/* Image de fond + transition pour le micro-zoom hover. */
.sc-layout-grid-dark .sc-card__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}

/* Gradient de lisibilité pour le titre/badge au repos. Présent par défaut
   pour garantir la lisibilité dans le cas standard. Opacité pilotée par
   `--sc-gradient-opacity` (fallback 0.7 = défaut historique grid-dark). */
.sc-layout-grid-dark .sc-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, var(--sc-gradient-opacity, 0.7)) 100%);
    pointer-events: none;
}

/* Cas extrême : aucun élément au repos → l'image reste pure, sans assombrissement bas. */
.sc-layout-grid-dark--no-rest .sc-card__image::after {
    display: none;
}

/* État repos — badge top-left (position par défaut, pilotable via `badge_position`). */
.sc-layout-grid-dark .sc-card__badge-rest {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
    padding: 4px 10px;
    font-size: calc(11px * var(--sc-text-scale, 1));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--sc-text-light, #F5F0E8);
    border-radius: 999px;
}

/* Modifiers de position du badge — appliqués par le PHP du layout via la
   classe `sc-layout-grid-dark--badge-pos-{value}`. `top-left` étant le
   défaut, sa classe n'est jamais imprimée (skip si default). */
.sc-layout-grid-dark--badge-pos-top-right .sc-card__badge-rest {
    left: auto;
    right: 16px;
}
.sc-layout-grid-dark--badge-pos-bottom-left .sc-card__badge-rest {
    top: auto;
    bottom: 16px;
}
.sc-layout-grid-dark--badge-pos-bottom-right .sc-card__badge-rest {
    top: auto;
    bottom: 16px;
    left: auto;
    right: 16px;
}

/* État repos — titre en bas */
.sc-layout-grid-dark .sc-card__rest-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 16px;
}

.sc-layout-grid-dark .sc-card__title-rest {
    color: var(--sc-text-light, #F5F0E8);
    font-size: calc(clamp(18px, 1.4vw, 22px) * var(--sc-title-scale, var(--sc-text-scale, 1)));
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

/* Panneau de reveal — état inactif (par défaut et au retour de fermeture).
   À la fermeture : le contenu s'efface d'abord (opacity 0.2s), puis le
   panneau redescend après un délai de 0.15s. Sortie posée, symétrique
   à la lenteur de l'entrée séquencée. */
.sc-layout-grid-dark .sc-card__reveal {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(13, 13, 13, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: 0.15s;
    will-change: transform;
    display: flex;
    align-items: flex-end;
    padding: 20px;
    pointer-events: none;
}

/* Panneau de reveal — état actif (entrée).
   Translate immédiat (pas de delay), durée 0.4s — comportement d'origine
   strictement préservé. */
.sc-layout-grid-dark .sc-card.is-active .sc-card__reveal {
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: 0s;
    pointer-events: auto;
}

/* Contenu interne — état inactif : opacity 0 sur 0.2s sans délai.
   À la fermeture, le contenu disparaît immédiatement pendant que le
   panneau attend 0.15s avant de redescendre.
   Scroll vertical natif si la description dépasse la hauteur de la card
   (cas fréquent en aspect 1:1 avec description longue). On laisse le
   scrollbar natif — plus propre et theme-agnostic. */
.sc-layout-grid-dark .sc-card__reveal-inner {
    width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding-right: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
    transition-delay: 0s;
}

/* Scrollbar custom pour grid-dark : intégration visuelle au panneau sombre.
   Couleurs en rgba blanc pour rester relatives au fond — theme-agnostic. */

/* Firefox */
.sc-layout-grid-dark .sc-card__reveal-inner {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.05);
}

/* WebKit (Chrome, Safari, Edge, Opera) */
.sc-layout-grid-dark .sc-card__reveal-inner::-webkit-scrollbar {
    width: 6px;
}

.sc-layout-grid-dark .sc-card__reveal-inner::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.sc-layout-grid-dark .sc-card__reveal-inner::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    transition: background 0.2s ease;
}

.sc-layout-grid-dark .sc-card__reveal-inner::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Contenu interne — état actif : animation séquencée d'origine
   (cf. STUNNING_CAROUSEL_CONTEXT.md section 7). Opacity APRÈS le
   translate du panneau, durée 0.25s avec delay 0.35s. */
.sc-layout-grid-dark .sc-card.is-active .sc-card__reveal-inner {
    opacity: 1;
    transition: opacity 0.25s ease;
    transition-delay: 0.35s;
}

/* Contenu du reveal */
.sc-layout-grid-dark .sc-card__badge {
    align-self: flex-start;
    padding: 4px 10px;
    font-size: calc(11px * var(--sc-text-scale, 1));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--sc-text-light, #F5F0E8);
    border-radius: 999px;
}

.sc-layout-grid-dark .sc-card__title {
    color: var(--sc-text-light, #F5F0E8);
    font-size: calc(clamp(20px, 1.6vw, 26px) * var(--sc-title-scale, var(--sc-text-scale, 1)));
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
}

.sc-layout-grid-dark .sc-card__pills {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sc-layout-grid-dark .sc-card__pills li {
    font-size: calc(12px * var(--sc-pills-scale, var(--sc-text-scale, 1)));
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--sc-text-light, #F5F0E8);
    border-radius: 999px;
}

.sc-layout-grid-dark .sc-card__desc {
    color: var(--sc-text-light, #F5F0E8);
    font-size: calc(14px * var(--sc-desc-scale, var(--sc-text-scale, 1)));
    line-height: 1.5;
    margin: 0;
    opacity: 0.92;
}

.sc-layout-grid-dark .sc-card__duration {
    position: relative;
    padding-left: 18px;
    color: var(--sc-gold, #C8A84B);
    font-size: calc(12px * var(--sc-text-scale, 1));
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sc-layout-grid-dark .sc-card__duration::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 12px;
    height: 1px;
    background: var(--sc-gold, #C8A84B);
}

/* Hover micro-zoom : uniquement sur devices avec hover réel. L'ouverture
   du panneau au hover est gérée en JS (délai d'intent). */
@media (hover: hover) {
    .sc-layout-grid-dark .sc-card:hover .sc-card__image {
        transform: scale(1.02);
    }
}

/* --------------------------------------------------------------
 * Modifiers communs (introduits en 0.5.0)
 * -------------------------------------------------------------- */

/* `pills_uppercase = 1` */
.sc-layout-grid-dark.sc-pills--uppercase .sc-card__pills li {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* `badge_style = outline` : remplace le pillule semi-transparent par un
   contour pillulé (background transparent, border 1px). S'applique au
   badge du panneau de reveal ET au badge-rest de l'état repos. */
.sc-layout-grid-dark.sc-badge-style--outline .sc-card__badge,
.sc-layout-grid-dark.sc-badge-style--outline .sc-card__badge-rest {
    background: transparent;
    border: 1px solid var(--sc-text-light, #F5F0E8);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* `badge_style = editorial` : préfixe `// `, fond et padding minimaux,
   style typographique éditorial calque grid-light. */
.sc-layout-grid-dark.sc-badge-style--editorial .sc-card__badge,
.sc-layout-grid-dark.sc-badge-style--editorial .sc-card__badge-rest {
    background: transparent;
    padding-left: 0;
    padding-right: 0;
    color: var(--sc-gold, #C8A84B);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.sc-layout-grid-dark.sc-badge-style--editorial .sc-card__badge::before,
.sc-layout-grid-dark.sc-badge-style--editorial .sc-card__badge-rest::before {
    content: '// ';
    opacity: 0.5;
}

/* `pills_style = squared` : pills carrées au lieu de pillulées. */
.sc-layout-grid-dark.sc-pills-style--squared .sc-card__pills li {
    border-radius: 0;
}

/* `pills_style = minimal` : retire fond et backdrop-filter. */
.sc-layout-grid-dark.sc-pills-style--minimal .sc-card__pills li {
    background: transparent;
    padding: 4px 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* `card_border = subtle/pronounced` : déclare `--sc-border-color` qui
   est ensuite consommée par la règle `.sc-card { border: ... }` plus haut.
   Couleurs en rgba blanc — adapté au fond sombre du layout. */
.sc-layout-grid-dark.sc-card-border--subtle {
    --sc-border-color: rgba(255, 255, 255, 0.08);
}
.sc-layout-grid-dark.sc-card-border--pronounced {
    --sc-border-color: rgba(255, 255, 255, 0.2);
}