/**
 * KO-09 Einbettung
 */

/* Every step between the two reference widths is interpolated the way the type scale is
   (Utopia method): the mobile value holds at 375px, the desktop value at 1728px. Floor and
   ceiling are in rem so they still grow with the browser text size and page zoom. */
.embed {
    /* Play element 48 → 84 px, its arrow 24 → 42 px */
    --embed-play-size: clamp(3rem, 2.3764rem + 2.6608vw, 5.25rem);
    --embed-play-icon: clamp(1.5rem, 1.1882rem + 1.3304vw, 2.625rem);

    /* Title to embedding 8 → 16 px, embedding to description 12 → 24 px */
    --embed-gap-title: clamp(0.5rem, 0.3614rem + 0.5913vw, 1rem);
    --embed-gap-description: clamp(0.75rem, 0.5421rem + 0.8869vw, 1.5rem);

    /* Play element to the sentence beside it, and the room the two keep from the edge */
    --embed-gap-invitation: clamp(0.75rem, 0.6114rem + 0.5913vw, 1.25rem);
    --embed-padding-stage: clamp(1rem, 0.5843rem + 1.7739vw, 2.5rem);

    --embed-radius: 0.3125rem;

    display: flex;
    flex-direction: column;
}

/* The player stands between the title and the description, while the two of them are child
   blocks and therefore come out of the template as one piece: the paragraph is the only `p`
   among the children, which is what puts it last. */

/* The surface and the player occupy the same cell, so the one replaces the other without the
   box changing size — the height is the ratio's, never the content's. `minmax(0, …)` is what
   says so: a plain `1fr` track still grows to whatever it holds, and a picture taller than
   the box would push its way out through the bottom, taking the play element with it. */
.embed__media {
    order: 1;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    border-radius: var(--embed-radius);
    overflow: hidden;

    & > * {
        grid-area: 1 / 1;
        min-inline-size: 0;
        min-block-size: 0;
    }

    @media print {
        display: block;
        overflow: visible;
    }
}

.embed > p {
    order: 2;

    /* The legend under an embedding is one step smaller than the running text around it. */
    font-weight: var(--sav-font-weight-light);
    font-size: var(--sav-text-s-size);
    line-height: var(--sav-text-s-line);
}

/* The title and the description are child blocks and bring the rhythm of their own block
   along; between them stands something that block knows nothing about, so around the
   embedding the distances are the ones the design gives it. Where no medium was embedded
   there is nothing to space out, and KO-04's own rhythm is the right one. */
.embed:has(.embed__media) {
    & > .heading {
        margin-block-end: 0;
    }

    & .embed__media {
        margin-block-start: var(--embed-gap-title);
    }

    /* No title above means nothing to keep a distance from. */
    &:not(:has(.heading)) .embed__media {
        margin-block-start: 0;
    }

    & > p {
        margin-block-start: var(--embed-gap-description);
    }
}

/* A video holds the ratio every provider delivers, on every width, so nothing jumps while
   the player takes the still's place. A podcast is a bar and keeps the height its provider
   draws it at — 16/9 would stretch it over the page. */

.embed--video .embed__media {
    aspect-ratio: 16 / 9;

    @media print {
        aspect-ratio: auto;
    }
}

/* The bar is the height Spotify draws its player at, on every width — so the play element
   stops growing with the viewport too, or it would fill a box that does not grow with it. It
   keeps the size the design gives it on the narrow screen. Every other provider gets the
   ratio above, a radio piece at SRF Play included: its player is video-shaped whatever it
   plays, and this bar would squeeze it flat. */
.embed--audio {
    --embed-play-size: 3rem;
    --embed-play-icon: 1.5rem;

    & .embed__media {
        block-size: 9.5rem;

        @media print {
            block-size: auto;
        }
    }

    /* A bar this low has no room for a sentence under the play element, so the two stand
       side by side instead of above one another. */
    & .embed__invitation {
        flex-direction: row;
        text-align: start;
    }
}

/* The surface the play element waits on: the medium's still, dimmed by a fifth against the
   dark tone behind it, as the design draws it. A medium whose provider sent no still shows
   that tone alone. */
.embed__stage {
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    background-color: var(--sav-color-schwarz);

    /* The still lies under the play element rather than beside it, and the same `minmax(0, …)`
       reason holds one track down here: a portrait still would otherwise make the row its own
       height and carry the play element out of sight. */
    & > * {
        grid-area: 1 / 1;
        min-inline-size: 0;
        min-block-size: 0;
    }

    /* On paper nothing can be pressed and nothing lies over anything: the still stands on
       its own and what invited the visitor to play follows underneath it. */
    @media print {
        display: block;
        background-color: transparent;
    }
}

