/* Fit Text Row — Frontend Styles */

.ftr-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    align-items: flex-end;
    /* Briefly hidden only to mask the pre-fit flash. ALWAYS revealed by the
       short fallback animation even if JS never runs — text is never lost. */
    opacity: 0;
    transition: opacity 0.15s ease;
    animation: ftr-fallback-show 1.4s forwards;
}

@keyframes ftr-fallback-show {
    0%   { opacity: 0; }
    70%  { opacity: 0; }
    100% { opacity: 1; }
}

/* JS adds this class once sizing is complete — cancels the fallback animation */
.ftr-row.ftr-ready {
    opacity: 1;
    animation: none;
}

/* Inside the Elementor editor the canvas is a live preview: never hide it.
   Any JS timing issue must not blank the text the user is editing. */
body.elementor-editor-active .ftr-row,
.elementor-editor-active .ftr-row {
    opacity: 1 !important;
    animation: none !important;
}

/* Auto cols: grow to fill available space */
.ftr-col--auto {
    min-width: 0;
    overflow: hidden;
}

/* Manual cols: sized to their explicit font-size */
.ftr-col--manual {
    flex: 0 0 auto;
    min-width: 0;
    overflow: hidden;
}

.ftr-heading {
    display: block;
    white-space: nowrap;
    line-height: 0.9;
    margin: 0;
    padding: 0;
}

/* CSS-only fallback size for auto columns. Guarantees readable text with
   zero JS; JS overrides this with an exact inline px value when it runs. */
.ftr-col--auto .ftr-heading {
    font-size: clamp(1.5rem, 9vw, 12rem);
}