/**
 * CHRU Nancy — Médias front-end (lightbox, facade YouTube, légendes galerie)
 */

/* ============================================================
 * LIGHTBOX
 * ============================================================ */
.chru-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vw;
    background: rgba(0, 0, 0, 0.85);
}

.chru-lightbox[hidden] {
    display: none;
}

body.chru-lightbox-open {
    overflow: hidden;
}

.chru-lightbox__figure {
    margin: 0;
    max-width: 92vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chru-lightbox__img {
    max-width: 92vw;
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.chru-lightbox__caption {
    margin-top: 12px;
    color: #fff;
    font-size: 14px;
    font-style: italic;
    text-align: center;
    max-width: 80ch;
}

.chru-lightbox__caption[hidden] {
    display: none;
}

.chru-lightbox__close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

.chru-lightbox__close:hover,
.chru-lightbox__close:focus-visible {
    background: rgba(255, 255, 255, 0.35);
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Curseur loupe sur les images cliquables */
.chru-has-lightbox {
    cursor: zoom-in;
    display: inline-block;
}

/* Images de contenu rendues cliquables (ouverture lightbox, cf. media.js) */
.chru-img-zoom {
    cursor: zoom-in;
}

.chru-img-zoom:focus-visible {
    outline: 3px solid var(--chru-accent, #0096D6);
    outline-offset: 2px;
}

/* ============================================================
 * FACADE YOUTUBE
 * ============================================================ */
/* Quand la façade est posée (JS), on supprime la hauteur réservée par le ratio
 * intrinsèque de WP (prévue pour un iframe en absolu) : la façade se dimensionne
 * seule en 16/9. Sans ça, grand espace vide au-dessus de la vidéo. */
.wp-block-embed.chru-yt-embed--ready.wp-has-aspect-ratio .wp-block-embed__wrapper::before {
    content: none;
    padding-top: 0;
}

.chru-yt-facade {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
}

.chru-yt-facade__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.chru-yt-facade:hover .chru-yt-facade__poster,
.chru-yt-facade:focus-visible .chru-yt-facade__poster {
    transform: scale(1.03);
    opacity: 0.9;
}

.chru-yt-facade__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    border-radius: 14px;
    background: rgba(20, 68, 107, 0.9);
    transition: background 0.2s ease;
}

.chru-yt-facade:hover .chru-yt-facade__play,
.chru-yt-facade:focus-visible .chru-yt-facade__play {
    background: var(--chru-red, #E6321F);
}

.chru-yt-facade__play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #fff;
}

.chru-yt-facade:focus-visible {
    outline: 3px solid var(--chru-blue-light, #009FE3);
    outline-offset: 3px;
}

/* ============================================================
 * LÉGENDES GALERIE — toujours sous chaque image
 * ============================================================ */
.wp-block-gallery .wp-block-image figcaption,
.wp-block-gallery figure.wp-block-image > figcaption {
    position: static;
    margin: 6px 0 0;
    padding: 0;
    background: none;
    color: var(--chru-blue-text, #2D4356);
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    max-height: none;
    overflow: visible;
}

/* ============================================================
 * GALERIE PHOTOS — angles droits (consigne client 2026-06-18)
 * S'applique à tous les templates (service, structure, page…)
 * ============================================================ */
.wp-block-gallery .wp-block-image img,
.wp-block-gallery .wp-block-image > a > img,
.wp-block-gallery figure.wp-block-image img {
    border-radius: 0 !important;
}

/* ============================================================
 * GALERIE RECADRÉE — photos, légendes et crédits alignés
 * (retour Marie KUSY / Coline, 13/08/2026 : « peu importe la taille
 *  de la légende, un décalage se crée sur la première photo »)
 *
 * WP core aligne tout par le bas en posant la légende en position:absolute
 * PAR-DESSUS la photo. La consigne client du 19/06 étant de la sortir SOUS
 * la photo (position:static, cf. section précédente + components.css), la
 * légende redevient un item flex — et elle porte du core un flex-grow:1 +
 * flex-basis:100% qui lui fait absorber toute la hauteur restante de la
 * figure. Elle VOLE donc de la place à l'image, d'autant plus que celle-ci
 * est petite : deux photos côte à côte n'ont ni la même hauteur, ni leur
 * légende sur la même ligne. Mesuré page « Histoire de l'hôpital Central » :
 * 41,5 px d'écart entre deux légendes pourtant identiques.
 *
 * Grille + subgrid : photo / légende / crédit forment trois rangées COMMUNES
 * à toutes les figures d'une même rangée. L'alignement ne dépend donc plus
 * de la longueur du texte. Chaque enfant est assigné explicitement à sa
 * rangée : une figure sans légende ne décale pas son crédit.
 *
 * ⚠️ Les largeurs restent celles du flex WP : les règles :last-child ci-dessous
 * reproduisent l'étirement de la dernière image quand elle est seule sur sa
 * rangée. Vérifié avant/après sur les 6 pages à galerie du site : largeurs
 * identiques au pixel, écarts d'alignement ramenés à 0 (desktop et mobile).
 * ============================================================ */
.wp-block-gallery.has-nested-images.is-cropped {
    display: grid;
    gap: var(--wp--style--unstable-gallery-gap, 16px);
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
}
.wp-block-gallery.has-nested-images.is-cropped:has(> figure.wp-block-image:first-child:nth-last-child(1)) { grid-template-columns: 1fr; }
.wp-block-gallery.has-nested-images.is-cropped:has(> figure.wp-block-image:first-child:nth-last-child(2)) { grid-template-columns: repeat(2, 1fr); }
.wp-block-gallery.has-nested-images.is-cropped.columns-1 { grid-template-columns: 1fr; }
.wp-block-gallery.has-nested-images.is-cropped.columns-2 { grid-template-columns: repeat(2, 1fr); }
.wp-block-gallery.has-nested-images.is-cropped.columns-3 { grid-template-columns: repeat(3, 1fr); }
.wp-block-gallery.has-nested-images.is-cropped.columns-4 { grid-template-columns: repeat(4, 1fr); }
.wp-block-gallery.has-nested-images.is-cropped.columns-5 { grid-template-columns: repeat(5, 1fr); }
.wp-block-gallery.has-nested-images.is-cropped.columns-6 { grid-template-columns: repeat(6, 1fr); }
.wp-block-gallery.has-nested-images.is-cropped.columns-7 { grid-template-columns: repeat(7, 1fr); }
.wp-block-gallery.has-nested-images.is-cropped.columns-8 { grid-template-columns: repeat(8, 1fr); }

/* width:auto !important neutralise les width:calc() que le core pose pour le flex */
.wp-block-gallery.has-nested-images.is-cropped > figure.wp-block-image {
    width: auto !important;
    margin: 0;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
}
.wp-block-gallery.has-nested-images.is-cropped > figure.wp-block-image > img,
.wp-block-gallery.has-nested-images.is-cropped > figure.wp-block-image > a { grid-row: 1; }
.wp-block-gallery.has-nested-images.is-cropped > figure.wp-block-image > figcaption { grid-row: 2; }
.wp-block-gallery.has-nested-images.is-cropped > figure.wp-block-image > .chru-photo-credit { grid-row: 3; }
.wp-block-gallery.has-nested-images.is-cropped > figure.wp-block-image > a { display: block; height: 100%; }
.wp-block-gallery.has-nested-images.is-cropped > figure.wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dernière image seule sur sa rangée : pleine largeur, comme le flex-grow du core.
   ⚠️ La première ligne vise les galeries à 3 colonnes (le défaut). Elle DOIT
   exclure les autres `columns-*` : sans cela, `nth-child(3n+1)` matche aussi la
   4e figure d'une galerie en 4 colonnes (4 = 3×1+1), qui n'est pourtant PAS
   seule sur sa rangée — elle passait alors en pleine largeur. C'est le défaut
   remonté par Marie KUSY le 31/08/2026 sur la page « Médecine de la fertilité »
   (B1 « pourquoi les 4 images ne s'affichent pas les unes à côté des autres ? »),
   et c'est aussi la cause de B2 : étirée à 933px, l'image `large` de 1024px
   n'avait plus qu'un rapport de 1,1 et paraissait pixelisée, alors qu'elle
   restait nette dans la lightbox. Régression introduite ici même le 13/08. */
.wp-block-gallery.has-nested-images.is-cropped:not(.columns-1):not(.columns-2):not(.columns-4):not(.columns-5):not(.columns-6):not(.columns-7):not(.columns-8) > figure.wp-block-image:last-child:nth-child(3n+1),
.wp-block-gallery.has-nested-images.is-cropped.columns-4 > figure.wp-block-image:last-child:nth-child(4n+1),
.wp-block-gallery.has-nested-images.is-cropped.columns-5 > figure.wp-block-image:last-child:nth-child(5n+1),
.wp-block-gallery.has-nested-images.is-cropped.columns-6 > figure.wp-block-image:last-child:nth-child(6n+1),
.wp-block-gallery.has-nested-images.is-cropped.columns-7 > figure.wp-block-image:last-child:nth-child(7n+1),
.wp-block-gallery.has-nested-images.is-cropped.columns-8 > figure.wp-block-image:last-child:nth-child(8n+1) {
    grid-column: 1 / -1;
}

/* Sous 600px le core repasse à 2 colonnes (les classes columns-* ne valent
   qu'au-dessus) : la grille doit suivre, sinon on servirait 3 colonnes en mobile. */
@media (max-width: 599px) {
    .wp-block-gallery.has-nested-images.is-cropped,
    .wp-block-gallery.has-nested-images.is-cropped.columns-3,
    .wp-block-gallery.has-nested-images.is-cropped.columns-4,
    .wp-block-gallery.has-nested-images.is-cropped.columns-5,
    .wp-block-gallery.has-nested-images.is-cropped.columns-6,
    .wp-block-gallery.has-nested-images.is-cropped.columns-7,
    .wp-block-gallery.has-nested-images.is-cropped.columns-8 { grid-template-columns: repeat(2, 1fr); }
    .wp-block-gallery.has-nested-images.is-cropped.columns-1 { grid-template-columns: 1fr; }
    .wp-block-gallery.has-nested-images.is-cropped > figure.wp-block-image:last-child:nth-child(3n+1),
    .wp-block-gallery.has-nested-images.is-cropped > figure.wp-block-image:last-child:nth-child(4n+1) { grid-column: auto; }
    .wp-block-gallery.has-nested-images.is-cropped > figure.wp-block-image:last-child:nth-child(2n+1) { grid-column: 1 / -1; }
}