/* ---------------------------------------------------------------------------
   Figma node 4053:1007 — "13/ Section News" (1442 x 891 frame)
     background   white (5.075%) -> #D2E8FA (100%), vertical
     heading      45px / 46.2px, uppercase, blue gradient; line box at y 0
     cards        382 x 567, white, radius 30, 0 8px 8px rgba(0,0,0,.16),
                  32px apart, from the container's left edge, the 4th card cut
                  off by the page's right edge; 55px under the heading
     image        382 x 319, rounded top corners
     body         24px inset; category 18/22 condensed #043875, title 17px
                  under it 25.8/34 bold #043875, read time pinned to the card
                  floor 18/32 bold #3092D0
     arrows       the value-slider / testimonials-carousel pair: 32px #0F1C41,
                  16px apart, 53px under the cards

   Vertical padding: the same as three-boxes / testimonials-carousel at every
   breakpoint — 112 / 94 desktop, 56 / 80 tablet (<=992), 48 / 64 mobile (<=767).

   Hover: the blog-post "You may also like" card lift (-4px, deeper shadow,
   image eases to 1.04) without its blue fill. Hover only applies on devices
   that really hover, so a tap on iOS never leaves a card stuck "lifted".

   Dark mode is declared at the bottom of this file (body[data-theme="dark"]),
   reading the theme-dark.css tokens with light fallbacks, so this file works
   on its own.
   --------------------------------------------------------------------------- */
.latest-news {
  --ln-fade-white: #FFFFFF;
  --ln-fade-blue: var(--lf-fade-blue, #D2E8FA);
  --ln-gap: 32px;
  --ln-gutter: 32px;
  --ln-card-w: 382px;
  --ln-radius: 30px;
  --ln-surface: #FFFFFF;
  --ln-media-bg: #E8EAE9;
  --ln-ink: #043875;
  --ln-read: #3092D0;
  --ln-arrow: #0F1C41;
  --ln-arrow-hover: #0070C0;
  --ln-focus: #0070C0;
  --ln-shadow: 0 8px 8px rgba(0, 0, 0, 0.16);
  --ln-shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.18);
  --ln-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Room around the cards inside the scroller for the shadow and the hover
     lift — an overflow-x scroller clips vertically too. Taken back with
     negative margins, so it costs no layout space. */
  --ln-pad-top: 32px;
  --ln-pad-bottom: 68px;
  --ln-pad-left: 28px;
  position: relative;
  width: 100%;
  /* Top / bottom = Styles tab → Spacing (styles.spacing_top /
     styles.spacing_bottom), printed by module.html as --ln-space-top /
     --ln-space-bottom on this element. The fallbacks are the original
     112 / 94, so the band is unchanged anywhere the fields haven't been saved
     yet. Tablet and mobile scale the same values down by the original ratios. */
  padding: var(--ln-space-top, 112px) 0 var(--ln-space-bottom, 94px);   /* = three-boxes / testimonials-carousel */
  /* The scroller bleeds to the right page edge (and 100vw counts the
     scrollbar); clip it here so it never adds a horizontal page scrollbar. */
  overflow: hidden;
  background-color: var(--ln-fade-white);
}

/* Background fade — same choice values and classes as hero-text /
   testimonials-carousel (lf-bg-fade--*), with this section's own Figma stops.
   Two classes so it beats the main.css utility in any stylesheet order.
   "blue -> white" is the exact mirror. */
.latest-news.lf-bg-fade {
  background-color: var(--ln-fade-white);
}

.latest-news.lf-bg-fade--white-to-blue {
  background-image: linear-gradient(to bottom, var(--ln-fade-white) 5.075%, var(--ln-fade-blue) 100%);
}

.latest-news.lf-bg-fade--blue-to-white {
  background-image: linear-gradient(to top, var(--ln-fade-white) 5.075%, var(--ln-fade-blue) 100%);
}

/* Same container / gutter steps as testimonials-carousel and value-slider, so
   the heading, first card and arrows line up with the sections around it. */
.latest-news__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--ln-gutter);
}

@media (min-width: 1075px) and (max-width: 1166px) {
  .latest-news { --ln-gutter: 16px; }
}

@media (max-width: 1074px) {
  .latest-news { --ln-gutter: 20px; }
}

/* ---------------------------------------------------------------------------
   Heading — gradient declared here so module.css works on its own
   --------------------------------------------------------------------------- */
