/* =============================================================================
   Foxco Feature Checklist
   -----------------------------------------------------------------------------
   Designed to pair directly below Social Media Product -- Font Pairing
   and Color Combo controls output the exact same values as that widget
   (see the duplication note in class-fcl-widget.php), so choosing the
   same combo on both automatically matches. Independent CSS custom
   property namespace (--fcl-* rather than --smp-*) since this is a
   genuinely separate widget/module, just deliberately styled to read
   as a continuation of the same section.
============================================================================= */

.foxco-fcl {
    background: var(--fcl-bg, #14141f);
    border-radius: 16px;
    padding: 48px 40px;
    font-family: var(--fcl-body-font, 'Inter'), -apple-system, BlinkMacSystemFont, sans-serif;
    max-width: 900px;
    margin: 0 auto;
}

.foxco-fcl__heading {
    font-family: var(--fcl-heading-font, 'Sora'), 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(24px, 3.5vw, 34px);
    color: var(--fcl-text, #f5f4f2);
    text-align: center;
    margin: 0 0 10px;
    line-height: 1.15;
}

.foxco-fcl__subheading {
    text-align: center;
    color: var(--fcl-text-muted, #8f8ea3);
    font-size: 15px;
    margin: 0 0 32px;
}
.foxco-fcl__heading:last-child { margin-bottom: 0; }

.foxco-fcl__list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px 32px;
}
.foxco-fcl--cols-2 .foxco-fcl__list { grid-template-columns: 1fr 1fr; }
.foxco-fcl--cols-3 .foxco-fcl__list { grid-template-columns: 1fr 1fr 1fr; }

.foxco-fcl__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--fcl-text, #f5f4f2);
    font-size: 15px;
    line-height: 1.4;
}

.foxco-fcl__check {
    flex-shrink: 0;
    color: var(--fcl-accent, #df6737);
    font-weight: 900;
    line-height: 1.4;
}

.foxco-fcl__cta {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 14px 32px;
    background: var(--fcl-cta-bg, #df6737);
    color: var(--fcl-cta-text, #14141f);
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    font-size: 14.5px;
    text-align: center;
}

@media (max-width: 720px) {
    .foxco-fcl {
        padding: 36px 24px;
    }
    .foxco-fcl--cols-2 .foxco-fcl__list,
    .foxco-fcl--cols-3 .foxco-fcl__list {
        /* Belt-and-suspenders !important, same lesson already learned
           on Social Media Product's own mockup width control -- a
           column count chosen for desktop should never be able to
           persist onto mobile regardless of what set it. */
        grid-template-columns: 1fr !important;
    }
}