/**
 * UCG Block — Image Text Columns
 * assets/css/blocks/image-text-columns.css
 *
 * STRUCTURE + THEME VARS ONLY — zero hardcoded colors or spacing values.
 * See BLOCK-CSS-GUIDE.md for the full color/var architecture.
 *
 * --ucg-columns-count is set inline by the template (from the "Content
 * Columns" field, 1-4) and drives the CSS grid column count. The number
 * of columns actually rendered comes from the Columns repeater — extra
 * items simply wrap onto additional rows. Image aspect ratio comes from
 * the .ratio-* utility class (ucg-global.css), driven by the Image Ratio
 * field.
 *
 * ── How colors reach this file ───────────────────────────────────────────────
 *
 *  PHP template calls ucg_get_theme_css_vars( $theme_slug ) and writes the
 *  result as an inline style on the <section> element, e.g.:
 *    style="--bg:#fff; --heading:#111; --text:#374151; …"
 *
 *  This creates a locally-scoped CSS custom-property scope on the section.
 *  All descendants inherit those variables. Every color rule below uses
 *  var() so it automatically resolves to the active theme.
 *
 * ── Card vs no-card ──────────────────────────────────────────────────────────
 *
 *  Like text-columns.css, Image Text Columns toggles card styling at the
 *  BLOCK level via modifier classes:
 *    .ucg-image-text-columns--card     → each .ucg-image-text-columns__item is a panel
 *    .ucg-image-text-columns--no-card  → plain columns on the block background
 *
 *  So every "card" color rule below is scoped as
 *  .ucg-image-text-columns--card .ucg-image-text-columns__item ... and every
 *  "block" color rule is scoped as .ucg-image-text-columns--no-card ...
 *  following the same --card-* / --btn-card-* vs block-level fallback
 *  chain convention used across all UCG blocks.
 *
 * Global tokens (--size-*, --btn-*, --global-border-radius, --brand-*)
 * come from :root{} output by theme-setting.php via wp_head.
 *
 * DO NOT add any hardcoded hex, rgb(), or named colors here.
 * DO NOT duplicate .ucg-btn rules — they live in ucg-global.css.
 */


/* ============================================================
   BLOCK ROOT
============================================================ */

.ucg-image-text-columns {
    background-color: var(--bg, var(--bg-block));
    color:            var(--text, var(--text-block-body));
}

.ucg-section.ucg-image-text-columns {
    padding-top:    var(--override-pt, var(--size-section-pt, 60px));
    padding-bottom: var(--override-pb, var(--size-section-pb, 60px));
}

