/*
==========================================================
FLEXIBLE CONTENT SECTION — flexible_content.css
==========================================================
WHAT IT IS:
A flexible, multi-layout content section block for
homepages and internal pages.

WHAT IT DOES:
Renders a full content section with optional eyebrow,
heading, body copy, media (image or video), repeater
items (stats, cards, linked cards), CTA buttons, and
background style. Supports 5 layout modes: centered,
split, cards-grid, stats-row, and split-items (text beside
items, Batch 8H).

HOW TO USE:
1. Add the Flexible Content Section block to any page
2. Pick a Layout (big buttons above the tabs)
3. Editor tabs: Heading & text (heading required, alignment),
   Photo or video, Items (each item has small tabs: Kind /
   Words / Image / Link), Item style (items per row, Cards /
   Plain, card color), Side by side (side, widths, which side
   shows first when stacked), Buttons, Background

Batch 8H options live in the "Batch 8H — layout options"
section at the end of this file. Their defaults add no class,
so existing blocks look exactly as before.

All values use boilerplate CSS tokens from style.css.
==========================================================
*/


/* ── Base Block ─────────────────────────────────────────────── */

.flexible_content_section {
    padding: var(--space-20) 0;
    background-color: var(--color-bg);
}

.fcs_content {
    width: 100%;
}

/* Eyebrow — structural base in style.css §10c.
   Light background context: accent color, no opacity.
   BOILERPLATE NOTE: Full rule kept here so this block is self-contained
   when copied to a new project. On a live project, keep only the context-
   specific override (color) and rely on §10c for shared structure.
   Note: font-accent added explicitly here for portability — §10c sets it
   on the shared selector, so this override ensures consistency if §10c is
   not present on the new project. */
.fcs_eyebrow {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

.fcs_heading {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: var(--space-5);
}

.fcs_body {
    font-size: var(--text-md);
    color: var(--color-text);
    margin-bottom: var(--space-6);
}

.fcs_body p:last-child {
    margin-bottom: 0;
}

/* Prevent global p / li color from overriding the wrapper's token on dark variants */
.fcs_body p,
.fcs_body li {
    color: inherit;
}

.fcs_ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.fcs_media {
    margin-top: var(--space-8);
    width: 100%;
}

.fcs_media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    display: block;
}

/* Editor preview — static stand-in for the video iframe (Round 2B).
   .embed-responsive (style.css §7d) is a 0-height, padding-bottom-based
   aspect-ratio box; only its iframe/video/object/embed children get the
   position:absolute fill that actually gives them visible height. This
   placeholder is a plain <div>, so it needs the same absolute-fill
   treatment here, or it collapses to the empty box above it. */
.fcs_video_preview_placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5) var(--space-6);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-style: italic;
    text-align: center;
}

.fcs_items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-10);
    width: 100%;
}

.fcs_item {
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}

.fcs_item_number {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    margin-bottom: var(--space-2);
    line-height: 1;
}

.fcs_item_heading {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-semi);
    color: var(--color-primary);
    margin: 0 0 var(--space-3) 0;
}

.fcs_item_text {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
    line-height: var(--leading-normal);
}

/* WYSIWYG content — without this, the global p/li color rules in style.css
   §4 override the dark-background color set below (.fcs_bg_primary /
   .fcs_bg_accent), making body text unreadable on a dark section. */
.fcs_item_text p,
.fcs_item_text li {
    color: inherit;
}

.fcs_item_media {
    margin-bottom: var(--space-4);
}

.fcs_item_media img {
    display: block;
    width: 100%;
    max-width: 120px;
    height: auto;
    border-radius: var(--radius-sm);
}

.fcs_item_link {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.3s ease;
}

.fcs_item_link:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}


/* ── Layout Variants — AFTER base block rule ─────────────────── */

/* Centered */
.fcs_layout_centered .fcs_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fcs_layout_centered .fcs_content {
    max-width: 800px;
    text-align: center;
}

.fcs_layout_centered .fcs_ctas {
    justify-content: center;
}

/* Split */
.fcs_layout_split .fcs_split_row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
}

.fcs_layout_split .fcs_content {
    flex: 1;
}

.fcs_layout_split .fcs_media {
    flex: 1;
    margin-top: 0;
}

/* Split — media position controls left/right */
.fcs_layout_split.fcs_media_right .fcs_split_row {
    flex-direction: row;
}

