/*
==========================================================
IMAGE GRID — image_grid.css
==========================================================
WHAT IT IS:
A responsive CSS grid block for images and text cards.

WHAT IT DOES:
Renders a configurable grid of image or text items with
optional header, Lity lightbox support, item links,
and CTA buttons at the bottom. Column count (2–6) is
set by the user and applied via the --ig-cols CSS
custom property.

HOW TO USE:
1. Add the Image Grid block to any page
2. Editor tabs: Title · Grid items · Grid layout · Buttons · Colors
3. In "Grid items", add as many items as needed (no limit) —
   each is a photo or a text card (text cards can flip). Each
   item has small tabs: Kind · Photo · Text card · Link
4. Per photo: "Open a bigger photo" (lightbox) or a link, and
   "Keep this part in view" (focal point)
5. In "Grid layout": items per row (2–6), On phones show,
   Space between items, Photo shape. Colors are in "Colors"

Note: --ig-cols is set as an inline style on the block
wrapper by PHP. It is only a custom property, so the
responsive grid-template-columns rules below win by normal
cascade order — no !important is needed (Batch 8H removed
the old ones; nothing inline sets grid-template-columns).

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


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

.image_grid {
    width: 100%;
    padding: var(--space-20) 0;
}


/* ── Header ──────────────────────────────────────────────────── */

.ig_header {
    margin-bottom: var(--space-12);
}

.ig_header_align_left   { text-align: left; }
.ig_header_align_center { text-align: center; }
.ig_header_align_right  { text-align: right; }

.ig_header_heading {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    margin: 0 0 var(--space-3) 0;
    line-height: 1.1;
}

.ig_header_subheading {
    font-size: var(--text-lg);
    color: var(--color-secondary);
    margin: 0 0 var(--space-4) 0;
    font-weight: var(--weight-semi);
}

.ig_header_body {
    font-size: var(--text-base);
    color: var(--color-text);
    line-height: var(--leading-normal);
    max-width: 700px;
}

.ig_header_body p,
.ig_header_body li {
    color: inherit;
}

.ig_header_align_center .ig_header_body { margin-left: auto; margin-right: auto; }
.ig_header_align_right  .ig_header_body { margin-left: auto; }


/* ── Grid ────────────────────────────────────────────────────── */

.ig_grid {
    display: grid;
    grid-template-columns: repeat(var(--ig-cols, 3), 1fr);
    gap: var(--space-4);
}

/* Space between items (Batch 8H). Normal (default, no class) keeps
   the --space-4 gap above. */
.ig_gap_tight .ig_grid {
    gap: var(--space-2);
}

.ig_gap_roomy .ig_grid {
    gap: var(--space-8);
}


/* Editor preview only — shown by image_grid.php when the block has no
   items and no title yet. Never output on the frontend. */
.ig_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;
}


/* ── Items — Image ───────────────────────────────────────────── */

.ig_item_type_image .ig_item_inner {
    overflow: hidden;
    border-radius: var(--radius-md);
}

.ig_item_type_image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ig_lightbox_trigger:hover img,
.ig_item_link_wrap:hover img {
    transform: scale(1.04);
}

.ig_lightbox_trigger,
.ig_item_link_wrap {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-md);
    line-height: 0;
}

/* Photo shape (Batch 8H) — AFTER the base photo rule. Classic (default,
   no class) keeps the 4:3 crop above. Cropped shapes keep object-fit:
   cover, so photos are trimmed, never stretched. Original shows each
   whole photo at its own shape; grid items then keep their own heights
   instead of stretching to the tallest item in the row (text cards too),
   which the editor instruction explains. Text cards and the flip-card
   front photo are not affected. */
.ig_shape_wide .ig_item_type_image img {
    aspect-ratio: 16 / 9;
}

.ig_shape_square .ig_item_type_image img {
    aspect-ratio: 1 / 1;
}

.ig_shape_tall .ig_item_type_image img {
    aspect-ratio: 4 / 5;
}

.ig_shape_original .ig_item_type_image img {
    aspect-ratio: auto;
    height: auto;
}

.ig_shape_original .ig_grid {
    align-items: start;
}

/* Keep this part in view (Batch 8H). Middle is the browser default
   (no class). Only matters when the photo is trimmed. */
