/* ========================================
   Shows Page
======================================== */

.shows-page {
    width: min(100%, var(--content-max));
    margin-inline: auto;
    padding: clamp(4rem, 7vw, 7rem) var(--page-gutter);
}

.shows-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shows-page .show-list {
    position: relative;

    border: 0.3125rem solid transparent;
    border-radius: 0.5rem;

    background-color: var(--color-parchment);
    background-image:
        linear-gradient(
            145deg,
            rgba(255, 248, 226, 0.38),
            rgba(178, 150, 95, 0.16) 52%,
            rgba(255, 250, 231, 0.26)
        ),
        var(--show-parchment-image),
        linear-gradient(
            135deg,
            #f7fbff 0%,
            #8f969b 9%,
            #f9ffff 17%,
            #585f65 28%,
            #dfe8ee 42%,
            #333940 54%,
            #fbffff 68%,
            #777f86 82%,
            #f4f8fb 100%
        );
    background-position: center, top, center;
    background-repeat: no-repeat, repeat-y, no-repeat;
    background-size: auto, 100% auto, auto;
    background-origin: padding-box, padding-box, border-box;
    background-clip: padding-box, padding-box, border-box;

    box-shadow:
        0 1rem 2rem rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.42),
        inset 0 0 1.5rem rgba(73, 48, 18, 0.16);
}

.shows-page .show-list::before,
.shows-page .show-list::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.shows-page .show-list::before {
    inset: 0.25rem;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 0.25rem;
    box-shadow:
        inset 0 0 0 1px rgba(39, 43, 47, 0.5),
        0 0 0 1px rgba(20, 22, 24, 0.55);
}

.shows-page .show-list::after {
    top: 0.3125rem;
    right: 1.25rem;
    left: 1.25rem;
    height: 0.1875rem;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.82) 18%,
        rgba(255, 255, 255, 0.18) 38%,
        rgba(255, 255, 255, 0.9) 58%,
        transparent
    );
}

@media (max-width: 40rem) {
    .shows-page {
        padding-top: 3rem;
        padding-bottom: 4rem;
    }

    .shows-page .show-list {
        width: 100%;
        border-width: 0.22rem;
    }
}