/* embed.css — any third-party embed that is not YouTube or a tweet.
 *
 * Yours: edit it, or delete the file.
 *
 * The embed's own HTML is out of our hands, so this does two things only: keep
 * it inside the column, and centre it. The placeholder is what shows when the
 * embed cannot be rendered — an author looking at a dashed box knows something
 * is wrong, which is better than a gap.
 */

.velocity-embed {
    width: 100%;
    text-align: center;
}

.velocity-embed > * {
    max-width: 100% !important;
    margin-inline: auto !important;
}

.velocity-embed-rendered {
    padding: 0;
    border: none;
    background: transparent;
}

.velocity-embed-rendered iframe {
    display: block;
    max-width: 100% !important;
    margin-inline: auto;
}

.velocity-embed-small {
    width: 40%;
}

.velocity-embed-medium {
    width: 70%;
}

.velocity-embed-full {
    width: 100%;
}

.velocity-embed-placeholder {
    padding: 1.25rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius-small);
    background: var(--paper-soft);
    color: var(--ink-faint);
    text-align: center;
}

.velocity-embed-placeholder p {
    margin: 0 0 0.5rem;
    font-weight: 500;
}

/* A URL has no spaces to break at, so it would otherwise push the box wider
   than the page. */
.velocity-embed-placeholder small {
    font-size: 0.75rem;
    word-break: break-all;
}

@media (max-width: 500px) {
    .velocity-embed-small,
    .velocity-embed-medium {
        width: 100%;
    }
}