.latest-news .latest-news__heading {
  display: table;   /* shrink-wrap: the sweep spans the words, not the row */
  /* Paint headroom for background-clip:text, pulled back with an equal
     negative margin so the line box sits exactly on the section's top
     padding. 55px to the cards (the scroller's padding is cancelled by its
     own negative margin, so it doesn't count). */
  margin: -0.08em 0 calc(55px - 0.08em);
  padding: 0.08em 0;
  font-family: 'HelveticaNeueLTStd-BdCn', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(30px, 3.4vw, 45px);
  font-weight: bold;
  line-height: 1.0267;   /* 46.2 / 45 */
  text-transform: uppercase;
  color: #0070C0;        /* fallback where background-clip:text is unsupported */
  background-image: linear-gradient(to right, #033D78 0%, #0070C0 50%, #3092D0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------------------------------------------------------------------------
   Scroller — native horizontal scrolling with scroll-snap
   Left edge: the container's. Right edge: the page's (margin-right reaches
   from the container content box to the viewport edge), so the next card
   bleeds off screen like the design. Snapping uses the same left padding
   (scroll-padding) so cards rest on the container edge.
   --------------------------------------------------------------------------- */
.latest-news .latest-news__scroller {
  position: relative;
  display: flex;
  gap: var(--ln-gap);
  margin: calc(var(--ln-pad-top) * -1) calc((100% - 100vw) / 2) calc(var(--ln-pad-bottom) * -1) calc(var(--ln-pad-left) * -1);
  padding: var(--ln-pad-top) 0 var(--ln-pad-bottom) var(--ln-pad-left);
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--ln-pad-left);
  -webkit-overflow-scrolling: touch;   /* momentum on older iOS Safari */
  overscroll-behavior-x: contain;      /* no browser back-swipe from the end */
  scrollbar-width: none;               /* Firefox */
  -ms-overflow-style: none;
}

.latest-news__scroller::-webkit-scrollbar {
  display: none;                       /* Safari / Chrome */
}

/* End spacer: lets the last card come to rest a gutter in from the right page
   edge instead of flush against it (scroll containers ignore a flex row's
   padding-right in Safari). The gap before it is subtracted. */
.latest-news__scroller::after {
  content: "";
  flex: 0 0 max(1px, calc(max(var(--ln-gutter), (100vw - 1400px) / 2 + var(--ln-gutter)) - var(--ln-gap)));
}

/* While module.js animates scrollLeft (arrows) or follows a mouse drag,
   snapping is switched off — Safari otherwise fights every programmatic step. */
.latest-news__scroller.is-animating,
.latest-news__scroller.is-dragging {
  scroll-snap-type: none;
}

.latest-news--draggable .latest-news__scroller {
  cursor: grab;
}

.latest-news__scroller.is-dragging {
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}

/* No hover lift while dragging: the card under the pointer would bob. */
.latest-news__scroller.is-dragging .latest-news__card {
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Card
   --------------------------------------------------------------------------- */
.latest-news .latest-news__item {
  display: flex;               /* the card fills the item -> equal heights */
  flex: 0 0 var(--ln-card-w);
  min-width: 0;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}

.latest-news .latest-news__item::before {
  content: none;               /* no theme list bullets */
}

.latest-news .latest-news__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 567px;
  border-radius: var(--ln-radius);
  background-color: var(--ln-surface);
  box-shadow: var(--ln-shadow);
  color: inherit;
  text-decoration: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 300ms var(--ln-ease), box-shadow 300ms var(--ln-ease);
}

.latest-news a.latest-news__card:hover,
.latest-news a.latest-news__card:focus {
  color: inherit;
  text-decoration: none;
}

.latest-news a.latest-news__card:focus {
  outline: none;
}

.latest-news a.latest-news__card:focus-visible {
  outline: 3px solid var(--ln-focus);
  outline-offset: 3px;
}

/* Media: its own top-corner radius plus the mask, because Safari can paint
   square corners on an overflow:hidden + border-radius box while a child is
   transformed (the hover zoom) or being decoded. The mask is on the media,
   not the card, so it never clips the card's shadow. */
.latest-news__media {
  position: relative;
  display: block;
  flex-shrink: 0;
  aspect-ratio: 382 / 319;
  border-radius: var(--ln-radius) var(--ln-radius) 0 0;
  overflow: hidden;
  background-color: var(--ln-media-bg);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Safari < 15 has no aspect-ratio. */
@supports not (aspect-ratio: 1 / 1) {
  .latest-news__media {
    height: 0;
    padding-top: 83.508%;   /* 319 / 382 */
  }
}

.latest-news__media--empty {
  background-image: linear-gradient(135deg, #033D78 0%, #0070C0 55%, #3092D0 100%);
}

.latest-news .latest-news__img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  -webkit-user-drag: none;
  /* No backface-visibility / will-change here: both promote the image to its
     own compositor layer, which Chrome rasterises once and then scales — the
     hover zoom (and sometimes the resting image) comes out soft. */
  transition: transform 500ms var(--ln-ease);
}

.latest-news__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 24px;
}

.latest-news__cat {
  display: block;
  margin-bottom: 17px;
  font-family: 'HelveticaNeueLTStd-BdCn', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ln-ink);
}

