/* ============================================
    TA — EXPAND
    See More / See Less (ta-expand). JS: expand.js.
============================================ */

/* ==========================================================================
   EXPAND / COLLAPSE — "See More" / "See Less"
   abbr: ta-expand
   The body is clamped to --ta-expand-h with a fade; main.js opens it to its
   full height and then drops the limit (max-height: none), so an open body
   is always as tall as its content.
   ========================================================================== */
.ta-expand-body {
    position: relative;
    max-height: var(--ta-expand-h, 520px);
    overflow: hidden;
    transition: max-height 0.45s ease;
}
.ta-expand-body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(255, 253, 251, 0) 0%, var(--ta-expand-fade, #fffdfb) 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.ta-expand.is-open .ta-expand-body::after,
.ta-expand.is-short .ta-expand-body::after {
    opacity: 0;
}
.ta-expand.is-short .ta-expand-toggle {
    display: none;
}
.ta-expand-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--ta-fs-16);
    font-weight: var(--ta-fw-bold);
    color: var(--ta-black);
    transition: color var(--ta-ease);
}
.ta-expand-toggle:hover {
    color: var(--ta-orange);
}
.ta-expand-toggle svg {
    width: 12px;
    height: 8px;
    transition: transform var(--ta-ease);
}
.ta-expand.is-open .ta-expand-toggle svg {
    transform: rotate(180deg);
}
.ta-expand-less,
.ta-expand.is-open .ta-expand-more {
    display: none;
}
.ta-expand.is-open .ta-expand-less {
    display: inline;
}