/* ═══════════════════════════════════════════════════════════════
   AtlasConvert — Feature Grid block (front-end)
   Sharp financial-terminal aesthetic — no border-radius by default,
   uppercase CTA buttons, steel blue accents.

   STRUCTURE
   ─────────
   .ac-fg-wrap
     .ac-fg-section-header (optional)
     .ac-fg-grid (the actual grid container — gets layout class)
       .ac-fg-card (one per item)
         .ac-fg-card-image-wrap
         .ac-fg-card-body
           .ac-fg-card-badge
           .ac-fg-card-icon
           .ac-fg-card-title
           .ac-fg-card-description
           .ac-fg-card-rating
           .ac-fg-card-price
           .ac-fg-card-cta-wrap
═══════════════════════════════════════════════════════════════ */

.ac-fg-wrap {
    margin: 24px 0;
    color: #1f2024;
}

/* ─── SECTION HEADER (optional intro above the grid) ─── */
.ac-fg-section-header {
    text-align: center;
    margin-bottom: 28px;
}
.ac-fg-section-title {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 6px;
    line-height: 1.2;
    color: #1f2024;
}
.ac-fg-section-subtitle {
    font-size: 15px;
    color: #5e5e69;
    margin: 0;
    line-height: 1.5;
}

/* ─── GRID CONTAINER — base ─── */
.ac-fg-grid {
    display: grid;
    gap: 16px;     /* default — overridden by inline gap from attribute */
}

/* ─── LAYOUT MODES ─── */

/* 3-column grid: 3 cards per row */
.ac-fg-layout-3col {
    grid-template-columns: repeat(3, 1fr);
}

/* 2-column grid: 2 cards per row */
.ac-fg-layout-2col {
    grid-template-columns: repeat(2, 1fr);
}

/* 4-column grid: 4 cards per row, denser */
.ac-fg-layout-4col {
    grid-template-columns: repeat(4, 1fr);
}

/* 6-card grid: 3 across, 2 down (3×2 strict). Gets exactly 6 cards. */
.ac-fg-layout-6card {
    grid-template-columns: repeat(3, 1fr);
}

/* Alternating rows: each card spans full width, image flips L/R */
.ac-fg-layout-alternating {
    grid-template-columns: 1fr;
    gap: 24px;
}
.ac-fg-layout-alternating .ac-fg-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 32px;
}
.ac-fg-layout-alternating .ac-fg-card .ac-fg-card-image-wrap {
    aspect-ratio: 16 / 10;
    margin: 0;
}
/* Even cards (2nd, 4th, 6th...) — flip image to the right */
.ac-fg-layout-alternating .ac-fg-card:nth-child(even) .ac-fg-card-image-wrap {
    order: 2;
}

/* Asymmetric: first card spans 2 rows on the left, 2-3 smaller cards stack right */
.ac-fg-layout-asymmetric {
    grid-template-columns: 1.5fr 1fr;
    grid-auto-rows: minmax(160px, auto);
}
.ac-fg-layout-asymmetric .ac-fg-card:first-child {
    grid-row: span 2;
}

/* Single hero: one full-width card */
.ac-fg-layout-hero {
    grid-template-columns: 1fr;
}
.ac-fg-layout-hero .ac-fg-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 280px;
}
.ac-fg-layout-hero .ac-fg-card .ac-fg-card-image-wrap {
    aspect-ratio: auto;
    height: 100%;
    margin: 0;
}

/* ─── CARD — base ─── */
.ac-fg-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: none;
}
.ac-fg-card.ac-fg-card-no-borders {
    border: none !important;
    outline: none !important;
}
.ac-fg-card.ac-fg-card-with-shadow {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Image wrapper — controlled aspect ratio so cards align even if images vary */
.ac-fg-card-image-wrap {
    width: 100%;
    overflow: hidden;
    background: #f2f2f2;
    flex-shrink: 0;
}
.ac-fg-card-image-wrap.ac-fg-aspect-16-9  { aspect-ratio: 16 / 9; }
.ac-fg-card-image-wrap.ac-fg-aspect-4-3   { aspect-ratio: 4 / 3; }
.ac-fg-card-image-wrap.ac-fg-aspect-1-1   { aspect-ratio: 1 / 1; }
.ac-fg-card-image-wrap.ac-fg-aspect-3-2   { aspect-ratio: 3 / 2; }
.ac-fg-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Image position — left/right (rendered via grid-column when set) */
.ac-fg-card-img-left {
    flex-direction: row;
}
.ac-fg-card-img-left .ac-fg-card-image-wrap {
    width: 40%;
    aspect-ratio: auto;
    height: auto;
}
.ac-fg-card-img-left .ac-fg-card-body {
    flex: 1;
}

/* Card body — holds everything except the image */
.ac-fg-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}
.ac-fg-card.ac-fg-padding-compact .ac-fg-card-body  { padding: 14px; gap: 8px; }
.ac-fg-card.ac-fg-padding-spacious .ac-fg-card-body { padding: 28px; gap: 14px; }

/* Badge — small label (e.g. "NEW", "POPULAR") */
.ac-fg-card-badge {
    display: inline-block;
    background: #1a3a5c;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    align-self: flex-start;
    line-height: 1.3;
}

/* Icon — emoji or short string for visual interest */
.ac-fg-card-icon {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 4px;
    color: #1a3a5c;
}

/* Title */
.ac-fg-card-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    color: #1f2024;
}

/* Description */
.ac-fg-card-description {
    font-size: 14px;
    color: #5e5e69;
    line-height: 1.55;
    margin: 0;
    flex: 1;     /* push CTA to bottom */
}