.fcs_layout_split.fcs_media_left .fcs_split_row {
    flex-direction: row-reverse;
}

/* Split — items always render full-width below the split row */
.fcs_layout_split .fcs_items {
    margin-top: var(--space-10);
    width: 100%;
}

/* Centered — media stacks below content, above items. Suppressed in cards-grid and stats-row (PHP-level). */
.fcs_layout_centered .fcs_media {
    width: 100%;
    max-width: 800px;
}

/* Centered — cards are contained and balanced for 1–4 items */
.fcs_layout_centered .fcs_items {
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
    justify-content: center;
}

.fcs_layout_centered .fcs_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fcs_layout_centered .fcs_item_media {
    display: flex;
    justify-content: center;
}

.fcs_layout_centered .fcs_item_media img {
    margin-left: auto;
    margin-right: auto;
}

.fcs_layout_centered .fcs_item_link {
    align-self: center;
}

/* Cards Grid */
.fcs_layout_cards_grid .fcs_items {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Stats Row */
.fcs_layout_stats_row .fcs_items {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-8) 0;
    gap: 0;
}

.fcs_layout_stats_row .fcs_item {
    background: transparent;
    border-radius: 0;
    flex: 1;
    text-align: center;
    padding: var(--space-6) var(--space-4);
    border-right: 1px solid var(--color-border);
}

.fcs_layout_stats_row .fcs_item:last-child {
    border-right: none;
}


/* ── Background Variants — AFTER base block rule ─────────────── */

.fcs_bg_none {
    background-color: transparent;
}

.fcs_bg_alt {
    background-color: var(--color-bg-alt);
}

.fcs_bg_primary {
    background-color: var(--color-bg-dark);
}

.fcs_bg_primary .fcs_heading,
.fcs_bg_primary .fcs_item_heading {
    color: var(--color-text-inverse);
}

.fcs_bg_primary .fcs_body,
.fcs_bg_primary .fcs_item_text {
    color: var(--color-text-inverse-soft);
}

/* WYSIWYG Editor Consistency and Contrast — a "No color" heading saved inside
   .fcs_body/.fcs_item_text otherwise falls back to the global h1-h6 rule
   (style.css §4b, --color-primary), which is unreadable on this dark
   background. p/li already inherit the wrapper's color above; headings need
   their own rule since inherit here would give them the body-copy
   (inverse-soft) tone instead of a true heading tone. */
.fcs_bg_primary .fcs_body h1, .fcs_bg_primary .fcs_body h2, .fcs_bg_primary .fcs_body h3,
.fcs_bg_primary .fcs_body h4, .fcs_bg_primary .fcs_body h5, .fcs_bg_primary .fcs_body h6,
.fcs_bg_primary .fcs_item_text h1, .fcs_bg_primary .fcs_item_text h2, .fcs_bg_primary .fcs_item_text h3,
.fcs_bg_primary .fcs_item_text h4, .fcs_bg_primary .fcs_item_text h5, .fcs_bg_primary .fcs_item_text h6 {
    color: var(--color-text-inverse);
}

/* Audit finding (Batch 8F Round 2) — a WYSIWYG-embedded link inside .fcs_body
   or .fcs_item_text had no override here at all, so it fell to the global
   accent-blue `a` color (style.css §4) regardless of this dark background —
   measured at a real 2.63:1 contrast ratio against --color-bg-dark, below
   WCAG AA. Confirmed, not assumed, and fixed before reporting completion
   per this round's own audit requirement. */
.fcs_bg_primary .fcs_body a,
.fcs_bg_primary .fcs_item_text a {
    color: var(--color-text-inverse);
}

.fcs_bg_primary .fcs_body a:hover,
.fcs_bg_primary .fcs_item_text a:hover {
    color: var(--color-text-inverse-soft);
}

.fcs_bg_primary .fcs_eyebrow {
    color: var(--color-accent);
}

.fcs_bg_primary .fcs_item {
    background-color: rgba(255, 255, 255, 0.08);
}

.fcs_layout_stats_row.fcs_bg_primary .fcs_item {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2);
}

.fcs_bg_primary .fcs_items {
    border-color: rgba(255, 255, 255, 0.2);
}

.fcs_bg_accent {
    background-color: var(--color-accent);
}

.fcs_bg_accent .fcs_heading,
.fcs_bg_accent .fcs_item_heading {
    color: var(--color-text-inverse);
}

