/**
 * CTA Block Styles
 * BEM methodology: .cta-block__element--modifier
 */

.cta-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
    padding: 80px 0;
    position: relative;
    overflow: visible;
}

/* ===========================
   Title Section
   =========================== */

.cta-block__header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-shrink: 0;
    transform: none;
    width: 100%;
    outline: none;
    gap: 10px;
}

.cta-block__heading {
    font-family: var(--font-family-inter);
    font-size: 28px;
    font-weight: var(--font-weight-bold); /* 700 */
    line-height: 1.4em;
    color: var(--color-dark); /* rgb(17, 24, 39) */
    margin: 0;
    padding: 0;
    text-align: center;
    white-space: pre-wrap;
    word-break: break-word;
    word-wrap: break-word;
    width: 100%;
}

.cta-block__subheading {
    font-family: var(--font-family-inter);
    font-size: var(--font-size-base); /* 17px */
    font-weight: var(--font-weight-regular); /* 400 */
    line-height: var(--line-height-body); /* 1.5em */
    color: var(--color-gray-400); /* rgb(102, 102, 102) */
    margin: 0;
    padding: 0;
    text-align: center;
    white-space: pre-wrap;
    word-break: break-word;
    word-wrap: break-word;
    width: 100%;
}

/* ===========================
   Action Buttons
   =========================== */

.cta-block__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    position: relative;
    overflow: visible;
}

/* ===========================
   Button Base Styles
   =========================== */

.cta-block__button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 24px;
    height: 34px;
    border-radius: 50px;
    text-decoration: none;
    font-family: var(--font-family-inter);
    font-size: var(--font-size-base); /* 17px */
    font-weight: var(--font-weight-medium); /* 500 */
    line-height: var(--line-height-body); /* 1.5em */
    transition: all 0.2s ease;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    border: none;
    white-space: nowrap;
}

.cta-block__button-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-block__button-icon svg {
    width: 100%;
    height: 100%;
    user-select: none;
    flex-shrink: 0;
}

.cta-block__button span {
    white-space: pre;
    user-select: none;
}

/* Primary Button (Dark) */
.cta-block__button--primary {
    background-color: rgb(17, 24, 39);
    color: rgb(255, 255, 255);
    border: none;
}

.cta-block__button--primary .cta-block__button-icon svg {
    fill: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
}

.cta-block__button--primary:hover {
    background-color: rgb(38, 46, 56);
    color: rgb(255, 255, 255);
}

/* Secondary Button (Light) */
.cta-block__button--secondary {
    background-color: rgba(17, 24, 39, 0.03);
    color: rgb(102, 102, 102);
    border: 1px solid rgba(17, 24, 39, 0.05);
}

.cta-block__button--secondary .cta-block__button-icon svg {
    fill: rgb(102, 102, 102);
    color: rgb(102, 102, 102);
}

.cta-block__button--secondary:hover {
    background-color: rgba(17, 24, 39, 0.05);
    border-color: rgba(17, 24, 39, 0.1);
}

/* ===========================
   Responsive Styles
   =========================== */

@media (max-width: 809px) {
    .cta-block {
        gap: var(--spacing-lg); /* 20px */
    }
    
    .cta-block__header {
        gap: var(--spacing-xs); /* 6px */
    }
    
    .cta-block__heading {
        font-size: 24px;
    }
    
    .cta-block__subheading {
        font-size: var(--font-size-md); /* 14px */
    }
    
    .cta-block__actions {
        flex-direction: column;
        gap: var(--spacing-xs); /* 6px */
    }
    
    .cta-block__button {
        width: 100%;
        padding: 0 20px;
        height: 30px;
        font-size: var(--font-size-md); /* 14px */
    }
    
    .cta-block__button-icon {
        width: 16px;
        height: 16px;
    }
}