/* Project presentation uses the portfolio's existing typography and grid. */
.quiz-page #main { color: #5b6168; }
.quiz-page #sidebar h2 { margin-top: 1.5em; }
.quiz-page #sidebar header h2 { margin-top: 0; }
.quiz-contents a { display: inline-block; padding: 0.25em 0; }
.quiz-page #content > article > header { margin-bottom: 2em; }
.quiz-section { margin-top: 3em; scroll-margin-top: 2em; }
.quiz-section > h3 {
    font-size: 1.2em;
    font-style: italic;
    text-decoration: underline;
    margin-bottom: 1em;
}
.quiz-media { margin: 0 0 2em; }
.quiz-media img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #d8dce1;
    border-radius: 0.25em;
}
.quiz-media figcaption { font-size: 0.9em; line-height: 1.65; padding-top: 0.75em; }
.quiz-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5em; }
.quiz-page #footer .actions { text-align: center; }
.quiz-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75em;
}
.quiz-gallery-item {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: 0.3em;
    border: 1px solid #d8dce1;
    border-radius: 0.25em;
    background: #f3f4f5;
}
.quiz-gallery-item img { display: block; width: 100%; height: 100%; object-fit: contain; }
.quiz-gallery-item:hover { border-color: #164773; }
.quiz-gallery-item:focus-visible { outline: 3px solid #164773; outline-offset: 3px; }
.quiz-viewer-open { overflow: hidden; }
.quiz-lightbox {
    box-sizing: border-box;
    width: min(56em, calc(100% - 2em));
    max-height: calc(100dvh - 2em);
    margin: auto;
    padding: 1em;
    border: 0;
    border-radius: 0.35em;
    color: #484d55;
    background: #fff;
    overflow: auto;
}
.quiz-lightbox::backdrop { background: rgba(15, 20, 28, 0.88); }
.quiz-lightbox-toolbar, .quiz-lightbox-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
}
.quiz-lightbox figure { margin: 1em 0; }
.quiz-lightbox-image { display: block; width: 100%; height: min(64vh, 45em); object-fit: contain; background: #f3f4f5; }
.quiz-lightbox-caption { padding-top: 0.75em; font-size: 0.95em; line-height: 1.5; }
.quiz-lightbox-counter { white-space: nowrap; }
.quiz-lightbox button {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    min-height: 44px;
    height: auto;
    padding: 0.65em 1em;
    background: #164773;
    color: #fff;
    font-size: 0.8em;
    line-height: 1.5;
    letter-spacing: 0.08em;
}
.quiz-lightbox button:hover { background: #23649d; }
.quiz-lightbox button:focus-visible { outline: 3px solid #23649d; outline-offset: 3px; }
@media screen and (max-width: 736px) {
    .quiz-media-grid { grid-template-columns: 1fr; }
    .quiz-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quiz-lightbox { width: calc(100% - 1em); padding: 0.75em; }
}