/* le/content-banner — the in-article unit (change le-placements-in-content-slot, D3). A port of the
   `ea-banner` snippet (Ad Inserter block 4) under `le-cb`, plus the layout the live banner gets
   from its Ad Inserter wrapper and the theme, so variant A renders identically. Loaded only on
   requests where the in-content slot renders (front.php, handle `le-content-banner`), and in the
   editor canvas (block.json `editorStyle`). Not the block's `style`: this theme loads every block's
   `style` on every page.

   Keep in step with build/snippets/ea-banner.css while block 5 still uses it (landmines).
   NO WEBFONT of its own (decisions 2026-08-13): the headline uses the site serif token where the
   theme defines it and Georgia elsewhere, exactly as the live banner does. */

/* ---- the slot container: what Ad Inserter's wrapper did ---- */
/* Its inline `margin: 8px 0; clear: both` (inline style beat the theme's .code-block margins). */
.le-slot--in-content { margin: 8px 0; clear: both; }
/* a.le-cb, not bare a: one class more than the theme's `.le-prose a:not(.le-btn)`, so this wins
   wherever the stylesheet lands in <head> (it is enqueued, not inlined, D6). */
.le-prose .le-slot--in-content a.le-cb, .le-prose .le-slot--in-content a.le-cb:hover { color: inherit; text-decoration: none; }
@media (min-width: 1024px) {
	/* le-editorial.css breaks in-body cards out of the reading column to 900px. */
	.le-prose .le-slot--in-content { width: 900px; max-width: calc(100vw - 80px); position: relative; left: 50%; transform: translateX(-50%); }
}

/* The after-tool slot (change le-placements-after-tool-slot, D2): first thing in a calculator
   page's prose column, at the column's width (no breakout), so its own top margin goes and the
   gap to the first paragraph comes from the container. */
.le-slot--after-tool { margin: 0 0 clamp(24px, 3vw, 32px); clear: both; }
.le-slot--after-tool .le-cb { margin: 0; }
.le-prose .le-slot--after-tool a.le-cb, .le-prose .le-slot--after-tool a.le-cb:hover { color: inherit; text-decoration: none; }

/* ---- the unit ---- */
.le-cb {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 2.2em 0;
  padding: 22px 26px;
  border: 1px solid #E4DBEE;
  border-radius: 16px;
  background: linear-gradient(135deg, #FDF2F6 0%, #F7F4FB 55%, #EFEAF6 100%);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(42, 31, 82, .05), 0 6px 20px -10px rgba(42, 31, 82, .18);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* the theme styles bare <a>; pin everything the unit needs */
.le-cb,
.le-cb:hover,
.le-cb:focus,
.le-cb:visited { text-decoration: none; color: #2A1F52; }

.le-cb:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(42, 31, 82, .06), 0 12px 28px -10px rgba(42, 31, 82, .26);
}
.le-cb:focus-visible { outline: 3px solid #A38EEC; outline-offset: 3px; }

/* soft wash behind the mark, well under the text */
.le-cb::before {
  content: "";
  position: absolute;
  left: -60px; top: 50%;
  width: 320px; height: 320px;
  transform: translateY(-50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    rgba(252, 110, 158, .18) 0%, rgba(218, 154, 240, .10) 45%, rgba(163, 142, 236, 0) 75%);
}

.le-cb__orb { flex: 0 0 auto; width: 68px; height: 68px; display: block; position: relative; z-index: 1; }

/* icon and photo visuals take the orb's box */
.le-cb__pic { flex: 0 0 auto; width: 68px; height: 68px; display: block; position: relative; z-index: 1; overflow: hidden; }
.le-cb__pic .le-cb__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* an app-icon tile: the iOS home-screen corner proportion (~22%), the header promo's ring */
.le-cb__pic--icon { border-radius: 15px; box-shadow: 0 1px 3px rgba(42, 31, 82, .18), 0 0 0 .5px rgba(42, 31, 82, .12); }
.le-cb__pic--photo { border-radius: 12px; box-shadow: 0 1px 3px rgba(42, 31, 82, .18); }

.le-cb__text { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; }

.le-cb__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6E52C4;
  margin-bottom: 7px;
}
.le-cb__head {
  display: block;
  font-family: Georgia, "Iowan Old Style", serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: #2A1F52;
  margin-bottom: 5px;
  /* stops the last word dropping to a line of its own at content width */
  text-wrap: balance;
}
/* the theme's override of the snippet (le-editorial.css): the site serif where it exists */
.le-site .le-cb__head, .editor-styles-wrapper .le-cb__head { font-family: var(--juniper-font-serif, Georgia, "Iowan Old Style", serif); }
.le-cb__sub {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: #5B4E87;
}

.le-cb__cta {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(135deg, #FC6E9E 0%, #DA9AF0 55%, #A38EEC 100%);
  box-shadow: 0 0 0 1px rgba(176, 144, 235, .25), 0 6px 20px rgba(252, 110, 158, .22);
}

@media (max-width: 640px) {
  .le-cb {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 26px 20px 24px;
  }
  .le-cb::before { left: 50%; top: -90px; transform: translateX(-50%); width: 300px; height: 300px; }
  .le-cb__orb, .le-cb__pic { width: 60px; height: 60px; }
  .le-cb__pic--icon { border-radius: 13px; }
  .le-cb__head { font-size: 19px; }
  .le-cb__cta { width: 100%; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .le-cb { transition: none; }
  .le-cb:hover { transform: none; }
}

/* ---- editor-only affordances ---- */
.le-cb-editor { padding: 12px 0; }
.le-cb-editor .le-cb { margin: 0; }
.le-cb-variant-chip { display: inline-block; margin: 0 0 8px; padding: 2px 8px; border-radius: 999px; background: #F2EEF8; color: #5B4E87; font: 600 11px/1.6 system-ui, sans-serif; letter-spacing: 0.02em; }
.le-cb-pic-btn { padding: 0; border: 0; cursor: pointer; background: none; }
.le-cb-pic-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 22px; color: #5B4E87; background: #F2EEF8; }