/* =========================================================
PAGES SYSTEM
MBVUMBO
========================================================= */

/* =========================================================
GLOBAL PAGE
========================================================= */

.page-body,
.homepage,
.page-rubrique,
.page-article {

    position:
        relative;

    background:
        var(--cream);
}

/* =========================================================
HOMEPAGE
========================================================= */

.homepage section {

    position:
        relative;
}

/* =========================================================
FEATURES SECTION
========================================================= */

.homepage-features {

    background:
        white;
}

.feature-card {

    position:
        relative;

    display:
        block;

    height:
        460px;

    overflow:
        hidden;

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-soft);
}

.feature-card::before {

    content:'';

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.82),
            rgba(0,0,0,.1)
        );
}

.feature-card img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 1s ease;
}

.feature-card:hover img {

    transform:
        scale(1.08);
}

.feature-content {

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    padding:
        40px;

    z-index:
        3;
}

.feature-content span {

    display:
        inline-block;

    margin-bottom:
        14px;

    color:
        var(--gold);

    font-size:
        .8rem;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;
}

.feature-content h3 {

    color:
        white;

    margin-bottom:
        16px;
}

.feature-content p {

    color:
        rgba(255,255,255,.78);

    margin:
        0;
}

/* =========================================================
LATEST STORIES
========================================================= */

.latest-stories {

    background:
        var(--ivory);
}

/* =========================================================
TIMELINE HOME
========================================================= */

.timeline-home-section {

    position:
        relative;

    background:
        linear-gradient(
            rgba(0,0,0,.78),
            rgba(0,0,0,.88)
        ),
        url('../img/timeline.webp');

    background-size:
        cover;

    background-position:
        center;

    background-attachment:
        fixed;

    color:
        white;
}

.timeline-home-section .section-title h2,
.timeline-home-section .section-title p {

    color:
        white;
}

.timeline-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at center,
            transparent,
            rgba(0,0,0,.35)
        );
}

/* =========================================================
GALLERY SECTION
========================================================= */

.homepage-gallery {

    background:
        white;
}

/* =========================================================
DIASPORA
========================================================= */

.diaspora-highlight {

    position:
        relative;

    background:
        linear-gradient(
            rgba(0,0,0,.82),
            rgba(0,0,0,.88)
        ),
        url('../img/gallery2.webp');

    background-size:
        cover;

    background-position:
        center;

    color:
        white;
}

.diaspora-box {

    max-width:
        900px;

    margin:
        0 auto;

    padding:
        80px;

    text-align:
        center;

    background:
        rgba(255,255,255,.08);

    backdrop-filter:
        blur(18px);
}

.diaspora-box span {

    display:
        inline-block;

    margin-bottom:
        18px;

    color:
        var(--gold);

    font-size:
        .82rem;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

    font-weight:
        700;
}

.diaspora-box h2 {

    color:
        white;

    margin-bottom:
        24px;
}

.diaspora-box p {

    max-width:
        700px;

    margin:
        0 auto 35px;

    color:
        rgba(255,255,255,.82);
}

/* =========================================================
RUBRIQUE PAGE
========================================================= */

.rubrique-hero {

    position:
        relative;

    min-height:
        85vh;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;
}

.rubrique-hero .hero-background {

    position:
        absolute;

    inset:
        0;
}

.rubrique-hero .hero-background img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}

.rubrique-hero .hero-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            rgba(0,0,0,.45),
            rgba(0,0,0,.88)
        );
}

.rubrique-hero .hero-content {

    position:
        relative;

    z-index:
        5;

    max-width:
        900px;
}

.rubrique-hero h1 {

    color:
        white;
}

.rubrique-hero p {

    color:
        rgba(255,255,255,.82);
}

/* =========================================================
ARTICLE PAGE
========================================================= */

.article-page {

    background:
        white;
}

.article-hero {

    position:
        relative;

    min-height:
        70vh;

    display:
        flex;

    align-items:
        end;

    padding-bottom:
        100px;

    overflow:
        hidden;
}

.article-hero-image {

    position:
        absolute;

    inset:
        0;
}

.article-hero-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}

.article-hero-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.2),
            rgba(0,0,0,.92)
        );
}

.article-hero-content {

    position:
        relative;

    z-index:
        3;

    max-width:
        900px;
}

.article-hero-content h1 {

    color:
        white;

    margin-bottom:
        24px;
}

