.lwta-purpose-card,
.lwta-purpose-card * {
    box-sizing: border-box;
}

.lwta-purpose-card {
    --lwta-card-bg: #242424;
    --lwta-card-border: rgba(255, 255, 255, 0.08);
    --lwta-card-white: #ffffff;
    --lwta-card-muted: #b8b8b8;
    --lwta-card-icon: #a7a7a7;
    --lwta-card-red: #c82033;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-height: 315px;
    height: 100%;
    margin: 0;
    padding: clamp(38px, 4vw, 62px) clamp(28px, 3vw, 48px);
    border: 1px solid var(--lwta-card-border);
    background-color: var(--lwta-card-bg);
    color: var(--lwta-card-white);
}

.lwta-purpose-card__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
    margin: 0 0 26px;
    color: var(--lwta-card-icon);
    font-size: 31px;
    line-height: 1;
}

.lwta-purpose-card__icon-wrap i {
    display: block;
    color: inherit !important;
    font-size: inherit !important;
    font-style: normal !important;
    line-height: 1 !important;
}

.lwta-purpose-card__accent {
    display: block;
    width: 33px;
    height: 1px;
    margin: 0 0 25px;
    background: var(--lwta-card-red);
}

.lwta-purpose-card__title {
    margin: 0 0 15px !important;
    padding: 0 !important;
    border: 0 !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor;
    font-family: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif !important;
    font-size: clamp(25px, 2vw, 31px) !important;
    font-weight: 400 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.025em !important;
    text-transform: none !important;
}

.lwta-purpose-card__subtitle {
    max-width: 410px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: inherit !important;
    opacity: 0.72;
    -webkit-text-fill-color: currentColor;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.58 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.lwta-purpose-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: 26px;
    padding: 0 24px;
    border: 1px solid var(--lwta-card-red);
    background: transparent;
    color: inherit !important;
    text-decoration: none !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
    transition: background-color .2s ease, transform .2s ease;
}

.lwta-purpose-card__cta:hover,
.lwta-purpose-card__cta:focus-visible {
    background: var(--lwta-card-red);
    color: #ffffff !important;
    transform: translateY(-2px);
}

.lwta-purpose-card__cta:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* Remove default WordPress column gaps/borders only when cards sit inside columns. */
.wp-block-column > .lwta-purpose-card {
    height: 100%;
}

@media (max-width: 781px) {
    .lwta-purpose-card {
        min-height: 285px;
        padding: 38px 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lwta-purpose-card__cta {
        transition: none;
    }
}

/* =========================================================
   v1.0.3 — Resilient spacing and section alignment
   ========================================================= */

/* Use internal gap instead of child margins so global margin resets
   in Additional CSS cannot collapse the card content. */
.lwta-purpose-card {
    padding: clamp(34px, 3vw, 48px) !important;
    gap: 0 !important;
}

.lwta-purpose-card__icon-wrap {
    margin: 0 0 12px !important;
}

.lwta-purpose-card__accent {
    margin: 0 0 18px !important;
}

.lwta-purpose-card__title {
    margin: 0 0 12px !important;
}

.lwta-purpose-card__subtitle {
    margin: 0 !important;
}

.lwta-purpose-card__cta {
    margin-top: 24px !important;
}

/* Keep the heading and card row inside the same centered content area. */
.wp-block-columns:has(.lwta-text-banner),
.wp-block-columns:has(.lwta-purpose-card) {
    box-sizing: border-box !important;
    width: min(calc(100% - 60px), 1230px) !important;
    max-width: 1230px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.wp-block-columns:has(.lwta-purpose-card) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 30px !important;
    padding-bottom: 72px !important;
}

.wp-block-columns:has(.lwta-purpose-card) > .wp-block-column {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.wp-block-columns:has(.lwta-purpose-card) .lwta-purpose-card {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 1024px) {
    .wp-block-columns:has(.lwta-text-banner),
    .wp-block-columns:has(.lwta-purpose-card) {
        width: calc(100% - 40px) !important;
    }

    .wp-block-columns:has(.lwta-purpose-card) {
        gap: 20px !important;
        padding-bottom: 60px !important;
    }
}

@media (max-width: 781px) {
    .lwta-purpose-card {
        padding: 32px 24px !important;
    }

    .wp-block-columns:has(.lwta-text-banner),
    .wp-block-columns:has(.lwta-purpose-card) {
        width: calc(100% - 32px) !important;
    }

    .wp-block-columns:has(.lwta-purpose-card) {
        flex-direction: column !important;
        gap: 16px !important;
        padding-bottom: 48px !important;
    }
}


/* =========================================================
   v1.0.4 — Gutenberg color support
   ========================================================= */

/* Native Gutenberg background and text colors are applied to
   the block wrapper by useBlockProps. These declarations make
   sure the component honors both preset classes and custom
   inline colors on the frontend and in the editor. */
.lwta-purpose-card.has-background {
    background-image: none !important;
}

.lwta-purpose-card.has-text-color,
.lwta-purpose-card[style*="color"] {
    color: inherit;
}

.lwta-purpose-card.has-text-color .lwta-purpose-card__title,
.lwta-purpose-card.has-text-color .lwta-purpose-card__subtitle,
.lwta-purpose-card.has-text-color .lwta-purpose-card__cta,
.lwta-purpose-card[style*="color"] .lwta-purpose-card__title,
.lwta-purpose-card[style*="color"] .lwta-purpose-card__subtitle,
.lwta-purpose-card[style*="color"] .lwta-purpose-card__cta {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Keep the subtitle visually secondary while still honoring
   the selected Gutenberg text color. */
.lwta-purpose-card__subtitle {
    opacity: 0.72;
}