.ig_focal_top img          { object-position: center top; }
.ig_focal_bottom img       { object-position: center bottom; }
.ig_focal_left img         { object-position: left center; }
.ig_focal_right img        { object-position: right center; }
.ig_focal_top_left img     { object-position: left top; }
.ig_focal_top_right img    { object-position: right top; }
.ig_focal_bottom_left img  { object-position: left bottom; }
.ig_focal_bottom_right img { object-position: right bottom; }

.ig_caption {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
    text-align: center;
    line-height: var(--leading-normal);
}


/* ── Items — Text ────────────────────────────────────────────── */

.ig_item_type_text .ig_item_inner {
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.ig_item_text {
    font-size: var(--text-base);
    color: var(--color-text);
    line-height: var(--leading-normal);
    flex: 1;
}

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

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

.ig_item_link {
    display: inline-block;
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-accent);
    text-decoration: none;
    font-weight: var(--weight-semi);
}

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


/* ── Items — Flip Text Cards ─────────────────────────────────── */
/*
 * .ig_card_faces height is controlled by --ig-flip-height (default 260px).
 * Override this CSS custom property per project as needed:
 *   .image_grid { --ig-flip-height: 320px; }
 */

.ig_item_type_text_flip {
    perspective: 1000px;
}

.ig_item_type_text_flip .ig_item_inner {
    background-color: transparent;
    padding: 0;
    height: 100%;
}

.ig_card_faces {
    --ig-flip-height: 260px;
    position: relative;
    width: 100%;
    height: var(--ig-flip-height);
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
    border-radius: var(--radius-md);
}

.ig_item_type_text_flip:hover .ig_card_faces,
.ig_item_type_text_flip:focus-within .ig_card_faces {
    transform: rotateY(180deg);
}

/* Editor preview only — image_grid.php adds ig_item_preview_static instead
   of tabindex when $is_preview, so :hover/:focus-within can't trigger the
   flip transform (pure CSS, so it would otherwise still work with no JS
   loaded). The front face is already the resting state above, so this is
   a useful, stable static state, not a broken one. Higher specificity
   (4 class-selectors vs. 3) wins without !important. */
.ig_item_type_text_flip.ig_item_preview_static:hover .ig_card_faces,
.ig_item_type_text_flip.ig_item_preview_static:focus-within .ig_card_faces {
    transform: none;
}

.ig_card_face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-6);
    box-sizing: border-box;
}

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

.ig_card_face_back {
    background-color: var(--color-bg-dark);
    transform: rotateY(180deg);
    padding: var(--space-8);
    justify-content: flex-start;
    overflow-y: auto;
}

/* Front face image */
.ig_card_front_image {
    width: 100%;
    margin-bottom: var(--space-4);
}

.ig_card_front_image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.ig_card_front_heading {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-semi);
    color: var(--color-primary);
    margin: 0;
    line-height: 1.2;
    text-align: center;
}

/* Back face content */
.ig_card_back_body {
    font-size: var(--text-base);
    color: var(--color-text-inverse-soft);
    line-height: var(--leading-normal);
    flex: 1;
}

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

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

/* WYSIWYG Editor Consistency and Contrast — the flip-card back face
   (.ig_card_face_back above) is ALWAYS a dark surface, unconditionally,
   regardless of the block's own background setting — so unlike
   .ig_header_body/.ig_item_text above, this fix isn't gated behind
   .ig_bg_dark. A "No color" heading here would otherwise fall back to the
   global h1-h6 rule (style.css §4b, --color-primary) and disappear against
   this dark back face. */
.ig_card_back_body h1, .ig_card_back_body h2, .ig_card_back_body h3,
.ig_card_back_body h4, .ig_card_back_body h5, .ig_card_back_body h6 {
    color: var(--color-text-inverse);
}

/* Audit finding (Batch 8F Round 2) — same gap as the heading fix above, for
   a WYSIWYG-embedded link: no override existed, so it fell to the global
   accent-blue `a` color against this always-dark back face — a real
   2.63:1 contrast ratio, below WCAG AA. Independent of
   .ig_card_face_back .ig_item_link below, which is the dedicated link
   field, not a link embedded inside the WYSIWYG body text. Overridden back
   to normal (§8F.2's cards-region light modes, further down) when the new
   Cards Background Mode explicitly makes this face light instead. */