.fcs_bg_accent .fcs_body,
.fcs_bg_accent .fcs_item_text {
    color: var(--color-text-inverse-soft);
}

/* See the matching comment under .fcs_bg_primary above — same fix, accent background. */
.fcs_bg_accent .fcs_body h1, .fcs_bg_accent .fcs_body h2, .fcs_bg_accent .fcs_body h3,
.fcs_bg_accent .fcs_body h4, .fcs_bg_accent .fcs_body h5, .fcs_bg_accent .fcs_body h6,
.fcs_bg_accent .fcs_item_text h1, .fcs_bg_accent .fcs_item_text h2, .fcs_bg_accent .fcs_item_text h3,
.fcs_bg_accent .fcs_item_text h4, .fcs_bg_accent .fcs_item_text h5, .fcs_bg_accent .fcs_item_text h6 {
    color: var(--color-text-inverse);
}

/* Audit finding (Batch 8F Round 2) — same gap as .fcs_bg_primary above, but
   worse here: measured at a real 1.00:1 contrast ratio — a WYSIWYG link's
   default accent-blue color is the literal same color as this Accent
   background, so it was completely invisible, not merely low-contrast. */
.fcs_bg_accent .fcs_body a,
.fcs_bg_accent .fcs_item_text a {
    color: var(--color-text-inverse);
}

.fcs_bg_accent .fcs_body a:hover,
.fcs_bg_accent .fcs_item_text a:hover {
    color: var(--color-text-inverse);
    opacity: 0.8;
}

.fcs_bg_accent .fcs_eyebrow {
    color: var(--color-text-inverse);
    opacity: 0.8;
}

.fcs_bg_accent .fcs_item_number {
    color: var(--color-text-inverse);
}

.fcs_bg_accent .fcs_item {
    background-color: rgba(255, 255, 255, 0.15);
}

.fcs_bg_accent .fcs_item_link {
    color: var(--color-text-inverse);
}

.fcs_bg_accent .fcs_item_link:hover {
    color: var(--color-text-inverse);
    opacity: 0.8;
}


/* ── Intro/Content Custom Background Text (Batch 8F Round 2, §8F.2) ──
   Background Style's new 'custom' choice sets .fcs_bg_custom (no CSS rule
   needed — the inline background-color from PHP wins over any class-based
   background on its own) plus one of these two explicit text-treatment
   classes. .fcs_text_dark needs no rule — the ambient default (--color-
   primary heading, --color-text body, no eyebrow/item override) already
   matches it, and 'custom' is never combined with .fcs_bg_primary/
   .fcs_bg_accent (bg_class is a single mutually-exclusive value), so there
   is no competing dark-mode rule to beat. .fcs_text_light mirrors
   .fcs_bg_primary's existing treatment above, exactly. */

.fcs_text_light .fcs_heading,
.fcs_text_light .fcs_item_heading {
    color: var(--color-text-inverse);
}

.fcs_text_light .fcs_body,
.fcs_text_light .fcs_item_text {
    color: var(--color-text-inverse-soft);
}

.fcs_text_light .fcs_body h1, .fcs_text_light .fcs_body h2, .fcs_text_light .fcs_body h3,
.fcs_text_light .fcs_body h4, .fcs_text_light .fcs_body h5, .fcs_text_light .fcs_body h6,
.fcs_text_light .fcs_item_text h1, .fcs_text_light .fcs_item_text h2, .fcs_text_light .fcs_item_text h3,
.fcs_text_light .fcs_item_text h4, .fcs_text_light .fcs_item_text h5, .fcs_text_light .fcs_item_text h6 {
    color: var(--color-text-inverse);
}

/* Same audit finding as .fcs_bg_primary/.fcs_bg_accent above, applied to
   Custom + Light Text. */
.fcs_text_light .fcs_body a,
.fcs_text_light .fcs_item_text a {
    color: var(--color-text-inverse);
}

.fcs_text_light .fcs_body a:hover,
.fcs_text_light .fcs_item_text a:hover {
    color: var(--color-text-inverse);
    opacity: 0.8;
}

.fcs_text_light .fcs_eyebrow {
    color: var(--color-text-inverse);
}

.fcs_text_light .fcs_item_number {
    color: var(--color-text-inverse);
}

.fcs_text_light .fcs_item {
    background-color: rgba(255, 255, 255, 0.08);
}

.fcs_text_light .fcs_item_link {
    color: var(--color-text-inverse);
}

