/**
 * KO-10 Bild
 */

/* Wrapper and figure share the `gap`, because the canvas renders the same order
   without the `figure`. */

.image,
.image__figure {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 48px → 32px above the picture on a sectioned page, 60px → 140px below it where a section
   title follows. */
.page-layout > * + .image {
    margin-block-start: clamp(2rem, 3rem - (100vw - 24.375rem) * 0.011958, 3rem);
}

.page-layout > .image:has(+ .heading) {
    margin-block-end: var(--sav-section-gap);
}

/* The picture fills the band, which is wider than the file the reading column asks for. */
.page-layout > .image .image__media,
.wp-block-post-content.page-layout > .image .image__media {
    inline-size: 100%;
}

.image__figure {
    position: relative;
    margin: 0;
}

.image__media {
    display: block;
    height: auto;
    max-width: 100%;
    border-radius: var(--sav-radius);
}

.image__title,
.image__caption {
    margin: 0;
}

/* A disc over the top-right of the image carrying the diagonal enlarge glyph, as in
   the design. It stays a link, so it also darkens on hover and shows a focus ring. */
.image__enlarge {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.875rem;
    height: 2.875rem;
    border-radius: 50%;
    background: var(--sav-color-weiss);
    color: var(--sav-color-dunkelblau);

    &:hover {
        color: var(--sav-color-dunkelblau-hover);
    }

    &:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }

    @media print {
        display: none;
    }
}

/* The inlined icon carries its own `currentColor`, so it takes the disc's colour and the
   hover with it; only the size belongs to the component. */
.image__enlarge .icon {
    inline-size: 1.5rem;
    block-size: 1.5rem;
}

/* Names the control for assistive tech without showing on screen. */
.image__enlarge-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.image__enlarged-figure {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
}

/* The design leaves a wide margin around the enlarged image, which is worth it on a large
   screen and costs more than it gives on a phone — so the image may nearly fill a narrow
   viewport and only steps back to the design's proportion from the layout breakpoint up. */
.image__enlarged-media {
    width: auto;
    height: auto;
    max-width: calc(100vw - 2rem);
    max-height: 90vh;
    border-radius: var(--sav-radius);

    @media (min-width: 64rem) {
        max-width: 80vw;
    }
}

/* The user agent resets `color` on a dialog, so the caption states the body colour it
   would otherwise inherit — it sits on Hellgrau, same as on the page. */
.image__enlarged-caption {
    color: var(--sav-color-dunkelblau);
}