/**
 * UCG Block — Text
 * assets/css/blocks/text.css
 *
 * STRUCTURE + THEME VARS ONLY — zero hardcoded colors or spacing values.
 * See BLOCK-CSS-GUIDE.md for the full color/var architecture. Same
 * conventions as text-narrow-left-and-right.css.
 */


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

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

.ucg-section.ucg-text {
    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)));
    }
}

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

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

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

.ucg-text strong,
.ucg-text b {
    color: var(--text-block-h2, var(--heading, var(--text-block-headings)));
}

.ucg-text__subhead {
    margin-top:    0;
    margin-bottom: 0.5em;
    color: var(--text-block-h2, var(--heading, var(--text-block-headings)));
}

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

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


/* ============================================================
   BUTTON — sits directly on the block background
============================================================ */

.ucg-text .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 .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-text .ucg-btn.bbt-secondary {
    color:        var(--btn-block-text,   var(--btn-secondary-color, var(--brand-primary)));
    border-color: var(--btn-block-stroke, currentColor);
}

.ucg-text .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-text .ucg-btn.bbt-tertiary {
    color: var(--btn-block-text, var(--btn-tertiary-color, var(--brand-primary)));
}

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

.ucg-text .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-text .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);
}


/* ============================================================
   LAYOUT — content column width + horizontal position
============================================================ */

.ucg-text__row {
    display: flex;
    width:   100%;
}

.ucg-text__content {
    /* Width comes from the .ucg-col-* class (Content Column field). */
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
}

/* Content Position — where the (narrower than 12-col) content column
   sits within the row. */
.ucg-text--pos-left  .ucg-text__row { justify-content: flex-start; }
.ucg-text--pos-center .ucg-text__row { justify-content: center; }
.ucg-text--pos-right .ucg-text__row { justify-content: flex-end; }

/* Text Alignment — text-align of the copy itself, independent of the
   column's position within the row. */
.ucg-text-align--left   .ucg-text__content { text-align: left;   align-items: flex-start; }
.ucg-text-align--center .ucg-text__content { text-align: center; align-items: center; }
.ucg-text-align--right  .ucg-text__content { text-align: right;  align-items: flex-end; }

/* ============================================================
   MOBILE — full-width, stacked
============================================================ */

@media (max-width: 767px) {
    .ucg-text__content {
        max-width: 100%;
        width:     100%;		
    }
}