/* custom-html.css — a raw HTML block an author pasted in.
 *
 * Yours: edit it, or delete the file.
 *
 * Whatever is inside is theirs and is left alone. These rules only stop it
 * breaking the page: an iframe that would be wider than the column, and a
 * fallback for when the block cannot be rendered.
 */

.velocity-html-block[data-preserved="true"] {
    position: relative;
}

.velocity-html-rendered {
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
}

.velocity-html-wrapper iframe,
.velocity-html-content iframe,
.velocity-html-rendered iframe {
    display: block;
    max-width: 100% !important;
}

.velocity-html-fallback {
    margin: 0.625rem 0;
    border: 1px dashed var(--line);
    border-radius: var(--radius-small);
    background: var(--paper-soft);
}

.velocity-html-placeholder {
    padding: 1rem;
    text-align: center;
    color: var(--ink-faint);
}

.velocity-html-placeholder p {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.velocity-html-placeholder small {
    font-size: 0.75rem;
    word-break: break-all;
}

/* The three widths the editor offers, as a modifier on the rendered block. */
.velocity-html-rendered.velocity-html-small {
    width: 40%;
    margin-inline: auto;
}

.velocity-html-rendered.velocity-html-medium {
    width: 70%;
    margin-inline: auto;
}

.velocity-html-rendered.velocity-html-full {
    width: 100%;
}

/* The editor's own view of the block, dashed so it is obvious in a draft that
   this is a container and not the rendered result. It reaches the published
   page only when a block could not be rendered. */
.velocity-html-widget {
    position: relative;
    min-height: 60px;
    padding: 1rem;
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    background: var(--paper-soft);
}

.velocity-html-widget-header {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-faint);
}

.velocity-html-widget-content {
    word-break: break-word;
}

.velocity-html-widget-placeholder {
    font-size: 0.875rem;
    color: var(--ink-faint);
}

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

/* ---- Pocket offer banner (also in main.css; duplicated here while the
   main.css asset URL is pinned stale at the origin — see docs note). ---- */
/* The offer banner dropped into post bodies as raw HTML. Superblog's
   sanitizer strips class and style attributes from post content, so nothing
   in the markup can be targeted by name. The selectors instead recognize the
   banner by its shape — a div holding a media div (img) next to a body div
   whose paragraphs carry the heypocket.com CTA link — because href, src and
   alt do survive sanitization. The markup keeps its pkt-offer-* classes for
   readability, but they never reach the page. */
/* Flat selectors only: the upload pipeline's minifier drops nested rules. */
.prose div:has(> div > img):has(> div > p > a[href^="https://heypocket.com/"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    overflow: hidden;
    margin: 2.5rem 0;
    border-radius: 1rem;
    background: var(--ink);
}
/* Media half. */
.prose div:has(> div > p > a[href^="https://heypocket.com/"]) > div:has(> img) {
    flex: 1 1 260px;
    min-width: 240px;
}
.prose div:has(> div > p > a[href^="https://heypocket.com/"]) > div > img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
}
/* Copy half: eyebrow, title, note, CTA, stock chip — in that order. */
.prose div:has(> div > img) > div:has(> p > a[href^="https://heypocket.com/"]) {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    box-sizing: border-box;
    padding: 2.25rem 2rem;
}
.prose div:has(> div > img) > div:has(> p > a[href^="https://heypocket.com/"]) > p {
    margin: 0;
}
.prose div:has(> div > img) > div:has(> p > a[href^="https://heypocket.com/"]) > p:nth-of-type(1) {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.prose div:has(> div > img) > div:has(> p > a[href^="https://heypocket.com/"]) > p:nth-of-type(2) {
    font-size: 1.65rem;
    line-height: 1.25;
    font-weight: 700;
    color: #fff;
}
.prose div:has(> div > img) > div:has(> p > a[href^="https://heypocket.com/"]) > p:nth-of-type(2) span {
    color: #6db1ff;
}
.prose div:has(> div > img) > div:has(> p > a[href^="https://heypocket.com/"]) > p:nth-of-type(3) {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
}
.prose div:has(> div > img) > div > p > a[href^="https://heypocket.com/"] {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.85rem 1.75rem;
    border-radius: 999px;
    background: var(--post-accent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.1s linear;
}
.prose div:has(> div > img) > div > p > a[href^="https://heypocket.com/"]:hover {
    filter: brightness(1.15);
}
.prose div:has(> div > img) > div:has(> p > a[href^="https://heypocket.com/"]) > p:last-of-type {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}
.prose div:has(> div > img) > div:has(> p > a[href^="https://heypocket.com/"]) > p:last-of-type strong {
    color: #fff;
    font-weight: 600;
}