.article-hero-content p {

    color:
        rgba(255,255,255,.82);
}

.article-content-wrapper {

    margin-top:
        -80px;

    position:
        relative;

    z-index:
        5;
}

.article-content-box {

    padding:
        80px;

    background:
        white;

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-medium);
}

/* =========================================================
ARTICLE TYPOGRAPHY
========================================================= */

.article-content h2,
.article-content h3 {

    margin-top:
        60px;

    margin-bottom:
        24px;
}

.article-content img {

    margin:
        50px auto;

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-soft);
}

/* =========================================================
LEXIQUE
========================================================= */

.lexique-section {

    background:
        var(--ivory);
}

.lexique-card {

    height:
        100%;

    padding:
        35px;

    border-radius:
        var(--radius-lg);

    background:
        white;

    box-shadow:
        var(--shadow-soft);

    transition:
        var(--transition);
}

.lexique-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        var(--shadow-large);
}

.lexique-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        25px;
}

.lexique-type {

    padding:
        8px 14px;

    border-radius:
        100px;

    background:
        rgba(31,77,58,.08);

    color:
        var(--forest);

    font-size:
        .72rem;

    font-weight:
        700;
}

.translation {

    font-size:
        1.15rem;

    color:
        var(--forest);

    font-weight:
        700;
}

.phonetic {

    margin:
        20px 0;

    color:
        var(--gold);

    font-style:
        italic;
}

/* =========================================================
TIMELINE PAGE
========================================================= */

.timeline-section {

    position:
        relative;

    background:
        linear-gradient(
            rgba(0,0,0,.72),
            rgba(0,0,0,.86)
        ),
        url('../img/timeline.webp');

    background-size:
        cover;

    background-position:
        center;

    color:
        white;
}

.timeline-wrapper {

    position:
        relative;

    max-width:
        1100px;

    margin:
        0 auto;
}

.timeline-wrapper::before {

    content:'';

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        50%;

    width:
        3px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            var(--gold),
            rgba(255,255,255,.2)
        );
}

.timeline-item {

    position:
        relative;

    width:
        50%;

    padding:
        40px;
}

.timeline-item:nth-child(odd) {

    left:
        0;

    text-align:
        right;
}

.timeline-item:nth-child(even) {

    left:
        50%;
}

.timeline-content {

    padding:
        35px;

    border-radius:
        var(--radius-lg);

    background:
        rgba(255,255,255,.08);

    backdrop-filter:
        blur(16px);

    border:
        1px solid rgba(255,255,255,.08);
}

.timeline-content h3 {

    color:
        white;

    margin-bottom:
        18px;
}

.timeline-content p {

    color:
        rgba(255,255,255,.78);
}

.timeline-date {

    display:
        inline-block;

    margin-bottom:
        18px;

    color:
        var(--gold);

    font-size:
        .85rem;

    font-weight:
        700;

    letter-spacing:
        2px;
}

/* =========================================================
EMPTY STATES
========================================================= */

.empty-state {

    background:
        white;
}

/* =========================================================
DARK MODE
========================================================= */

body.dark-mode {

    background:
        #121212;
}

body.dark-mode .latest-stories,
body.dark-mode .homepage-features,
body.dark-mode .homepage-gallery {

    background:
        #151515;
}

body.dark-mode .article-content-box,
body.dark-mode .lexique-card {

    background:
        #1A1A1A;

    border:
        1px solid rgba(255,255,255,.05);
}

body.dark-mode .article-content-box h2,
body.dark-mode .article-content-box h3 {

    color:
        white;
}

body.dark-mode .article-content-box p {

    color:
        rgba(255,255,255,.72);
}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:1200px){

.timeline-wrapper::before {

left:
30px;
}

.timeline-item {

width:
100%;

left:
0 !important;

padding-left:
90px;

padding-right:
0;

text-align:
left !important;
}

}

@media(max-width:991px){

.feature-card {

height:
380px;
}

.article-content-box {

padding:
50px;
}

.diaspora-box {

padding:
60px;
}

}

@media(max-width:768px){

.feature-card {

height:
320px;
}

.feature-content {

padding:
28px;
}

.article-content-box {

padding:
35px;
}

.diaspora-box {

padding:
40px 28px;
}

.timeline-item {

padding-left:
70px;
}

.timeline-content {

padding:
25px;
}

}