/* ==========================================================================
   text-widget.css
   Text Widget, Stat Widget and Icon Widget components, and the Text Hero
   width. Their type styles come from typography.css.

   01. Text Widget
   02. Stat Widget
   03. Icon Widget (layout only; icons come from icon.css)
   04. Text Hero
   ========================================================================== */

/* ==== 01. Text Widget ==== */
.elementor .text-widget {
    display: flex;
    flex-direction: column;
    gap: var(--gap-16);
    margin: 0;
    padding: 0;
    max-width: 660px !important;
}

/* Size variants */
.elementor .text-widget.tw-large {
    gap: var(--gap-20) !important;
}

.elementor .text-widget.tw-small {
    gap: var(--gap-8) !important;
}

/* Same layout when the widget is used inside a Loop Grid */
.elementor .text-widget > .e-con-inner {
    display: flex;
    flex-direction: column;
    gap: var(--gap-16);
    margin: 0;
    padding: 0;
    max-width: 660px !important;
}

.elementor .text-widget.tw-large > .e-con-inner {
    gap: var(--gap-20) !important;
}

.elementor .text-widget.tw-small > .e-con-inner {
    gap: var(--gap-8) !important;
}

.elementor .text-widget.tw-large .btn-container {
    /* The widget gap handles spacing, so no top margin */
    margin-top: 0px;
    padding-top: 20px;
}

.elementor .text-widget.tw-small .btn-container {
    /* The widget gap handles spacing, so no top margin */
    margin-top: 0px;
    padding-top: 8px;
}

/* Buttons area */
.elementor .text-widget .btn-container {
    display: flex;
    align-items: center;
    gap: var(--gap-20);
    padding: 12px 0 0 0;
    margin: 0;
}

.elementor .card-image .text-widget .btn-container {
    align-items: flex-start !important;
}

/* Inverse */
/* Works when .inverse is on the widget itself OR any ancestor container */
.elementor .text-widget.inverse .headline,
.elementor .inverse .text-widget .headline {
    color: var(--content-primary-inverse) !important;
}

/* Invert color when .inverse is on .overline itself */
.elementor .text-widget .overline.inverse .elementor-heading-title,  
/* Invert when .inverse is on the .text-widget container */
.elementor .text-widget.inverse .overline .elementor-heading-title,  
/* Invert when any ancestor has .inverse */
.elementor .inverse .text-widget .overline .elementor-heading-title {
    color: var(--content-primary-inverse);
}

/* Inverse: when .inverse is on .body, .text-widget, or any parent */
.elementor .text-widget .body.inverse .elementor-heading-title,
.elementor .text-widget.inverse .body .elementor-heading-title,
.elementor .inverse .text-widget .body .elementor-heading-title {
    color: var(--content-secondary-inverse);
}

/* ==== 02. Stat Widget ==== */
.elementor .stat-widget {
    margin: 0;
    padding: 0 0 0 16px;
    border-left: 1px solid var(--line-primary);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Reset Elementor heading styles so the stat widget controls type */
.elementor .stat-widget .headline .elementor-widget-container > .elementor-heading-title,
.elementor .stat-widget .headline .elementor-widget-container > h1,
.elementor .stat-widget .headline .elementor-widget-container > h2,
.elementor .stat-widget .headline .elementor-widget-container > h3,
.elementor .stat-widget .headline .elementor-widget-container > h4,
.elementor .stat-widget .headline .elementor-widget-container > h5,
.elementor .stat-widget .headline .elementor-widget-container > h6,
.elementor .stat-widget .body .elementor-widget-container > .elementor-heading-title {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-transform: inherit;
    margin: 0;
}

/* Variants */
.elementor .stat-widget.sw-large {
    gap: 12px;
    padding-left: 20px;
}

.elementor .stat-widget.sw-small {
    gap: 4px;
    padding-left: 12px;
}

/* Inverse */
.elementor .stat-widget.inverse {
    border-left-color: var(--line-alpha-inverse);
}
.elementor .stat-widget.inverse .headline {
    color: var(--content-primary-inverse);
}
.elementor .stat-widget.inverse .body {
    color: var(--content-secondary-inverse) !important;
}

/* ==== 03. Icon Widget ==== */
/* Layout only; icons come from icon.css */
.elementor .icon-widget {
    margin: 0;
    padding: 20px 0;
    max-width: 460px;
    display: grid;
    grid-template-columns: auto 1fr; /* left = icon’s rendered width (incl. padding), right fills */
    column-gap: 20px;
    align-items: start;
}

/* Columns */
.elementor .icon-widget .icon-col {
    display: flex;
    align-items: flex-start; /* top-align icon with text */
    justify-content: flex-start;
    width: max-content; /* lock column to icon’s rendered width */
    gap: var(--gap-0);
    padding: 0;
    margin: 0;
}
.elementor .icon-widget .content-col {
    min-width: 0;
    overflow-wrap: anywhere;
    gap: var(--gap-0);
    padding: 0;
    margin: 0;
}

/* Elementor wrappers inside the icon column */
.elementor .icon-widget .elementor-icon-wrapper {
    display: inline-flex;
    align-items: flex-start; /* top-align the wrapper too */
    justify-content: flex-start;
    line-height: 0;
}

/* Text placeholders */
.elementor .icon-widget .headline .elementor-heading-title {
    color: var(--content-primary);
    font-family: var(--typography-font-secondary);
    font-size: var(--font-size-14);
    font-style: normal;
    font-weight: var(--weight-regular);
    line-height: var(--lh-none);
    letter-spacing: var(--ls-pos-14);
    text-transform: uppercase;
    padding-bottom: 8px; /* spacing before description */
}
.elementor .icon-widget .description .elementor-heading-title {
    color: var(--content-secondary);
    font-family: var(--typography-font-primary);
    font-size: var(--font-size-16);
    font-style: normal;
    font-weight: var(--weight-regular);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-neg-16);
}

/* Inverse (widget text/border only) */
.elementor .icon-widget.inverse {
}

.elementor .icon-widget.inverse .headline .elementor-heading-title {
    color: var(--content-primary-inverse);
}

.elementor .icon-widget.inverse .description .elementor-heading-title {
    color: var(--content-secondary-inverse);
}

.elementor .icon-widget.inverse svg path {
    stroke: var(--content-primary-inverse);
}

/* ==== 04. Text Hero ==== */

/* When inside .text-hero */
.elementor .text-hero .text-widget {
    max-width: 760px !important;
}