/* Shared design for all category CTA variations. */
.tdm-category-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    grid-template-rows: auto 1fr;
    gap: 0 24px;
    align-items: start;
    width: 100%;
    margin: 2.4em 0;
    padding: 30px 32px;
    border-radius: 12px;
    background: #e3caff;
    color: #1a1a1a;
    font-family: Roboto, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    container-type: inline-size;
    overflow-wrap: anywhere;
}

.tdm-category-cta .tdm-category-cta__title {
    grid-column: 1;
    grid-row: 1;
    max-width: 26ch;
    letter-spacing: -.015em;
}

.tdm-category-cta .tdm-category-cta__title,
#article-content.sel-post-template #mainContent .body-content .tdm-category-cta .tdm-category-cta__title {
    margin: 0 0 8px !important;
    color: inherit !important;
    font-family: Roboto, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* Inline WYSIWYG spans may carry typography that overrides the CTA title. */
.tdm-category-cta .tdm-category-cta__title > *,
#article-content.sel-post-template #mainContent .body-content .tdm-category-cta .tdm-category-cta__title > * {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}

.tdm-category-cta .tdm-category-cta__description {
    grid-column: 1;
    grid-row: 2;
    max-width: 52ch;
    color: inherit;
    font-size: .95rem;
    line-height: 1.45;
    opacity: .85;
}

.tdm-category-cta .tdm-category-cta__description p,
#article-content.sel-post-template #mainContent .body-content .tdm-category-cta .tdm-category-cta__description p {
    margin: 0 0 .75em !important;
    color: inherit !important;
    font: inherit !important;
}

.tdm-category-cta .tdm-category-cta__description > :last-child,
#article-content.sel-post-template #mainContent .body-content .tdm-category-cta .tdm-category-cta__description > :last-child {
    margin-bottom: 0 !important;
}

.tdm-category-cta .tdm-category-cta__actions {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    max-width: 320px;
    max-width: clamp(140px, 45cqi, 320px);
}

.tdm-category-cta a.tdm-category-cta__button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 42px;
    max-width: 100%;
    padding: 8px 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: 500 .92rem/1.4 Roboto, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    text-align: center;
    text-decoration: none !important;
    box-sizing: border-box;
}

.tdm-category-cta a.tdm-category-cta__button--primary {
    background: #1a1a1a;
    color: #fff !important;
}

.tdm-category-cta a.tdm-category-cta__button--primary:hover {
    background: #333;
}

.tdm-category-cta a.tdm-category-cta__button--secondary {
    border-color: #1a1a1a;
    background: transparent;
    color: #1a1a1a !important;
}

.tdm-category-cta a.tdm-category-cta__button--secondary:hover {
    background: rgba(0, 0, 0, .06);
}

.tdm-category-cta a.tdm-category-cta__button:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 3px;
}

.tdm-category-cta img.tdm-category-cta__logo {
    display: block;
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: end;
    width: 126px;
    height: 15px;
    max-width: 100%;
    margin: 14px 0 0 !important;
    opacity: .85;
}

/* Keep both desktop templates and tablet columns in the two-column layout.
 * Stack only when the CTA itself is too narrow for readable text beside actions. */
@container (max-width: 400px) {
    .tdm-category-cta .tdm-category-cta__title,
    .tdm-category-cta .tdm-category-cta__description,
    .tdm-category-cta .tdm-category-cta__actions,
    .tdm-category-cta img.tdm-category-cta__logo {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .tdm-category-cta .tdm-category-cta__actions {
        justify-content: flex-start;
        margin-top: 14px;
        max-width: 100%;
    }

    .tdm-category-cta img.tdm-category-cta__logo {
        justify-self: start;
        margin-top: 18px !important;
    }
}

@media (max-width: 680px) {
    .tdm-category-cta {
        padding: 22px 20px;
    }
}

/* Mobile fallback also supports browsers without container queries. */
@media (max-width: 480px) {
    .tdm-category-cta {
        grid-template-columns: minmax(0, 1fr);
    }

    .tdm-category-cta .tdm-category-cta__title,
    .tdm-category-cta .tdm-category-cta__description,
    .tdm-category-cta .tdm-category-cta__actions,
    .tdm-category-cta img.tdm-category-cta__logo {
        grid-column: 1;
        grid-row: auto;
    }

    .tdm-category-cta .tdm-category-cta__actions {
        justify-content: flex-start;
        margin-top: 14px;
        max-width: 100%;
    }

    .tdm-category-cta img.tdm-category-cta__logo {
        justify-self: start;
        margin-top: 18px !important;
    }
}