/* Bold body copy: Roman + synthetic weight + a hairline stroke — the same
   recipe as the blog listing / blog post cards (no Bold face is loaded). */
.latest-news .latest-news__title {
  margin: 0 0 24px;
  padding: 0;
  font-family: 'HelveticaNeueLTStd-Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(20px, 1.8vw, 25.8px);
  font-weight: 700;
  line-height: 1.3178;   /* 34 / 25.8 */
  letter-spacing: 0;
  text-transform: none;
  -webkit-text-stroke: 0.35px currentColor;
  color: var(--ln-ink);
  overflow-wrap: break-word;
  /* Long titles stop at four lines so every card keeps the design's rhythm. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.latest-news__read {
  display: block;
  margin-top: auto;            /* pinned to the card floor */
  font-family: 'HelveticaNeueLTStd-Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 32px;
  -webkit-text-stroke: 0.3px currentColor;
  color: var(--ln-read);
  transition: color 200ms ease;
}

/* Hover / keyboard focus — lift, deeper shadow, image zoom. */
@media (hover: hover) and (pointer: fine) {
  .latest-news a.latest-news__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ln-shadow-hover);
  }

  .latest-news a.latest-news__card:hover .latest-news__img {
    transform: scale(1.04);
  }

  .latest-news a.latest-news__card:hover .latest-news__read {
    color: var(--ln-arrow-hover);
  }
}

.latest-news a.latest-news__card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--ln-shadow-hover);
}

.latest-news a.latest-news__card:focus-visible .latest-news__img {
  transform: scale(1.04);
}

/* Editor-only notice when the chosen blog / tag has no posts. */
.latest-news .latest-news__empty {
  margin: 0;
  padding: 24px;
  border: 2px dashed #8ACBF0;
  border-radius: 20px;
  font-family: 'HelveticaNeueLTStd-Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #565656;
}

/* ---------------------------------------------------------------------------
   Arrows — identical to testimonials-carousel / value-slider
   --------------------------------------------------------------------------- */
.latest-news__controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 53px;
}

.latest-news__controls[hidden] {
  display: none;
}

.latest-news__arrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ln-arrow);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;          /* no double-tap-zoom delay on iOS */
  transition: color 200ms ease, transform 200ms ease;
}

/* 44px hit area around the 32px glyph. */
.latest-news__arrow::before {
  content: "";
  position: absolute;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
}

.latest-news__arrow svg {
  display: block;
  width: 32px;
  height: 32px;
  pointer-events: none;                /* the click always lands on the button */
}

@media (hover: hover) and (pointer: fine) {
  .latest-news__arrow:hover { color: var(--ln-arrow-hover); }
  .latest-news__arrow--prev:hover { transform: translateX(-2px); }
  .latest-news__arrow--next:hover { transform: translateX(2px); }
}

.latest-news__arrow:focus { outline: none; }

