/* ═══════════════════════════════════════════════════════════════════════
   CTA Banner Left  (cta_banner_left)
   v1.0.0 — Frame 73: full-width bg, container-constrained 800px content,
   left-aligned suptitle + H2 + beige pill button with arrow.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Section ─────────────────────────────────────────────────────────── */
.zadra-cta-banner-left {
    width: 100%;
    min-height: 461px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding: 120px 0;
    box-sizing: border-box;
    background-color: #1E1F2E;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ── Content: left-aligned, max 800px ───────────────────────────────── */
.zadra-cta-banner-left__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    max-width: 800px;
    width: 100%;
}

/* ── Text group: suptitle + H2 ──────────────────────────────────────── */
.zadra-cta-banner-left__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.zadra-cta-banner-left__suptitle {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.5;
    text-transform: uppercase;
    color: #D7C09B;
}

.zadra-cta-banner-left__title {
    margin: 0;
    padding: 0;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.3;
    color: #FFFFFF;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Button ──────────────────────────────────────────────────────────── */
.zadra-cta-banner-left__cta {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 20px 16px;
    min-height: 67px;
    background: #D7C09B;
    border-radius: 64px;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    text-transform: uppercase;
    color: #1E1F2E;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.zadra-cta-banner-left__cta:hover,
.zadra-cta-banner-left__cta:focus {
    background: #C8AE84;
    color: #1E1F2E;
    text-decoration: none;
}

.zadra-cta-banner-left__arrow {
    flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .zadra-cta-banner-left        { padding: 96px 0; }
    .zadra-cta-banner-left__title { font-size: 40px; }
}

@media (max-width: 767px) {
    .zadra-cta-banner-left               { min-height: 0; padding: 80px 0; }
    .zadra-cta-banner-left__content      { gap: 40px; }
    .zadra-cta-banner-left__title        { font-size: 34px; }
    .zadra-cta-banner-left__cta          { width: 100%; justify-content: center; }
}