/* Star rating */
.ac-fg-card-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #5e5e69;
    line-height: 1;
}
.ac-fg-card-rating-stars {
    display: inline-flex;
    gap: 1px;
    align-items: center;
}
.ac-fg-card-rating-star {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    color: #d1d5db;
}
.ac-fg-card-rating-star-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    color: #f59e0b;
}

/* Price tag */
.ac-fg-card-price {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin: 0;
    font-weight: 700;
}
.ac-fg-card-price-amount {
    font-size: 22px;
    color: #1f2024;
}
.ac-fg-card-price-period {
    font-size: 12px;
    color: #5e5e69;
    font-weight: 500;
}
.ac-fg-card-price-original {
    text-decoration: line-through;
    color: #9ca3af;
    font-size: 14px;
    margin-right: 4px;
}

/* CTA wrap — pushes to bottom of card */
.ac-fg-card-cta-wrap {
    margin-top: auto;
    padding-top: 4px;
}
.ac-fg-card-cta {
    display: inline-block;
    background: #1a3a5c;
    color: #ffffff !important;     /* override theme link colors */
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    border: 1px solid #1a3a5c;
    text-align: center;
    line-height: 1.4;
}
.ac-fg-card-cta:hover,
.ac-fg-card-cta:focus {
    background: #0f2744;
    color: #ffffff !important;
    text-decoration: none;
}
.ac-fg-card-cta.ac-fg-cta-full {
    display: block;
    width: 100%;
}
.ac-fg-card-cta.ac-fg-cta-outline {
    background: transparent;
    color: #1a3a5c !important;
}
.ac-fg-card-cta.ac-fg-cta-outline:hover {
    background: #1a3a5c;
    color: #ffffff !important;
}
.ac-fg-card-cta.ac-fg-cta-ghost {
    background: transparent;
    color: #1a3a5c !important;
    border: none;
    padding-left: 0;
}
.ac-fg-card-cta.ac-fg-cta-ghost:hover {
    color: #0f2744 !important;
}

