/* tailles éléments titre */
.one-col-button {
    width: var(--col);
}

.icon-element {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


/* FULL LINK BUTTON */

.full-link a {
    display: block;
    width: 100%;
    height: 100%;
    padding: var(--button-padding);
}

.white-svg svg {
    display: inline-block;
    width: 0.8em;
    height: auto;
    fill: var(--primary);
}

.arrow-180 svg {
    transform: rotate(180deg);
}


/* POST LIST HOVER */

ul.link-post-list a {
    width: 100%;
    display: block;
    padding: 0 var(--big-marge);
}


ul.link-post-list a:hover {
    background-color: var(--primary);
    color: var(--background);
}


/* POST-PREVIEW SEARCH / INDEX */

.post-preview__content {
    position: absolute;
    left: var(--6col);
    width: var(--3col);
}

.post-preview__content img {
    width: 100%;
    height: auto;
}

.post-preview__title-infos {
    display: flex;
    flex-direction: row;
}

.post-preview__year {
    width: var(--col);
}

.post-preview__title {
    width: var(--2col);
}


/* APERCUS/EXCERPTS POSTS */
.metadata {
    font-size: var(--fontsize-small);
}

.metadata__title-elements {
    display: flex;
    flex-direction: row;
}

.metadata__year {
    width: var(--col);
}

.metadata__buttons {
    display: none;
}

/* GESTION DES PARAGRAPHES */

em {
    font-style: oblique;
}

.paragraphs p {
    text-indent: var(--col);
    text-align: left;
    widows: 2;
    orphans: 2;
}

.paragraphs p:first-of-type,
.paragraphs p.is-empty+p {
    text-indent: 0;
}

.paragraphs a {
    color: var(--secondary);
}

.paragraphs a:hover {
    color: var(--primary);
}

.grey-links a {
    color: var(--secondary);
}

.grey-links a:hover {
    color: var(--primary);
}


/* mise en forme du texte */
blockquote {
    color: var(--secondary);
    font-style: oblique;
    margin-bottom: 1rem;

}

blockquote p br {
    margin-bottom: 1rem;
}

cite {
    margin-left: var(--col);
    font-size: var(--fontsize-small);
    font-style: normal;
    display: block;
}

pre {
    background-color: var(--primary);
    color: var(--secondary);
    font-family: monospace;
    padding: var(--big-marge);
    overflow-x: scroll;
}

code {
    font-family: monospace;
}

/* --------------------------
language tabs
----------------------------- */

.language-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.language-tab {
    background: none;
    border: none;
    font-weight: 600;
    cursor: pointer;
    color: var(--secondary);
    border-bottom: 2px solid transparent;
}

.language-tab.active {
    color: var(--primary);
}



/* ===============================
   MODULE : MEDIA GRID (images / vidéos / embeds)
   =============================== */



.media-item {
    position: relative;
}

.media-item img {
    max-width: var(--6col);
}


.media-item.is-landscape img {
    width: var(--6col);
}

.media-item.is-portrait img {
    width: var(--4col);
}

.media-item.is-video video {
    width: var(--7col);
}


.media-item img,
.media-item video,
.media-item iframe {
    /* height: auto; */
    display: block;
}

/* ===============================
   WRAPPER GÉNÉRAL D'EMBEDS (hors Instagram)
   =============================== */

.media-item__embed {
    width: var(--7col);
    max-width: 100%;
}

.media-item__embed iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
    border: none;
}

/* ===============================
   EXCEPTION : EMBEDS INSTAGRAM
   =============================== */

.media-item__embed iframe[src*="instagram.com"],
.media-item__embed blockquote.instagram-media {
    position: static !important;
    aspect-ratio: auto !important;
    height: revert-layer !important;
    min-height: 0 !important;
    width: var(--4col) !important;
    display: block !important;
    overflow: visible !important;
}

.media-item__embed:has(iframe[src*="instagram.com"]) {
    aspect-ratio: auto !important;
    height: auto !important;
}




@media (max-width: 768px) {

    cite {
        margin-left: calc(25% - var(--big-marge));
    }

    ul.link-post-list a {
        padding: var(--medium-marge) var(--big-marge);
    }

    ul.link-post-list a:hover {
        background-color: var(--background);
        color: var(--primary);
    }


    /* METADATA */
    .metadata__title-elements {
        display: flex;
        margin: 0;
        padding-top: var(--small-marge);
    }

    .metadata__year,
    .metadata__title {
        display: inline-block;
        margin: 0;
    }

    .metadata__year {
        width: 25%;
    }

    .metadata__title {
        width: 75%;
    }

    .metadata__buttons {
        display: flex;
        font-size: var(--fontsize-big);
    }

    .metadata__readmore,
    .metadata__close {
        cursor: pointer;
        width: 50% !important;
        padding: var(--big-marge) !important;
    }

    /* paragraphes */

    .paragraphs p {
        text-indent: 0;
        margin-bottom: 1rem;
    }

    .paragraphs p.is-empty {
        display: none;
    }

    .media-item img {
        max-width: 100%;
    }

    /* media */
    .media-item.is-landscape img {
        width: 100%;
    }

    .media-item.is-portrait img {
        width: 100%;
    }

    .media-item.is-video video {
        width: 100%;
    }

    .media-item__embed {
        width: 100%;
    }


    /* résultats search/related */

    .search-result-preview,
    .related-result-preview {
        font-size: var(--fontsize-small);
        padding: 0 var(--big-marge) var(--big-marge) var(--big-marge);
        border-bottom: var(--white-border);
    }

    .search-result-preview:last-child {
        margin-bottom: var(--header-height);
        border-bottom: none;
    }

    .related-result-preview:last-child {
        border-bottom: none;
    }

    .search-result-preview img,
    .related-result-preview img {
        width: 50%;
        margin: 0 25%;
        height: auto;
    }

    #search-results a,
    #related-results a {
        padding: 0 !important;
    }

}