/**
 * UCG Block — Text Narrow Left and Right
 * assets/css/blocks/text-narrow-left-and-right.css
 *
 * STRUCTURE + THEME VARS ONLY — zero hardcoded colors or spacing values.
 *
 * ── 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.
 *
 * ── Fallback chain convention ─────────────────────────────────────────────────
 *
 *  Every color var uses at least two fallbacks:
 *    1. Legacy alias   (--card-heading)         ← short var set by PHP overrides
 *    2. Semantic long  (--text-card-headings)    ← set by ucg_get_theme_css_vars
 *    3. Block fallback (--heading / --text)      ← broadest available colour
 *
 *  This guarantees all four themes (light / dark / accent / white) always
 *  resolve to something meaningful, and per-block ACF overrides always win.
 *
 * ── Per-block ACF overrides ───────────────────────────────────────────────────
 *
 *  card_heading_color → sets --card-heading AND --text-card-headings
 *  card_text_color    → sets --card-text    AND --text-card-body
 *
 *  These are appended to the inline style AFTER $theme_vars so they always
 *  override the theme without touching any other block on the page.
 *
 * ── Button theming ────────────────────────────────────────────────────────────
 *
 *  Buttons inside the card use "btn-card-*" theme keys.
 *  Buttons on the block background use "btn-block-*" theme keys.
 *  Both sets are resolved by ucg_get_theme_css_vars() via the full
 *  $ucg_theme array and appear as inline CSS vars on the section.
 *
 * 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
   Background + base text from theme.
============================================================ */

.ucg-text-narrow-left-and-right {
    background-color: var(--bg, var(--bg-block));
    color:            var(--text, var(--text-block-body));
}

/* Per-block vertical padding override (Setting → Override Block Vertical
   Padding Desktop/Mobile). Falls back to the global .ucg-section padding
   (--size-section-pt/pb from Sizes & Spaces) when left blank. */
.ucg-section.ucg-text-narrow-left-and-right {
    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)));
    }
}

/* ============================================================
   BLOCK-LEVEL TYPOGRAPHY
   Headings and body text that sit on the block background
   (i.e. NOT inside a .card / .ucg-card).
============================================================ */

/* Each level pulls its OWN Color Styling → "Text / On Block" → H1…H6
   selection (text_block_h1 … text_block_h6). Previously this rule only
   read --heading / --text-block-headings, neither of which is backed by
   a real ACF field, so headings on the block background (outside a card)
   never actually picked up a theme color — they silently fell back to
   the browser/theme default regardless of Light/Dark/Accent/White. */

.ucg-text-narrow-left-and-right h1 {
    color: var(--text-block-h1, var(--heading, var(--text-block-headings)));
}

.ucg-text-narrow-left-and-right h2 {
    color: var(--text-block-h2, var(--heading, var(--text-block-headings)));
}

.ucg-text-narrow-left-and-right h3 {
    color: var(--text-block-h3, var(--heading, var(--text-block-headings)));
}

.ucg-text-narrow-left-and-right h4 {
    color: var(--text-block-h4, var(--heading, var(--text-block-headings)));
}

.ucg-text-narrow-left-and-right h5 {
    color: var(--text-block-h5, var(--heading, var(--text-block-headings)));
}

.ucg-text-narrow-left-and-right h6 {
    color: var(--text-block-h6, var(--heading, var(--text-block-headings)));
}

.ucg-text-narrow-left-and-right p,
.ucg-text-narrow-left-and-right li {
    color: var(--text, var(--text-block-body));
}

.ucg-text-narrow-left-and-right strong,
.ucg-text-narrow-left-and-right b {
    /* No dedicated "bold" token — inherit the H2 slot, same convention
       used for bold text inside cards (see CARD BODY TEXT below). */
    color: var(--text-block-h2, var(--heading, var(--text-block-headings)));
}


/* ============================================================
   LINKS & HIGHLIGHT — block background context
============================================================ */

.ucg-text-narrow-left-and-right a:not(.ucg-btn) {
    color: var(--highlight, var(--text-block-link, var(--highlight-main)));
}

.ucg-text-narrow-left-and-right a:not(.ucg-btn):hover {
    color: var(--highlight-hover, var(--text-block-link-hover, var(--highlight-secondary)));
}

.ucg-text-narrow-left-and-right .highlight {
    color: var(--highlight, var(--highlight-main));
}


/* ============================================================
   CARD — container background & border
============================================================ */