.latest-news__arrow:focus-visible {
  outline: 3px solid var(--ln-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .latest-news .latest-news__card,
  .latest-news .latest-news__img,
  .latest-news__read,
  .latest-news__arrow {
    transition: none;
  }

  .latest-news a.latest-news__card:hover,
  .latest-news a.latest-news__card:focus-visible,
  .latest-news a.latest-news__card:hover .latest-news__img,
  .latest-news a.latest-news__card:focus-visible .latest-news__img,
  .latest-news__arrow--prev:hover,
  .latest-news__arrow--next:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Tablet
   --------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .latest-news {
    --ln-gap: 24px;
    --ln-card-w: 340px;
    --ln-radius: 24px;
    /* 56 / 112 top, 80 / 94 bottom of the desktop spacing (56 / 80 by default). */
    padding-top: calc(var(--ln-space-top, 112px) * 56 / 112);
    padding-bottom: calc(var(--ln-space-bottom, 94px) * 80 / 94);
  }

  .latest-news .latest-news__heading {
    margin-bottom: calc(40px - 0.08em);
  }

  .latest-news .latest-news__card {
    min-height: 500px;
  }

  .latest-news__body {
    padding: 22px;
  }

  .latest-news__cat {
    margin-bottom: 14px;
    font-size: 17px;
  }

  .latest-news .latest-news__title {
    font-size: 22px;
    line-height: 30px;
  }

  .latest-news__read {
    font-size: 17px;
  }

  .latest-news__controls {
    margin-top: 40px;
  }
}

/* ---------------------------------------------------------------------------
   Mobile — one card per view with the next one peeking in, same left inset
   as testimonials-carousel's mobile run
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .latest-news {
    --ln-gap: 16px;
    --ln-gutter: 24px;
    --ln-card-w: min(320px, calc(100vw - 72px));
    --ln-radius: 20px;
    /* 48 / 112 top, 64 / 94 bottom of the desktop spacing (48 / 64 by default). */
    padding-top: calc(var(--ln-space-top, 112px) * 48 / 112);
    padding-bottom: calc(var(--ln-space-bottom, 94px) * 64 / 94);
  }

  .latest-news .latest-news__heading {
    margin-bottom: calc(32px - 0.08em);
    font-size: 28px;
    line-height: 1;
  }

  .latest-news .latest-news__card {
    min-height: 0;
  }

  .latest-news__body {
    padding: 20px;
  }

  .latest-news__cat {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 20px;
  }

  .latest-news .latest-news__title {
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 27px;
  }

  .latest-news__read {
    font-size: 16px;
    line-height: 28px;
  }

  .latest-news__controls {
    margin-top: 32px;
  }
}

/* ---------------------------------------------------------------------------
   Dark mode — same tokens and treatment as testimonials-carousel /
   blog-post cards (theme-dark.css). The fade keeps its shape: its white end
   becomes the page ground and its blue end the dark surface, so it still hands
   over to a blue-topped section below the way it does in light mode.
   --------------------------------------------------------------------------- */
body[data-theme="dark"] .latest-news {
  --ln-fade-white: var(--lf-bg, #0c213d);
  --ln-fade-blue: var(--lf-surface, #16305d);
  --ln-surface: var(--lf-surface, #16305d);
  --ln-media-bg: var(--lf-surface-alt, #11294b);
  --ln-ink: #C4E3F7;
  --ln-read: var(--lf-accent-blue, #75b6e5);
  --ln-arrow: var(--lf-text-strong, #FFFFFF);
  --ln-arrow-hover: var(--lf-accent-blue, #75b6e5);
  --ln-focus: var(--lf-accent-blue, #75b6e5);
  /* Not --lf-shadow-card: its 48px blur overruns the scroller's 28px left
     shadow room and gets clipped into a hard edge (the testimonials-carousel
     bug). Both of these fit inside the 32 / 68 / 28px room. */
  --ln-shadow: 0 8px 16px rgba(0, 0, 0, 0.32);
  --ln-shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.42);
}

body[data-theme="dark"] .latest-news .latest-news__heading {
  background-image: var(--lf-heading-gradient, linear-gradient(90deg, #75b6e5 0%, #c4e3f7 51%, #ffffff 93%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

body[data-theme="dark"] .latest-news .latest-news__card {
  border: 1px solid var(--lf-border, #183d5d);
}

/* Beats theme-dark.css's global h3 / a colour rules. */
body[data-theme="dark"] .latest-news .latest-news__title,
body[data-theme="dark"] .latest-news .latest-news__cat { color: var(--ln-ink); }
body[data-theme="dark"] .latest-news .latest-news__read { color: var(--ln-read); }
body[data-theme="dark"] .latest-news a.latest-news__card:hover .latest-news__read { color: var(--lf-accent-blue-hover, #c4e3f7); }

body[data-theme="dark"] .latest-news .latest-news__empty {
  border-color: var(--lf-border, #183d5d);
  color: var(--lf-text, #d2e8fa);
}