/* =================================================
   AIVELLE MEMBER READING HISTORY
   PLATFORM v2.0 — ITERATION 2C
================================================= */


/* =================================================
   01 Controls
================================================= */

.reading-history-controls {

    display:
        grid;

    grid-template-columns:
        minmax(220px, .42fr)
        minmax(0, 1.58fr);

    gap:
        var(--member-gap-large);

    align-items:
        end;

    padding-block:
        clamp(76px, 9vw, 124px);

    border-bottom:
        1px solid var(--member-line);

}


.reading-history-index {

    margin:
        0 0 20px;

    color:
        var(--member-gold);

    font-size:
        10px;

}


.reading-history-control-group {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        38px;

    align-items:
        flex-end;

    justify-content:
        space-between;

}


.reading-history-filter {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px 26px;

    margin:
        0;

    padding:
        0;

    border:
        0;

}


.reading-history-filter legend {

    width:
        100%;

    margin-bottom:
        14px;

    color:
        var(--member-muted);

    text-transform:
        uppercase;

    letter-spacing:
        .15em;

    font-size:
        9px;

}


.reading-history-filter-button {

    padding:
        0 0 8px;

    border:
        0;

    border-bottom:
        1px solid transparent;

    color:
        var(--member-muted);

    background:
        transparent;

    text-transform:
        uppercase;

    letter-spacing:
        .13em;

    font-size:
        10px;

    cursor:
        pointer;

    transition:
        color var(--member-transition-fast),
        border-color var(--member-transition-fast);

}


.reading-history-filter-button:hover,
.reading-history-filter-button:focus-visible,
.reading-history-filter-button.is-active {

    color:
        var(--member-gold);

    border-bottom-color:
        var(--member-gold);

}


.reading-history-sort {

    display:
        grid;

    gap:
        12px;

    min-width:
        190px;

}


.reading-history-sort span {

    color:
        var(--member-muted);

    text-transform:
        uppercase;

    letter-spacing:
        .15em;

    font-size:
        9px;

}


.reading-history-sort select {

    width:
        100%;

    padding:
        0 30px 10px 0;

    border:
        0;

    border-bottom:
        1px solid #555555;

    border-radius:
        0;

    outline:
        none;

    color:
        var(--member-paper);

    background:
        transparent;

    font-size:
        12px;

}


/* =================================================
   02 Timeline
================================================= */

.reading-history-content {

    padding-top:
        clamp(72px, 9vw, 124px);

}


.reading-history-list {

    border-top:
        1px solid var(--member-line);

}


.reading-history-card {

    display:
        grid;

    grid-template-columns:
        54px
        minmax(190px, .58fr)
        minmax(0, 1.42fr)
        auto;

    gap:
        clamp(24px, 4vw, 58px);

    align-items:
        center;

    padding-block:
        clamp(34px, 5vw, 68px);

    border-bottom:
        1px solid var(--member-line);

}


.reading-history-number {

    align-self:
        start;

    padding-top:
        4px;

    color:
        var(--member-gold);

    font-size:
        10px;

    letter-spacing:
        .14em;

}


.reading-history-media {

    aspect-ratio:
        4 / 5;

}


.reading-history-body {

    min-width:
        0;

}


.reading-history-body .member-card-title {

    max-width:
        680px;

    margin-top:
        14px;

    font-size:
        clamp(30px, 3.7vw, 56px);

}


.reading-history-body .member-copy {

    max-width:
        660px;

}


.reading-history-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px 24px;

    margin-top:
        24px;

    color:
        var(--member-muted-soft);

    text-transform:
        uppercase;

    letter-spacing:
        .11em;

    font-size:
        9px;

}


.reading-history-meta span + span::before {

    content:
        "·";

    margin-right:
        24px;

    color:
        var(--member-gold);

}


.reading-history-progress {

    max-width:
        520px;

    margin-top:
        30px;

}


.reading-history-action {

    min-width:
        142px;

    text-align:
        right;

}


/* =================================================
   03 Empty state
================================================= */

.reading-history-empty {

    margin-bottom:
        var(--member-section-space-small);

}


/* =================================================
   04 Responsive
================================================= */

@media (max-width: 1050px) {

    .reading-history-card {

        grid-template-columns:
            42px
            minmax(170px, .48fr)
            minmax(0, 1.52fr);

    }


    .reading-history-action {

        grid-column:
            3;

        text-align:
            left;

    }

}


@media (max-width: 820px) {

    .reading-history-controls {

        grid-template-columns:
            1fr;

        align-items:
            start;

    }


    .reading-history-card {

        grid-template-columns:
            38px
            minmax(0, 1fr);

    }


    .reading-history-media {

        grid-column:
            2;

        max-width:
            420px;

    }


    .reading-history-body,
    .reading-history-action {

        grid-column:
            2;

    }

}


@media (max-width: 620px) {

    .reading-history-control-group {

        align-items:
            flex-start;

    }


    .reading-history-card {

        grid-template-columns:
            1fr;

        gap:
            24px;

    }


    .reading-history-number,
    .reading-history-media,
    .reading-history-body,
    .reading-history-action {

        grid-column:
            1;

    }


    .reading-history-action {

        text-align:
            left;

    }


    .reading-history-meta span + span::before {

        display:
            none;

    }

}


/* =================================================
   05 Reduced Motion
================================================= */

@media (prefers-reduced-motion: reduce) {

    .reading-history-filter-button {

        transition:
            none;

    }

}