.fcs_text_light .fcs_item_link:hover {
    color: var(--color-text-inverse);
    opacity: 0.8;
}


/* ── Items/Cards Area — independent region (Batch 8F Round 2, §8F.2) ──
   A brand-new control, separate from the intro's own Background Style
   above. Theme Default (no class at all) leaves the existing intro-driven
   cascade (.fcs_bg_primary/.fcs_bg_accent .fcs_item, above) completely
   untouched — that is the region's real "current look," which varies by
   the intro's own setting rather than being one fixed value, so Theme
   Default here means "don't add anything," not "match one specific color."
   Every selector below is prefixed with the literal `section` type
   selector purely so it reliably outranks the existing 3-class
   `.fcs_layout_stats_row.fcs_bg_primary .fcs_item` rule (3 classes, 0 type
   selectors) by specificity alone — same class-count, one more type
   selector — never by source order, so an editor's explicit choice here
   always wins regardless of which layout or intro background is active. */

/* Correction pass (2026-10-16) — Codex found this rule grouped Background
   and Alternate into the same --color-bg-alt value, and grouped Dark/Accent
   below into a translucent rgba(255,255,255,0.08) overlay that only reads
   as a color at all when something is already behind it — the items region
   is independent of the intro/section background, so neither assumption
   holds. Keyed by `_bg_` only now, never by `_text_light`/`_text_dark`
   (those drive text color further down, never background) — matches the
   same fix already applied to Image Grid's cards region. */
section.flexible_content_section.fcs_items_bg_background .fcs_item {
    background-color: var(--color-bg);
}

section.flexible_content_section.fcs_items_bg_alt_background .fcs_item {
    background-color: var(--color-bg-alt);
}

section.flexible_content_section.fcs_items_bg_background .fcs_item_heading,
section.flexible_content_section.fcs_items_bg_alt_background .fcs_item_heading,
section.flexible_content_section.fcs_items_text_dark .fcs_item_heading {
    color: var(--color-primary);
}

section.flexible_content_section.fcs_items_bg_background .fcs_item_text,
section.flexible_content_section.fcs_items_bg_alt_background .fcs_item_text,
section.flexible_content_section.fcs_items_text_dark .fcs_item_text {
    color: var(--color-text-muted);
}

section.flexible_content_section.fcs_items_bg_background .fcs_item_text h1,
section.flexible_content_section.fcs_items_bg_background .fcs_item_text h2,
section.flexible_content_section.fcs_items_bg_background .fcs_item_text h3,
section.flexible_content_section.fcs_items_bg_background .fcs_item_text h4,
section.flexible_content_section.fcs_items_bg_background .fcs_item_text h5,
section.flexible_content_section.fcs_items_bg_background .fcs_item_text h6,
section.flexible_content_section.fcs_items_bg_alt_background .fcs_item_text h1,
section.flexible_content_section.fcs_items_bg_alt_background .fcs_item_text h2,
section.flexible_content_section.fcs_items_bg_alt_background .fcs_item_text h3,
section.flexible_content_section.fcs_items_bg_alt_background .fcs_item_text h4,
section.flexible_content_section.fcs_items_bg_alt_background .fcs_item_text h5,
section.flexible_content_section.fcs_items_bg_alt_background .fcs_item_text h6,
section.flexible_content_section.fcs_items_text_dark .fcs_item_text h1,
section.flexible_content_section.fcs_items_text_dark .fcs_item_text h2,
section.flexible_content_section.fcs_items_text_dark .fcs_item_text h3,
section.flexible_content_section.fcs_items_text_dark .fcs_item_text h4,
section.flexible_content_section.fcs_items_text_dark .fcs_item_text h5,
section.flexible_content_section.fcs_items_text_dark .fcs_item_text h6 {
    color: var(--color-primary);
}

section.flexible_content_section.fcs_items_bg_background .fcs_item_number,
section.flexible_content_section.fcs_items_bg_alt_background .fcs_item_number,
section.flexible_content_section.fcs_items_text_dark .fcs_item_number {
    color: var(--color-accent);
}

section.flexible_content_section.fcs_items_bg_background .fcs_item_link,
section.flexible_content_section.fcs_items_bg_alt_background .fcs_item_link,
section.flexible_content_section.fcs_items_text_dark .fcs_item_link {
    color: var(--color-accent);
}

