/**
 * Guidee Considerations Component – “What We Consider”
 * Root background (all design-system colours) + corner modifiers · 2×2 desktop
 *
 * Version: 1.5.1
 * Last modified: 2026-07-24
 *
 * RULES:
 * - 100 % design-system tokens only (variables.css)
 * - Background on .wce-considerations root via --{color} modifier
 * - Core Brand + Label/Tag + subtle/sand
 * - Corners match table system: sharp (default) | rounded | rounded-lg
 * - Bullet via CSS mask + child-theme icon (caret-circle-right-light.svg)
 * - Heading always rendered when non-empty
 * - 2×2 grid on desktop, no divider
 * - No hardcoded colours
 *
 * v1.5.1 – Bullet icon → caret-circle-right-light.svg
 * v1.5.0 – Replaced inline SVG with CSS mask pattern (same as pros/cons)
 * v1.4.2 – Doubled list gap + heading bottom margin
 * v1.4.1 – Doubled inner padding
 */

/* =====================================================
   ROOT
   ===================================================== */
.wce-considerations {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 2rem 0;
    padding: 3.5rem 3rem;
    background-color: var(--color-sand);
    color: var(--color-text-primary);
    /* Sharp corners = default (same as tables) */
    border-radius: 0;
    overflow: hidden;
}

/* =====================================================
   BACKGROUND – CORE BRAND
   ===================================================== */
.wce-considerations--charcoal {
    background-color: var(--color-charcoal);
    color: var(--color-text-inverse);
}

.wce-considerations--cobalt {
    background-color: var(--color-cobalt);
    color: var(--color-text-inverse);
}

.wce-considerations--cherry {
    background-color: var(--color-cherry);
    color: var(--color-text-inverse);
}

.wce-considerations--forest {
    background-color: var(--color-forest);
    color: var(--color-text-inverse);
}

.wce-considerations--soft-pink {
    background-color: var(--color-soft-pink);
    color: var(--color-text-primary);
}

.wce-considerations--sand {
    background-color: var(--color-sand);
    color: var(--color-text-primary);
}

.wce-considerations--white {
    background-color: var(--color-white);
    color: var(--color-text-primary);
}

/* =====================================================
   BACKGROUND – LABEL / TAG + UTILITY
   ===================================================== */
.wce-considerations--lime {
    background-color: var(--color-label-lime);
    color: var(--color-label-lime-dark);
}

.wce-considerations--sky {
    background-color: var(--color-label-sky);
    color: var(--color-label-sky-dark);
}

.wce-considerations--amber {
    background-color: var(--color-label-amber);
    color: var(--color-label-amber-dark);
}

.wce-considerations--pink {
    background-color: var(--color-label-pink);
    color: var(--color-label-pink-dark);
}

.wce-considerations--purple {
    background-color: var(--color-label-purple);
    color: var(--color-label-purple-dark);
}

.wce-considerations--subtle {
    background-color: var(--color-bg-subtle);
    color: var(--color-text-primary);
}

/* =====================================================
   CORNER MODIFIERS (same contract as tables)
   ===================================================== */
/* Default = sharp (border-radius: 0) – no extra class required */

.wce-considerations--rounded {
    border-radius: 8px;
}

.wce-considerations--rounded-lg {
    border-radius: 12px;
}

/* =====================================================
   HEADING (always shown when non-empty – no divider)
   ===================================================== */
.wce-considerations__heading {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: var(--fw-heading);
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-heading);
    color: inherit;
    margin: 0 0 2.5rem;
    padding: 0;
}

/* =====================================================
   LIST – 2×2 grid on desktop
   ===================================================== */
.wce-considerations__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem 3rem;
}

@media (min-width: 768px) {
    .wce-considerations__list {
        grid-template-columns: 1fr 1fr;
        gap: 3rem 4rem;
    }
}

/* =====================================================
   ITEM + BULLET (child-theme icon via mask – same as pros/cons)
   ===================================================== */
.wce-considerations__item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    background: transparent;
}

.wce-considerations__item::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 0.15em;
    background-color: currentColor;
    -webkit-mask-image: url('../../icons/caret-circle-right-light.svg');
    mask-image: url('../../icons/caret-circle-right-light.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* =====================================================
   BODY (title + summary)
   ===================================================== */
.wce-considerations__body {
    flex: 1 1 auto;
    min-width: 0;
}

.wce-considerations__title {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: var(--fw-body-bold);
    line-height: 1.35;
    letter-spacing: var(--tracking-body);
    color: inherit;
    margin: 0 0 0.35rem;
}

.wce-considerations__summary {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--fw-body-regular);
    line-height: 1.55;
    letter-spacing: var(--tracking-body);
    color: inherit;
    opacity: 0.9;
}

.wce-considerations__summary p {
    margin: 0;
    padding: 0;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
    .wce-considerations__heading {
        font-size: var(--fs-h3-tablet);
    }
}

@media (max-width: 767px) {
    .wce-considerations {
        margin: 1.5rem 0;
        padding: 2.7rem 2.3rem;
    }

    .wce-considerations__heading {
        font-size: var(--fs-h3-mobile);
        margin-bottom: 2.3rem;
    }

    .wce-considerations__list {
        gap: 2.3rem;
    }

    .wce-considerations__item {
        gap: 0.7rem;
    }

    .wce-considerations__item::before {
        width: 18px;
        height: 18px;
    }

    .wce-considerations__title {
        font-size: 16px;
    }

    .wce-considerations__summary {
        font-size: 14px;
    }
}

/* =====================================================
   ACCESSIBILITY
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    .wce-considerations * {
        transition: none !important;
    }
}