/* ==========================================================================
   AGP Content Block — mod_agp_contentblock v2.0.0
   Bootstrap-first with optional overrides via --agp-cb-*
   ========================================================================== */

/* ---------- Base ---------- */
.agp-cb {
    font-family: var(--agp-cb-font-body, var(--bs-body-font-family, -apple-system, sans-serif));
    color: var(--agp-cb-text, var(--bs-body-color, #212529));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.agp-cb *,
.agp-cb *::before,
.agp-cb *::after {
    box-sizing: border-box;
}

/* ---------- Shared: Buttons ---------- */
.agp-cb .agp-cb__btn {
    display: inline-block;
    font-family: var(--agp-cb-font-body, var(--bs-body-font-family, inherit));
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: var(--bs-border-radius, 0.375rem);
    background: var(--agp-cb-accent, var(--bs-primary, #0d6efd));
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}
.agp-cb .agp-cb__btn:hover,
.agp-cb .agp-cb__btn:focus {
    background: var(--agp-cb-accent-hover, var(--bs-primary, #0d6efd));
    color: #fff;
    text-decoration: none;
    filter: brightness(0.85);
}

.agp-cb .agp-cb__btn--sm {
    font-size: 0.8125rem;
    padding: 8px 20px;
}

.agp-cb .agp-cb__btn--outline {
    background: transparent;
    color: var(--agp-cb-primary, var(--bs-body-color, #212529));
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.15));
    font-size: 0.875rem;
    padding: 10px;
}
.agp-cb .agp-cb__btn--outline:hover,
.agp-cb .agp-cb__btn--outline:focus {
    background: var(--agp-cb-accent-light, var(--bs-light, #f8f9fa));
    border-color: var(--agp-cb-primary, var(--bs-body-color, #212529));
    color: var(--agp-cb-primary, var(--bs-body-color, #212529));
}


/* ==========================================================================
   UNIFIED ICON SYSTEM
   Base class handles layout. Size set per template context.
   Modifier classes control shape, fill, and color.
   ========================================================================== */

/* ---- Base: shared by all icon styles ---- */
.agp-cb__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* SVG defaults for all styles */
.agp-cb__icon svg {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* ---- Sizing per template context ---- */
/* Inline banner: 48px */
.agp-cb--promo-inline .agp-cb__icon {
    width: 48px;
    height: 48px;
}
.agp-cb--promo-inline .agp-cb__icon i { font-size: 1.125rem; }
.agp-cb--promo-inline .agp-cb__icon svg { width: 22px; height: 22px; }

/* Calc CTA: 64px */
.agp-cb--calc-cta .agp-cb__icon {
    width: 64px;
    height: 64px;
}
.agp-cb--calc-cta .agp-cb__icon i { font-size: 1.5rem; }
.agp-cb--calc-cta .agp-cb__icon svg { width: 28px; height: 28px; }


/* ---- Style: Circle — Filled Background ---- */
.agp-cb__icon--circle-fill {
    border-radius: 50%;
    background: var(--agp-cb-accent, var(--bs-primary, #0d6efd));
    color: #fff;
}

/* ---- Style: Rounded Square — Filled Background ---- */
.agp-cb__icon--rounded-fill {
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    background: var(--agp-cb-accent-light, var(--bs-light, #f8f9fa));
    border: 1px solid var(--agp-cb-accent-border, var(--bs-border-color, rgba(0, 0, 0, 0.1)));
    color: var(--agp-cb-accent, var(--bs-primary, #0d6efd));
}

/* ---- Style: Circle — Outline Only ---- */
.agp-cb__icon--circle-outline {
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--agp-cb-accent, var(--bs-primary, #0d6efd));
    color: var(--agp-cb-accent, var(--bs-primary, #0d6efd));
}

/* ---- Style: Bare — Icon Only, No Background ---- */
.agp-cb__icon--bare {
    background: none;
    border: none;
    color: var(--agp-cb-accent, var(--bs-primary, #0d6efd));
}

/* Auto-bump icon size for bare style — no container means icon needs more visual weight */
.agp-cb--promo-inline .agp-cb__icon--bare i { font-size: 2.25rem; }
.agp-cb--promo-inline .agp-cb__icon--bare svg { width: 40px; height: 40px; }

.agp-cb--calc-cta .agp-cb__icon--bare i { font-size: 2.75rem; }
.agp-cb--calc-cta .agp-cb__icon--bare svg { width: 48px; height: 48px; }


/* ==========================================================================
   LAYOUT: Full-Width Promotional Banner (.agp-cb--promo-full)
   ========================================================================== */
.agp-cb--promo-full {
    background: var(--agp-cb-primary, var(--bs-primary, #0d6efd));
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    padding: 48px 40px;
    overflow: hidden;
}

.agp-cb--promo-full .agp-cb__badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--agp-cb-primary, var(--bs-body-color, #212529));
    background: var(--bs-light, rgba(255, 255, 255, 0.15));
    border-radius: 100px;
    padding: 4px 12px;
    margin-bottom: 12px;
}

.agp-cb--promo-full .agp-cb__title {
    font-family: var(--agp-cb-font-display, Georgia, serif);
    font-size: 1.75rem;
    font-weight: 400;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.3;
}

.agp-cb--promo-full .agp-cb__text {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin: 0 0 20px;
    max-width: 420px;
}

/* Full-width banner button: light on dark bg */
.agp-cb--promo-full .agp-cb__btn {
    background: var(--bs-light, #f8f9fa);
    color: var(--agp-cb-primary, var(--bs-body-color, #212529));
}
.agp-cb--promo-full .agp-cb__btn:hover,
.agp-cb--promo-full .agp-cb__btn:focus {
    background: #fff;
    color: var(--agp-cb-primary, var(--bs-body-color, #212529));
    filter: none;
}

.agp-cb--promo-full .agp-cb__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--bs-border-radius-lg, 0.5rem);
}


/* ==========================================================================
   LAYOUT: Inline Promotional Banner (.agp-cb--promo-inline)
   ========================================================================== */
.agp-cb--promo-inline {
    background: var(--agp-cb-accent-light, var(--bs-light, #f8f9fa));
    border: 1px solid var(--agp-cb-accent-border, var(--bs-border-color, rgba(0, 0, 0, 0.1)));
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    padding: 24px 28px;
}

.agp-cb--promo-inline .agp-cb__inline-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--agp-cb-primary, var(--bs-body-color, #212529));
    margin-bottom: 2px;
}

.agp-cb--promo-inline .agp-cb__inline-text {
    font-size: 0.8125rem;
    color: var(--agp-cb-secondary, var(--bs-secondary-color, rgba(0, 0, 0, 0.5)));
    line-height: 1.5;
    margin: 0;
}


/* ==========================================================================
   LAYOUT: Sidebar Promotional Card (.agp-cb--promo-sidebar)
   ========================================================================== */
.agp-cb--promo-sidebar {
    max-width: 300px;
    background: var(--agp-cb-bg, #fff);
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    overflow: hidden;
    box-shadow: var(--bs-box-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
}

.agp-cb--promo-sidebar .agp-cb__sidebar-image {
    height: 160px;
    overflow: hidden;
}
.agp-cb--promo-sidebar .agp-cb__sidebar-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.agp-cb--promo-sidebar .agp-cb__sidebar-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--agp-cb-primary, var(--bs-body-color, #212529));
    margin-bottom: 6px;
}

.agp-cb--promo-sidebar .agp-cb__sidebar-text {
    font-size: 0.8125rem;
    color: var(--agp-cb-secondary, var(--bs-secondary-color, rgba(0, 0, 0, 0.5)));
    line-height: 1.5;
    margin-bottom: 16px;
}


/* ==========================================================================
   LAYOUT: Calculator / Cross-Sell CTA (.agp-cb--calc-cta)
   ========================================================================== */
.agp-cb--calc-cta {
    background: var(--agp-cb-bg, #fff);
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    padding: 32px;
    box-shadow: var(--bs-box-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
}

.agp-cb--calc-cta .agp-cb__calc-title {
    font-family: var(--agp-cb-font-display, Georgia, serif);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--agp-cb-primary, var(--bs-body-color, #212529));
    margin: 0 0 4px;
}

.agp-cb--calc-cta .agp-cb__calc-text {
    font-size: 0.875rem;
    color: var(--agp-cb-secondary, var(--bs-secondary-color, rgba(0, 0, 0, 0.5)));
    line-height: 1.6;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
    .agp-cb--promo-full {
        padding: 36px 28px;
        text-align: center;
    }
    .agp-cb--promo-full .agp-cb__text {
        margin-left: auto;
        margin-right: auto;
    }
    .agp-cb--promo-full .agp-cb__image img {
        height: 160px;
    }

    .agp-cb--calc-cta {
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    .agp-cb--promo-full {
        padding: 28px 20px;
    }
    .agp-cb--promo-full .agp-cb__title {
        font-size: 1.5rem;
    }
}