/*
  "Banner" — nested entry inside the CKEditor rich text fields.
  Template: templates/_partials/entry/banner.twig
  Rendered inside `.richText`, so the inherited prose rules are reset below.

  Measurements come from the Figma CTA frame (node 13334:2141), which is 656px wide —
  near enough 1:1 with the article content column (`.page__content__inner`, max 67rem).
  Padding and the column gap are rounded to this codebase's 0.8rem rhythm (as
  entryQuoteSlider does); everything else is the designed value.

  Vertical spacing is done with margins on the children rather than a grid `row-gap`.
  Description and CTA are both optional, and a row gap would still be drawn across the
  rows they leave empty; a margin only exists when its element is actually rendered.
*/

.entryBanner {
  /* Figma's fill is a radial gradient centred on the top-left corner, with its axes rotated
     ~25deg. CSS radial gradients are axis-aligned, so this is the closest faithful stand-in:
     the ellipse radii match the designed axis lengths (~721px x ~1319px over a 656x299 box).
     The first stop is already a project token; the two darker-to-lighter navies are local,
     since nothing else on the site uses them. */
  background-image: radial-gradient(
    ellipse 110% 440% at 0% 0%,
    var(--color-blue-dark) 0%,
    #00153b 50%,
    #001755 100%
  );
  border-radius: 0.6rem;
  overflow: hidden;
  margin: 3.2rem 0;
  padding: 2.4rem;
  /* Containing block for the glow below. */
  position: relative;

  /* Single column on mobile. DOM order is already the mobile order
     (heading, description, image, CTA), so nothing needs placing here. */
  display: grid;
  /* The card owns its alignment — without this it inherits the centring that
     `.sectionRichText.media-middle` applies to that section's whole text column. */
  text-align: left;
}

.entryBanner__image {
  display: flex;
  margin-top: 2.4rem;
}

.entryBanner__actions {
  margin-top: 2.4rem;
}

@media screen and (min-width: 768px) {
  .entryBanner {
    margin: 4.8rem 0;
    padding: 4.8rem 5.6rem;
    /* Text column + image column. `minmax(0, 1fr)` rather than `1fr` so a long unbroken word
       in the heading shrinks the column instead of overflowing the panel.
       The three rows are declared explicitly so the image's `grid-row: 1 / -1` has a real
       last line to span to — with implicit rows `-1` resolves back to line 1, which pins the
       image into row 1 and stretches that row to the image's height. */
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    column-gap: 5.6rem;
    row-gap: 0;
  }

  .entryBanner__heading {
    grid-column: 1;
    grid-row: 1;
  }

  .entryBanner__description {
    grid-column: 1;
    grid-row: 2;
  }

  .entryBanner__actions {
    grid-column: 1;
    grid-row: 3;
    /* The designed gap above the button. */
    margin-top: 3.4rem;
  }

  /* Spans all three text rows and sits at the top, as in the design. */
  .entryBanner__image {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    margin-top: 0;
  }
}

/*
  The blue glow (Figma node 13581:1997/8): a #006be9 rounded rectangle, 317x322, blurred by
  66.9px, sitting behind the image and clipped by the panel's `overflow: hidden`. It is what
  lifts the right-hand side from navy to bright blue — the base radial gradient is unchanged.

  Done as a pseudo-element rather than markup, since it is pure decoration. In the design it
  is centred vertically on a 299px-tall panel and overhangs the right edge by 64px; anchoring
  it to `right`/`50%` rather than percentage offsets keeps that relationship when the panel
  grows or shrinks with its content (the live banners are 271-313px tall, not 299).
*/

.entryBanner::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -6.4rem;
  width: 31.7rem;
  height: 32.2rem;
  transform: translateY(-50%);
  border-radius: 0.85rem;
  background-color: #006be9;
  filter: blur(6.7rem);
  /* Figma still has this at full strength; 60% is Joel's call — at 100% the right-hand side
     of the panel reads brighter than the design intends against real cover art. */
  opacity: 0.6;
  pointer-events: none;
}

/* An absolutely positioned pseudo-element paints above static siblings, so the content has to
   be lifted back over the glow. */
.entryBanner > * {
  position: relative;
  z-index: 1;
}

/* Heading.
   `.richText h3` sets Scout 3rem with its own margins — reset to the design's
   "Display xs Semibold" (Inter 600, 24/32). */

.richText .entryBanner__heading,
.entryBanner__heading {
  margin: 0 0 1.6rem 0;
  font-family: var(--font-inter);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 3.2rem;
  letter-spacing: 0;
  /* Figma "Opacity/White 12" — very slightly softened against the navy. */
  color: rgba(255, 255, 255, 0.95);
}

/* Description.
   `.richText p` sets 1.8rem and a bottom margin; the margins above own the spacing here. */

.richText .entryBanner__description,
.entryBanner__description {
  margin-bottom: 1.6rem;
  font-family: var(--font-inter);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-white);
}

/* Image.
   `.richText img` adds a light border — it would read as a stray hairline against the navy,
   so it is removed and the slot width applied: 15rem on mobile, 20rem from 940px up.
   `height: auto` keeps it uncropped, so the rendered height follows the asset (a portrait
   cover is ~26.6rem tall at the desktop width, a square one 20rem). */

.richText .entryBanner__image img,
.entryBanner__image img {
  display: block;
  width: 15rem;
  height: auto;
  border: 0;
  border-radius: 0.6rem;
}

@media screen and (min-width: 940px) {
  .richText .entryBanner__image img,
  .entryBanner__image img {
    width: 20rem;
  }
}