/* Override Bricks sticky parent to clear the site header */
.brxe-block:has(> .drl-contact-card-wrap) {
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 88px) !important;
    align-self: start;
}

/* When section nav appears, move sticky card down to avoid overlap */
body:has(.drl-section-nav.is-visible) .brxe-block:has(> .drl-contact-card-wrap) {
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 136px) !important;
}

.drl-contact-card {
    background: var(--white, #fff);
    border: 1px solid var(--gray-200, #E9EAEB);
    border-radius: var(--radius-xl, 12px);
    padding: var(--spacing-3xl, 24px);
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: none;
}

/* ── CTA Block ────────────────────────────────────── */

.drl-cc-cta-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

.drl-cc-headline {
    font-size: var(--text-md, 16px);
    font-weight: var(--font-medium, 500);
    line-height: var(--leading-md, 24px);
    color: var(--gray-700);
    margin: 0 0 var(--spacing-xl);
    text-align: center;
}

.drl-cc-cta-block .dr-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: var(--spacing-sm, 6px);
    padding: var(--spacing-lg, 12px) var(--spacing-xl, 16px);
    font-size: var(--text-sm);
    box-sizing: border-box;
}

.drl-cc-divider {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.drl-cc-divider::before,
.drl-cc-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-200, #E9EAEB);
}

.drl-cc-divider span {
    font-size: var(--text-xs, 12px);
    font-weight: var(--font-medium, 500);
    color: var(--gray-400, #A4A7AE);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.drl-cc-secondary {
    display: flex;
    gap: var(--spacing-md);
}

.drl-cc-secondary .dr-btn {
    flex: 1;
}

.drl-cc-secondary .dr-btn svg {
    flex-shrink: 0;
}

/* ── Agent Block ──────────────────────────────────── */

.drl-cc-agent {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: var(--spacing-2xl);
    margin-top: var(--spacing-2xl);
    border-top: 1px solid var(--gray-200, #E9EAEB);
    gap: var(--spacing-md);
}

.drl-cc-label {
    font-size: var(--text-xs, 12px);
    font-weight: var(--font-medium, 500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500, #535862);
    margin: 0;
    line-height: var(--leading-xs, 18px);
}

.drl-cc-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--gray-100, #F5F5F5);
    flex-shrink: 0;
    margin-top: var(--spacing-sm);
}

.drl-cc-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.drl-cc-name {
    font-size: var(--text-md, 16px);
    font-weight: var(--font-semibold, 600);
    color: var(--gray-900, #181D27);
    line-height: var(--leading-md, 24px);
}

.drl-cc-role {
    font-size: var(--text-xs);
    font-weight: var(--font-medium, 500);
    color: var(--gray-500, #717680);
    line-height: var(--leading-xs);
}

.drl-cc-contact-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs, 4px);
}

.drl-cc-phone {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    font-size: var(--text-sm, 14px);
    color: var(--gray-600, #6B7280);
    text-decoration: none;
    line-height: var(--leading-sm, 20px);
    white-space: nowrap;
}

.drl-cc-phone:hover {
    color: var(--gray-900, #181D27);
}

.drl-cc-email-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    font-size: var(--text-xs, 12px);
    color: var(--gray-600, #6B7280);
    text-decoration: none;
    line-height: var(--leading-xs, 18px);
    white-space: nowrap;
}

.drl-cc-email-link:hover {
    color: var(--brand-600, #3F6257);
}

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

@media (max-width: 768px) {
    .drl-contact-card {
        padding: var(--spacing-xl, 16px);
    }

    .drl-cc-photo {
        width: 80px;
        height: 80px;
    }

    .drl-cc-secondary {
        flex-direction: column;
    }
}