:root {
    --character-card-aspect-ratio: 439/720;
}

/* CHARACTER SELECTION CARD GRID */
.character-card-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.character-grid-card {
    aspect-ratio: var(--character-card-aspect-ratio);
    width: calc(50% - 8px);
    max-width: var(--sidebar-width);
}


/* INDIVIDUAL CHARACTER PAGES */
.character-card {
    aspect-ratio: var(--character-card-aspect-ratio);
}

.character-column-container {
    /* Layout */
    display: flex;
    flex-direction: row;
    height: 100%;
    gap: 8px;
}

.character-column-right {
    flex: none;
    width: 224px;

    position: sticky;
    align-self: flex-start;
    top: 32px;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

.character-name {
    font-size: 1.75rem; /* 28px */
    margin-bottom: 1rem;
}

.character-description {
    font-size: 1rem; /* 16px */
    margin-top: -1rem;
}

.character-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-container {
    margin: none;
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}

.info-label {
    font-size: 1rem;
    font-style: italic;
    opacity: 0.75;
    margin: 0px 0px 0px 0px;
}

.info-readout {
    font-size: 1.125rem;
    margin: 0px 0px 0px 0px;
}

.character-info-spacer {
    margin-top: auto;
    margin-bottom: auto;
    flex-shrink: 0;
}

/* SPACE SAVING LAYOUT : 864px - 960px, and < 696px */
/* The reason for the werid thresholds here is because I only want this layout to be used when the page content panel becomes narrow,
   which intermittently happens as the overall site layout changes. Also the max height is in case the sticky sidebar cannot fit
   in the viewport's vertical space. I could've made it switch to relative positioning, but it left the main content awkwardly small
   as you scrolled down, so this just made more sense. */
@media only screen and (max-width: 696px), (min-width: 864px) and (max-width: 960px), (max-height: 50.45rem) {
    .character-column-container {
        display: flex;
        flex-direction: column-reverse;
        gap: 8px;
    }

    .character-column-right {
        display: grid;
        grid-template-columns: min-content auto;
        grid-template-rows: auto auto;

        position:relative;
        width: 100%;
        height: auto;
        top: auto;
    }

    .character-card {
        grid-row: 1 / 2;
        grid-column: 1 / 2;

        height: 100%;
    }

    .character-reference-button {
        grid-row: 2 / 3;
        grid-column: 1 / 3;
    }

    .character-info {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
    }
}

/* MOBILE LAYOUT : 432px WIDE */
@media only screen and (max-width: 432px) {
    .character-card {
        grid-row: 1 / 2;
        grid-column: 1 / 2;

        height: 100%;
    }

    .character-reference-button {
        grid-row: 2 / 3;
        grid-column: 1 / 2;
    }

    .character-info {
        grid-row: 1 / 3;
        grid-column: 2 / 3;
    }
}