/*
 * Styles for the in-content blog shortcodes: [sd_lead_magnet] (a promo-card
 * placed inside the article body) and [sd_readmore] (a link card to another
 * post). Scoped under .post-new to match the existing single-post stylesheet
 * (css/post-new.css) — the .promo-card base rules already live there, this
 * file only adds the --inline layout variant and the new .sd-readmore block.
 */
.post-new {
    .promo-card--inline {
        /* Base .promo-card (post-new.css) hardcodes width:320px for the
           sidebar widget — max-width:100% alone can't override an explicit
           width, so the inline variant rendered at the same narrow 320px
           in the main article column, looking like a stray sidebar widget
           instead of a full-width inline card. */
        width: 100%;
        max-width: 100%;
        margin: 32px 0;
        padding: 24px;
        clear: both;
    }

    .promo-card--inline .promo-card__wrapper {
        align-items: flex-start;
        text-align: left;
    }

    .promo-card--inline .promo-card__img {
        max-width: 160px;
    }

    .sd-readmore {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        width: 100%;
        gap: 0;
        margin: 24px 0;
        padding: 0;
        border: 1px solid rgba(0, 0, 0, .1);
        border-radius: 16px;
        background: #fff;
        overflow: hidden;
        text-decoration: none !important;
        transition: background-color .15s ease;
    }

    .sd-readmore:hover {
        background: #faf7f5;
    }

    /* "Read article" (.sd-link-button, defined globally in style.min.css)
       sits inside this whole-card anchor rather than being its own
       focusable target, so its hover/focus visuals are driven by the
       card's own state here instead of the primitive's self-triggered
       :hover (kept in style.min.css for standalone/future usage). */
    .sd-readmore:hover .sd-link-button__label,
    .sd-readmore:focus-visible .sd-link-button__label {
        color: #262626;
        text-decoration-color: #262626;
    }

    .sd-readmore:hover .sd-link-button__icon,
    .sd-readmore:focus-visible .sd-link-button__icon {
        transform: translateX(2px);
    }

    .sd-readmore__media {
        order: 2;
        flex: 0 0 200px;
        width: 200px;
        max-width: 200px;
        align-self: stretch;
        overflow: hidden;
        margin: 0;
    }

    /* Isolated from the generic .post-main-content__text img rules (margin,
       border, border-radius) so the thumbnail sits flush inside the card. */
    .sd-readmore__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    .sd-readmore__body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
        padding: 24px;
    }

    /* Keeps "Read article" pinned to the card's bottom edge regardless of
       how many lines the title wraps to — the eyebrow+title pair still
       just uses the body's own 8px gap between each other. */
    .sd-readmore__link {
        margin-top: auto;
    }

    .sd-readmore__eyebrow {
        color: rgba(0, 0, 0, .55) !important;
        font-family: 'Google Sans Flex', sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: .105px;
        text-transform: none;
        text-decoration: none;
    }

    .sd-readmore__title {
        color: var(--foreground-new-primary, #262626) !important;
        font-family: 'Google Sans Flex', sans-serif;
        font-size: 18px;
        font-weight: 500;
        line-height: 26px;
        letter-spacing: .135px;
        text-decoration: none;
    }

    /* Visuals for .sd-readmore__link (label/icon/hover/focus) now come
       entirely from the global .sd-link-button primitive in
       style.min.css — see the .sd-readmore:hover/:focus-visible wiring
       above. .sd-readmore__link stays only as a structural hook. */

    .sd-inline-cta {
        display: flex;
        align-items: stretch;
        position: relative;
        width: 100%;
        max-width: none;
        min-height: 240px;
        margin: 24px 0;
        overflow: hidden;
        border-radius: 16px;
        background: #141414;
        color: #fff;
    }

    .sd-inline-cta__content {
        display: flex;
        /* A foreground layer: it intentionally crosses the 50/50 seam and
           sits over the darkened leading edge of the photo. */
        position: absolute;
        inset: 0 auto 0 0;
        width: 62%;
        flex-direction: column;
        justify-content: center;
        gap: 24px;
        max-width: none;
        padding: 32px;
        position: relative;
        z-index: 1;
    }

    .sd-inline-cta__text { display: flex; flex-direction: column; gap: 8px; width: 100%; }
    .sd-inline-cta__heading { margin: 0; color: #fff !important; }
    .sd-inline-cta__description { margin: 0; color: rgba(255,255,255,.8) !important; }
    .sd-inline-cta__button { flex: 0 0 auto; }
    /* Desktop Figma composition: copy sits on the solid dark left half;
       the photo fills only the right half, with no gutter between them. */
    .sd-inline-cta__media { position: absolute; inset: 0 0 0 50%; }
    .sd-inline-cta__media::after { position: absolute; inset: 0; background: linear-gradient(90deg, #141414 0%, rgba(20,20,20,0) 100%); content: ''; }
    .sd-inline-cta__media img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border: 0; border-radius: 0; }

    /* The post body has generic h3/p/a rules with higher specificity than
       the global primitives. Reset only those article rules here; the CTA
       still uses the shared sd-type and sd-button classes as its source. */
    .post-main-content__text .sd-inline-cta h3.sd-inline-cta__heading {
        padding: 0 !important;
        color: #fff !important;
        font-size: 20px !important;
        font-weight: 500 !important;
        line-height: 28px !important;
        letter-spacing: .15px !important;
    }

    .post-main-content__text .sd-inline-cta p.sd-inline-cta__description {
        padding: 0 !important;
        color: rgba(255,255,255,.8) !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 24px !important;
        letter-spacing: .12px !important;
    }

    .post-main-content__text .sd-inline-cta a.sd-inline-cta__button.sd-button {
        display: inline-flex !important;
        align-self: flex-start;
        width: auto !important;
        min-width: 0;
        color: #262626 !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 24px !important;
        letter-spacing: .12px !important;
        text-decoration: none !important;
        text-decoration-color: transparent !important;
    }

    @media (max-width: 480px) {
        .sd-readmore {
            flex-direction: column;
            margin: 16px 0;
        }

        /* node 17333:8988 — full-width dark card, image on top (aspect
           ~350/180) with a gradient fading into the solid #141414 body. */
        .sd-inline-cta { flex-direction: column; max-width: none; min-height: 0; margin: 16px 0; }
        /* aspect-ratio only sizes the box itself; the <img>'s own
           width:100%/height:100% (base rule) can't resolve a percentage
           height against a box whose height comes from aspect-ratio, so it
           silently fell back to the image's intrinsic ratio instead
           (372x248 instead of the 350:180-derived 372x191). Taking the img
           out of flow with inset:0 sizes it from the media box's actual
           rendered dimensions instead of a percentage. */
        .sd-inline-cta__media { position: relative; inset: auto; order: 0; flex: 0 0 auto; height: auto; aspect-ratio: 350 / 180; overflow: hidden; }
        .sd-inline-cta__media img { position: absolute; inset: 0; }
        .sd-inline-cta__media::after { background: linear-gradient(180deg, rgba(20,20,20,0) 0%, #141414 100%); }
        .sd-inline-cta__content { position: relative; inset: auto; order: 1; width: auto; flex-basis: auto; max-width: none; gap: 20px; padding: 8px 20px 20px; }

        .post-main-content__text .sd-inline-cta h3.sd-inline-cta__heading {
            font-size: 18px !important;
            line-height: 26px !important;
            letter-spacing: .135px !important;
        }

        .post-main-content__text .sd-inline-cta a.sd-inline-cta__button.sd-button {
            align-self: stretch;
            width: 100% !important;
        }

        /* Figma node 17338:3458 — mobile drops the thumbnail entirely
           rather than reflowing it, so the card is text-only on phones. */
        .sd-readmore__media {
            display: none;
        }

        .sd-readmore__body {
            width: 100%;
            padding: 16px;
        }
    }
}