/* Styles for Banner */
/* Styles for Banner */
/* Banner Styles */
.cv-banner {
          position: relative;
          background-size: cover;
          background-position: center;
          border-radius: var(--cv-border-radius-md);
          overflow: hidden;
          min-height: 400px;
          display: flex;
          flex-direction: column;
          font-family: var(--cv-font-family);
          color: var(--cv-color-text-main);
          background-color: var(--cv-color-surface);
          border: var(--cv-border-width) solid var(--cv-color-border);
        }
        .cv-banner-overlay {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: var(--cv-spacing-xl);
          background: var(--cv-color-scrim, rgba(0, 0, 0, 0.4));
        }
        .cv-banner-content {
          max-width: 800px;
          margin: 0 auto;
        }
        .cv-banner-title {
          font-size: var(--cv-font-size-title);
          margin-bottom: var(--cv-spacing-sm);
          color: var(--cv-color-on-media, #fff);
          margin-top: 0;
        }
        .cv-banner-subtitle {
          font-size: var(--cv-font-size-subtitle);
          margin-bottom: var(--cv-spacing-lg);
          color: var(--cv-color-on-media-muted, #f1f5f9);
        }
        .cv-banner-cta {
          display: inline-block;
          background-color: var(--cv-color-primary-fill, #245066);
          color: var(--cv-color-on-primary, #fff);
          padding: var(--cv-spacing-sm) var(--cv-spacing-lg);
          border-radius: var(--cv-border-radius-sm);
          text-decoration: none;
          font-weight: 600;
          transition: filter 0.2s;
        }
        .cv-banner-cta:hover {
          filter: brightness(1.1);
        }
        .cv-banner-bg-effect {
          display: block;
        }

        /* ── Visual layer (SVG image map) ──────────────────────────────────
           Pure presentation: pointer-events are disabled here so clicks pass
           through to the HTML hit-target layer below. Shapes are invisible by
           default (fill/stroke transparent) — only the pulse ring, if any, is
           ever drawn — matching the original hotspot behavior while fixing
           polygon anti-aliasing and giving polygons a working pulse effect. */
        .cv-banner-hotspots-svg {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
        }
        .cv-hotspot-visual rect,
        .cv-hotspot-visual ellipse,
        .cv-hotspot-visual polygon {
          fill: transparent;
          stroke: none;
        }
        .cv-hotspot-pulse-ring {
          fill: transparent;
          stroke: var(--cv-color-accent-on-media, #7fc4de);
          stroke-width: 2;
          transform-box: fill-box;
          transform-origin: center;
          animation: contentvedaHotspotPulse 1.6s ease-out infinite;
        }
        @keyframes contentvedaHotspotPulse {
          0% { transform: scale(0.92); opacity: 0.9; }
          100% { transform: scale(1.35); opacity: 0; }
        }
        /* WCAG 2.3.3 / general motion-sensitivity best practice: honor the
           user's OS-level reduced-motion preference by freezing the ring in
           a single, still, low-opacity state instead of animating it. */
        @media (prefers-reduced-motion: reduce) {
          .cv-hotspot-pulse-ring {
            animation: none;
            opacity: 0.6;
          }
        }

        /* ── Interactive layer (real, focusable HTML links) ────────────────
           Positioned/centered by hotspotHitStyle() in the component, with a
           min-width/min-height floor applied here via inline style so every
           hotspot's click/tap target meets WCAG 2.5.8 (24x24 CSS px minimum)
           regardless of how small the authored shape is. */
        .cv-hotspot-hit {
          display: block;
        }
        .cv-hotspot {
          position: absolute;
          inset: 0;
          display: block;
          cursor: pointer;
          outline: none;
        }
        /* Visible, high-contrast focus indicator (WCAG 2.4.7 / 2.4.11).
           Uses outline (not box-shadow) so it still renders in Windows
           High Contrast / forced-colors mode. */
        .cv-hotspot:focus-visible {
          outline: 3px solid var(--cv-color-focus, #245066);
          outline-offset: 2px;
          border-radius: 2px;
        }

        /* Tooltip: content shown on hover/focus (WCAG 1.4.13). It stays
           visible while either the link or the tooltip itself is hovered or
           focused, doesn't obscure other content, and disappears on
           mouse-out/blur without requiring a pointer gesture to dismiss. */
        .cv-hotspot-tooltip {
          position: absolute;
          bottom: calc(100% + 8px);
          left: 50%;
          transform: translateX(-50%) translateY(4px);
          background: var(--cv-color-scrim-strong, rgba(15, 17, 21, 0.92));
          color: var(--cv-color-on-media, #fff);
          font-size: 12px;
          font-weight: 600;
          line-height: 1.3;
          padding: 4px 8px;
          border-radius: 4px;
          white-space: nowrap;
          pointer-events: none;
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.15s ease, transform 0.15s ease;
          z-index: 3;
        }
        .cv-hotspot:hover .cv-hotspot-tooltip,
        .cv-hotspot:focus-visible .cv-hotspot-tooltip {
          opacity: 1;
          visibility: visible;
          transform: translateX(-50%) translateY(0);
        }
        @media (prefers-reduced-motion: reduce) {
          .cv-hotspot-tooltip {
            transition: none;
          }
        }