/*
 * FF Hausbruch: blocks of the fixed pages, loaded on every page and in the editor.
 * TinyMCE lists every simple class selector of this file in its style menu, so only the five
 * block classes ff-person, ff-notice, ff-tiles, ff-columns and ff-gallery may appear as simple selectors.
 */

/* ---------- ff-person: photo, name and role (html/tinymce/person.html); several flow side by side ---------- */
.ff-person {
    display: inline-block;
    width: min(100%, 9.375rem);
    margin: 0 .875rem .875rem 0;
    vertical-align: top;
}

.ff-person img {
    display: block;
    width: 100%;
    max-width: 7.5rem;
    height: auto;
    aspect-ratio: 1;
    margin-bottom: .5rem;
    border: 1px solid var(--ff-line);
    border-radius: 8px;
    background: var(--ff-surface-sunk);
    object-fit: cover;
}

.ff-person p {
    margin: 0;
    color: var(--ff-muted);
    font-size: .875rem;
}

.ff-person strong {
    display: block;
    color: var(--ff-navy);
    font-size: 1rem;
}

/* The name is a block already; the line break of the snippet would add an empty line. */
.ff-person strong + br {
    display: none;
}

/* ---------- ff-notice: highlighted notice (html/tinymce/notice.html) ---------- */
.ff-notice {
    margin: 1.5rem 0;
    padding: .75rem .875rem;
    border-radius: 10px;
    background: var(--ff-surface-sunk);
    font-size: .875rem;
}

.ff-notice > :last-child {
    margin-bottom: 0;
}

/* ---------- ff-tiles: short items as tiles side by side (html/tinymce/tiles.html) ---------- */
.ff-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.125rem), 1fr));
    gap: .75rem;
    margin: 0 0 1.5rem;
}

.ff-tiles > * {
    padding: .875rem;
    border: 1px solid var(--ff-line);
    border-radius: 10px;
}

.ff-tiles h3 {
    margin: 0 0 .125rem;
}

.ff-tiles p {
    margin: 0;
    color: var(--ff-muted);
    font-size: .875rem;
}

/* ---------- ff-columns: two sections side by side from 768 px (html/tinymce/columns.html) ---------- */
.ff-columns {
    display: grid;
    gap: 1.5rem 1.75rem;
    margin: 0 0 1.5rem;
}

.ff-columns > * > h2:not(:first-child) {
    margin-top: 1.5rem;
}

.ff-columns > * > :last-child {
    margin-bottom: 0;
}

@media (width >= 768px) {
    .ff-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- ff-gallery: small square photos in a row (html/tinymce/gallery.html) ----------
   The row scrolls sideways; media/js/gallery.js turns it into a slider whose photos open large. TinyMCE may wrap the
   photos in paragraphs, so the wrappers step aside and every photo is a square of its own. */
.ff-gallery {
    display: flex;
    gap: .5rem;
    margin: 0 0 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.ff-gallery > :is(p, figure, div) {
    display: contents;
}

.ff-gallery img {
    flex: none;
    width: min(10.5rem, 42vw);
    height: auto;
    aspect-ratio: 1;
    border-radius: 8px;
    background: var(--ff-surface-sunk);
    object-fit: cover;
    scroll-snap-align: start;
}