section.flexible_content_section.fcs_items_bg_background .fcs_item_link:hover,
section.flexible_content_section.fcs_items_bg_alt_background .fcs_item_link:hover,
section.flexible_content_section.fcs_items_text_dark .fcs_item_link:hover {
    color: var(--color-accent-hover);
}

section.flexible_content_section.fcs_items_bg_dark .fcs_item {
    background-color: var(--color-bg-dark);
}

section.flexible_content_section.fcs_items_bg_accent .fcs_item {
    background-color: var(--color-accent);
}

section.flexible_content_section.fcs_items_bg_dark .fcs_item_heading,
section.flexible_content_section.fcs_items_bg_accent .fcs_item_heading,
section.flexible_content_section.fcs_items_text_light .fcs_item_heading {
    color: var(--color-text-inverse);
}

section.flexible_content_section.fcs_items_bg_dark .fcs_item_text,
section.flexible_content_section.fcs_items_bg_accent .fcs_item_text,
section.flexible_content_section.fcs_items_text_light .fcs_item_text {
    color: var(--color-text-inverse-soft);
}

section.flexible_content_section.fcs_items_bg_dark .fcs_item_text h1,
section.flexible_content_section.fcs_items_bg_dark .fcs_item_text h2,
section.flexible_content_section.fcs_items_bg_dark .fcs_item_text h3,
section.flexible_content_section.fcs_items_bg_dark .fcs_item_text h4,
section.flexible_content_section.fcs_items_bg_dark .fcs_item_text h5,
section.flexible_content_section.fcs_items_bg_dark .fcs_item_text h6,
section.flexible_content_section.fcs_items_bg_accent .fcs_item_text h1,
section.flexible_content_section.fcs_items_bg_accent .fcs_item_text h2,
section.flexible_content_section.fcs_items_bg_accent .fcs_item_text h3,
section.flexible_content_section.fcs_items_bg_accent .fcs_item_text h4,
section.flexible_content_section.fcs_items_bg_accent .fcs_item_text h5,
section.flexible_content_section.fcs_items_bg_accent .fcs_item_text h6,
section.flexible_content_section.fcs_items_text_light .fcs_item_text h1,
section.flexible_content_section.fcs_items_text_light .fcs_item_text h2,
section.flexible_content_section.fcs_items_text_light .fcs_item_text h3,
section.flexible_content_section.fcs_items_text_light .fcs_item_text h4,
section.flexible_content_section.fcs_items_text_light .fcs_item_text h5,
section.flexible_content_section.fcs_items_text_light .fcs_item_text h6 {
    color: var(--color-text-inverse);
}

/* Same audit finding as the intro region above — a WYSIWYG-embedded link
   inside .fcs_item_text had no override here, independent of
   .fcs_item_link (the dedicated link field, already handled below). */
section.flexible_content_section.fcs_items_bg_dark .fcs_item_text a,
section.flexible_content_section.fcs_items_bg_accent .fcs_item_text a,
section.flexible_content_section.fcs_items_text_light .fcs_item_text a {
    color: var(--color-text-inverse);
}

section.flexible_content_section.fcs_items_bg_dark .fcs_item_text a:hover,
section.flexible_content_section.fcs_items_bg_accent .fcs_item_text a:hover,
section.flexible_content_section.fcs_items_text_light .fcs_item_text a:hover {
    color: var(--color-text-inverse);
    opacity: 0.8;
}

section.flexible_content_section.fcs_items_bg_dark .fcs_item_number,
section.flexible_content_section.fcs_items_bg_accent .fcs_item_number,
section.flexible_content_section.fcs_items_text_light .fcs_item_number {
    color: var(--color-text-inverse);
}

section.flexible_content_section.fcs_items_bg_dark .fcs_item_link,
section.flexible_content_section.fcs_items_bg_accent .fcs_item_link,
section.flexible_content_section.fcs_items_text_light .fcs_item_link {
    color: var(--color-text-inverse);
}

section.flexible_content_section.fcs_items_bg_dark .fcs_item_link:hover,
section.flexible_content_section.fcs_items_bg_accent .fcs_item_link:hover,
section.flexible_content_section.fcs_items_text_light .fcs_item_link:hover {
    color: var(--color-text-inverse);
    opacity: 0.8;
}

/* Custom mode's background-color: the hex travels from PHP as a CSS custom
   property (--fcs-items-custom-bg), not a direct inline background-color,
   because the new class lives on the outer section while the color needs
   to reach each nested .fcs_item — a custom property cascades to
   descendants; a literal background-color on the section would not. */
