/* =========================================================
   AKINDE 80TH BIRTHDAY CELEBRATION
   READ GOODWILL MESSAGES
   Isolated stylesheet — messages.css
   ========================================================= */


/* =========================================================
   PAGE FOUNDATION
   ========================================================= */

.messages-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 12%,
            rgba(200, 163, 77, 0.09),
            transparent 32%
        ),
        radial-gradient(
            circle at 8% 48%,
            rgba(123, 30, 58, 0.05),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 55%,
            rgba(200, 163, 77, 0.05),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #fffdf9 0%,
            #fbf7f1 48%,
            #fffdf9 100%
        );
}


/* =========================================================
   DECORATIVE 80 WATERMARK
   ========================================================= */

.messages-page::before {
    content: "80";

    position: fixed;

    top: 180px;
    left: 50%;

    transform: translateX(-50%);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 32rem;
    line-height: 1;

    font-weight: 700;

    color:
        rgba(200, 163, 77, 0.035);

    pointer-events: none;

    z-index: 0;
}


/* =========================================================
   PAGE HERO
   ========================================================= */

.messages-hero {
    position: relative;

    min-height: 390px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        145px
        25px
        75px;

    box-sizing: border-box;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(58, 7, 21, 0.96),
            rgba(58, 7, 21, 0.88)
        );
}


.messages-hero::before {
    content: "80";

    position: absolute;

    right: 5%;
    bottom: -90px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 26rem;
    line-height: 1;

    font-weight: 700;

    color:
        rgba(200, 163, 77, 0.07);

    pointer-events: none;
}


.messages-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(200, 163, 77, 0.12),
            transparent 40%
        );

    pointer-events: none;
}


.messages-hero-content {
    position: relative;

    z-index: 1;

    width: 100%;
    max-width: 850px;

    text-align: center;

    color: #ffffff;
}


.messages-hero .eyebrow {
    margin:
        0 0 18px;

    color:
        #efd58b;

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    line-height:
        1.5;
}


.messages-hero h1 {
    margin:
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(2.4rem, 5vw, 4.4rem);

    line-height:
        1.08;

    font-weight:
        700;

    color:
        #ffffff;
}


.messages-hero .gold-line {
    width: 72px;

    height: 3px;

    margin:
        22px auto 24px;

    background:
        #c8a34d;

    border-radius:
        5px;
}


.messages-hero-intro {
    max-width:
        700px;

    margin:
        0 auto;

    font-size:
        1rem;

    line-height:
        1.8;

    color:
        rgba(255, 255, 255, 0.78);
}


/* =========================================================
   LIVE MESSAGE STATISTICS
   ========================================================= */

.message-statistics {
    position: relative;

    z-index: 2;

    margin-top:
        -35px;

    padding:
        0 20px;
}


.message-stats-container {
    width: 100%;
    max-width: 1100px;

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        18px;
}


/* =========================================================
   STAT CARD
   ========================================================= */

.message-stat-card {
    min-height:
        145px;

    padding:
        25px 20px;

    box-sizing:
        border-box;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    border:
        1px solid
        rgba(200, 163, 77, 0.30);

    border-radius:
        18px;

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 12px 30px
        rgba(38, 8, 17, 0.10);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.message-stat-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 18px 38px
        rgba(38, 8, 17, 0.14);
}


/* =========================================================
   STAT LABEL
   ========================================================= */