.ig_card_back_body a {
    color: var(--color-text-inverse);
}

.ig_card_back_body a:hover {
    color: var(--color-text-inverse);
    opacity: 0.8;
}

.ig_card_face_back .ig_item_link {
    color: var(--color-text-inverse);
    margin-top: var(--space-4);
}

.ig_card_face_back .ig_item_link:hover {
    color: var(--color-text-inverse);
    opacity: 0.8;
}

/* Dark bg override — front face */
.ig_bg_dark .ig_card_face_front {
    background-color: rgba(255, 255, 255, 0.08);
}

.ig_bg_dark .ig_card_front_heading {
    color: var(--color-text-inverse);
}

/* Mobile — disable 3D flip, stack faces vertically */
@media (max-width: 768px) {

    .ig_item_type_text_flip {
        perspective: none;
    }

    .ig_card_faces {
        transform-style: flat;
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .ig_item_type_text_flip:hover .ig_card_faces,
    .ig_item_type_text_flip:focus-within .ig_card_faces {
        transform: none;
    }

    .ig_card_face {
        position: static;
        transform: none !important;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
    }
}


/* ── CTAs ────────────────────────────────────────────────────── */

.ig_ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-12);
    justify-content: center;
}


/* ── Background Variants — AFTER base rules ──────────────────── */

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

.ig_bg_minimal {
    background-color: transparent;
}