@media (max-width: 767px) {
    .ucg-section.ucg-text {
        padding-top: var(--override-pt-mobile, var(--override-pt,calc(var(--size-section-pt, 60px) * 0.5)));
        padding-bottom: var(--override-pb-mobile, var(--override-pb,calc(var(--size-section-pb, 60px) * 0.5)));
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
     .ucg-section.ucg-text {
        padding-top: var(--override-pt-mobile, var(--override-pt,calc(var(--size-section-pt, 60px) * 0.75)));
        padding-bottom: var(--override-pb-mobile, var(--override-pb,calc(var(--size-section-pb, 60px) * 0.75)));
    }
}


/* ============================================================
   GRID
============================================================ */

.ucg-image-text-columns__grid {
    display:               grid;
    grid-template-columns: repeat(var(--ucg-columns-count, 4), 1fr);
    gap:                   var(--ucg-columns-gap, 32px);
    align-items:           start;
}

@media (max-width: 1024px) {
    .ucg-image-text-columns__grid {
        grid-template-columns: repeat(min(2, var(--ucg-columns-count, 4)), 1fr);
    }
}

@media (max-width: 600px) {
    .ucg-image-text-columns__grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   COLUMN ITEM
============================================================ */

.ucg-image-text-columns__item {
    display:        flex;
    flex-direction: column;
}

.ucg-text-align--left   .ucg-image-text-columns__body { text-align: left;   align-items: flex-start; }
.ucg-text-align--center .ucg-image-text-columns__body { text-align: center; align-items: center; }
.ucg-text-align--right  .ucg-image-text-columns__body { text-align: right;  align-items: flex-end; }

.ucg-image-text-columns__body {
    display:         flex;
    flex-direction:  column;
    flex:            1 1 auto;
}

/* With Card — panel background + border, following the same convention
   as .card in text-narrow-left-and-right.css. The image sits flush at
   the top of the card; only the body copy gets card padding. */
.ucg-image-text-columns--card .ucg-image-text-columns__item {
    background-color: var(--bg-secondary, var(--bg-card));
    border:            1px solid var(--card-border, var(--border-card, var(--border, var(--border-default))));
    border-radius:     var(--card-radius, var(--global-card-radius, 8px));
    overflow:          hidden;
}

.ucg-image-text-columns--card .ucg-image-text-columns__body {
    padding: var(--card-padding-tight, 24px);
}

/* Without Card — plain columns, no panel chrome. */
.ucg-image-text-columns--no-card .ucg-image-text-columns__item {
    background-color: transparent;
    border:            none;
}

.ucg-image-text-columns--no-card .ucg-image-text-columns__body {
    padding-top: 20px;
}


/* ============================================================
   IMAGE
============================================================ */

.ucg-image-text-columns__figure {
    margin:   0;
    width:    100%;
    overflow: hidden;
}

.ucg-image-text-columns__figure img {
    display:         block;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center center;
    border-radius:   var(--img-radius, 0);
}

.ucg-image-text-columns--card .ucg-image-text-columns__figure img {
    border-radius: 0;
}


/* ============================================================
   TYPOGRAPHY
============================================================ */

.ucg-image-text-columns__subhead {
    margin-top:    0;
    margin-bottom: 0.5em;
}

/* --ucg-columns-subhead-level is set inline per-item from the "Subhead
   Level" ACF field (h1-h6). Each level pulls its OWN Color Styling →
   On Block / On Card → H1…H6 selection, same convention as
   text-narrow-left-and-right.css, so the subhead color matches whatever
   heading level it's actually rendered as. */

.ucg-image-text-columns--no-card .ucg-image-text-columns__subhead,
.ucg-image-text-columns--no-card .ucg-image-text-columns__copy h1,
.ucg-image-text-columns--no-card .ucg-image-text-columns__copy h2,
.ucg-image-text-columns--no-card .ucg-image-text-columns__copy h3,
.ucg-image-text-columns--no-card .ucg-image-text-columns__copy h4,
.ucg-image-text-columns--no-card .ucg-image-text-columns__copy h5,
.ucg-image-text-columns--no-card .ucg-image-text-columns__copy h6 {
    color: var(--text-block-h3, var(--heading, var(--text-block-headings)));
}

.ucg-image-text-columns--no-card .ucg-image-text-columns__subhead.h1,
.ucg-image-text-columns--no-card .ucg-image-text-columns__copy h1 {
    color: var(--text-block-h1, var(--heading, var(--text-block-headings)));
}

.ucg-image-text-columns--no-card .ucg-image-text-columns__subhead.h2,
.ucg-image-text-columns--no-card .ucg-image-text-columns__copy h2 {
    color: var(--text-block-h2, var(--heading, var(--text-block-headings)));
}

.ucg-image-text-columns--no-card .ucg-image-text-columns__subhead.h4,
.ucg-image-text-columns--no-card .ucg-image-text-columns__copy h4 {
    color: var(--text-block-h4, var(--heading, var(--text-block-headings)));
}

.ucg-image-text-columns--no-card .ucg-image-text-columns__subhead.h5,
.ucg-image-text-columns--no-card .ucg-image-text-columns__copy h5 {
    color: var(--text-block-h5, var(--heading, var(--text-block-headings)));
}

.ucg-image-text-columns--no-card .ucg-image-text-columns__subhead.h6,
.ucg-image-text-columns--no-card .ucg-image-text-columns__copy h6 {
    color: var(--text-block-h6, var(--heading, var(--text-block-headings)));
}

.ucg-image-text-columns--card .ucg-image-text-columns__subhead,
.ucg-image-text-columns--card .ucg-image-text-columns__copy h1,
.ucg-image-text-columns--card .ucg-image-text-columns__copy h2,
.ucg-image-text-columns--card .ucg-image-text-columns__copy h3,
.ucg-image-text-columns--card .ucg-image-text-columns__copy h4,
.ucg-image-text-columns--card .ucg-image-text-columns__copy h5,
.ucg-image-text-columns--card .ucg-image-text-columns__copy h6 {
    color: var(--card-heading, var(--text-card-h3, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

.ucg-image-text-columns--card .ucg-image-text-columns__subhead.h1,
.ucg-image-text-columns--card .ucg-image-text-columns__copy h1 {
    color: var(--card-heading, var(--text-card-h1, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

.ucg-image-text-columns--card .ucg-image-text-columns__subhead.h2,
.ucg-image-text-columns--card .ucg-image-text-columns__copy h2 {
    color: var(--card-heading, var(--text-card-h2, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

.ucg-image-text-columns--card .ucg-image-text-columns__subhead.h4,
.ucg-image-text-columns--card .ucg-image-text-columns__copy h4 {
    color: var(--card-heading, var(--text-card-h4, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

.ucg-image-text-columns--card .ucg-image-text-columns__subhead.h5,
.ucg-image-text-columns--card .ucg-image-text-columns__copy h5 {
    color: var(--card-heading, var(--text-card-h5, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

.ucg-image-text-columns--card .ucg-image-text-columns__subhead.h6,
.ucg-image-text-columns--card .ucg-image-text-columns__copy h6 {
    color: var(--card-heading, var(--text-card-h6, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

.ucg-image-text-columns--no-card .ucg-image-text-columns__copy,
.ucg-image-text-columns--no-card .ucg-image-text-columns__copy p,
.ucg-image-text-columns--no-card .ucg-image-text-columns__copy li {
    color: var(--text, var(--text-block-body));
}

.ucg-image-text-columns--card .ucg-image-text-columns__copy,
.ucg-image-text-columns--card .ucg-image-text-columns__copy p,
.ucg-image-text-columns--card .ucg-image-text-columns__copy li {
    color: var(--card-text, var(--text-card-body, var(--text, var(--text-block-body))));
}

/* Bold text — no dedicated "bold" token, inherits the H2 slot per-context,
   same convention used in text-narrow-left-and-right.css. */
.ucg-image-text-columns--no-card .ucg-image-text-columns__copy strong,
.ucg-image-text-columns--no-card .ucg-image-text-columns__copy b {
    color: var(--text-block-h2, var(--heading, var(--text-block-headings)));
}

.ucg-image-text-columns--card .ucg-image-text-columns__copy strong,
.ucg-image-text-columns--card .ucg-image-text-columns__copy b {
    color: var(--card-heading, var(--text-card-headings, var(--heading, var(--text-block-headings))));
}

.ucg-image-text-columns__copy p:last-child {
    margin-bottom: 0;
}

.ucg-image-text-columns--no-card .ucg-image-text-columns__item a:not(.ucg-btn) {
    color: var(--highlight, var(--text-block-link, var(--highlight-main)));
}

.ucg-image-text-columns--no-card .ucg-image-text-columns__item a:not(.ucg-btn):hover {
    color: var(--highlight-hover, var(--text-block-link-hover, var(--highlight-secondary)));
}

.ucg-image-text-columns--card .ucg-image-text-columns__item a:not(.ucg-btn) {
    color: var(--text-card-link, var(--highlight, var(--highlight-main)));
}

.ucg-image-text-columns--card .ucg-image-text-columns__item a:not(.ucg-btn):hover {
    color: var(--text-card-link-hover, var(--highlight-hover, var(--highlight-secondary)));
}

.ucg-image-text-columns__item .highlight {
    color: var(--highlight, var(--highlight-main));
}

.ucg-image-text-columns__item .ucg-btn-wrap {
    margin-top:  auto;
    padding-top: 1em;
}


/* ============================================================
   BUTTONS
   No Card → buttons use btn-block-* theme keys.
   With Card → buttons use btn-card-* theme keys.
============================================================ */

.ucg-image-text-columns--no-card .ucg-btn.bbt-primary {
    background-color: var(--btn-block-surface, var(--btn-primary-bg, var(--brand-primary)));
    color:            var(--btn-block-text,    var(--btn-primary-color, var(--brand-white)));
    border-color:     var(--btn-block-stroke,  transparent);
}

.ucg-image-text-columns--no-card .ucg-btn.bbt-primary:hover {
    background-color: var(--btn-block-surface-hover, var(--btn-primary-bg-hover, var(--btn-block-surface, var(--brand-primary))));
    color:            var(--btn-block-text-hover,    var(--btn-primary-color-hover, var(--btn-block-text, var(--brand-white))));
    border-color:     var(--btn-block-stroke-hover,  transparent);
}

.ucg-image-text-columns--no-card .ucg-btn.bbt-secondary {
    color:        var(--btn-block-text,   var(--btn-secondary-color, var(--brand-primary)));
    border-color: var(--btn-block-stroke, currentColor);
}

.ucg-image-text-columns--no-card .ucg-btn.bbt-secondary:hover {
    background-color: var(--btn-block-surface-hover, transparent);
    color:            var(--btn-block-text-hover,    var(--btn-block-text, var(--brand-primary)));
    border-color:     var(--btn-block-stroke-hover,  currentColor);
}

.ucg-image-text-columns--no-card .ucg-btn.bbt-tertiary {
    color: var(--btn-block-text, var(--btn-tertiary-color, var(--brand-primary)));
}

.ucg-image-text-columns--no-card .ucg-btn.bbt-tertiary:hover {
    color: var(--btn-block-text-hover, var(--btn-block-text, var(--brand-primary)));
}

.ucg-image-text-columns--no-card .ucg-btn.bbt-quaternary {
    color:            var(--btn-block-text, inherit);
    border-color:     var(--btn-block-stroke, var(--border, var(--border-default)));
    background-color: var(--btn-block-surface);
}

.ucg-image-text-columns--no-card .ucg-btn.bbt-quaternary:hover {
    background-color: var(--btn-block-surface-hover, transparent);
    color:            var(--btn-block-text-hover, inherit);
    border-color:     var(--btn-block-stroke-hover, transparent);
}

.ucg-image-text-columns--card .ucg-btn.bbt-primary {
    background-color: var(--btn-card-surface, var(--btn-primary-bg, var(--brand-primary)));
    color:            var(--btn-card-text,    var(--btn-primary-color, var(--brand-white)));
    border-color:     var(--btn-card-stroke,  transparent);
}

.ucg-image-text-columns--card .ucg-btn.bbt-primary:hover {
    background-color: var(--btn-card-surface-hover, var(--btn-primary-bg-hover, var(--btn-card-surface, var(--brand-primary))));
    color:            var(--btn-card-text-hover,    var(--btn-primary-color-hover, var(--btn-card-text, var(--brand-white))));
    border-color:     var(--btn-card-stroke-hover,  transparent);
}

.ucg-image-text-columns--card .ucg-btn.bbt-secondary {
    color:        var(--btn-card-text,   var(--btn-secondary-color, var(--brand-primary)));
    border-color: var(--btn-card-stroke, currentColor);
}

.ucg-image-text-columns--card .ucg-btn.bbt-secondary:hover {
    background-color: var(--btn-card-surface-hover, transparent);
    color:            var(--btn-card-text-hover,    var(--btn-card-text, var(--brand-primary)));
    border-color:     var(--btn-card-stroke-hover,  currentColor);
}

.ucg-image-text-columns--card .ucg-btn.bbt-tertiary {
    color: var(--btn-card-text, var(--btn-tertiary-color, var(--brand-primary)));
}

.ucg-image-text-columns--card .ucg-btn.bbt-tertiary:hover {
    color: var(--btn-card-text-hover, var(--btn-card-text, var(--brand-primary)));
}

.ucg-image-text-columns--card .ucg-btn.bbt-quaternary {
    color:            var(--btn-card-text, inherit);
    border-color:     var(--btn-card-stroke, var(--border, var(--border-default)));
    background-color: var(--btn-card-surface);
}

.ucg-image-text-columns--card .ucg-btn.bbt-quaternary:hover {
    background-color: var(--btn-card-surface-hover, transparent);
    color:            var(--btn-card-text-hover, inherit);
    border-color:     var(--btn-card-stroke-hover, transparent);
}


/* ============================================================
   ICONS — block and card contexts
============================================================ */

.ucg-image-text-columns--no-card .ucg-image-text-columns__item svg,
.ucg-image-text-columns--no-card .ucg-image-text-columns__item .icon,
.ucg-image-text-columns--no-card .ucg-image-text-columns__item .ucg-icon {
    color: var(--icon, var(--icon-accent));
    fill:  var(--icon, var(--icon-accent));
}

.ucg-image-text-columns--card .ucg-image-text-columns__item svg,
.ucg-image-text-columns--card .ucg-image-text-columns__item .icon,
.ucg-image-text-columns--card .ucg-image-text-columns__item .ucg-icon {
    color: var(--icon, var(--icon-neutral, var(--icon-accent)));
    fill:  var(--icon, var(--icon-neutral, var(--icon-accent)));
}


/* ============================================================
   DIVIDERS & BORDERS
============================================================ */

.ucg-image-text-columns hr,
.ucg-image-text-columns .divider {
    border-color: var(--divider, var(--border, var(--border-default)));
}

.ucg-image-text-columns .border,
.ucg-image-text-columns .has-border {
    border-color: var(--border, var(--border-default));
}

.ucg-image-text-columns--card .ucg-image-text-columns__item.has-border {
    border-color: var(--card-border, var(--border-card, var(--border, var(--border-default))));
}


/* ============================================================
   BACKGROUND HELPERS
============================================================ */

.ucg-image-text-columns .bg-primary   { background-color: var(--bg, var(--bg-block)); }
.ucg-image-text-columns .bg-secondary { background-color: var(--bg-secondary, var(--bg-card)); }
.ucg-image-text-columns .bg-tint      { background-color: var(--bg-tint); }
.ucg-image-text-columns .bg-shade     { background-color: var(--bg-shade); }