/* ── tbc-cta — direct port from BSB bsb-cta ──────────────────────────────── */

.tbc-cta-section {
    position: relative;
    padding: 6.25rem 0;
    background-color: #f2f2f2;
    overflow: hidden;
    z-index: 5;
}

.tbc-cta-content {
    width: 100%;
    max-width: 65.125rem;
}

/* ── Heading ──────────────────────────────────────────────────────────────── */

.tbc-cta-heading {
    font-family: var(--tbc-font-heading);
    font-size: var(--fs-64-32);
    line-height: 1.05;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.tbc-cta-heading .tbc-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.1em;
}

/* ── Subtext ──────────────────────────────────────────────────────────────── */

.tbc-cta-subtext {
    font-family: var(--tbc-font-body);
    font-size: var(--fs-32-24);
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0;
}
.tbc-cta-subtext:has(+.tbc-cta-btn-wrapper) {
    margin-bottom: 4rem;
}

/* ── Button ───────────────────────────────────────────────────────────────── */

.tbc-cta-btn-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.tbc-cta-btn {
    gap: 1rem;
    padding: .75rem 2.5rem;
    border-radius: 60px;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.tbc-cta-btn svg {
    width: 22px;
    height: 22px;
}

.tbc-cta-btn--filled {
    background-color: var(--tbc-pink);
    border-color: var(--tbc-pink);
}

.tbc-cta-btn--filled:hover {
    background-color: var(--tbc-color-black);
    border-color: var(--tbc-color-black);
    color: var(--tbc-color-white);
}

/* ── Animation initial states (frontend only) ─────────────────────────────── */

.tbc-cta-section:not(.tbc-cta-section--preview) .tbc-cta-heading .tbc-line span {
    display: inline-block;
    transform: translateY(110%);
}

.tbc-cta-section:not(.tbc-cta-section--preview) .tbc-cta-subtext,
.tbc-cta-section:not(.tbc-cta-section--preview) .tbc-cta-btn-wrapper {
    opacity: 0;
    transform: translateY(30px);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .tbc-cta-section {
        padding: 3rem 0;
    }

    .tbc-cta-heading {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 768px) {
    .tbc-cta-heading {
        margin-bottom: 1rem;
    }

    .tbc-cta-section:not(.tbc-cta-section--preview) .tbc-cta-heading .tbc-line span {
        display: block;
    }

    .tbc-cta-subtext:has(+.tbc-cta-btn-wrapper) {
        margin-bottom: 2.5rem;
    }

    .tbc-cta-btn {
        padding: 1rem 2rem;
        font-size: 0.85rem;
    }

    .tbc-cta-btn-wrapper {
        justify-content: center;
    }
}

/* ── Button 2 popup form (Recommend Someone, etc.) — same gate pattern as
   tbc-challenge-worksheets' download gate: fixed dark overlay, centered
   panel, backdrop/Escape/close-button dismissal. ── */
button[data-tbc-cta-popup-open] {
    cursor: pointer;
}

.tbc-cta-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    overflow-y: auto;
    padding-block: 3rem;
}

.tbc-cta-popup[hidden] {
    display: none;
}

.tbc-cta-popup__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}

.tbc-cta-popup__close {
    position: fixed;
    top: var(--space-40-20);
    right: var(--space-40-20);
    z-index: 1;
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: #ffffff;
}

.tbc-cta-popup__inner {
    position: relative;
    width: 100%;
    /* Vertical centering via auto margins (not align-items:center) — when the
       panel is taller than the viewport, auto margins collapse to 0 instead
       of clipping the top half unreachably off-screen (a well-known flexbox
       centering + overflow:auto bug: https://github.com/philipwalton/flexbugs#flexbug-11). */
    margin-block: auto;
}

.tbc-cta-popup__panel {
    max-width: 1100px;
    color: #ffffff;
    margin-inline: auto;
}

.tbc-cta-popup__title {
    --fs-64-32: clamp(2rem, -0.286rem + 4.762vw, 4rem);
    font-family: var(--tbc-font-body);
    font-size: var(--fs-64-32);
    font-weight: 900;
    text-transform: none;
    line-height: 1.1;
    margin: 0 0 1rem;
}

.tbc-cta-popup__subtext {
    font-family: var(--tbc-font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--tbc-color-white);
    margin: 0 0 2rem;
}

/* Full-width fields — scoped to this popup only (assets/css/gravity-forms.css
   defaults .gform_fields to a 2-column grid site-wide; overriding that
   globally would affect every other Gravity Form on the site). */
.tbc-cta-popup__form .gform_fields {
    /* grid-template-columns: 1fr !important; */
}

/* Gravity Forms theming inside the popup — same dark-on-black override
   intent as tbc-contact-form (assets/css/gravity-forms.css otherwise
   hardcodes dark-on-light !important colors meant for the Contact page).
   The scope class is repeated (.tbc-cta-popup__form.tbc-cta-popup__form)
   purely to out-specificity that sheet's own rules, several of which add
   a :not(.tbc-footer ...) clause that otherwise out-ranks a single-class
   scope even with !important on both sides. */
.tbc-cta-popup__form.tbc-cta-popup__form.tbc-cta-popup__form .gform_wrapper .ginput_container input[type="text"],
.tbc-cta-popup__form.tbc-cta-popup__form.tbc-cta-popup__form .gform_wrapper .ginput_container input[type="email"],
.tbc-cta-popup__form.tbc-cta-popup__form.tbc-cta-popup__form .gform_wrapper .ginput_container_textarea textarea {
    color: #ffffff !important;
    border-bottom-color: #ffffff !important;
}

.tbc-cta-popup__form.tbc-cta-popup__form.tbc-cta-popup__form .gform_wrapper .ginput_container input::placeholder,
.tbc-cta-popup__form.tbc-cta-popup__form.tbc-cta-popup__form .gform_wrapper .ginput_container_textarea textarea::placeholder {
    color: #D9D9D980 !important;
}

.tbc-cta-popup__form.tbc-cta-popup__form.tbc-cta-popup__form .gform_wrapper .ginput_container input:focus,
.tbc-cta-popup__form.tbc-cta-popup__form.tbc-cta-popup__form .gform_wrapper .ginput_container_textarea textarea:focus {
    border-bottom-color: var(--tbc-pink) !important;
}

.tbc-cta-popup__form .gfield_label,
.tbc-cta-popup__form .gform_description {
    color: #ffffff !important;
}

.tbc-cta-popup__form .gform_button:not(.tbc-footer .gform_button) {
    background-color: var(--tbc-pink) !important;
    border-color: var(--tbc-pink) !important;
    color: var(--tbc-color-black) !important;
}

.tbc-cta-popup__form .gform_button:not(.tbc-footer .gform_button):hover {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

.tbc-cta-popup__form .gform_wrapper .ginput_container_textarea textarea {
    height: 80px !important;
    resize: none;
}

.tbc-cta-popup__form .gform_footer:not(.tbc-footer .gform_footer) {
    justify-content: flex-start;
}

.tbc-cta-popup__form .gform_confirmation_message {
    font-family: var(--tbc-font-body);
    font-size: 1.1rem;
    color: #ffffff;
}

@media (max-width: 575px) {
    .tbc-cta-popup__title {
        --fs-64-32: 2rem;
    }
}