/* Dimmed far enough that the white sentence on top of it stays legible over any picture at
   all. The worst case sets the number: a white still, where the surface must not come out
   lighter than 47 % of white, or small white text drops under the 4.5 : 1 the guidelines ask
   for. 45 % leaves the picture recognisable and holds 4.8 : 1 even then — and nothing is
   lost on a dark still, since the sentence and the picture never outlast the consent. */
.embed__poster {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0.45;

    /* The dimming is there to hold white text legible over the picture; on paper the text
       stands beneath it. */
    @media print {
        block-size: auto;
        opacity: 1;
    }
}

/* The play element and the sentence that says what pressing it does. They stand together,
   because pressing it is the whole of the consent — there is no second element to confirm
   with, and a sentence at the far end of the block would explain a decision already made. */
.embed__invitation {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--embed-gap-invitation);
    padding: var(--embed-padding-stage);
    text-align: center;

    @media print {
        display: block;
        padding-inline: 0;
        color: var(--sav-color-dunkelblau);
        text-align: start;
    }
}

.embed__consent {
    max-inline-size: 44ch;
    margin: 0;
    color: var(--sav-color-weiss);

    /* Nothing is loaded from the provider on paper, so the sentence describes something
       that does not happen there. */
    @media print {
        display: none;
    }
}

.embed__play {
    display: grid;
    place-items: center;
    inline-size: var(--embed-play-size);
    block-size: var(--embed-play-size);
    border-radius: 50%;
    background-color: var(--sav-color-weiss);
    color: var(--sav-color-dunkelblau);

    @media (prefers-reduced-motion: no-preference) {
        transition:
            background-color 0.2s,
            color 0.2s,
            scale 0.2s;
    }

    /* The circle keeps its size whatever room the sentence beside it takes. */
    flex: none;

    & svg {
        inline-size: var(--embed-play-icon);
        block-size: var(--embed-play-icon);

        /* The arrow's own bounding box is symmetric while the triangle inside it is not, so
           centring the box leaves the shape sitting left of the middle. */
        margin-inline-start: 0.1em;
    }

    &:hover,
    &:active {
        background-color: var(--sav-color-dunkelblau);
        color: var(--sav-color-weiss);
        scale: 1.05;
    }

    /* The ring sits outside the circle, on the surface behind it — which is this block's own
       dark tone, never a picture, so white holds its contrast there whatever the medium is. */
    &:focus-visible {
        outline: 2px solid var(--sav-color-weiss);
        outline-offset: 3px;
    }

    /* A printed article writes out where each of its links goes, and this one is the only
       way to the medium — so on paper the circle gives way to the line naming it, which the
       address then fits on instead of running down the picture a few letters wide. */
    @media print {
        display: inline;
        inline-size: auto;
        block-size: auto;
        border-radius: 0;
        background-color: transparent;

        & svg {
            display: none;
        }
    }
}

/* The label names what pressing the element does — that it loads from the provider, not
   just that it plays. The design draws the arrow alone, so the words are for those who do
   not see it. */
.embed__play-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;

    @media print {
        position: static;
        inline-size: auto;
        block-size: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
        white-space: normal;
    }
}

/* Neither holds anything to look at until the visitor agreed, and both share the cell with
   the still — left standing they would lie over it and swallow the press meant for the play
   element. The frame is not empty while it waits: the parked address sits on a frame that is
   already in the markup. */

.embed:not(.embed--consented) {
    & .embed__player,
    & .embed__frame {
        display: none;
    }
}

.embed__player,
.embed__frame {
    display: grid;

    @media print {
        display: none;
    }

    & iframe {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        border: 0;
    }
}

/* The player draws its own controls; only the colours and the type are ours. It wraps the
   element it is built on, so it becomes the cell's child itself — which is why its settings
   sit on the box around it rather than on that element. It fills the cell the still held, so
   the ratio stays the one the box already has. */
.embed__media {
    --plyr-color-main: var(--sav-color-dunkelblau);
    --plyr-video-background: var(--sav-color-schwarz);
    --plyr-focus-visible-color: var(--sav-color-weiss);
    --plyr-font-family: var(--sav-font-text);
    --plyr-font-size-base: var(--sav-text-xs-size);
    --plyr-font-size-small: var(--sav-text-label-size);

    & .plyr {
        inline-size: 100%;
        block-size: 100%;
    }
}

/* Once the medium is showing there is nothing left to agree to, and the still has been
   replaced by the thing it stood for. */
.embed--consented .embed__stage {
    display: none;

    /* A player plays nothing on paper, so the printout carries the still and the address
       whether the visitor agreed or not. */
    @media print {
        display: block;
    }
}