/* =========================================
   SI Canvas Header Widget
   ========================================= */

.si-canvas-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
}

.si-ch-heading {
    margin-bottom: 0;
    margin-top: 0;
    width: 100%;
}

/* ── Line 1 (title-h2 style) ── */
.si-ch-line1 {
    display: block;
    font-size: clamp(1.5rem, 1rem + 1.6667vw, 3rem);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.25px;
    color: #fff;
    white-space: normal;
    overflow: visible;
    margin-bottom: 0;
}

/* ── Line 2 (title-h1 style) ── */
.si-ch-line2 {
    display: block;
    font-size: clamp(3rem, 3rem + 1.875vw, 4.5rem);
    font-weight: 600;
    line-height: 69.44px;
    letter-spacing: -0.25px;
    color: #fff;
    margin-top: 8px;
    white-space: normal;
    overflow: visible;
    margin-bottom: 0;
}

/* ── Description ── */
.si-ch-desc {
    font-size: clamp(1rem, 1rem + 0.104vw, 1.125rem);
    line-height: 1.6;
    font-weight: 500;
    color: #fff;
    margin: 20px 0 0 0;
    white-space: normal;
}

/* ── Text Animation ── */
.si-line-anim .si-ch-line1,
.si-line-anim .si-ch-line2 {
    display: block;
    white-space: normal;
    overflow: visible;
}

.si-line-anim .si-ch-line1 span,
.si-line-anim .si-ch-line2 span {
    display: inline-block;
    white-space: pre;
}

/* ── Responsive 1550px ── */
@media (max-width: 1550px) {
    .si-ch-line1 {
        font-size: clamp(2rem, 1rem + 1.25vw, 2.25rem);
    }
    .si-ch-line2 {
        font-size: clamp(3.5rem, 3rem + 1.25vw, 3.5rem);
    }
    .si-ch-desc {
        font-size: clamp(0.875rem, 0.875rem + 0vw, 0.875rem);
    }
}

/* ── Responsive 767px ── */
@media (max-width: 767px) {
    .si-ch-line1 {
        font-size: clamp(1.875rem, calc(1.875rem + (34 - 30) *
            ((100vw - 375px) / (1440 - 375))), 2.125rem);
        line-height: 1.1;
    }
    .si-ch-line2 {
        font-size: clamp(1.5rem, calc(1.5rem + (28 - 24) *
            ((100vw - 375px) / (1440 - 375))), 1.75rem);
        line-height: 1.2;
    }
    .si-ch-desc {
        font-size: clamp(0.875rem, calc(0.875rem + (16 - 14) *
            ((100vw - 375px) / (1440 - 375))), 1rem);
    }
}

