/*
 * Rules for the body of an article / news item / FAQ answer — the HTML an
 * editor wrote, as normalized by App\Support\ContentHtml::clean(). Loaded on
 * every public page so it holds wherever that HTML is echoed.
 */

/* ---------- embedded video (ContentHtml::normalizeVideos) ---------- */
.content-video {
    position: relative;
    width: 100%;
    max-width: 820px;
    aspect-ratio: 16 / 9;
    margin: 1.2em 0;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}
.content-video iframe {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    border: 0;
    border-radius: 0;
}

/* ---------- lists in accordion answers (faqlist) ---------- */
.faq__desc li > :is(p, div) { margin: 0 !important; }
.faq__desc li { margin-bottom: 4px; }

/* ---------- images side by side (.img-row) ----------
   Written by the editor (public/admin-assets/image-row.js), or recognised in
   legacy flex markup by ContentHtml::normalizeImageRows(). The same rules
   style the editor, so the arrangement saved is the arrangement shown.

   Gutters are padding on the cells (with a matching negative margin on the
   row), not flex `gap`: a picture resized to 50% then really is half the row,
   and 50% + 50% still fits on one line with the gap between them.

   Cell width:  unsized cells share the row equally; a cell the editor sized
                (figure.image_resized, inline width:%) keeps that share.
   Shape:       img-row--r11 / r43 / r32 / r169 crop every picture to that
                ratio (object-fit: cover), so a row of mixed photos lines up;
                without one each picture keeps its own proportions.
   Gap:         img-row--gap-0 / s / m / l.
   Phone:       ≤ 600px every cell takes the full width (one per line), or
                half with img-row--m2. Proportions are never distorted and
                nothing is wider than the column.                        */
.img-row {
    --row-gap: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: var(--row-gap);
    margin: 1.2em calc(var(--row-gap) / -2);
    padding: 0;
    clear: both;
    max-width: none;
}
.img-row--gap-0 { --row-gap: 0px; }
.img-row--gap-s { --row-gap: 6px; }
.img-row--gap-m { --row-gap: 12px; }
.img-row--gap-l { --row-gap: 24px; }

.img-row > * {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 calc(var(--row-gap) / 2);
    margin: 0 !important;
    float: none !important;           /* an image style ("side") means nothing in a row */
}
.img-row > .image_resized { flex: 0 0 auto; max-width: 100%; }

.img-row img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    margin: 0 !important;
    border-radius: 10px;
}
.img-row--r11 img  { aspect-ratio: 1 / 1;  object-fit: cover; height: auto !important; }
.img-row--r43 img  { aspect-ratio: 4 / 3;  object-fit: cover; height: auto !important; }
.img-row--r32 img  { aspect-ratio: 3 / 2;  object-fit: cover; height: auto !important; }
.img-row--r169 img { aspect-ratio: 16 / 9; object-fit: cover; height: auto !important; }
.img-row figcaption,
.img-row .image > figcaption {
    font-size: 13px;
    line-height: 1.45;
    color: #6a6a76;
    margin-top: 6px;
    padding: 0;
    background: none;
    text-align: left;
}
.img-row--gap-0 img { border-radius: 0; }

@media (max-width: 600px) {
    .img-row > *,
    .img-row > .image_resized { flex: 0 0 100%; width: 100% !important; }
    .img-row--m2 > *,
    .img-row--m2 > .image_resized { flex: 0 0 50%; width: 50% !important; }
}

/* a block image resized in the editor (outside a row) keeps that width,
   centred; a phone always gets it full width */
figure.image.image_resized { max-width: 100%; margin-left: auto; margin-right: auto; }
figure.image.image_resized img { width: 100%; height: auto; }
.img-row > figure.image.image_resized { margin: 0 !important; }
@media (max-width: 600px) {
    figure.image.image_resized:not(.img-row > *) { width: 100% !important; }
}