section.flexible_content_section.fcs_items_bg_custom .fcs_item {
    background-color: var(--fcs-items-custom-bg);
}

/* Stats Row — the layout's own border-divided, background:transparent
   treatment is a deliberate design choice (see .fcs_layout_stats_row
   .fcs_item above); an explicit items-region color still overrides it
   when chosen, matching this project's "explicit choice always wins"
   rule, rather than silently doing nothing in this one layout. */
section.flexible_content_section.fcs_layout_stats_row.fcs_items_bg_dark .fcs_item,
section.flexible_content_section.fcs_layout_stats_row.fcs_items_bg_accent .fcs_item,
section.flexible_content_section.fcs_layout_stats_row.fcs_items_text_light .fcs_item {
    border-color: rgba(255, 255, 255, 0.2);
}


/* ── Alignment Variants — AFTER base block rule ──────────────── */

/*
   Alignment — use center for most layouts.
   Right alignment not recommended with split layout + media.
   Apply cautiously on a per-project basis.
*/

.fcs_align_left .fcs_content {
    text-align: left;
}

.fcs_align_left .fcs_ctas {
    justify-content: flex-start;
}

.fcs_align_center .fcs_content {
    text-align: center;
}

.fcs_align_center .fcs_ctas {
    justify-content: center;
}

.fcs_align_right .fcs_content {
    text-align: right;
}

.fcs_align_right .fcs_ctas {
    justify-content: flex-end;
}


/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 768px) {

    .fcs_heading {
        font-size: var(--text-2xl);
    }

    .fcs_layout_split .fcs_split_row,
    .fcs_layout_split.fcs_media_left .fcs_split_row,
    .fcs_layout_split.fcs_media_right .fcs_split_row {
        flex-direction: column;
    }

    .fcs_layout_split .fcs_media {
        margin-top: var(--space-8);
    }

    .fcs_layout_stats_row .fcs_items {
        flex-direction: column;
    }

    .fcs_layout_stats_row .fcs_item {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .fcs_layout_stats_row .fcs_item:last-child {
        border-bottom: none;
    }

    .fcs_layout_stats_row.fcs_bg_primary .fcs_item {
        border-color: rgba(255, 255, 255, 0.2);
    }
}

@media (max-width: 480px) {

    .flexible_content_section {
        padding: var(--space-12) 0;
    }

    .fcs_heading {
        font-size: var(--text-xl);
    }

    .fcs_items {
        grid-template-columns: 1fr;
    }

    .fcs_ctas {
        flex-direction: column;
    }
}


/* ── Batch 8H — layout options (BATCH_8_PLAN.md §20) ────────────
   Placed last so these optional rules layer on top of the rules
   above. Every option is a class PHP adds only for a non-default
   choice, so existing blocks match none of these rules. */

/* Editor preview only — shown when the Heading is empty. */
.fcs_preview_empty {
    padding: var(--space-5) var(--space-6);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-style: italic;
    text-align: center;
}

/* Text beside items — text on one side, items on the other.
   media_position picks the items side (left = row-reverse). */
.fcs_layout_split_items .fcs_split_items_row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
}

.fcs_layout_split_items.fcs_media_left .fcs_split_items_row {
    flex-direction: row-reverse;
}

.fcs_layout_split_items .fcs_content,
.fcs_layout_split_items .fcs_items_column {
    flex: 1 1 0%;
    min-width: 0;
}

.fcs_layout_split_items .fcs_items {
    margin-top: 0;
}

/* Side widths (both side-by-side layouts). Equal = the flex: 1 / 1
   above and in the Split rules. Text wider = 60/40, Photo or items
   wider = 40/60. */
.fcs_widths_text_wider .fcs_content {
    flex: 3 1 0%;
}

.fcs_widths_text_wider .fcs_media,
.fcs_widths_text_wider .fcs_items_column {
    flex: 2 1 0%;
}

.fcs_widths_media_wider .fcs_content {
    flex: 2 1 0%;
}

.fcs_widths_media_wider .fcs_media,
.fcs_widths_media_wider .fcs_items_column {
    flex: 3 1 0%;
}

/* Buttons under the items. Text alignment still sets left / center /
   right through the .fcs_align_* .fcs_ctas rules above. */
