/* El Niño promo card (includes/el-nino-promo.php).
   Deliberately quiet: it sits under someone else's content and is a link to an explainer, not a
   warning. Colours are literals taken from the host page's own palette, matching how the rest of
   this codebase is written — public/styles.css and public/reservoir.css use literal colours with
   explicit [data-theme="dark"] overrides per component, not CSS variables. There is no dark block
   here because the pages carrying this card (reservoir) have no dark rules of their own; add one
   alongside the host page's when that changes, rather than guessing a palette it does not use. */

.enp {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 14px 16px;
  margin: 14px 0 0;
  border: 1px solid #e7ecf4;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.enp:hover { border-color: #c9d4ea; box-shadow: 0 4px 14px rgba(20, 30, 60, .07); }
.enp:focus-visible { outline: 2px solid #1d3a8a; outline-offset: 2px; }

/* Decorative — the text carries the whole message — so it shrinks first and takes empty alt. */
.enp-globe { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; }

.enp-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.enp-kicker {
  font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: #8693ab;
}
.enp-lead { font-size: .95rem; line-height: 1.45; color: #1b2640; }
.enp-lead strong { font-weight: 700; color: #15224b; }
.enp-cta { font-size: .85rem; font-weight: 600; color: #1d3a8a; }

@media (max-width: 480px) {
  .enp { gap: 12px; padding: 12px 13px; align-items: flex-start; }
  .enp-globe { width: 48px; height: 48px; }
  .enp-lead { font-size: .88rem; }
  .enp-cta { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .enp { transition: none; }
  .enp:hover { box-shadow: none; }
}