/* NOTE: PROSE (inc/new/sections/prose.php). Long text in a readable column. */

.kmd-prose {
    max-width: 820px;
    color: var(--kmd-text);
    font-size: 17px;
    line-height: 1.7;
}

.kmd-prose--wide {
    max-width: none;
}

.kmd-prose > * + * {
    margin-top: 16px;
}

.kmd-prose h2,
.kmd-prose h3,
.kmd-prose h4 {
    color: var(--kmd-ink);
    font-weight: 800;
    line-height: 1.25;
}

.kmd-prose h2 {
    font-size: 28px;
}

.kmd-prose h3 {
    font-size: 21px;
}

.kmd-prose h4 {
    font-size: 18px;
}

.kmd-prose > * + h2 {
    margin-top: 40px;
}

.kmd-prose > * + h3,
.kmd-prose > * + h4 {
    margin-top: 28px;
}

.kmd-prose ul,
.kmd-prose ol {
    padding-left: 22px;
}

.kmd-prose ul {
    list-style: disc;
}

.kmd-prose ol {
    list-style: decimal;
}

/* lists numbered i, ii, iii (e.g. the payment terms of finantare-prin-grenke.php) */
.kmd-prose ol.kmd-prose__roman {
    list-style-type: lower-roman;
}

.kmd-prose li + li {
    margin-top: 6px;
}

.kmd-prose a {
    color: var(--kmd-accent-hover);
    font-weight: 600;
}

.kmd-prose strong {
    color: var(--kmd-ink);
}

.kmd-prose img {
    width: 100%;
}

.kmd-prose figure figcaption {
    margin-top: 8px;
    color: var(--kmd-muted);
    font-size: 14px;
}

.kmd-prose hr {
    margin-block: 40px;
    border: 0;
    border-top: 1px solid var(--kmd-line);
}

.kmd-prose blockquote {
    padding: 4px 0 4px 18px;
    border-left: 4px solid var(--kmd-accent);
    color: var(--kmd-ink);
    font-size: 19px;
    font-style: italic;
}

/* bordered note (financing terms...) */
.kmd-prose .kmd-prose__note {
    padding: 20px;
    border: 1px solid var(--kmd-line);
}

/* tables scroll sideways on phones instead of stretching the page */
.kmd-prose .kmd-table-wrap {
    overflow-x: auto;
}

.kmd-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.5;
}

.kmd-prose th,
.kmd-prose td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--kmd-line);
    text-align: left;
    vertical-align: top;
}

.kmd-prose thead th {
    border-bottom: 2px solid var(--kmd-ink);
    color: var(--kmd-ink);
}

.kmd-prose tbody th {
    color: var(--kmd-ink);
    font-weight: 700;
}

/* dark sections */
.kmd-section--dark .kmd-prose,
.kmd-section--ink .kmd-prose {
    color: var(--kmd-dark-text);
}

.kmd-section--dark .kmd-prose h2,
.kmd-section--dark .kmd-prose h3,
.kmd-section--dark .kmd-prose h4,
.kmd-section--dark .kmd-prose strong,
.kmd-section--dark .kmd-prose blockquote,
.kmd-section--dark .kmd-prose tbody th,
.kmd-section--dark .kmd-prose thead th {
    color: var(--kmd-white);
}

.kmd-section--dark .kmd-prose a {
    color: var(--kmd-white);
}

.kmd-section--dark .kmd-prose th,
.kmd-section--dark .kmd-prose td,
.kmd-section--dark .kmd-prose hr,
.kmd-section--dark .kmd-prose .kmd-prose__note {
    border-color: var(--kmd-dark-line);
}

@media screen and (max-width: 767px) {
    .kmd-prose {
        font-size: 16px;
    }

    .kmd-prose h2 {
        font-size: 24px;
    }

    .kmd-prose h3 {
        font-size: 19px;
    }
}

/* NOTE: PICTURES SIDE BY SIDE, COMPARISON TABLE COLORS */

.kmd-prose .kmd-prose__figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 24px;
}

.kmd-prose .kmd-prose__yes {
    color: var(--kmd-success);
    font-weight: 600;
}

.kmd-prose .kmd-prose__no {
    color: var(--kmd-error);
    font-weight: 600;
}

.kmd-prose .kmd-video {
    margin-top: 24px;
}

/* NOTE: TEXT + PICTURES ROW: the text on the left, small pictures (logos, cards) on the right; stacked on phones */
.kmd-prose .kmd-prose__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px 32px;
}

.kmd-prose .kmd-prose__split-media {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* small pictures: their own size, at most 320px (a portrait next to a details table); a fixed cap, not a percentage,
   so the column is sized by it and not by the picture's natural width */
.kmd-prose .kmd-prose__split-media img {
    width: auto;
    max-width: 320px;
}

@media screen and (max-width: 599px) {
    .kmd-prose .kmd-prose__split {
        grid-template-columns: minmax(0, 1fr);
    }

    .kmd-prose .kmd-prose__split-media {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
}

/* NOTE: SMALL PHOTO GRIDS in the text (lightbox links, javascript/new/lightbox.js) */

.kmd-prose .kmd-prose__photos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.kmd-prose .kmd-prose__photos a {
    display: block;
    overflow: hidden;
}

.kmd-prose .kmd-prose__photos img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .3s;
}

.kmd-prose .kmd-prose__photos a:hover img {
    transform: scale(1.04);
}

@media screen and (max-width: 599px) {
    .kmd-prose .kmd-prose__photos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}