.ig_bg_minimal {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

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

.ig_bg_dark .ig_header_heading {
    color: var(--color-text-inverse);
}

.ig_bg_dark .ig_header_subheading,
.ig_bg_dark .ig_header_body,
.ig_bg_dark .ig_caption {
    color: var(--color-text-inverse-soft);
}

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

/* Audit finding (Batch 8F Round 2) — a WYSIWYG-embedded link inside
   .ig_header_body/.ig_item_text/.ig_card_back_body had no override anywhere
   in this file, so it fell to the global accent-blue `a` color regardless
   of background — measured (same formula used throughout this round) at a
   real 2.63:1 contrast ratio against --color-bg-dark, below WCAG AA, and a
   literal 1.00:1 (identical color) against the new Accent cards mode below.
   Fixed here and at every other dark/accent location in this file, per this
   round's own audit requirement not to leave a confirmed defect unfixed. */
.ig_bg_dark .ig_header_body a {
    color: var(--color-text-inverse);
}

.ig_bg_dark .ig_header_body a:hover {
    color: var(--color-text-inverse-soft);
}

.ig_bg_dark .ig_item_type_text .ig_item_inner {
    background-color: rgba(255, 255, 255, 0.08);
}

.ig_bg_dark .ig_item_text {
    color: var(--color-text-inverse-soft);
}

/* Same WYSIWYG heading-contrast fix as .ig_header_body above, for the per-item text card. */
.ig_bg_dark .ig_item_text h1, .ig_bg_dark .ig_item_text h2, .ig_bg_dark .ig_item_text h3,
.ig_bg_dark .ig_item_text h4, .ig_bg_dark .ig_item_text h5, .ig_bg_dark .ig_item_text h6 {
    color: var(--color-text-inverse);
}

/* Same audit finding as .ig_header_body above, for the per-item text card —
   independent of .ig_item_link (the dedicated link field, already handled
   below). */
.ig_bg_dark .ig_item_text a {
    color: var(--color-text-inverse);
}

.ig_bg_dark .ig_item_text a:hover {
    color: var(--color-text-inverse-soft);
}

.ig_bg_dark .ig_item_link {
    color: var(--color-text-inverse);
}

/* Gradient backgrounds — define per project */
.ig_bg_gradient_1 { /* add gradient here */ }
.ig_bg_gradient_2 { /* add gradient here */ }
.ig_bg_gradient_3 { /* add gradient here */ }

/* Custom — the hex travels from PHP as a CSS custom property (--ig-custom-bg)
   rather than a direct inline background-color, since the section already
   carries one inline style (--ig-cols) and both must merge into a single
   style attribute. */
.ig_bg_custom {
    background-color: var(--ig-custom-bg);
}

.ig_text_light .ig_header_heading {
    color: var(--color-text-inverse);
}

.ig_text_light .ig_header_subheading,
.ig_text_light .ig_header_body,
.ig_text_light .ig_caption {
    color: var(--color-text-inverse-soft);
}

.ig_text_light .ig_header_body h1, .ig_text_light .ig_header_body h2, .ig_text_light .ig_header_body h3,
.ig_text_light .ig_header_body h4, .ig_text_light .ig_header_body h5, .ig_text_light .ig_header_body h6 {
    color: var(--color-text-inverse);
}

.ig_text_light .ig_header_body a {
    color: var(--color-text-inverse);
}

.ig_text_light .ig_header_body a:hover {
    color: var(--color-text-inverse-soft);
}

.ig_text_light .ig_item_type_text .ig_item_inner {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Audit finding (Batch 8F Round 2) — Custom + Light Text was missing the
   flip-card front-face treatment that .ig_bg_dark already has above
   (.ig_bg_dark .ig_card_face_front / .ig_card_front_heading). Without this,
   Custom + Light Text correctly darkened the non-flip card and the section
   text, but left the flip-card front face at its light default — an
   inconsistency between two states meant to produce the same visual
   result, caught by this round's own audit, not reported by Codex. */
.ig_text_light .ig_card_face_front {
    background-color: rgba(255, 255, 255, 0.08);
}

.ig_text_light .ig_card_front_heading {
    color: var(--color-text-inverse);
}

.ig_text_light .ig_item_text {
    color: var(--color-text-inverse-soft);
}

.ig_text_light .ig_item_text h1, .ig_text_light .ig_item_text h2, .ig_text_light .ig_item_text h3,
.ig_text_light .ig_item_text h4, .ig_text_light .ig_item_text h5, .ig_text_light .ig_item_text h6 {
    color: var(--color-text-inverse);
}

.ig_text_light .ig_item_text a {
    color: var(--color-text-inverse);
}

.ig_text_light .ig_item_text a:hover {
    color: var(--color-text-inverse-soft);
}

.ig_text_light .ig_item_link {
    color: var(--color-text-inverse);
}

/* .ig_text_dark needs no rule — the ambient default (--color-primary header
   heading, --color-text/--color-text-muted body, --color-accent link)
   already matches it, and 'custom' is never combined with .ig_bg_dark
   (bg_class is a single mutually-exclusive value), so there is no
   competing dark-mode rule here to beat. */


/* ── Cards Surface — independent region, flip front + back + non-flip
   (Batch 8F Round 2, §8F.2) ─────────────────────────────────────────
   A brand-new control, separate from the section's own Background above.
   Theme Default (no class at all) leaves the existing front/back split
   completely untouched — front = --color-bg-alt (or the dark-mode
   rgba(255,255,255,0.08) override above, both already in this file), back
   = always --color-bg-dark unconditionally, non-flip = the same alt/dark-08
   split. That lighter-front/darker-back distinction IS "today's look," so
   Theme Default here means "don't add anything," not "match one value."

   Every selector below is prefixed with `.image_grid` (the class already on
   every instance) purely so a 3- or 4-class compound reliably outranks the
   existing `.ig_bg_dark .ig_item_type_text .ig_item_inner` rule (3 classes)
   by specificity alone — never by source order — so an editor's explicit
   choice here always wins regardless of the section's own Background. */

/* Audit finding (Batch 8F Round 2) — the first version of this rule grouped
   Accent with Dark's own translucent rgba(255,255,255,0.08) overlay, which
   only reads as "a lighter dark card" when something dark is actually
   behind it — the cards region is independent of the section's own
   background, so Accent needs its own real, solid var(--color-accent),
   exactly like every other Accent mode in this batch (Hero, CTA Banner,
   Zone Band, Split View, Flexible Content, Before/After's outer section).
   Background and Alternate were also collapsed into one shared value;
   split into their correct distinct tokens here. Deliberately keyed by
   `_bg_` only, never by `_text_light`/`_text_dark` (those drive text color
   a few rules below, never background) — avoids a same-specificity
   conflict with .ig_cards_bg_custom's own background rule further down. */
.image_grid.ig_cards_bg_background .ig_card_face_front {
    background-color: var(--color-bg);
}

.image_grid.ig_cards_bg_alt_background .ig_card_face_front {
    background-color: var(--color-bg-alt);
}

.image_grid.ig_cards_bg_dark .ig_card_face_front {
    background-color: var(--color-bg-dark);
}

.image_grid.ig_cards_bg_accent .ig_card_face_front {
    background-color: var(--color-accent);
}

.image_grid.ig_cards_bg_background .ig_card_front_heading,
.image_grid.ig_cards_bg_alt_background .ig_card_front_heading,
.image_grid.ig_cards_text_dark .ig_card_front_heading {
    color: var(--color-primary);
}

.image_grid.ig_cards_bg_dark .ig_card_front_heading,
.image_grid.ig_cards_bg_accent .ig_card_front_heading,
.image_grid.ig_cards_text_light .ig_card_front_heading {
    color: var(--color-text-inverse);
}

.image_grid.ig_cards_bg_background .ig_card_face_back {
    background-color: var(--color-bg);
}

.image_grid.ig_cards_bg_alt_background .ig_card_face_back {
    background-color: var(--color-bg-alt);
}

/* Dark and Accent need no explicit .ig_card_face_back rule — the back
   face's own unconditional base (always --color-bg-dark) already matches
   Dark exactly, and is being replaced by Accent's real color below, not
   grouped here. */
.image_grid.ig_cards_bg_accent .ig_card_face_back {
    background-color: var(--color-accent);
}

.image_grid.ig_cards_bg_background .ig_card_back_body,
.image_grid.ig_cards_bg_alt_background .ig_card_back_body,
.image_grid.ig_cards_text_dark .ig_card_back_body {
    color: var(--color-text);
}

.image_grid.ig_cards_bg_background .ig_card_back_body h1, .image_grid.ig_cards_bg_background .ig_card_back_body h2,
.image_grid.ig_cards_bg_background .ig_card_back_body h3, .image_grid.ig_cards_bg_background .ig_card_back_body h4,
.image_grid.ig_cards_bg_background .ig_card_back_body h5, .image_grid.ig_cards_bg_background .ig_card_back_body h6,
.image_grid.ig_cards_bg_alt_background .ig_card_back_body h1, .image_grid.ig_cards_bg_alt_background .ig_card_back_body h2,
.image_grid.ig_cards_bg_alt_background .ig_card_back_body h3, .image_grid.ig_cards_bg_alt_background .ig_card_back_body h4,
.image_grid.ig_cards_bg_alt_background .ig_card_back_body h5, .image_grid.ig_cards_bg_alt_background .ig_card_back_body h6,
.image_grid.ig_cards_text_dark .ig_card_back_body h1, .image_grid.ig_cards_text_dark .ig_card_back_body h2,
.image_grid.ig_cards_text_dark .ig_card_back_body h3, .image_grid.ig_cards_text_dark .ig_card_back_body h4,
.image_grid.ig_cards_text_dark .ig_card_back_body h5, .image_grid.ig_cards_text_dark .ig_card_back_body h6 {
    color: var(--color-primary);
}

.image_grid.ig_cards_bg_background .ig_card_face_back .ig_item_link,
.image_grid.ig_cards_bg_alt_background .ig_card_face_back .ig_item_link,
.image_grid.ig_cards_text_dark .ig_card_face_back .ig_item_link {
    color: var(--color-accent);
}

.image_grid.ig_cards_bg_background .ig_card_face_back .ig_item_link:hover,
.image_grid.ig_cards_bg_alt_background .ig_card_face_back .ig_item_link:hover,
.image_grid.ig_cards_text_dark .ig_card_face_back .ig_item_link:hover {
    color: var(--color-accent-hover);
}

/* Audit finding (Batch 8F Round 2) — same light-mode forcing rule as the
   dedicated link above, for a WYSIWYG-embedded link inside .ig_card_back_body
   itself: the base, always-applied .ig_card_back_body a fix above sets
   inverse color unconditionally (correct for the back face's normal always-
   dark state), so it must be forced back to normal here once Cards
   Background Mode explicitly makes this face light instead. */
.image_grid.ig_cards_bg_background .ig_card_back_body a,
.image_grid.ig_cards_bg_alt_background .ig_card_back_body a,
.image_grid.ig_cards_text_dark .ig_card_back_body a {
    color: var(--color-accent);
}

.image_grid.ig_cards_bg_background .ig_card_back_body a:hover,
.image_grid.ig_cards_bg_alt_background .ig_card_back_body a:hover,
.image_grid.ig_cards_text_dark .ig_card_back_body a:hover {
    color: var(--color-accent-hover);
}

/* .ig_cards_bg_dark/.ig_cards_bg_accent/.ig_cards_text_light need no back-
   face rule — the back face's own base (always --color-bg-dark / inverse-
   soft body / inverse link) already matches dark/accent/light treatment
   exactly, with no competing lighter rule to beat. */

.image_grid.ig_cards_bg_background .ig_item_type_text .ig_item_inner {
    background-color: var(--color-bg);
}

.image_grid.ig_cards_bg_alt_background .ig_item_type_text .ig_item_inner {
    background-color: var(--color-bg-alt);
}

.image_grid.ig_cards_bg_dark .ig_item_type_text .ig_item_inner {
    background-color: var(--color-bg-dark);
}

.image_grid.ig_cards_bg_accent .ig_item_type_text .ig_item_inner {
    background-color: var(--color-accent);
}

.image_grid.ig_cards_bg_background .ig_item_text,
.image_grid.ig_cards_bg_alt_background .ig_item_text,
.image_grid.ig_cards_text_dark .ig_item_text {
    color: var(--color-text);
}

.image_grid.ig_cards_bg_background .ig_item_text h1, .image_grid.ig_cards_bg_background .ig_item_text h2,
.image_grid.ig_cards_bg_background .ig_item_text h3, .image_grid.ig_cards_bg_background .ig_item_text h4,
.image_grid.ig_cards_bg_background .ig_item_text h5, .image_grid.ig_cards_bg_background .ig_item_text h6,
.image_grid.ig_cards_bg_alt_background .ig_item_text h1, .image_grid.ig_cards_bg_alt_background .ig_item_text h2,
.image_grid.ig_cards_bg_alt_background .ig_item_text h3, .image_grid.ig_cards_bg_alt_background .ig_item_text h4,
.image_grid.ig_cards_bg_alt_background .ig_item_text h5, .image_grid.ig_cards_bg_alt_background .ig_item_text h6,
.image_grid.ig_cards_text_dark .ig_item_text h1, .image_grid.ig_cards_text_dark .ig_item_text h2,
.image_grid.ig_cards_text_dark .ig_item_text h3, .image_grid.ig_cards_text_dark .ig_item_text h4,
.image_grid.ig_cards_text_dark .ig_item_text h5, .image_grid.ig_cards_text_dark .ig_item_text h6 {
    color: var(--color-primary);
}

/* Audit finding (Batch 8F Round 2) — a WYSIWYG-embedded link inside
   .ig_item_text, independent of .ig_item_link below (the dedicated field). */
.image_grid.ig_cards_bg_background .ig_item_text a,
.image_grid.ig_cards_bg_alt_background .ig_item_text a,
.image_grid.ig_cards_text_dark .ig_item_text a {
    color: var(--color-accent);
}

.image_grid.ig_cards_bg_background .ig_item_text a:hover,
.image_grid.ig_cards_bg_alt_background .ig_item_text a:hover,
.image_grid.ig_cards_text_dark .ig_item_text a:hover {
    color: var(--color-accent-hover);
}

.image_grid.ig_cards_bg_background .ig_item_link,
.image_grid.ig_cards_bg_alt_background .ig_item_link,
.image_grid.ig_cards_text_dark .ig_item_link {
    color: var(--color-accent);
}

.image_grid.ig_cards_bg_background .ig_item_link:hover,
.image_grid.ig_cards_bg_alt_background .ig_item_link:hover,
.image_grid.ig_cards_text_dark .ig_item_link:hover {
    color: var(--color-accent-hover);
}

.image_grid.ig_cards_bg_dark .ig_item_text,
.image_grid.ig_cards_bg_accent .ig_item_text,
.image_grid.ig_cards_text_light .ig_item_text {
    color: var(--color-text-inverse-soft);
}

.image_grid.ig_cards_bg_dark .ig_item_text h1, .image_grid.ig_cards_bg_dark .ig_item_text h2,
.image_grid.ig_cards_bg_dark .ig_item_text h3, .image_grid.ig_cards_bg_dark .ig_item_text h4,
.image_grid.ig_cards_bg_dark .ig_item_text h5, .image_grid.ig_cards_bg_dark .ig_item_text h6,
.image_grid.ig_cards_bg_accent .ig_item_text h1, .image_grid.ig_cards_bg_accent .ig_item_text h2,
.image_grid.ig_cards_bg_accent .ig_item_text h3, .image_grid.ig_cards_bg_accent .ig_item_text h4,
.image_grid.ig_cards_bg_accent .ig_item_text h5, .image_grid.ig_cards_bg_accent .ig_item_text h6,
.image_grid.ig_cards_text_light .ig_item_text h1, .image_grid.ig_cards_text_light .ig_item_text h2,
.image_grid.ig_cards_text_light .ig_item_text h3, .image_grid.ig_cards_text_light .ig_item_text h4,
.image_grid.ig_cards_text_light .ig_item_text h5, .image_grid.ig_cards_text_light .ig_item_text h6 {
    color: var(--color-text-inverse);
}

.image_grid.ig_cards_bg_dark .ig_item_link,
.image_grid.ig_cards_bg_accent .ig_item_link,
.image_grid.ig_cards_text_light .ig_item_link {
    color: var(--color-text-inverse);
}

.image_grid.ig_cards_bg_dark .ig_item_text a,
.image_grid.ig_cards_bg_accent .ig_item_text a,
.image_grid.ig_cards_text_light .ig_item_text a {
    color: var(--color-text-inverse);
}

.image_grid.ig_cards_bg_dark .ig_item_text a:hover,
.image_grid.ig_cards_bg_accent .ig_item_text a:hover,
.image_grid.ig_cards_text_light .ig_item_text a:hover {
    color: var(--color-text-inverse);
    opacity: 0.8;
}

/* Custom mode's background-color: the hex travels from PHP as a CSS custom
   property (--ig-cards-custom-bg), not a direct inline background-color —
   the new class lives on the outer section (.image_grid) while the color
   needs to reach the front face, back face, AND the non-flip item inner,
   three separate nested elements; a custom property cascades to all three,
   a literal background-color on the section would reach none of them. */
.image_grid.ig_cards_bg_custom .ig_card_face_front,
.image_grid.ig_cards_bg_custom .ig_card_face_back,
.image_grid.ig_cards_bg_custom .ig_item_type_text .ig_item_inner {
    background-color: var(--ig-cards-custom-bg);
}


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

@media (max-width: 900px) {
    /* 5–6 col: cap at 3 on tablet */
    .ig_grid {
        grid-template-columns: repeat(min(var(--ig-cols, 3), 3), 1fr);
    }
}

@media (max-width: 768px) {
    .image_grid {
        padding-top: var(--space-12);
        padding-bottom: var(--space-12);
    }

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

    /* All column counts collapse to 2 on mobile */
    .ig_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* On phones show (Batch 8H). Declared once for the whole phone
       range (768px and below, including 480px and below) and for any
       computer setting 2–6. The two-class selectors outrank the
       one-class .ig_grid phone defaults here and at 480px below.
       Automatic (default, no class) keeps 2 per row, then 1 per row
       at 480px. */
    .ig_phone_cols_one .ig_grid {
        grid-template-columns: 1fr;
    }

    .ig_phone_cols_two .ig_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ig_ctas {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    /* Single column on very small screens */
    .ig_grid {
        grid-template-columns: 1fr;
    }

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

/* ── Small label above the title (Batch 8H, BATCH_8_PLAN.md §28) ──
   Optional; same small-caps style as the theme's other small labels
   (style.css §10c). Its color follows the title's color in every
   background context below, so it stays as readable as the title. */
.ig_header_label {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary);
    margin: 0 0 var(--space-3) 0;
}

/* Label color — mirrors the title color rules above. */
.ig_bg_dark .ig_header_label {
    color: var(--color-text-inverse);
}

.ig_text_light .ig_header_label {
    color: var(--color-text-inverse);
}

/* ── 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. */
.ig_header_label.ig_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);
}