/*
 * CTA box inside a blog or news article, in Deswave's colours.
 *
 * The editor (admin-views/shared/_content-editor-scripts) writes the markup:
 *   <div class="cta blog-content-cta">      (news: class="news-content-cta")
 *       <p class="label blog-content-cta__description">…</p>
 *       <h2 class="blog-content-cta__title">…</h2>
 *       <a class="blog-content-cta__button" href="…" style="background-color:…; color:…">…</a>
 *   </div>
 *
 * .blog__detail-content is the public article, .blog-article__content the
 * editor's body.
 */
:is(.blog-article__content, .blog__detail-content) :is(.blog-content-cta, .news-content-cta) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 40px 0;
    padding: 56px;
    border: 0;
    border-radius: 20px;
    background: #0b0b0b;
    color: #fff;
}

:is(.blog-article__content, .blog__detail-content) :is(.blog-content-cta__description, .news-content-cta__description) {
    margin: 0;
    padding: 0;
    color: #c9f31d;
    font-family: "Kanit", sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Blog: label above the title. News: title first, description under it. */
:is(.blog-article__content, .blog__detail-content) .blog-content-cta__description { order: 1; }
:is(.blog-article__content, .blog__detail-content) .blog-content-cta__title { order: 2; }
:is(.blog-article__content, .blog__detail-content) .blog-content-cta__button { order: 3; }

:is(.blog-article__content, .blog__detail-content) .news-content-cta__description {
    margin-top: 22px;
    color: #d6d6d6;
    font-size: 16px;
    letter-spacing: 0;
    text-transform: none;
}

:is(.blog-article__content, .blog__detail-content) :is(.blog-content-cta__title, .news-content-cta__title) {
    max-width: 850px;
    margin: 14px 0 30px;
    padding: 0;
    border: 0;
    color: #fff;
    font-family: "Kanit", sans-serif;
    font-size: clamp(30px, 4.5vw, 56px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

:is(.blog-article__content, .blog__detail-content) .news-content-cta__title {
    margin: 0;
}

/*
 * The button: a lime pill with black text and an arrow, the site's two
 * colours. On hover it turns white and the arrow nudges up and right. The
 * editor's button colours are inline styles; they are overridden so every CTA
 * matches the site.
 */
:is(.blog-article__content, .blog__detail-content) :is(.blog-content-cta__button, .news-content-cta__button) {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding: 16px 30px;
    border: 1px solid var(--primary, #c9f31d);
    border-radius: 999px;
    background: var(--primary, #c9f31d) !important;
    color: var(--black-2, #121212) !important;
    font-family: "Kanit", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

:is(.blog-article__content, .blog__detail-content) .news-content-cta__button {
    margin-top: 30px;
}

/* The arrow is drawn here, so it is never stored in the button text. */
:is(.blog-article__content, .blog__detail-content) :is(.blog-content-cta__button, .news-content-cta__button)::after {
    content: "\2192";
    display: inline-block;
    font-size: 17px;
    line-height: 1;
    transform: rotate(-45deg);
    transition: transform 0.3s;
}

:is(.blog-article__content, .blog__detail-content) :is(.blog-content-cta__button, .news-content-cta__button):hover {
    border-color: #fff;
    background: #fff !important;
}

:is(.blog-article__content, .blog__detail-content) :is(.blog-content-cta__button, .news-content-cta__button):hover::after {
    transform: translate(3px, -3px) rotate(-45deg);
}

:is(.blog-article__content, .blog__detail-content) :is(.blog-content-cta__button, .news-content-cta__button):focus-visible {
    outline: 3px solid rgba(201, 243, 29, 0.55);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    :is(.blog-article__content, .blog__detail-content) :is(.blog-content-cta, .news-content-cta) {
        padding: 32px 24px;
        border-radius: 16px;
    }

    :is(.blog-article__content, .blog__detail-content) :is(.blog-content-cta__title, .news-content-cta__title) {
        font-size: 30px;
    }
}