/* ═══════════════════════════════════════════════════════════════════════
   CalcYourWealth - CTA / Ad Component Stylesheet (dedicated, build-safe)
   File: /assets/css/cyw-cta.css
   Created: 2026-08-17 (Phase 6 - CTA rendering hardening)
   ------------------------------------------------------------------
   Why this file exists: the semantic CTA card (<aside class="cyw-cta-card">,
   Phase 3 Plan D) is styled by class names. These rules previously lived
   only as an appendix to the compiled Tailwind stylesheet (main.css),
   which any future Tailwind rebuild would silently drop - leaving CTAs
   rendering as unstyled raw text. This standalone file is loaded
   explicitly by BOTH:
     - includes/header.php (public site, after main.css)
     - admin/views/layout.php (admin panel, after admin.css)
   so the component always renders as the designed banner card, and so
   admin-side previews are styled too.
   The single sanctioned inline attribute remains the custom-background
   design token: style="--cyw-cta-bg:#RRGGBB" (server-validated hex).
   ═══════════════════════════════════════════════════════════════════════ */

.cyw-cta-card{position:relative;overflow:hidden;border-radius:1rem;padding:1.25rem 1.75rem;margin:1.5rem 0;color:#fff}
.cyw-cta-card--primary{background:linear-gradient(135deg,#064e3b,#065f46);color:#fff}
.cyw-cta-card--neutral{background:#f9fafb;border:1px solid #e5e7eb;color:#1f2937}
.cyw-cta-card--dark{background:#111827;border:1px solid #1f2937;color:#fff}
.cyw-cta-card--custom{background:var(--cyw-cta-bg,#065f46);color:#fff}
.cyw-cta-disclosure{position:relative;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 .6rem;opacity:.95}
.cyw-cta-card--primary .cyw-cta-disclosure,.cyw-cta-card--dark .cyw-cta-disclosure,.cyw-cta-card--custom .cyw-cta-disclosure{color:#fcd34d}
.cyw-cta-card--neutral .cyw-cta-disclosure{color:#b45309}
.cyw-cta-inner{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap}
.cyw-cta-copy{flex:1 1 20rem;min-width:0}
.cyw-cta-logo{height:1.5rem;margin-bottom:.5rem;object-fit:contain}
.cyw-cta-badge{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.12);border-radius:999px;padding:.15rem .55rem;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#fcd34d;margin-bottom:.4rem}
.cyw-cta-card--neutral .cyw-cta-badge{background:#fef3c7;color:#b45309}
.cyw-cta-title{font-size:1.05rem;font-weight:700;line-height:1.35;margin:0 0 .25rem;color:#fff}
.cyw-cta-card--neutral .cyw-cta-title{color:#111827}
.cyw-cta-body{font-size:.8125rem;line-height:1.45;margin:0;color:rgba(255,255,255,.75)}
.cyw-cta-card--neutral .cyw-cta-body{color:#4b5563}
.cyw-cta-partner{font-size:.75rem;line-height:1.4;margin:.5rem 0 0;color:rgba(255,255,255,.55)}
.cyw-cta-card--neutral .cyw-cta-partner{color:#6b7280}
.cyw-cta-action{flex-shrink:0;align-self:center}
.cyw-cta-button{display:inline-flex;align-items:center;gap:.4rem;background:#f9a825;color:#fff;font-weight:700;padding:.65rem 1.25rem;border-radius:.75rem;font-size:.8125rem;white-space:nowrap;box-shadow:0 2px 8px rgba(249,168,37,.3);text-decoration:none}
.cyw-cta-button:hover{background:#d97706;color:#fff}

/* Live ad containers render zero visible chrome; ads appear only on fill */
.cyw-ad{display:block;margin-top:2rem;margin-bottom:2rem}
.cyw-ad .adsbygoogle{display:block}

/* Device targeting for admin-configured ad slots */
@media (max-width:767px){.cyw-desktop-only{display:none!important}}
@media (min-width:768px){.cyw-mobile-only{display:none!important}}