.message-stat-label {
    margin:
        0 0 10px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        0.68rem;

    line-height:
        1.3;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


/* =========================================================
   STAT NUMBER
   ========================================================= */

.message-stat-number {
    margin:
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        2.65rem;

    line-height:
        1;

    font-weight:
        700;
}


/* =========================================================
   STAT SUBTITLE
   ========================================================= */

.message-stat-subtitle {
    margin-top:
        8px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* =========================================================
   APPROVED CARD
   ========================================================= */

.approved-card {
    color:
        #1565c0;
}


.approved-card .message-stat-label {
    color:
        #1565c0;
}


.approved-card .message-stat-subtitle {
    color:
        #1565c0;
}


/* =========================================================
   STATUS CARD
   ========================================================= */

.status-card {
    color:
        #7040a0;
}


.status-card .message-stat-label {
    color:
        #7040a0;
}


.message-status-line {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        9px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        0.88rem;

    line-height:
        1.5;

    font-weight:
        700;
}


.message-status-line strong {
    font-size:
        1.05rem;

    font-weight:
        800;
}


.status-divider {
    color:
        #c8a34d;

    font-weight:
        700;
}


.pending-label {
    color:
        #c62828;
}


.pending-label strong {
    color:
        #c62828;
}


/* =========================================================
   ONLINE CARD
   ========================================================= */

.online-card {
    color:
        #2e7d32;
}


.online-card .message-stat-label {
    color:
        #2e7d32;
}


.online-card .message-stat-number {
    color:
        #2e7d32;
}


/* =========================================================
   CELEBRATION REACH
   ========================================================= */

.message-reach {
    position:
        relative;

    z-index:
        1;

    padding:
        32px 20px 15px;
}


.message-reach-inner {
    width:
        100%;

    max-width:
        1100px;

    margin:
        0 auto;

    text-align:
        center;
}


.message-reach p {
    margin:
        0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        0.78rem;

    line-height:
        1.7;

    letter-spacing:
        0.04em;

    color:
        #705e65;
}


.message-reach strong {
    color:
        #3a0715;

    font-weight:
        700;
}


.message-reach span {
    margin:
        0 7px;

    color:
        #c8a34d;

    font-weight:
        700;
}


/* =========================================================
   MAIN MESSAGES AREA
   ========================================================= */

.messages-main {
    position:
        relative;

    z-index:
        1;

    padding:
        55px 20px 80px;
}


.messages-container {
    width:
        100%;

    max-width:
        1100px;

    margin:
        0 auto;
}


/* =========================================================
   MESSAGES HEADING
   ========================================================= */

.messages-heading {
    text-align:
        center;

    margin-bottom:
        42px;
}


.messages-heading .section-label {
    margin:
        0 0 12px;

    color:
        #c8a34d;

    font-size:
        0.7rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.messages-heading h2 {
    margin:
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(2rem, 4vw, 3rem);

    line-height:
        1.15;

    color:
        #3a0715;
}


.messages-heading .gold-line {
    width:
        65px;

    height:
        3px;

    margin:
        18px auto 0;

    background:
        #c8a34d;

    border-radius:
        5px;
}


/* =========================================================
   MESSAGE GRID
   ========================================================= */

.messages-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        24px;
}


/* =========================================================
   MESSAGE CARD
   ========================================================= */

.goodwill-message-card {
    position:
        relative;

    padding:
        30px;

    border:
        1px solid
        rgba(200, 163, 77, 0.24);

    border-radius:
        18px;

    background:
        rgba(255, 255, 255, 0.94);

    box-shadow:
        0 10px 28px
        rgba(38, 8, 17, 0.07);

    box-sizing:
        border-box;

    overflow:
        hidden;
}


.goodwill-message-card::before {
    content:
        "“";

    position:
        absolute;

    top:
        12px;

    right:
        22px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        5rem;

    line-height:
        1;

    color:
        rgba(200, 163, 77, 0.15);

    pointer-events:
        none;
}


/* =========================================================
   MESSAGE HEADER
   ========================================================= */

.message-card-header {
    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    margin-bottom:
        22px;
}


/* =========================================================
   PROFILE PHOTO
   ========================================================= */

.message-profile-photo {
    width:
        120px;

    height:
        120px;

    flex:
        0 0 120px;

    border-radius:
        50%;

    object-fit:
        cover;

    border:
        2px solid
        #c8a34d;

    background:
        #fbf7f1;
}


.message-profile-placeholder {
    width:
        120px;

    height:
        120px;

    flex:
        0 0 120px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    border:
        2px solid
        #c8a34d;

    background:
        #fbf7f1;

    color:
        #8b1538;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        1.35rem;

    font-weight:
        700;
}


/* =========================================================
   SENDER INFORMATION
   ========================================================= */

.message-sender {
    min-width:
        0;
}


.message-sender-name {
    margin:
        0 0 4px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        1.15rem;

    line-height:
        1.3;

    font-weight:
        700;

    color:
        #3a0715;
}


.message-sender-meta {
    margin:
        0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        0.75rem;

    line-height:
        1.5;

    color:
        #806f76;
}


/* =========================================================
   MESSAGE BODY
   ========================================================= */

.message-card-body {
    position:
        relative;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(200, 163, 77, 0.20);
}


.message-card-text {
    margin:
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        1rem;

    line-height:
        1.85;

    color:
        #4f3b43;

    white-space:
        pre-line;
}


/* =========================================================
   LOCATION
   ========================================================= */

.message-location {
    margin:
        20px 0 0;

    padding-top:
        14px;

    border-top:
        1px solid
        rgba(200, 163, 77, 0.15);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        0.7rem;

    line-height:
        1.6;

    color:
        #806f76;
}


.message-location strong {
    color:
        #705e65;
}


/* =========================================================
   MESSAGE STATES
   ========================================================= */

.messages-state {
    max-width:
        650px;

    margin:
        0 auto;

    padding:
        55px 30px;

    text-align:
        center;

    border:
        1px solid
        rgba(200, 163, 77, 0.22);

    border-radius:
        18px;

    background:
        rgba(255, 255, 255, 0.90);

    box-shadow:
        0 10px 28px
        rgba(38, 8, 17, 0.06);
}


.messages-state h3 {
    margin:
        0 0 12px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        1.65rem;

    color:
        #3a0715;
}


.messages-state p {
    margin:
        0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        0.9rem;

    line-height:
        1.75;

    color:
        #705e65;
}


/* =========================================================
   LOADING
   ========================================================= */

.messages-loading {
    padding:
        45px 20px;

    text-align:
        center;
}


.messages-loading p {
    margin:
        14px 0 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        0.85rem;

    color:
        #806f76;
}


.loading-spinner {
    width:
        34px;

    height:
        34px;

    margin:
        0 auto;

    border:
        3px solid
        rgba(200, 163, 77, 0.20);

    border-top-color:
        #c8a34d;

    border-radius:
        50%;

    animation:
        messagesSpin
        0.8s linear infinite;
}


@keyframes messagesSpin {

    to {
        transform:
            rotate(360deg);
    }

}


/* =========================================================
   ERROR
   ========================================================= */

.messages-error {
    border-color:
        rgba(198, 40, 40, 0.20);
}


.messages-error h3 {
    color:
        #8b1538;
}


/* =========================================================
   EMPTY STATE BUTTON
   ========================================================= */

.messages-button {
    display:
        inline-block;

    margin-top:
        25px;

    padding:
        13px 24px;

    border-radius:
        999px;

    background:
        #3a0715;

    color:
        #efd58b;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    text-decoration:
        none;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.messages-button:hover {
    transform:
        translateY(-2px);

    background:
        #8b1538;
}


/* =========================================================
   FOOTER
   ========================================================= */

.messages-page .site-footer {
    position:
        relative;

    z-index:
        2;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .messages-hero {
        min-height:
            350px;

        padding:
            135px 22px 65px;
    }


    .messages-grid {
        grid-template-columns:
            1fr;
    }


    .message-stats-container {
        gap:
            14px;
    }


    .message-stat-card {
        min-height:
            135px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .messages-page::before {
        top:
            220px;

        font-size:
            18rem;
    }


    .messages-hero {
        min-height:
            330px;

        padding:
            125px 18px 55px;
    }


    .messages-hero .eyebrow {
        font-size:
            0.62rem;

        letter-spacing:
            0.11em;
    }


    .messages-hero h1 {
        font-size:
            2.35rem;
    }


    .messages-hero-intro {
        font-size:
            0.88rem;

        line-height:
            1.7;
    }


    .message-statistics {
        margin-top:
            -25px;

        padding:
            0 14px;
    }


    .message-stats-container {
        grid-template-columns:
            1fr;

        gap:
            12px;
    }


    .message-stat-card {
        min-height:
            120px;

        padding:
            20px 15px;

        border-radius:
            15px;
    }


    .message-stat-number {
        font-size:
            2.2rem;
    }


    .message-status-line {
        font-size:
            0.82rem;
    }


    .message-reach {
        padding:
            25px 15px 10px;
    }


    .message-reach p {
        font-size:
            0.7rem;
    }


    .message-reach span {
        margin:
            0 4px;
    }


    .messages-main {
        padding:
            45px 14px 60px;
    }


    .messages-heading {
        margin-bottom:
            30px;
    }


    .messages-heading h2 {
        font-size:
            2rem;
    }


    .goodwill-message-card {
        padding:
            23px 20px;
    }


    .message-card-header {
        gap:
            12px;

        margin-bottom:
            18px;
    }


    .message-profile-photo,
    .message-profile-placeholder {
        width:
            120px;

        height:
            120px;

        flex-basis:
            120px;
    }


    .message-sender-name {
        font-size:
            1.02rem;
    }


    .message-card-text {
        font-size:
            0.94rem;

        line-height:
            1.8;
    }


    .messages-state {
        padding:
            45px 20px;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .messages-hero h1 {
        font-size:
            2rem;
    }


    .message-status-line {
        gap:
            6px;

        font-size:
            0.76rem;
    }


    .goodwill-message-card {
        padding:
            20px 16px;
    }

}

/* =========================================================
   PROFILE PHOTO LIGHTBOX
   ========================================================= */

.profile-photo-lightbox {
    position:
        fixed;

    inset:
        0;

    z-index:
        99999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px;

    box-sizing:
        border-box;
}


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


.profile-photo-lightbox-backdrop {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(20, 5, 10, 0.88);

    cursor:
        pointer;
}


.profile-photo-lightbox-dialog {
    position:
        relative;

    z-index:
        2;

    max-width:
        min(92vw, 1000px);

    max-height:
        90vh;

    padding:
        12px;

    border:
        2px solid
        #c8a34d;

    border-radius:
        16px;

    background:
        #fbf7f1;

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.35);

    box-sizing:
        border-box;
}


.profile-photo-lightbox-image {
    display:
        block;

    max-width:
        88vw;

    max-height:
        84vh;

    width:
        auto;

    height:
        auto;

    object-fit:
        contain;

    border-radius:
        10px;
}


.profile-photo-lightbox-close {
    position:
        absolute;

    top:
        -18px;

    right:
        -18px;

    z-index:
        3;

    width:
        42px;

    height:
        42px;

    padding:
        0;

    border:
        2px solid
        #c8a34d;

    border-radius:
        50%;

    background:
        #3a0715;

    color:
        #efd58b;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        28px;

    line-height:
        36px;

    text-align:
        center;

    cursor:
        pointer;

    box-shadow:
        0 6px 18px
        rgba(0, 0, 0, 0.25);
}


.profile-photo-lightbox-close:hover {
    background:
        #8b1538;
}


body.profile-photo-lightbox-open {
    overflow:
        hidden;
}


/* =========================================================
   MOBILE LIGHTBOX
   ========================================================= */

@media (max-width: 650px) {

    .profile-photo-lightbox {
        padding:
            18px;
    }


    .profile-photo-lightbox-dialog {
        max-width:
            94vw;

        max-height:
            88vh;

        padding:
            8px;

        border-radius:
            12px;
    }


    .profile-photo-lightbox-image {
        max-width:
            90vw;

        max-height:
            82vh;
    }


    .profile-photo-lightbox-close {
        top:
            -14px;

        right:
            -14px;

        width:
            38px;

        height:
            38px;

        font-size:
            24px;

        line-height:
            32px;
    }

}