/* Styles for the chapters pages.

   developer:   marionm
   requires:    /nks/css/shared.css.en
   ========================================================================== */

/* ==========================================================================
   page specific styles
   ========================================================================== */

#content .notes-thumb {
    border-left: 1px solid #d5d5d5;
    padding-left: 1rem;
}

#content .chapter-content hr:last-child { display: none; }

#content .pages {
    display: flex;
    flex-wrap: wrap;
    gap: .875rem;
}

#content .pages a img {
    border: 1px solid #e5e5e5;
    box-shadow: -2px 2px 5px #d9d9d9;
    box-sizing: content-box;
    display: inline-block;
    transition: border .25s;
}

html.reduced-motion #content .pages a img { transition: none; }

#content .pages a:focus-visible img,
#content .pages a:hover img { border: 1px solid var(--shared-thumbnail-hover-border); }

#content dl.citation-meta {
    display: grid;
    gap: 0 .5rem;
    grid-template-columns: auto 1fr;
    margin: 0;
}

#content dl.citation-meta dt { font-weight: bold; }

#content dl.citation-meta dt::after { content: ':'; }

#content dl.citation-meta dd { margin: 0; }

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for large screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {}

/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {}

/* styles for small screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {
    #content .pages { gap: .5rem; }
}

/* styles for minimum supported screen width (320px)
   ========================================================================== */

@media all and (max-width: 320px) {}

/* printer styles
   ========================================================================== */

@media print {}