/*
 * Resource callout — <x-resource-callout> (and its <x-meditation-callout>
 * preset)
 *
 * A cross-link card pointing readers at a related resource: the Mikvah
 * Meditation page from the checklist and preparation articles, a podcast
 * episode from the article it accompanies, that article from the episode.
 * One row on desktop — a piece of art (the meditation ripple, or an icon in
 * a peach disc), then eyebrow / title / one line of copy (and optionally an
 * audio player), then a peach pill CTA — so it reads as an aside, not as a
 * second article.
 *
 * Palette is the meditation page's (offwhite peach, peach hairline,
 * Cormorant title), which also matches the peach entry boxes in CMS pages.
 *
 * Measure: the outer element mirrors .prose / .article__hero (864px cap,
 * 32px side gutters) so the card's edges line up with the article text
 * beneath it. The --flush modifier drops the gutters for /checklist,
 * where the slate notice above it already spans the full 864px. The
 * --inline modifier is for a card spliced INTO a .prose body (/ocd): it
 * takes the measure of its container and drops the border so it reads as
 * one more entry in the list it joins.
 *
 * Inner selectors are written as `.resource-callout .resource-callout__x`
 * on purpose: inside .prose they must outrank `.redesign .prose p` and
 * `.redesign .prose a`, which would otherwise restyle the copy and the CTA.
 */
.redesign .resource-callout {
    max-width: 864px;
    margin: 0 auto var(--sp-12);
    padding-inline: 32px;
}

.redesign .resource-callout--flush {
    padding-inline: 0;
    margin-bottom: 32px; /* same gap .checklist__notice leaves above it */
}

/* Matches the peach entry boxes on /ocd: 28px padding, 24px vertical
 * rhythm, no border. The card rule is written with the block class doubled
 * so it outranks the base __card rule below regardless of order. */
.redesign .resource-callout--inline {
    max-width: none;
    margin: 24px 0;
    padding-inline: 0;
}

.redesign .resource-callout.resource-callout--inline .resource-callout__card {
    padding: 28px;
    border: 0;
}

.redesign .resource-callout .resource-callout__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-6);
    padding: var(--sp-5) var(--sp-6);
    background: var(--brand-offwhite-peach);
    border: 1px solid var(--brand-border-peach);
    border-radius: var(--radius-card);
}

.redesign .resource-callout .resource-callout__card--no-art {
    grid-template-columns: minmax(0, 1fr) auto;
}

/* Slot art (the meditation ripple): same slate hairline colour the ripples
 * wear on the meditation page. */
.redesign .resource-callout .resource-callout__art {
    width: 96px;
    color: var(--brand-border-slate);
    line-height: 0;
}

/* Icon art: a 24px line icon in a peach disc. */
.redesign .resource-callout .resource-callout__art--icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brand-peach);
    color: var(--brand-brown);
}

.redesign .resource-callout .resource-callout__art--icon svg {
    width: 24px;
    height: 24px;
}

.redesign .resource-callout .resource-callout__art .meditation-ripple {
    display: block;
    width: 100%;
    height: auto;
}

.redesign .resource-callout .resource-callout__eyebrow {
    margin: 0 0 var(--sp-1);
    font-family: var(--font-body);
    font-size: var(--fs-tagline);
    line-height: var(--lh-tagline);
    letter-spacing: var(--ls-tagline);
    text-transform: uppercase;
    color: var(--brand-dark-slate-lighter);
}

.redesign .resource-callout .resource-callout__title {
    margin: 0 0 var(--sp-1);
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -0.005em;
}

.redesign .resource-callout .resource-callout__title a {
    color: var(--brand-dark-slate);
    text-decoration: none;
    transition: color var(--hover-dur) var(--hover-ease);
}

.redesign .resource-callout .resource-callout__title a:hover {
    color: var(--brand-dark-slate-lighter);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.redesign .resource-callout .resource-callout__text {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    line-height: 1.6;
    color: var(--text-paragraph);
}

.redesign .resource-callout .resource-callout__player {
    display: block;
    width: 100%;
    margin-top: var(--sp-3);
}

.redesign .resource-callout .resource-callout__cta,
.redesign .resource-callout .resource-callout__cta:hover {
    white-space: nowrap;
    color: var(--brand-brown); /* .prose a would paint it sea-green */
    text-decoration: none;
}

@media (max-width: 768px) {
    /* Gutters shrink with .checklist__notice (20px) so the two panels on
     * /checklist keep the same edges. */
    .redesign .resource-callout {
        padding-inline: 20px;
    }

    .redesign .resource-callout--flush {
        margin-inline: 20px;
        padding-inline: 0;
    }

    /* Stack: copy first, CTA under it. The ripple is decoration and the
     * first thing to go when width is short. */
    .redesign .resource-callout .resource-callout__card {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-4);
        padding: var(--sp-5);
    }

    .redesign .resource-callout .resource-callout__art {
        display: none;
    }

    .redesign .resource-callout .resource-callout__cta {
        justify-self: start;
    }
}