/**
 * Blocs du constructeur d'article (CPT `publication`) — page « Événements ».
 * ---------------------------------------------------------------------------
 * CSS autonome (aucune classe Tailwind) : le thème n'a pas de node_modules et
 * `style-tailwind.css` est un build figé — des utilitaires écrits ici ne
 * seraient pas générés. On s'appuie sur les variables de couleur exposées par
 * le build Tailwind (:root --color-primary / --color-secondary / --color-beige)
 * avec des valeurs de repli, et sur les font-family du thème.
 *
 * Chargé après `linkweb-tailwind` (voir functions.php).
 */

.lpd-article {
    --lpd-primary: var(--color-primary, #0b645c);
    --lpd-secondary: var(--color-secondary, #00403e);
    --lpd-beige: var(--color-beige, #D4C5A9);
}

/* ---------------------------------------------------------------- En-tête */

.lpd-article__cover {
    position: relative;
    width: 100%;
    max-height: 32rem;
    overflow: hidden;
    border-radius: 0.75rem;
    box-shadow: 0 20px 40px -24px rgba(0, 64, 62, 0.45);
}

.lpd-article__cover img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 32rem;
    object-fit: cover;
}

.lpd-article__head {
    margin: 2.5rem 0 3rem;
    text-align: center;
}

.lpd-article__meta {
    display: block;
    margin-bottom: 1rem;
    font-family: titleFont, serif;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lpd-primary);
}

.lpd-article__heading {
    margin: 0;
    font-family: titleFont, serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    color: var(--lpd-secondary);
}

.lpd-article__separator {
    display: block;
    width: 250px;
    max-width: 60%;
    height: 4px;
    margin: 1.5rem auto 0;
    background-color: var(--lpd-beige);
}

/* ----------------------------------------------------------------- Blocs */

.lpd-article__builder,
.lpd-article__content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.lpd-article__block {
    margin: 0;
}

.lpd-article__title {
    margin: 0 0 1rem;
    font-family: titleFont, serif;
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.3;
    color: var(--lpd-secondary);
}

.lpd-article__title--sm {
    font-size: 1.4rem;
}

/* Prose (WYSIWYG) */

.lpd-article__prose {
    font-family: baseTypo, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.8;
    color: rgba(0, 0, 0, 0.78);
}

.lpd-article__prose > *:first-child { margin-top: 0; }
.lpd-article__prose > *:last-child  { margin-bottom: 0; }

.lpd-article__prose p {
    margin: 0 0 1.25rem;
}

.lpd-article__prose h2,
.lpd-article__prose h3,
.lpd-article__prose h4 {
    margin: 2rem 0 1rem;
    font-family: titleFont, serif;
    font-weight: 700;
    line-height: 1.3;
    color: var(--lpd-secondary);
}

.lpd-article__prose h2 { font-size: 1.6rem; }
.lpd-article__prose h3 { font-size: 1.35rem; }
.lpd-article__prose h4 { font-size: 1.15rem; }

.lpd-article__prose ul,
.lpd-article__prose ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}

.lpd-article__prose li {
    margin-bottom: 0.5rem;
}

.lpd-article__prose ul { list-style: disc; }
.lpd-article__prose ol { list-style: decimal; }

.lpd-article__prose a {
    color: var(--lpd-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lpd-article__prose a:hover {
    color: var(--lpd-secondary);
}

.lpd-article__prose strong { font-weight: 700; }
.lpd-article__prose em     { font-style: italic; }

.lpd-article__prose blockquote {
    margin: 1.5rem 0;
    padding: 0.25rem 0 0.25rem 1.5rem;
    border-left: 4px solid var(--lpd-beige);
    font-style: italic;
    color: var(--lpd-secondary);
}

.lpd-article__prose img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* Bloc image seule */

.lpd-article__figure {
    margin: 0;
}

.lpd-article__figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: 0 20px 40px -28px rgba(0, 64, 62, 0.5);
}

.lpd-article__caption {
    margin-top: 0.75rem;
    font-family: baseTypo, sans-serif;
    font-size: 0.875rem;
    font-style: italic;
    text-align: center;
    color: rgba(0, 0, 0, 0.55);
}

/* Bloc texte + photo */

.lpd-article__textphoto {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

.lpd-article__textphoto-media {
    margin: 0;
    overflow: hidden;
    border-radius: 0.75rem;
    box-shadow: 0 20px 40px -28px rgba(0, 64, 62, 0.5);
}

.lpd-article__textphoto-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 16rem;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.lpd-article__textphoto-media:hover img {
    transform: scale(1.05);
}

@media (min-width: 1024px) {
    .lpd-article__heading { font-size: 3rem; }

    .lpd-article__textphoto {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    /* Photo à droite par défaut : le média est en 1er dans le DOM (accessibilité
       + ordre mobile), on l'envoie en 2e colonne. */
    .lpd-article__textphoto .lpd-article__textphoto-media { order: 2; }
    .lpd-article__textphoto .lpd-article__textphoto-body  { order: 1; }

    .lpd-article__textphoto--media-left .lpd-article__textphoto-media { order: 1; }
    .lpd-article__textphoto--media-left .lpd-article__textphoto-body  { order: 2; }
}

/* ------------------------------------------------- Navigation entre posts */

.lpd-article__nav {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 64, 62, 0.12);
    font-family: titleFont, serif;
}

.lpd-article__nav a {
    color: var(--lpd-primary);
}

.lpd-article__nav a:hover {
    color: var(--lpd-secondary);
}