/* Generated by deploy/build-help.cs from HelpClip.razor.css. Do not edit.
   Edit the source and run the tool. */

/* The clip's own shape, in the app and on the website alike: build-help.cs
   writes this file out unscoped as marketing/clips.css for the pages that
   carry the same figure by hand. The rules about where a clip sits inside a
   card belong to the card's owner, Help.razor.css and marketing.css, because
   a scoped stylesheet cannot reach the element round it. */

/* Phone-shaped because the clips are, so on a wide screen it floats to the
   right at the width of the hero's phone with the text running past it, and
   on a phone it takes the column, centred. clips.js plays it on screen. */
.clip {
    margin: 10px auto 18px;
    max-width: 250px;
}

/* The play mark over the poster, until the clip plays. Without it a clip that
   has not started, or never will under reduced motion or data saver, reads as
   a tall screenshot; with it the reader knows what it is. clips.js marks the
   figure playing and the mark goes. */
.clip-frame {
    position: relative;
    display: block;
}

.clip-frame::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 50%;
    background: rgba(13, 17, 23, 0.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M5.5 3.5v9l7-4.5z'/%3E%3C/svg%3E") center / 24px no-repeat;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    transition: opacity 0.25s;
}

.clip.is-playing .clip-frame::after {
    opacity: 0;
}

/* A desktop clip: the card's full width, never floated, a window's corners. */
.clip.clip-wide {
    max-width: 100%;
}

.clip-wide .clip-video {
    aspect-ratio: 1440 / 940;
    border-radius: 12px;
}

.clip-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 390 / 844;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 22px;
}

.clip figcaption {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-faint);
    text-align: center;
}

@media (min-width: 48rem) {
    .clip {
        float: right;
        width: 230px;
        margin: 4px 0 14px 26px;
    }

    /* A clip under its card's words, centred, instead of beside them: asked
       for with Layout="below" on a card too short to stand beside. */
    .clip.clip-below {
        float: none;
        width: 250px;
        margin: 14px auto 6px;
    }

    .clip.clip-wide {
        float: none;
        width: 100%;
        margin: 14px 0 6px;
    }
}

/* Offline, the same spot is a link to the clip on the website, a pill in
   the accent with the play mark, for later. */
.help-clip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 4px 0 10px;
    padding: 7px 14px 7px 11px;
    border: 1px solid var(--border-chip);
    border-radius: 999px;
    background: var(--bg-chip);
    color: var(--accent);
    font-size: 14px;
    text-decoration: none;
}

.help-clip i {
    font-size: 16px;
}

.help-clip:hover {
    border-color: var(--accent);
}