.ucg-text-narrow-left-and-right .card,
.ucg-text-narrow-left-and-right .ucg-card {
    background-color: var(--bg-secondary, var(--bg-card));
    border-color:     var(--card-border, var(--border-card, var(--border, var(--border-default))));
    border-radius:    var(--card-radius, var(--global-card-radius, 8px));
}


/* ============================================================
   CARD HEADING
   Explicit .ucg-media-text__card-heading element (from ACF text field)
   + any heading tags authored inside the wysiwyg copy area.

   Each level (H1–H6) resolves to its OWN Color Styling → "Text / On Card"
   selection (text_card_h1 … text_card_h6), so cards can use a different
   heading color per level, exactly like block-level headings do.

   Fallback chain (per level, e.g. H1):
     --card-heading   (per-block ACF override — wins for ALL levels)
     --text-card-h1   (theme Color Styling → Text / On Card → H1)
     --text-card-headings (legacy catch-all, if ever set)
     --heading        (legacy alias → text_block_headings)
     --text-block-headings (semantic long form)
============================================================ */

.ucg-text-narrow-left-and-right .card .ucg-media-text__card-heading,
.ucg-text-narrow-left-and-right .ucg-card .ucg-media-text__card-heading {
    color: var(--card-heading, var(--text-card-h2, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

.ucg-text-narrow-left-and-right .card h1,
.ucg-text-narrow-left-and-right .ucg-card h1 {
    color: var(--card-heading, var(--text-card-h1, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

.ucg-text-narrow-left-and-right .card h2,
.ucg-text-narrow-left-and-right .ucg-card h2 {
    color: var(--card-heading, var(--text-card-h2, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

.ucg-text-narrow-left-and-right .card h3,
.ucg-text-narrow-left-and-right .ucg-card h3 {
    color: var(--card-heading, var(--text-card-h3, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

.ucg-text-narrow-left-and-right .card h4,
.ucg-text-narrow-left-and-right .ucg-card h4 {
    color: var(--card-heading, var(--text-card-h4, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

.ucg-text-narrow-left-and-right .card h5,
.ucg-text-narrow-left-and-right .ucg-card h5 {
    color: var(--card-heading, var(--text-card-h5, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

.ucg-text-narrow-left-and-right .card h6,
.ucg-text-narrow-left-and-right .ucg-card h6 {
    color: var(--card-heading, var(--text-card-h6, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

/* ─── Display1 / Display2 inside a card ─────────────────────────────────────
   .display1 / .display2 are global utility classes (ucg-global.css). When
   authored inside a card, pull their color from the card-specific
   Display1/Display2 selections instead of the block-level ones. */

.ucg-text-narrow-left-and-right .card .display1,
.ucg-text-narrow-left-and-right .ucg-card .display1 {
    color: var(--card-heading, var(--text-card-display1, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

.ucg-text-narrow-left-and-right .card .display2,
.ucg-text-narrow-left-and-right .ucg-card .display2 {
    color: var(--card-heading, var(--text-card-display2, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}


/* ============================================================
   CARD BODY TEXT
   Fallback chain:
     --card-text      (per-block ACF override)
     --text-card-body (theme Color Styling → card body)
     --text           (legacy alias → text_block_body)
     --text-block-body (semantic long form)
============================================================ */

.ucg-text-narrow-left-and-right .card p,
.ucg-text-narrow-left-and-right .card li,
.ucg-text-narrow-left-and-right .card span,
.ucg-text-narrow-left-and-right .ucg-card p,
.ucg-text-narrow-left-and-right .ucg-card li,
.ucg-text-narrow-left-and-right .ucg-card span {
    color: var(--card-text, var(--text-card-body, var(--text, var(--text-block-body))));
}

.ucg-text-narrow-left-and-right .card strong,
.ucg-text-narrow-left-and-right .card b,
.ucg-text-narrow-left-and-right .ucg-card strong,
.ucg-text-narrow-left-and-right .ucg-card b {
    /* Bold text inside cards inherits the card heading color for visual weight */
    color: var(--card-heading, var(--text-card-headings, var(--heading, var(--text-block-headings))));
}


/* ============================================================
   CARD LINKS
   Uses card-specific link vars from Color Styling.
============================================================ */

.ucg-text-narrow-left-and-right .card a:not(.ucg-btn),
.ucg-text-narrow-left-and-right .ucg-card a:not(.ucg-btn) {
    color: var(--text-card-link, var(--highlight, var(--highlight-main)));
}

.ucg-text-narrow-left-and-right .card a:not(.ucg-btn):hover,
.ucg-text-narrow-left-and-right .ucg-card a:not(.ucg-btn):hover {
    color: var(--text-card-link-hover, var(--highlight-hover, var(--highlight-secondary)));
}


/* ============================================================
   BUTTONS — ON BLOCK BACKGROUND
   Uses btn_block_* theme keys resolved by ucg_get_theme_css_vars().
   These appear on the section as --btn-block-surface, --btn-block-text, etc.

   The .ucg-btn.bbt-* base colors live in ucg-global.css.
   Here we only inject the theme-specific token overrides.
============================================================ */

/* Primary button on block background */
.ucg-text-narrow-left-and-right > .pg-container .ucg-btn.bbt-primary,
.ucg-text-narrow-left-and-right > .ucg-container .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-text-narrow-left-and-right > .pg-container .ucg-btn.bbt-primary:hover,
.ucg-text-narrow-left-and-right > .ucg-container .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);
}


/* ============================================================
   BUTTONS — INSIDE CARD
   Uses btn_card_* theme keys for all four themes.
   Applied to any .ucg-btn inside .card or .ucg-card within this block.
============================================================ */

.ucg-text-narrow-left-and-right .card  .ucg-btn.bbt-primary,
.ucg-text-narrow-left-and-right .ucg-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-text-narrow-left-and-right .card  .ucg-btn.bbt-primary:hover,
.ucg-text-narrow-left-and-right .ucg-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);
}

/* Secondary button inside card */
.ucg-text-narrow-left-and-right .card  .ucg-btn.bbt-secondary,
.ucg-text-narrow-left-and-right .ucg-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-text-narrow-left-and-right .card  .ucg-btn.bbt-secondary:hover,
.ucg-text-narrow-left-and-right .ucg-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);
}

/* Tertiary button inside card */
.ucg-text-narrow-left-and-right .card  .ucg-btn.bbt-tertiary,
.ucg-text-narrow-left-and-right .ucg-card .ucg-btn.bbt-tertiary {
    color: var(--btn-card-text, var(--btn-tertiary-color, var(--brand-primary)));
}

.ucg-text-narrow-left-and-right .card  .ucg-btn.bbt-tertiary:hover,
.ucg-text-narrow-left-and-right .ucg-card .ucg-btn.bbt-tertiary:hover {
    color: var(--btn-card-text-hover, var(--btn-card-text, var(--brand-primary)));
}

/* Quaternary button inside card */
.ucg-text-narrow-left-and-right .card  .ucg-btn.bbt-quaternary,
.ucg-text-narrow-left-and-right .ucg-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-text-narrow-left-and-right .card  .ucg-btn.bbt-quaternary:hover,
.ucg-text-narrow-left-and-right .ucg-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-text-narrow-left-and-right svg,
.ucg-text-narrow-left-and-right .icon,
.ucg-text-narrow-left-and-right .ucg-icon {
    color: var(--icon, var(--icon-accent));
    fill:  var(--icon, var(--icon-accent));
}

/* Icons inside card can use a neutral icon color if defined */
.ucg-text-narrow-left-and-right .card  svg,
.ucg-text-narrow-left-and-right .card  .icon,
.ucg-text-narrow-left-and-right .card  .ucg-icon,
.ucg-text-narrow-left-and-right .ucg-card svg,
.ucg-text-narrow-left-and-right .ucg-card .icon,
.ucg-text-narrow-left-and-right .ucg-card .ucg-icon {
    color: var(--icon, var(--icon-neutral, var(--icon-accent)));
    fill:  var(--icon, var(--icon-neutral, var(--icon-accent)));
}


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

.ucg-text-narrow-left-and-right hr,
.ucg-text-narrow-left-and-right .divider {
    border-color: var(--divider, var(--border, var(--border-default)));
}

.ucg-text-narrow-left-and-right .border,
.ucg-text-narrow-left-and-right .has-border {
    border-color: var(--border, var(--border-default));
}

/* Card border */
.ucg-text-narrow-left-and-right .card.has-border,
.ucg-text-narrow-left-and-right .ucg-card.has-border {
    border-color: var(--card-border, var(--border-card, var(--border, var(--border-default))));
}


/* ============================================================
   TABS — inside card or block
   Uses ui_tab_* keys from Color Styling.
============================================================ */

/* Tab surface */
.ucg-text-narrow-left-and-right .ucg-tab,
.ucg-text-narrow-left-and-right .tab-item {
    background-color: var(--ui-tab-surface-inactive, transparent);
    color:            var(--ui-tab-text-inactive, var(--text, var(--text-block-body)));
    border-color:     var(--ui-tab-border-inactive, var(--border, var(--border-default)));
}

.ucg-text-narrow-left-and-right .ucg-tab.active,
.ucg-text-narrow-left-and-right .ucg-tab[aria-selected="true"],
.ucg-text-narrow-left-and-right .tab-item.active,
.ucg-text-narrow-left-and-right .tab-item[aria-selected="true"] {
    background-color: var(--ui-tab-surface-active, var(--bg-secondary, var(--bg-card)));
    color:            var(--ui-tab-text-active, var(--heading, var(--text-block-headings)));
    border-color:     var(--ui-tab-border-active, var(--highlight, var(--highlight-main)));
}

/* Tab underline / indicator line */
.ucg-text-narrow-left-and-right .tab-underline,
.ucg-text-narrow-left-and-right .ucg-tab-underline {
    background-color: var(--ui-tab-border-underline, var(--highlight, var(--highlight-main)));
}

/* Tabs inside a card use the card surface variant */
.ucg-text-narrow-left-and-right .card  .ucg-tab.active,
.ucg-text-narrow-left-and-right .ucg-card .ucg-tab.active {
    background-color: var(--ui-tab-surface-card, var(--bg-secondary, var(--bg-card)));
}


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

.ucg-text-narrow-left-and-right .bg-primary   { background-color: var(--bg, var(--bg-block)); }
.ucg-text-narrow-left-and-right .bg-secondary { background-color: var(--bg-secondary, var(--bg-card)); }
.ucg-text-narrow-left-and-right .bg-tint      { background-color: var(--bg-tint); }
.ucg-text-narrow-left-and-right .bg-shade     { background-color: var(--bg-shade); }


/* ============================================================
   BLOCK WRAPPER
============================================================ */

.ucg-media-text {
    display: block;
    width:   100%;
}


/* ============================================================
   TWO-COLUMN ROW
============================================================ */

.ucg-media-text__row {
    display:        flex;
    flex-direction: row;
    align-items:    stretch;
    min-height:     var(--ucg-row-min-height, 560px);
}


/* ============================================================
   CONTENT COLUMN
   Background resolves to the card background (bg-secondary / bg-card)
   because the column carries the .card class in the markup.
   The bare background-color rule below is the fallback for when no
   .card class is present (e.g. plain block layout).
============================================================ */

.ucg-media-text__content {
    /* Width comes from the .ucg-col-* class (Content Column field) added
       by the template — see _utilities.css / ucg-global.css for the grid. */
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    /* Default: use block bg. Overridden by .card rule in CARDS section. */
    background-color: var(--bg, var(--bg-block));
    color:            var(--text, var(--text-block-body));
}

.ucg-media-text__content-inner {
    width:      100%;
    padding:    var(--card-padding-roomy, 48px 56px);
    text-align: var(--ucg-text-align, left);
}

/* Card heading element (from ACF card_heading_text field) */
.ucg-media-text__card-heading {
    margin-top:    0;
    margin-bottom: 0.5em;
    color: var(--card-heading, var(--text-card-headings, var(--heading, var(--text-block-headings))));
}


/* ── Vertical alignment modifiers ───────────────────────────────────────────── */

.ucg-media-text__row.top    .ucg-media-text__content.card { justify-content: flex-start;  }
.ucg-media-text__row.center .ucg-media-text__content.card { justify-content: center;      }
.ucg-media-text__row.bottom .ucg-media-text__content.card { justify-content: flex-end;    }


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

.ucg-media-text__media {
    /* Width comes from the complementary .ucg-col-* class (12 - Content
       Column) added by the template. */
    overflow:  hidden;
    position:  relative;
}

.ucg-media-text__figure {
    margin:  0;
    padding: 0;
    inset:   0;
    width:   100%;
    height:  100%;
}

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


/* ============================================================
   IMAGE SLIDER (Slick Carousel)
   Only appears when the Gallery field has 2+ images — a single image
   renders as plain static markup with no slider chrome or JS.

   Structure:
     .ucg-media-slider              → slick root (one per slide before init)
       .ucg-media-slider__slide     → one per gallery image
         .ucg-media-text__figure    → existing image wrapper (unchanged)

   Navigation is entirely CSS-driven off data-slider-style, set from the
   "Slider style" ACF field (dotted | arrow):
     dotted → pagination dots (.slick-dots)
     arrow  → prev/next buttons (.ucg-slider-arrow, fa icons via JS)
============================================================ */

.ucg-media-slider {
    position: relative;
    width:    100%;
    height:   100%;
}

.ucg-media-slider__slide {
    position: relative;
    width:    100%;
    height:   100%;
}

/* Before Slick initializes, stack slides manually so only the first one
   shows — prevents a flash of every slide rendered on top of each other. */
.ucg-media-slider--active:not(.slick-initialized) {
    display: flex;
}

.ucg-media-slider--active:not(.slick-initialized) .ucg-media-slider__slide {
    display: none;
    width:   100%;
}

.ucg-media-slider--active:not(.slick-initialized) .ucg-media-slider__slide:first-child {
    display: block;
}

/* Once Slick has initialized, let it own layout/sizing of slides & track. */
.ucg-media-slider.slick-initialized,
.ucg-media-slider.slick-initialized .slick-list,
.ucg-media-slider.slick-initialized .slick-track {
    height: 100%;
}

.ucg-media-slider.slick-initialized .slick-slide {
    height: 100%;
}

.ucg-media-slider.slick-initialized .slick-slide > div {
    height: 100%;
}

/* ── Arrows ──────────────────────────────────────────────────────────────── */

.ucg-media-slider .ucg-slider-arrow {
    position:         absolute;
    top:              50%;
    z-index:          2;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            40px;
    height:           40px;
    padding:          0;
    border:           none;
    border-radius:    50%;
    background-color: var(--bg, rgba(255, 255, 255, 0.85));
    color:            var(--heading, var(--text-block-headings));
    font-size:        18px;
    line-height:      1;
    cursor:           pointer;
    transform:        translateY(-50%);
    transition:       background-color 0.2s ease, opacity 0.2s ease;
}

.ucg-media-slider .ucg-slider-arrow:hover {
    background-color: var(--highlight, var(--highlight-main));
    color:            var(--brand-white, #fff);
}

.ucg-media-slider .ucg-slider-arrow--prev { left:  16px; }
.ucg-media-slider .ucg-slider-arrow--next { right: 16px; }

.ucg-media-slider .ucg-slider-arrow.slick-disabled {
    opacity:        0.4;
    pointer-events:  none;
}

/* ── Dots ────────────────────────────────────────────────────────────────── */

.ucg-media-slider .slick-dots {
    position:        absolute;
    left:            0;
    right:           0;
    bottom:          16px;
    z-index:         2;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    margin:          0;
    padding:         0;
    list-style:      none;
}

.ucg-media-slider .slick-dots li {
    display: flex;
    margin:  0;
}

.ucg-media-slider .slick-dots li button {
    width:            9px;
    height:           9px;
    padding:          0;
    border:           none;
    border-radius:    50%;
    background-color: var(--bg, rgba(255, 255, 255, 0.6));
    color:            transparent;
    font-size:        0;
    cursor:            pointer;
    transition:        background-color 0.2s ease, transform 0.2s ease;
}

.ucg-media-slider .slick-dots li.slick-active button {
    background-color: var(--highlight, var(--highlight-main));
    transform:         scale(1.2);
}


/* ============================================================
   MODIFIER: image LEFT, content RIGHT
============================================================ */

.ucg-media-text--img-left .ucg-media-text__row {
    flex-direction: row-reverse;
}


/* ============================================================
   TABLET  (768px – 1024px)
============================================================ */

@media (max-width: 1024px) {
    .ucg-media-text__row {
        min-height: 480px;
    }
    .ucg-media-text__content-inner {
        max-width: 100%;
        padding:   var(--card-padding-roomy, 40px);
    }
}


/* ============================================================
   MOBILE  (<768px) — stack vertically, image on top
============================================================ */

@media (max-width: 767px) {
    .ucg-media-text__row,
    .ucg-media-text--img-left .ucg-media-text__row {
        flex-direction: column;
        min-height:     unset;
    }

    .ucg-media-text__media {
        flex:      none;
        max-width: 100%;
        width:     100%;
        height:    260px;
        position:  relative;
        order:     -1;
    }

    .ucg-media-text__figure {
        position: relative;
        height:   260px;
    }

    .ucg-media-text__content {
        flex:            none;
        max-width:       100%;
        width:           100%;
        justify-content: flex-start;
    }

    .ucg-media-text__content-inner {
        padding: var(--card-padding-tight, 36px 24px);
    }
}


.ucg-text-narrow-left-and-right .card .ucg-btn.bbt-tertiary:hover i.fa-solid.fa-arrow-right.icon {
    color: var(--btn-card-text-hover, var(--btn-card-text, var(--brand-primary)));
}