/* No-link warning shown only in editor */
.ac-fg-card-cta-warning {
    display: inline-block;
    background: #fef2f2;
    color: #dc2626;
    border: 1px dashed #fecaca;
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ───────────────────────────────────────────────────────────
   DESIGN TEMPLATES — same naming as Review Box
─────────────────────────────────────────────────────────── */

/* ─── ATLASBASE — steel blue header bar with title, sharp edges ─── */
/* This is the actual AtlasBase aesthetic from the admin dashboard:
   #1a3a5c header bar containing the title in white, white card body,
   strong borders, no rounded corners. Each card looks like a small
   admin panel — appropriate for financial/professional content. */
.ac-fg-template-atlasbase .ac-fg-card {
    background: #ffffff;
    border: 1px solid #1a3a5c;
}
/* Title becomes the "header bar" in AtlasBase. As of v2.3.6 this no longer
   requires :first-child so toggling an icon or badge ABOVE the title
   doesn't strip the header styling. The colored bar stays put — icon/badge
   just sit above it. The bar pulls flush to the top edge only when title
   really is the first element of the body. */
.ac-fg-template-atlasbase .ac-fg-card-body > .ac-fg-card-title {
    background: var(--ac-fg-header-bar, #14304d);
    color: var(--ac-fg-header-text, #ffffff) !important;
    padding: 12px 16px;
    margin: 0 -20px 14px;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
}
.ac-fg-template-atlasbase .ac-fg-card-body > .ac-fg-card-title:first-child {
    margin-top: -20px;
}
/* Padding variants */
.ac-fg-template-atlasbase .ac-fg-card.ac-fg-padding-compact  .ac-fg-card-body > .ac-fg-card-title { margin: 0 -14px 10px; padding: 10px 14px; }
.ac-fg-template-atlasbase .ac-fg-card.ac-fg-padding-compact  .ac-fg-card-body > .ac-fg-card-title:first-child { margin-top: -14px; }
.ac-fg-template-atlasbase .ac-fg-card.ac-fg-padding-spacious .ac-fg-card-body > .ac-fg-card-title { margin: 0 -28px 16px; padding: 14px 28px; }
.ac-fg-template-atlasbase .ac-fg-card.ac-fg-padding-spacious .ac-fg-card-body > .ac-fg-card-title:first-child { margin-top: -28px; }

/* When the card has an image above the body, the title should NOT be the
   header bar (the image already sits on top). Normal title styling instead.
   v2.3.8: highlight-label no longer disables the header bar — the label is
   now a corner pin that doesn't disrupt layout. */
.ac-fg-template-atlasbase .ac-fg-card-image-wrap + .ac-fg-card-body > .ac-fg-card-title {
    background: transparent;
    color: #1f2024 !important;
    padding: 0;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 18px;
    font-weight: 700;
}

/* Image (if shown) sits between header and body — no margin gap */
.ac-fg-template-atlasbase .ac-fg-card-image-wrap {
    border-bottom: 1px solid #e5e7eb;
}

/* Icon, accents */
.ac-fg-template-atlasbase .ac-fg-card-icon { color: #1a3a5c; }
.ac-fg-template-atlasbase .ac-fg-card-badge { background: #1a3a5c; }
.ac-fg-template-atlasbase .ac-fg-card-cta {
    background: #1a3a5c;
    border-color: #1a3a5c;
}
.ac-fg-template-atlasbase .ac-fg-card-cta:hover { background: #0f2744; }
.ac-fg-template-atlasbase .ac-fg-card-cta.ac-fg-cta-outline {
    color: #1a3a5c !important;
}
.ac-fg-template-atlasbase .ac-fg-card-cta.ac-fg-cta-outline:hover {
    background: #1a3a5c;
    color: #ffffff !important;
}

/* ─── MIDNIGHT — dark heading + blue button, premium pro look ─── */
/* Charcoal header bar (#1f2024) with white title, white card body,
   blue accent button. Cleaner / more "tech publication" feel than
   AtlasBase. Use for editorial or product showcase content. */
.ac-fg-template-midnight .ac-fg-card {
    background: #ffffff;
    border: 1px solid #1f2024;
}
/* Title-as-header-bar — same robustness as AtlasBase (v2.3.6): no longer
   requires :first-child so icon/badge above the title doesn't strip styling. */
.ac-fg-template-midnight .ac-fg-card-body > .ac-fg-card-title {
    background: var(--ac-fg-header-bar, #1f2024);
    color: var(--ac-fg-header-text, #ffffff) !important;
    padding: 12px 16px;
    margin: 0 -20px 14px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}
.ac-fg-template-midnight .ac-fg-card-body > .ac-fg-card-title:first-child {
    margin-top: -20px;
}
.ac-fg-template-midnight .ac-fg-card.ac-fg-padding-compact  .ac-fg-card-body > .ac-fg-card-title { margin: 0 -14px 10px; padding: 10px 14px; }
.ac-fg-template-midnight .ac-fg-card.ac-fg-padding-compact  .ac-fg-card-body > .ac-fg-card-title:first-child { margin-top: -14px; }
.ac-fg-template-midnight .ac-fg-card.ac-fg-padding-spacious .ac-fg-card-body > .ac-fg-card-title { margin: 0 -28px 16px; padding: 14px 28px; }
.ac-fg-template-midnight .ac-fg-card.ac-fg-padding-spacious .ac-fg-card-body > .ac-fg-card-title:first-child { margin-top: -28px; }

/* Reset header-bar styling when image is above body. v2.3.8: highlight-label
   no longer resets it — it's a corner pin now. */
.ac-fg-template-midnight .ac-fg-card-image-wrap + .ac-fg-card-body > .ac-fg-card-title {
    background: transparent;
    color: #1f2024 !important;
    padding: 0;
    margin: 0;
    font-size: 18px;
}

/* Image (if shown) sits between header and body */
.ac-fg-template-midnight .ac-fg-card-image-wrap {
    border-bottom: 1px solid #e5e7eb;
}

/* Icon — use blue accent so it pops against the dark header */
.ac-fg-template-midnight .ac-fg-card-icon { color: #2563eb; }
.ac-fg-template-midnight .ac-fg-card-badge {
    background: #2563eb;
    color: #ffffff !important;
}
.ac-fg-template-midnight .ac-fg-card-cta {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff !important;
}
.ac-fg-template-midnight .ac-fg-card-cta:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}
.ac-fg-template-midnight .ac-fg-card-cta.ac-fg-cta-outline {
    background: transparent;
    color: #2563eb !important;
    border-color: #2563eb;
}
.ac-fg-template-midnight .ac-fg-card-cta.ac-fg-cta-outline:hover {
    background: #2563eb;
    color: #ffffff !important;
}
.ac-fg-template-midnight .ac-fg-card-cta.ac-fg-cta-ghost {
    color: #2563eb !important;
}

/* ─── GLASS — soft blue gradients, subtle rounded corners ─── */
.ac-fg-template-glass .ac-fg-card {
    background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
    border: 1px solid #bfdbfe;
    border-radius: 12px;
}
.ac-fg-template-glass .ac-fg-card-image-wrap {
    border-radius: 12px 12px 0 0;
}
.ac-fg-template-glass .ac-fg-card-icon { color: #2563eb; }
.ac-fg-template-glass .ac-fg-card-title { color: #1e3a8a; }
.ac-fg-template-glass .ac-fg-card-cta {
    background: #2563eb;
    border-color: #2563eb;
    border-radius: 8px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}
.ac-fg-template-glass .ac-fg-card-cta:hover { background: #1d4ed8; }
.ac-fg-template-glass .ac-fg-card-badge {
    background: #2563eb;
    border-radius: 999px;
}

/* ─── SLEEK — dark mode card, gold accents ─── */
/* All text colors use !important to defeat theme overrides */
.ac-fg-template-sleek .ac-fg-card {
    background: #1f2024 !important;
    border: 1px solid #374151 !important;
    color: #f3f4f6 !important;
}
.ac-fg-template-sleek .ac-fg-card-image-wrap {
    background: #0f1014;
}
.ac-fg-template-sleek .ac-fg-card-title,
.ac-fg-template-sleek h3.ac-fg-card-title {
    color: #ffffff !important;
}
.ac-fg-template-sleek .ac-fg-card-description,
.ac-fg-template-sleek p.ac-fg-card-description {
    color: #9ca3af !important;
}
.ac-fg-template-sleek .ac-fg-card-icon {
    color: #eab308 !important;
}
.ac-fg-template-sleek .ac-fg-card-badge {
    background: #eab308 !important;
    color: #1f2024 !important;
}
.ac-fg-template-sleek .ac-fg-card-rating {
    color: #9ca3af !important;
}
.ac-fg-template-sleek .ac-fg-card-price-amount {
    color: #eab308 !important;
}
.ac-fg-template-sleek .ac-fg-card-price-period,
.ac-fg-template-sleek .ac-fg-card-price-original {
    color: #6b7280 !important;
}
.ac-fg-template-sleek .ac-fg-card-cta,
.ac-fg-template-sleek a.ac-fg-card-cta {
    background: #eab308 !important;
    color: #1f2024 !important;
    border-color: #eab308 !important;
    font-weight: 800 !important;
}
.ac-fg-template-sleek .ac-fg-card-cta:hover,
.ac-fg-template-sleek a.ac-fg-card-cta:hover {
    background: #ca8a04 !important;
    color: #1f2024 !important;
}
.ac-fg-template-sleek .ac-fg-card-cta.ac-fg-cta-outline,
.ac-fg-template-sleek a.ac-fg-card-cta.ac-fg-cta-outline {
    background: transparent !important;
    color: #eab308 !important;
}
.ac-fg-template-sleek .ac-fg-card-cta.ac-fg-cta-outline:hover {
    background: #eab308 !important;
    color: #1f2024 !important;
}

/* ───────────────────────────────────────────────────────────
   MOBILE
─────────────────────────────────────────────────────────── */

/* Below 900px: 4-col → 2-col */
@media (max-width: 900px) {
    .ac-fg-layout-4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Below 700px: most multi-col → single column */
@media (max-width: 700px) {
    .ac-fg-layout-3col,
    .ac-fg-layout-2col,
    .ac-fg-layout-4col,
    .ac-fg-layout-6card {
        grid-template-columns: 1fr;
    }
    .ac-fg-layout-alternating .ac-fg-card,
    .ac-fg-layout-hero .ac-fg-card {
        grid-template-columns: 1fr;
    }
    .ac-fg-layout-alternating .ac-fg-card:nth-child(even) .ac-fg-card-image-wrap {
        order: 0;     /* don't flip on mobile — always image-on-top */
    }
    .ac-fg-layout-asymmetric {
        grid-template-columns: 1fr;
    }
    .ac-fg-layout-asymmetric .ac-fg-card:first-child {
        grid-row: auto;
    }
    .ac-fg-section-title { font-size: 22px; }
    .ac-fg-section-subtitle { font-size: 14px; }
    .ac-fg-card-cta { display: block; width: 100%; }
}

/* ─── Print ─── */
@media print {
    .ac-fg-card {
        background: transparent !important;
        border: 1px solid #999 !important;
        page-break-inside: avoid;
    }
    .ac-fg-card-cta-wrap { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   HIGHLIGHT STYLES (per-card)
   Apply to .ac-fg-card.ac-fg-highlight-{style}
   These visually call out tier-based selections (Basic/Standard/Premium)
   and editorial picks (FEATURED, POPULAR, RECOMMENDED, etc.)
═══════════════════════════════════════════════════════════════ */

/* v2.3.9: Featured banner sits ABOVE the card top edge, completely outside
   the card box. Never disrupts any element inside the card. The grid has
   padding-top + .ac-fg-card has overflow:visible so the banner can stick out
   without getting clipped. */
.ac-fg-grid {
    padding-top: 14px;
}
.ac-fg-card {
    overflow: visible !important;   /* let the banner escape the box */
}
.ac-fg-card-highlight-label {
    position: absolute;
    bottom: calc(100% - 1px);          /* sits flush above the card top */
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
    line-height: 1.3;
    z-index: 6;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
}

/* v2.3.10: Highlight presets now set a `--ac-fg-feat-color` CSS variable.
   A high-specificity rule reads the variable for the border, and the label
   reads it for its background. This means:
     1. Each preset gets its own color (green, orange, etc.)
     2. The border ALWAYS matches the label color (no more drift from
        block-wide borderColor overrides)
     3. Per-card inline `style="--ac-fg-feat-color: X"` automatically
        overrides everything because inline > class for variables. */

.ac-fg-card.ac-fg-highlight-featured     { --ac-fg-feat-color: #16a34a; }
.ac-fg-card.ac-fg-highlight-popular      { --ac-fg-feat-color: #ea580c; }
.ac-fg-card.ac-fg-highlight-recommended  { --ac-fg-feat-color: #1a3a5c; }
.ac-fg-card.ac-fg-highlight-best-value   { --ac-fg-feat-color: #eab308; }
.ac-fg-card.ac-fg-highlight-premium      { --ac-fg-feat-color: #7c3aed; }
.ac-fg-card.ac-fg-highlight-bestseller   { --ac-fg-feat-color: #dc2626; }

/* High-specificity border rule — wraps the wrap selector so it beats the
   block-wide `--ac-fg-border` override that lives further down the file. */
.ac-fg-wrap .ac-fg-card.ac-fg-highlight-featured,
.ac-fg-wrap .ac-fg-card.ac-fg-highlight-popular,
.ac-fg-wrap .ac-fg-card.ac-fg-highlight-recommended,
.ac-fg-wrap .ac-fg-card.ac-fg-highlight-best-value,
.ac-fg-wrap .ac-fg-card.ac-fg-highlight-bestseller {
    border: 3px solid var(--ac-fg-feat-color, #1a3a5c) !important;
}

/* Popular keeps its slight scale-up (most-popular pricing tier convention) */
.ac-fg-wrap .ac-fg-card.ac-fg-highlight-popular {
    transform: scale(1.04);
    z-index: 1;
}

/* Premium has a gradient border, not a solid color, so handle it separately */
.ac-fg-wrap .ac-fg-card.ac-fg-highlight-premium {
    border: 3px solid transparent !important;
    background-image: linear-gradient(white, white), linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.15);
}
/* If the user picks a custom color for Premium, fall back to a solid border */
.ac-fg-wrap .ac-fg-card.ac-fg-highlight-premium[style*="--ac-fg-feat-color"] {
    border: 3px solid var(--ac-fg-feat-color) !important;
    background-image: none;
    background-clip: border-box;
}

/* Best Value uses dark text on its gold label (gold is too light for white text) */
.ac-fg-card.ac-fg-highlight-best-value > .ac-fg-card-highlight-label {
    color: #1f2024;
}
/* Premium label keeps its gradient when no custom color is set */
.ac-fg-card.ac-fg-highlight-premium > .ac-fg-card-highlight-label {
    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
}
/* If user picks a custom color for Premium, override the gradient with solid */
.ac-fg-card.ac-fg-highlight-premium[style*="--ac-fg-feat-color"] > .ac-fg-card-highlight-label {
    background: var(--ac-fg-feat-color);
}

/* ───────────────────────────────────────────────────────────
   IMAGE POSITION (per-card)
─────────────────────────────────────────────────────────── */

/* image-position: left — image on left side, body on right */
.ac-fg-card.ac-fg-imgpos-left {
    flex-direction: row;
}
.ac-fg-card.ac-fg-imgpos-left > .ac-fg-card-image-wrap {
    width: 40%;
    aspect-ratio: auto;
    height: auto;
    flex-shrink: 0;
}
.ac-fg-card.ac-fg-imgpos-left > .ac-fg-card-body {
    flex: 1;
}

/* image-position: right — image on right, body on left */
.ac-fg-card.ac-fg-imgpos-right {
    flex-direction: row-reverse;
}
.ac-fg-card.ac-fg-imgpos-right > .ac-fg-card-image-wrap {
    width: 40%;
    aspect-ratio: auto;
    height: auto;
    flex-shrink: 0;
}
.ac-fg-card.ac-fg-imgpos-right > .ac-fg-card-body {
    flex: 1;
}

/* image-position: behind — image as background, content overlaid */
.ac-fg-card.ac-fg-imgpos-behind {
    position: relative;
    min-height: 280px;
    color: #ffffff !important;
}
.ac-fg-card.ac-fg-imgpos-behind > .ac-fg-card-image-wrap {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}
.ac-fg-card.ac-fg-imgpos-behind > .ac-fg-card-image-wrap::after {
    /* Dark gradient overlay for text legibility */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.75) 100%);
}
.ac-fg-card.ac-fg-imgpos-behind > .ac-fg-card-image-wrap img {
    height: 100%;
    object-fit: cover;
}
.ac-fg-card.ac-fg-imgpos-behind > .ac-fg-card-body {
    position: relative;
    z-index: 1;
    background: transparent;
    margin-top: auto;
    color: #ffffff !important;
}
.ac-fg-card.ac-fg-imgpos-behind .ac-fg-card-title,
.ac-fg-card.ac-fg-imgpos-behind .ac-fg-card-description {
    color: #ffffff !important;
}

/* image-position: none — no image even if imageUrl is set
   (also applies when showImage is false — same effective state) */
.ac-fg-card.ac-fg-imgpos-none > .ac-fg-card-image-wrap {
    display: none;
}

/* Mobile: revert horizontal image positions to top on small screens */
@media (max-width: 700px) {
    .ac-fg-card.ac-fg-imgpos-left,
    .ac-fg-card.ac-fg-imgpos-right {
        flex-direction: column;
    }
    .ac-fg-card.ac-fg-imgpos-left > .ac-fg-card-image-wrap,
    .ac-fg-card.ac-fg-imgpos-right > .ac-fg-card-image-wrap {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
    .ac-fg-highlight-popular {
        transform: none;     /* don't scale on mobile, looks cramped */
    }
}

/* ═══════════════════════════════════════════════════════════════
   NEW v2.3.0 elements: subtitle, features list, secondary CTA
═══════════════════════════════════════════════════════════════ */

/* Subtitle — sits under title, slightly smaller and muted */
.ac-fg-card-subtitle {
    font-size: 13px;
    color: #5e5e69;
    line-height: 1.4;
    margin: -4px 0 4px;
    font-weight: 500;
}

/* Features list — checkmark bullets */
.ac-fg-card-features {
    list-style: none;
    margin: 4px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ac-fg-card-feature {
    font-size: 13px;
    color: #1f2024;
    line-height: 1.5;
    padding-left: 22px;
    position: relative;
}
.ac-fg-card-feature::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #16a34a;
    font-weight: 800;
    font-size: 14px;
    line-height: 1.5;
}

/* Secondary CTA wrap — slimmer, subtle separator from primary */
.ac-fg-card-cta-wrap-secondary {
    margin-top: 6px;
    padding-top: 0;
}

/* Sleek template — feature list and subtitle colors */
.ac-fg-template-sleek .ac-fg-card-subtitle {
    color: #9ca3af !important;
}
.ac-fg-template-sleek .ac-fg-card-feature {
    color: #d1d5db !important;
}
.ac-fg-template-sleek .ac-fg-card-feature::before {
    color: #22c55e !important;
}

/* Glass template — feature list and subtitle colors */
.ac-fg-template-glass .ac-fg-card-subtitle {
    color: #475569;
}

/* Midnight template — subtitle */
.ac-fg-template-midnight .ac-fg-card-subtitle {
    color: #5e5e69;
}

/* ═══════════════════════════════════════════════════════════════
   BLOCK-WIDE CUSTOMIZATION (v2.3.2)
   Colors set in the inspector flow to all cards via CSS variables
   set on .ac-fg-wrap. Font presets are classes on the wrap that
   cascade down to the children.
═══════════════════════════════════════════════════════════════ */

/* Font size presets — applied to .ac-fg-wrap.ac-fg-font-size-{preset} */
.ac-fg-wrap.ac-fg-font-size-compact .ac-fg-card-title       { font-size: 16px; }
.ac-fg-wrap.ac-fg-font-size-compact .ac-fg-card-subtitle    { font-size: 12px; }
.ac-fg-wrap.ac-fg-font-size-compact .ac-fg-card-description { font-size: 12px; }
.ac-fg-wrap.ac-fg-font-size-compact .ac-fg-card-feature     { font-size: 12px; }

.ac-fg-wrap.ac-fg-font-size-large .ac-fg-card-title         { font-size: 22px; }
.ac-fg-wrap.ac-fg-font-size-large .ac-fg-card-subtitle      { font-size: 15px; }
.ac-fg-wrap.ac-fg-font-size-large .ac-fg-card-description   { font-size: 15px; }
.ac-fg-wrap.ac-fg-font-size-large .ac-fg-card-feature       { font-size: 14px; }

.ac-fg-wrap.ac-fg-font-size-extra-large .ac-fg-card-title       { font-size: 28px; }
.ac-fg-wrap.ac-fg-font-size-extra-large .ac-fg-card-subtitle    { font-size: 17px; }
.ac-fg-wrap.ac-fg-font-size-extra-large .ac-fg-card-description { font-size: 17px; }
.ac-fg-wrap.ac-fg-font-size-extra-large .ac-fg-card-feature     { font-size: 15px; }

/* Font weight presets — applied to title + description */
.ac-fg-wrap.ac-fg-font-weight-normal .ac-fg-card-title { font-weight: 500; }
.ac-fg-wrap.ac-fg-font-weight-bold   .ac-fg-card-title { font-weight: 800; }
.ac-fg-wrap.ac-fg-font-weight-black  .ac-fg-card-title { font-weight: 900; }
.ac-fg-wrap.ac-fg-font-weight-normal .ac-fg-card-description { font-weight: 400; }
.ac-fg-wrap.ac-fg-font-weight-bold   .ac-fg-card-description { font-weight: 600; }
.ac-fg-wrap.ac-fg-font-weight-black  .ac-fg-card-description { font-weight: 700; }

/* ─── BLOCK-WIDE COLOR OVERRIDES ───
   When CSS variables are set on .ac-fg-wrap (via inline style from the
   inspector color pickers), they cascade to every card. !important is
   used so they win against template-specific selectors. */
.ac-fg-wrap[style*="--ac-fg-card-bg"] .ac-fg-card {
    background-color: var(--ac-fg-card-bg) !important;
}
.ac-fg-wrap[style*="--ac-fg-text"] .ac-fg-card,
.ac-fg-wrap[style*="--ac-fg-text"] .ac-fg-card-description,
.ac-fg-wrap[style*="--ac-fg-text"] .ac-fg-card-subtitle,
.ac-fg-wrap[style*="--ac-fg-text"] .ac-fg-card-feature {
    color: var(--ac-fg-text) !important;
}
/* v2.3.11: Block-wide border applies to NON-highlighted cards only.
   Highlighted cards (Featured / Popular / etc.) keep their accent border
   from the highlight preset rules above. This fixes the bug where the
   block-wide steel-blue border was overriding the green Featured border. */
.ac-fg-wrap[style*="--ac-fg-border"] .ac-fg-card:not([class*="ac-fg-highlight-"]) {
    border-color: var(--ac-fg-border) !important;
}

/* Accent color flows to icon, primary CTA, badge */
.ac-fg-wrap[style*="--ac-fg-accent"] .ac-fg-card-icon {
    color: var(--ac-fg-accent) !important;
}
.ac-fg-wrap[style*="--ac-fg-accent"] .ac-fg-card-cta {
    background-color: var(--ac-fg-accent) !important;
    border-color: var(--ac-fg-accent) !important;
}
.ac-fg-wrap[style*="--ac-fg-accent"] .ac-fg-card-cta.ac-fg-cta-outline,
.ac-fg-wrap[style*="--ac-fg-accent"] .ac-fg-card-cta.ac-fg-cta-ghost {
    background-color: transparent !important;
    color: var(--ac-fg-accent) !important;
}
.ac-fg-wrap[style*="--ac-fg-accent"] .ac-fg-card-cta.ac-fg-cta-outline:hover {
    background-color: var(--ac-fg-accent) !important;
    color: #ffffff !important;
}
.ac-fg-wrap[style*="--ac-fg-accent"] .ac-fg-card-badge {
    background-color: var(--ac-fg-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════
   v2.3.6 — LIST BULLET STYLE VARIANTS
   Class is applied on the <ul>: ac-fg-list-icon-check (default, green ✓)
   or ac-fg-list-icon-x (red ✕). Overrides the .ac-fg-card-feature::before
   defined earlier in this file.
═══════════════════════════════════════════════════════════════ */
.ac-fg-card-features.ac-fg-list-icon-check .ac-fg-card-feature::before {
    content: '✓';
    color: #16a34a;
}
.ac-fg-card-features.ac-fg-list-icon-x .ac-fg-card-feature::before {
    content: '✕';
    color: #dc2626;
}

/* v2.3.10: Single label background rule — pulls from --ac-fg-feat-color
   which is set either by a preset class (above) or by inline per-card style.
   Inline beats class for variable resolution, so the picker just works. */
.ac-fg-card-highlight-label {
    background: var(--ac-fg-feat-color, #1a3a5c);
}

/* ═══════════════════════════════════════════════════════════════
   v2.3.17 — Font size presets with !important so they always
   beat template-specific rules (e.g. atlasbase header-bar styles
   at lines ~354 and ~378 with higher specificity).
═══════════════════════════════════════════════════════════════ */
.ac-fg-wrap.ac-fg-font-size-compact .ac-fg-card-title,
.ac-fg-wrap.ac-fg-font-size-compact .ac-fg-card-body > .ac-fg-card-title,
.ac-fg-wrap.ac-fg-font-size-compact .ac-fg-card-image-wrap + .ac-fg-card-body > .ac-fg-card-title{
    font-size: 16px !important;
}
.ac-fg-wrap.ac-fg-font-size-compact .ac-fg-card-subtitle    { font-size: 12px !important; }
.ac-fg-wrap.ac-fg-font-size-compact .ac-fg-card-description { font-size: 12px !important; }
.ac-fg-wrap.ac-fg-font-size-compact .ac-fg-card-feature     { font-size: 12px !important; }

.ac-fg-wrap.ac-fg-font-size-large .ac-fg-card-title,
.ac-fg-wrap.ac-fg-font-size-large .ac-fg-card-body > .ac-fg-card-title,
.ac-fg-wrap.ac-fg-font-size-large .ac-fg-card-image-wrap + .ac-fg-card-body > .ac-fg-card-title{
    font-size: 22px !important;
}
.ac-fg-wrap.ac-fg-font-size-large .ac-fg-card-subtitle      { font-size: 15px !important; }
.ac-fg-wrap.ac-fg-font-size-large .ac-fg-card-description   { font-size: 15px !important; }
.ac-fg-wrap.ac-fg-font-size-large .ac-fg-card-feature       { font-size: 14px !important; }

.ac-fg-wrap.ac-fg-font-size-extra-large .ac-fg-card-title,
.ac-fg-wrap.ac-fg-font-size-extra-large .ac-fg-card-body > .ac-fg-card-title,
.ac-fg-wrap.ac-fg-font-size-extra-large .ac-fg-card-image-wrap + .ac-fg-card-body > .ac-fg-card-title{
    font-size: 28px !important;
}
.ac-fg-wrap.ac-fg-font-size-extra-large .ac-fg-card-subtitle    { font-size: 17px !important; }
.ac-fg-wrap.ac-fg-font-size-extra-large .ac-fg-card-description { font-size: 17px !important; }
.ac-fg-wrap.ac-fg-font-size-extra-large .ac-fg-card-feature     { font-size: 15px !important; }

/* ═══════════════════════════════════════════════════════════════
   v2.3.17 — Text alignment presets (left/center/right)
   Applies to card body content: subtitle, description, features.
   Title alignment also follows for consistency.
   Buttons/badges/images keep their own positioning.
═══════════════════════════════════════════════════════════════ */
.ac-fg-wrap.ac-fg-text-align-center .ac-fg-card-body,
.ac-fg-wrap.ac-fg-text-align-center .ac-fg-card-title,
.ac-fg-wrap.ac-fg-text-align-center .ac-fg-card-subtitle,
.ac-fg-wrap.ac-fg-text-align-center .ac-fg-card-description,
.ac-fg-wrap.ac-fg-text-align-center .ac-fg-card-features,
.ac-fg-wrap.ac-fg-text-align-center .ac-fg-card-feature{
    text-align: center !important;
}
.ac-fg-wrap.ac-fg-text-align-center .ac-fg-card-cta,
.ac-fg-wrap.ac-fg-text-align-center .ac-fg-card-cta-wrap{
    justify-content: center !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.ac-fg-wrap.ac-fg-text-align-center .ac-fg-card-badge,
.ac-fg-wrap.ac-fg-text-align-center .ac-fg-card-icon{
    margin-left: auto !important;
    margin-right: auto !important;
}

.ac-fg-wrap.ac-fg-text-align-right .ac-fg-card-body,
.ac-fg-wrap.ac-fg-text-align-right .ac-fg-card-title,
.ac-fg-wrap.ac-fg-text-align-right .ac-fg-card-subtitle,
.ac-fg-wrap.ac-fg-text-align-right .ac-fg-card-description,
.ac-fg-wrap.ac-fg-text-align-right .ac-fg-card-features,
.ac-fg-wrap.ac-fg-text-align-right .ac-fg-card-feature{
    text-align: right !important;
}
.ac-fg-wrap.ac-fg-text-align-right .ac-fg-card-cta,
.ac-fg-wrap.ac-fg-text-align-right .ac-fg-card-cta-wrap{
    justify-content: flex-end !important;
    align-self: flex-end !important;
    margin-left: auto !important;
}
.ac-fg-wrap.ac-fg-text-align-right .ac-fg-card-badge,
.ac-fg-wrap.ac-fg-text-align-right .ac-fg-card-icon{
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   v2.3.18 — CTA button alignment (independent from text alignment)
   Higher specificity than ac-fg-text-align-* rules so CTA can be
   aligned differently than the body text.
═══════════════════════════════════════════════════════════════ */
.ac-fg-wrap.ac-fg-cta-align-left .ac-fg-card-cta,
.ac-fg-wrap.ac-fg-cta-align-left .ac-fg-card-cta-wrap,
.ac-fg-wrap.ac-fg-cta-align-left .ac-fg-card-cta-row{
    justify-content: flex-start !important;
    align-self: flex-start !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.ac-fg-wrap.ac-fg-cta-align-center .ac-fg-card-cta,
.ac-fg-wrap.ac-fg-cta-align-center .ac-fg-card-cta-wrap,
.ac-fg-wrap.ac-fg-cta-align-center .ac-fg-card-cta-row{
    justify-content: center !important;
    align-self: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.ac-fg-wrap.ac-fg-cta-align-right .ac-fg-card-cta,
.ac-fg-wrap.ac-fg-cta-align-right .ac-fg-card-cta-wrap,
.ac-fg-wrap.ac-fg-cta-align-right .ac-fg-card-cta-row{
    justify-content: flex-end !important;
    align-self: flex-end !important;
    text-align: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Stretch: button spans card width */
.ac-fg-wrap.ac-fg-cta-align-stretch .ac-fg-card-cta{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
}
.ac-fg-wrap.ac-fg-cta-align-stretch .ac-fg-card-cta-wrap,
.ac-fg-wrap.ac-fg-cta-align-stretch .ac-fg-card-cta-row{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ═══════════════════════════════════════════════════════════════
   v2.3.21 — Defensive CTA color hardening for themes that scope
   anchor color rules under .entry-content or .wp-block-post-content
   (e.g. AtlasTheme) and force a !important color that bleeds onto
   block CTAs, making white text invisible against the blue button.
   These selectors raise specificity so the block's own colors win.
═══════════════════════════════════════════════════════════════ */

/* Solid CTA — explicit white text, scope-resistant */
.wp-block-post-content .ac-fg-wrap a.ac-fg-card-cta,
.wp-block-post-content .ac-fg-wrap a.ac-fg-card-cta:link,
.wp-block-post-content .ac-fg-wrap a.ac-fg-card-cta:visited,
.entry-content .ac-fg-wrap a.ac-fg-card-cta,
.entry-content .ac-fg-wrap a.ac-fg-card-cta:link,
.entry-content .ac-fg-wrap a.ac-fg-card-cta:visited,
.ac-fg-wrap a.ac-fg-card-cta,
.ac-fg-wrap a.ac-fg-card-cta:link,
.ac-fg-wrap a.ac-fg-card-cta:visited{
    color: #ffffff !important;
    background-color: #1a3a5c !important;
    text-decoration: none !important;
}

/* Hover — keep white text on darker blue */
.wp-block-post-content .ac-fg-wrap a.ac-fg-card-cta:hover,
.entry-content .ac-fg-wrap a.ac-fg-card-cta:hover,
.ac-fg-wrap a.ac-fg-card-cta:hover,
.wp-block-post-content .ac-fg-wrap a.ac-fg-card-cta:focus,
.entry-content .ac-fg-wrap a.ac-fg-card-cta:focus,
.ac-fg-wrap a.ac-fg-card-cta:focus{
    color: #ffffff !important;
    background-color: #0f2744 !important;
    text-decoration: none !important;
}

/* When the block has a custom accent color set inline, use it
   for background but keep text white. (style.css line 916 set
   only background-color from the var, not the text color.) */
.wp-block-post-content .ac-fg-wrap[style*="--ac-fg-accent"] a.ac-fg-card-cta,
.entry-content .ac-fg-wrap[style*="--ac-fg-accent"] a.ac-fg-card-cta,
.ac-fg-wrap[style*="--ac-fg-accent"] a.ac-fg-card-cta{
    color: #ffffff !important;
    background-color: var(--ac-fg-accent) !important;
    border-color: var(--ac-fg-accent) !important;
}

/* Outline & ghost variants — keep accent text color visible */
.wp-block-post-content .ac-fg-wrap a.ac-fg-card-cta.ac-fg-cta-outline,
.entry-content .ac-fg-wrap a.ac-fg-card-cta.ac-fg-cta-outline,
.ac-fg-wrap a.ac-fg-card-cta.ac-fg-cta-outline,
.wp-block-post-content .ac-fg-wrap a.ac-fg-card-cta.ac-fg-cta-ghost,
.entry-content .ac-fg-wrap a.ac-fg-card-cta.ac-fg-cta-ghost,
.ac-fg-wrap a.ac-fg-card-cta.ac-fg-cta-ghost{
    color: #1a3a5c !important;
    background-color: transparent !important;
}
.ac-fg-wrap[style*="--ac-fg-accent"] a.ac-fg-card-cta.ac-fg-cta-outline,
.ac-fg-wrap[style*="--ac-fg-accent"] a.ac-fg-card-cta.ac-fg-cta-ghost{
    color: var(--ac-fg-accent) !important;
    background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   v2.4.14 — Symmetric card title heights
   When titles in a row wrap to a different number of lines, the
   dark header band is taller on some cards than others — visually
   asymmetric. Force a min-height that fits a 2-line title, and
   center the text vertically so 1-line titles sit centered.
   Em-based units adapt to font-size presets (small/default/large).
   Applies to templates with a visible header band (atlasbase + midnight).
═══════════════════════════════════════════════════════════════ */
.ac-fg-template-atlasbase .ac-fg-card-body > .ac-fg-card-title,
.ac-fg-template-midnight .ac-fg-card-body > .ac-fg-card-title {
    /* 2 lines at line-height 1.3 + top/bottom padding (in em) */
    min-height: calc(2.6em + 24px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    /* preserve word-wrap inside the flex item */
    flex-wrap: wrap;
}

/* Compact padding variant — smaller top/bottom padding */
.ac-fg-template-atlasbase .ac-fg-card.ac-fg-padding-compact .ac-fg-card-body > .ac-fg-card-title,
.ac-fg-template-midnight .ac-fg-card.ac-fg-padding-compact .ac-fg-card-body > .ac-fg-card-title {
    min-height: calc(2.6em + 20px);
}

/* Spacious padding variant — bigger top/bottom padding */
.ac-fg-template-atlasbase .ac-fg-card.ac-fg-padding-spacious .ac-fg-card-body > .ac-fg-card-title,
.ac-fg-template-midnight .ac-fg-card.ac-fg-padding-spacious .ac-fg-card-body > .ac-fg-card-title {
    min-height: calc(2.6em + 28px);
}