@import url("history.css");

/* Firefall lore */
/* The page is built on the history page (hero, chapter navigation, figures, timeline), */
/* this file only adds what the lore needs on top: quoted documents, faction cards and zones. */

.history.lore {

    /* Quoted documents */

    blockquote.doc {
        max-width: var(--prose);
        margin: 26px 0;
        padding: 18px 22px;
        border: 1px solid var(--line);
        border-left: 3px solid var(--crystite);
        border-radius: 0 5px 5px 0;
        background: var(--surface);
        font-size: 16px;
        line-height: 1.65;
        color: var(--ink-2);
        /* Keeps the box next to a floated figure instead of running below it */
        overflow: hidden;

        p {
            margin: 0 0 .9em;
            font-size: inherit;
            line-height: inherit;
        }

        strong {
            color: var(--ink);
        }

        /* The introduction the in-world historian wrote for a document */
        .doc-note {
            padding-bottom: .9em;
            border-bottom: 1px solid var(--line);
            font-size: 14px;
            font-style: italic;
            color: var(--muted);

            span {
                display: block;
                margin-top: 4px;
                font-style: normal;
            }
        }

        cite {
            display: block;
            margin-top: 12px;
            font-size: 13px;
            font-style: normal;
            line-height: 1.5;
            color: var(--muted);
        }

        > :last-child {
            margin-bottom: 0;
        }

        &.mono {
            border-left-color: var(--accent);
            font-family: var(--font-mono);
            font-size: 14px;

            cite {
                font-family: var(--font-sans);
            }
        }
    }

    /* The narration of the intro cinematic, set apart from the written documents */
    blockquote.narration {
        max-width: var(--prose);
        margin: 34px 0;
        padding: 0 0 0 22px;
        border-left: 3px solid var(--melding);

        p {
            margin: 0 0 .35em;
            font-size: 21px;
            font-style: italic;
            line-height: 1.5;
            color: var(--ink);
        }

        cite {
            display: block;
            margin-top: 10px;
            font-size: 13px;
            font-style: normal;
            color: var(--muted);
        }
    }

    /* Factions */

    .group-title {
        margin: 34px 0 14px;
        font-size: 14px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--accent);
    }

    .cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 14px;
    }

    .card {
        padding: 16px 18px;
        border: 1px solid var(--line);
        border-radius: 5px;
        background: var(--surface);

        h4 {
            margin: 0 0 8px;
            font-size: 18px;
            line-height: 1.3;
            color: var(--ink);
        }

        p {
            margin: 0;
            font-size: 14px;
            line-height: 1.6;
        }
    }

    .card-logo {
        display: block;
        width: auto;
        max-width: 100%;
        height: 48px;
        margin-bottom: 12px;
        object-fit: contain;
        object-position: left center;
    }

    /* Places */

    .zone {
        margin-top: 44px;
        scroll-margin-top: calc(var(--nav-height) + var(--toc-height));

        h3 {
            margin-bottom: 4px;
            font-size: 26px;

            small {
                margin-left: 6px;
                font-size: 14px;
                color: var(--muted);
            }
        }
    }

    .zone-facts {
        margin: 0 0 12px;
        font-family: var(--font-mono);
        font-size: 13px;
        line-height: 1.5;
        color: var(--accent);
    }

    .zone-text {
        max-width: var(--prose);
        margin: 0;
        font-size: 18px;
        line-height: 1.6;
        color: var(--ink);
    }

    .zone-images {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
        align-items: start;
        margin: 26px 0;

        figure {
            margin: 0;
            /* The grid decides the width, not the size of the original */
            max-width: none !important;
        }

        figcaption {
            font-size: 13px;
        }
    }

    .pois {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 0 28px;
        margin: 0;

        > div {
            padding: 12px 0;
            border-top: 1px solid var(--line);
        }

        dt {
            margin-bottom: 2px;
            font-size: 16px;
            color: var(--ink);
        }

        dd {
            margin: 0;
            font-size: 14px;
            line-height: 1.6;
        }
    }

    @media (max-width: 767px) {
        blockquote.doc {
            padding: 14px 16px;
        }

        blockquote.narration p {
            font-size: 18px;
        }
    }
}