/* =============================================================================
   Widget: Media Text
   BEM root: .gtea-media-text
   ============================================================================= */

/* ── Elementor wrapper height chain ─────────────────────────────────────────── */
/*
 * For % heights on columns to resolve, every ancestor in the chain must have
 * a defined height. Elementor inserts two wrapper divs between the section/column
 * and our widget root. Setting height: 100% on them ensures the chain is unbroken
 * when the user sets a min-height or height on the columns control.
 */

.elementor-widget-gtea_widget_media_text,
.elementor-widget-gtea_widget_media_text > .elementor-widget-container {
    height: 100%;
}

/* ── Widget root ─────────────────────────────────────────────────────────────── */

.gtea-media-text {
    width: 100%;
    height: 100%; /* propagate height to columns so % heights on children work */
}

/* ── Columns container ───────────────────────────────────────────────────────── */
/*
 * display: flex + flex-wrap: wrap so columns sit side-by-side when there is
 * enough space, and stack vertically when the configured widths (or the
 * available container width) force them to wrap.
 *
 * flex-direction and gap are driven by Elementor responsive controls.
 */

.gtea-media-text__columns {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%; /* propagate so % height on individual columns resolves correctly */
}

/* ── Individual column ───────────────────────────────────────────────────────── */

.gtea-media-text__col {
    display: flex;
    flex-direction: column;
    min-width: 0; /* prevent flex overflow on long content */
}

/* If no explicit width is set via Elementor controls, columns share space equally */
.gtea-media-text__col--a,
.gtea-media-text__col--b {
    flex: 1 1 0;
}

/* ── Image outer (alignment wrapper) ────────────────────────────────────────── */

.gtea-media-text__image-outer {
    display: flex;
    width: 100%;
}

/* ── Image link ──────────────────────────────────────────────────────────────── */
/*
 * image-outer is always the direct flex child of the column.
 * When the image has a link, image-link sits inside image-outer as its only child.
 * flex: 1 1 auto ensures the link fills the outer div so the image is fully clickable.
 */

.gtea-media-text__image-link {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    text-decoration: none;
}

/* ── Image wrap (picture element) ───────────────────────────────────────────── */

.gtea-media-text__image-wrap {
    display: block;
    width: 100%;
    overflow: hidden; /* respect border-radius on the picture */
}

/* ── Image ───────────────────────────────────────────────────────────────────── */

.gtea-media-text__image {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Items list ──────────────────────────────────────────────────────────────── */

.gtea-media-text__list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* ── List item ───────────────────────────────────────────────────────────────── */

.gtea-media-text__list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

/* ── List item icon ──────────────────────────────────────────────────────────── */

.gtea-media-text__list-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.gtea-media-text__list-item-icon svg,
.gtea-media-text__list-item-icon i {
    display: block;
}

/* ── List item text ──────────────────────────────────────────────────────────── */

.gtea-media-text__list-item-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Items List animation ────────────────────────────────────────────────────── */
/*
 * Keyframe-based stagger. PHP sets animation-delay and animation-duration as
 * inline styles on each <li>. JS only adds .gtea-list--playing to the <ul>
 * when it enters the viewport, changing animation-play-state paused → running.
 * fill-mode: both keeps the item invisible during the delay and visible after.
 */

@keyframes gtea-item-up   { from { opacity: 0; transform: translateY(24px);  } to { opacity: 1; transform: none; } }
@keyframes gtea-item-ltr  { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes gtea-item-rtl  { from { opacity: 0; transform: translateX(24px);  } to { opacity: 1; transform: none; } }
@keyframes gtea-item-down { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }

/* Hidden, paused initial state */
.gtea-media-text__list--animated .gtea-media-text__list-item[data-anim-state] {
    opacity: 0;
    animation-fill-mode: both;
    animation-play-state: paused;
    animation-timing-function: ease-out;
}

/* Per-direction keyframe name */
.gtea-media-text__list[data-items-anim="up"]   .gtea-media-text__list-item[data-anim-state] { animation-name: gtea-item-up; }
.gtea-media-text__list[data-items-anim="ltr"]  .gtea-media-text__list-item[data-anim-state] { animation-name: gtea-item-ltr; }
.gtea-media-text__list[data-items-anim="rtl"]  .gtea-media-text__list-item[data-anim-state] { animation-name: gtea-item-rtl; }
.gtea-media-text__list[data-items-anim="down"] .gtea-media-text__list-item[data-anim-state] { animation-name: gtea-item-down; }

/* Trigger: JS adds this class on viewport entry */
.gtea-media-text__list--animated.gtea-list--playing .gtea-media-text__list-item[data-anim-state] {
    animation-play-state: running;
}

/* ── Items List scroll-driven animation ─────────────────────────────────────── */
/*
 * In scroll mode there are no CSS keyframes. JS sets opacity and transform
 * as inline styles driven by scroll progress. The only CSS needed is the
 * hidden initial state and a will-change hint.
 */

.gtea-media-text__list--scroll-animated .gtea-media-text__list-item[data-anim-state] {
    opacity: 0;
    will-change: opacity, transform;
}

/* ── Pre-title outer (alignment wrapper) ────────────────────────────────────── */

.gtea-media-text__pretitle-outer {
    display: flex;
    width: 100%;
}

/* ── Pre-title ───────────────────────────────────────────────────────────────── */

.gtea-media-text__pretitle {
    margin: 0;
}

/* ── Title ───────────────────────────────────────────────────────────────────── */

.gtea-media-text__title {
    margin: 0;
}

/* ── Description outer (alignment wrapper) ──────────────────────────────────── */

.gtea-media-text__description-outer {
    display: flex;
    width: 100%;
}

/* ── Description ─────────────────────────────────────────────────────────────── */

.gtea-media-text__description {
    width: 100%;
}

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

.gtea-media-text__ctas {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.gtea-media-text__cta-primary,
.gtea-media-text__cta-secondary {
    display: inline-flex;
}