.fcs_ctas_under_items {
    margin-top: var(--space-10);
}

/* Tidy items — a chosen number per row (always on for Text beside
   items). Balanced rows: a wrapping flex row where every item gets
   the same fixed width — (row width − the gaps) ÷ items per row —
   and justify-content: center keeps a short last row centered at
   that same width. Equal height: flex rows stretch every item to the
   tallest item in its own row; each row lines up on its own. */
.fcs_items_tidy .fcs_items {
    --fcs-cols: var(--fcs-per-row, 3);
    --fcs-gap: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    column-gap: var(--fcs-gap);
    row-gap: var(--space-6);
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.fcs_items_tidy .fcs_item {
    flex: 0 0 calc((100% - (var(--fcs-cols) - 1) * var(--fcs-gap)) / var(--fcs-cols));
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Links line up at the bottom of each card. */
.fcs_items_tidy .fcs_item_link {
    margin-top: auto;
    align-self: flex-start;
}

.fcs_layout_centered.fcs_items_tidy .fcs_item_link {
    align-self: center;
}

/* Same-size icon space on every item when any item has an icon, so
   headings line up. Icons are shown whole (contain), never stretched. */
.fcs_items_has_icons .fcs_item_media {
    display: flex;
    align-items: center;
    height: var(--space-16);
}

.fcs_items_has_icons .fcs_item_media img {
    width: auto;
    height: 100%;
    max-width: 120px;
    object-fit: contain;
}

/* Numbers row keeps its divider lines, so no gap between columns. */
.fcs_layout_stats_row.fcs_items_tidy .fcs_items {
    --fcs-gap: 0px;
}

/* Item look: Plain — no box. (Numbers row is already unboxed.)
   Card color does not apply to Plain; PHP skips it. */
section.flexible_content_section.fcs_look_plain:not(.fcs_layout_stats_row) .fcs_item {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
}

@media (max-width: 900px) {
    /* Tablets: at most 3 per row */
    .fcs_items_tidy .fcs_items {
        --fcs-cols: min(var(--fcs-per-row, 3), 3);
    }

    /* Text beside items stacks into one column */
    .fcs_layout_split_items .fcs_split_items_row,
    .fcs_layout_split_items.fcs_media_left .fcs_split_items_row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-8);
    }

    .fcs_layout_split_items.fcs_phone_media_first .fcs_split_items_row {
        flex-direction: column-reverse;
    }

    .fcs_layout_split_items .fcs_content,
    .fcs_layout_split_items .fcs_items_column {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* Phones: at most 2 per row */
    .fcs_items_tidy .fcs_items {
        --fcs-cols: min(var(--fcs-per-row, 3), 2);
    }

    /* Split already stacks here (text first); widths no longer apply. */
    .fcs_layout_split.fcs_widths_text_wider .fcs_content,
    .fcs_layout_split.fcs_widths_text_wider .fcs_media,
    .fcs_layout_split.fcs_widths_media_wider .fcs_content,
    .fcs_layout_split.fcs_widths_media_wider .fcs_media {
        flex: 1;
    }

    .fcs_layout_split.fcs_phone_media_first .fcs_split_row {
        flex-direction: column-reverse;
    }

    .fcs_layout_split.fcs_phone_media_first .fcs_media {
        margin-top: 0;
    }

    .fcs_layout_split.fcs_phone_media_first .fcs_content {
        margin-top: var(--space-8);
    }

    /* Numbers row keeps today's one-per-line phone stacking. */
    .fcs_layout_stats_row.fcs_items_tidy .fcs_item {
        flex: 0 0 auto;
    }
}

@media (max-width: 480px) {
    /* Small phones: one per row */
    .fcs_items_tidy .fcs_items {
        --fcs-cols: 1;
    }
}

/* ── Label look: Rounded tag (Batch 8H, BATCH_8_PLAN.md §28) ──────
   Added only when the editor picks Label look → Rounded tag; Plain text
   (the default) adds nothing, so existing sections look the same. Uses the
   label's own color (currentColor), so it reads on light and dark
   backgrounds. The first border line is the fallback for browsers without
   color-mix(). No blur, glow or animation.
   BOILERPLATE NOTE: the same rule lives in style.css §10c. Kept here so
   this block works when copied to a new project on its own; on a live
   project with §10c in place this copy can be removed. */
.fcs_eyebrow.fcs_label_pill {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid currentColor;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    line-height: var(--leading-tight);
}