/* =========================================================
   RECURSIVE REALITY — IMAGES IN TEXT
   Loaded after rr-redesign.css. Gives every image the same
   frame, shadow and caption style, in both dark and light theme.

   USAGE (inside a .text block):

   Full width (default):
   <figure class="rr-figure">
       <img src="/assets/images/example.jpg" alt="Beschreibung" loading="lazy">
       <figcaption>Bildunterschrift</figcaption>
   </figure>

   Floated beside the text (desktop), right or left:
   <figure class="rr-figure rr-figure--right">…</figure>
   <figure class="rr-figure rr-figure--left">…</figure>

   Portrait (3:4 crop) or square (1:1 crop):
   <figure class="rr-figure rr-figure--portrait">…</figure>
   <figure class="rr-figure rr-figure--square">…</figure>

   Black and white until hovered:
   <figure class="rr-figure rr-figure--mono">…</figure>

   Several images side by side:
   <div class="rr-gallery">
       <figure class="rr-figure">…</figure>
       <figure class="rr-figure">…</figure>
   </div>

   Full-width quote image above a section (no caption needed):
   <figure class="rr-figure rr-figure--wide">…</figure>
========================================================= */

/* Keeps floated figures inside their text block */
.text {
    display: flow-root;
}

/* ---------- Base figure ---------- */
.rr-figure {
    margin: 48px 0;
    max-width: 100%;
}

.rr-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 22px 60px -28px var(--shadow);
}

.rr-figure figcaption {
    margin-top: 14px;
    padding-left: 0;
    font-size: .82rem;
    line-height: 1.6;
    letter-spacing: .01em;
    color: var(--muted);
}

.rr-figure figcaption::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    margin-right: 10px;
    vertical-align: middle;
    background: var(--accent);
}

/* ---------- Wide: slightly larger than the text column ---------- */
.rr-figure--wide {
    margin-top: 56px;
    margin-bottom: 56px;
}

.rr-figure--wide img {
    border-radius: 14px;
}

/* ---------- Crops ---------- */
.rr-figure--portrait img,
.rr-figure--square img {
    object-fit: cover;
}

.rr-figure--portrait img {
    aspect-ratio: 3 / 4;
}

.rr-figure--square img {
    aspect-ratio: 1 / 1;
}

/* ---------- Black and white until hovered ---------- */
.rr-figure--mono img {
    filter: grayscale(1) contrast(1.05);
    transition: filter .5s ease, transform .5s ease;
}

.rr-figure--mono:hover img {
    filter: grayscale(0) contrast(1);
}

/* ---------- Floats beside the text ---------- */
.rr-figure--left,
.rr-figure--right {
    width: 42%;
    margin-top: 8px;
    margin-bottom: 24px;
}

.rr-figure--left {
    float: left;
    margin-right: 32px;
}

.rr-figure--right {
    float: right;
    margin-left: 32px;
}

/* ---------- Gallery: several images in a row ---------- */
.rr-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 18px;
    margin: 48px 0;
}

.rr-gallery .rr-figure {
    margin: 0;
}

.rr-gallery .rr-figure img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ---------- Small screens: floats become full-width blocks ---------- */
@media (max-width: 700px) {
    .rr-figure {
        margin: 36px 0;
    }

    .rr-figure--left,
    .rr-figure--right {
        float: none;
        width: 100%;
        margin: 36px 0;
    }

    .rr-figure--portrait img {
        aspect-ratio: 4 / 5;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .rr-figure--mono img {
        transition: none;
    }
}