/* ==========================================================================
   HOMEPAGE — NEWS & UPDATES
   ==========================================================================

   Replaces the template's .news-wrapper-style1 card, which had four problems
   on this page specifically:

   1. The post images are 1200x630 OG title cards — the headline is baked into
      the artwork. This card shows the image anyway, matching the insights
      listing, but treats it as a band rather than a picture: cropped to 16:9
      so the wordmark strip at the bottom of the card is cut off, dimmed, and
      overlaid with the category chip. The headline below is set smaller than
      it was in the imageless version so the two do not compete. (The real fix
      for the duplication is a textless cover on those four posts; nothing
      here depends on that happening.)
   2. The text panel was pulled up 50px over the image and inset 40px from the
      right, which left a bare coloured sliver poking out of every card and
      dropped the category chip onto the seam between the two.
   3. The author avatar was the post's own OG card squeezed into a 48px
      circle — 1200px of headline artwork rendered as unreadable mush, next to
      a hardcoded "Admin" byline that links nowhere.
   4. Card height followed the title, so a two-line headline made its card
      taller than its neighbours and the row bottoms never lined up.

   The section sits on the dark body (#090931), so the surface is a translucent
   white lift rather than a solid panel — it keeps working if the backdrop
   behind it ever changes.
   ========================================================================== */

.wm-news {
  /* Azure from the monogram, as used by projects.css and insights.css. The
     tinted borders and blooms below need alpha, so they carry the same colour
     as rgb() literals rather than through this variable. */
  --azure-300: #5fcdfb;

  /* Text tuned against #090931 rather than the light-page ink ramp. */
  --news-heading: #ffffff;
  --news-body: #b6bcdf;
  --news-muted: #8f96c8;

  font-family: 'Roboto', sans-serif;
}

.wm-news *, .wm-news *::before, .wm-news *::after { box-sizing: border-box; }

/* auto-fit rather than a fixed three, so a month with two published posts
   fills the row instead of leaving a hole where the third card would be. */
.wm-news__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

/* --- Card ------------------------------------------------------------------
   Flex column with the footer pushed down, so every card in a row ends at the
   same place whatever the headline does. */

.wm-news__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: rgb(255 255 255 / .04);
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: 10px;
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

/* The padding moved off the card and onto this, so the image band can run
   full-bleed to the card's edges while the text keeps its old inset. */
.wm-news__body {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex: 1;
  padding: 1.25rem 1.5rem 1.375rem;
}

.wm-news__card:hover {
  background-color: rgb(255 255 255 / .06);
  border-color: rgb(41 182 240 / .45);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgb(4 6 24 / .55);
}

/* A bloom in place of a thumbnail: it gives the card a lit corner and some
   depth without pretending the OG artwork is a photograph. Same device as the
   consultation band, so the two read as one site. */
.wm-news__card::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset-block-start: -50%;
  inset-inline-end: -28%;
  width: 18rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgb(41 182 240 / .2) 0%, transparent 58%),
    radial-gradient(circle, rgb(59 56 235 / .42) 0%, transparent 72%);
  opacity: .9;
  transition: opacity .25s ease;
  pointer-events: none;
}

.wm-news__card:hover::before { opacity: 1; }

/* --- Media band ------------------------------------------------------------
   A fixed 16:9 window rather than the image's own 1200x630, so every card in a
   row starts its text at the same height whatever gets uploaded next. The crop
   is centred, which on the current OG cards trims the wordmark strip along the
   bottom and leaves the headline artwork.

   The scrim is a hard requirement, not decoration: it keeps the white type
   inside those cards from shouting over the real headline below, and gives the
   category chip a surface dark enough to sit on. */

.wm-news__media {
  position: relative;
  /* flex: none so a long headline in a neighbouring card, which stretches this
     one, cannot shrink the band and break the 16:9 the row is lined up on. */
  flex: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #12123f;
  border-block-end: 1px solid rgb(255 255 255 / .09);
}

.wm-news__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Held back from full brightness so the card's own headline stays the
     loudest thing in it; the image comes up on hover. */
  filter: saturate(.92) brightness(.82);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), filter .25s ease;
}

.wm-news__card:hover .wm-news__media img {
  transform: scale(1.04);
  filter: saturate(1) brightness(.95);
}

.wm-news__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(9 9 41 / .78) 0%, rgb(9 9 41 / .12) 55%, transparent 100%);
  pointer-events: none;
}

/* Shown when a post has no image, or has one whose file is missing. The
   initial on a tinted panel is the same device the products grid uses for a
   suite with no screenshot, so an image-less card still looks intended. */
.wm-news__media-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 25%, rgb(41 182 240 / .3) 0%, transparent 60%),
    linear-gradient(135deg, #23219c 0%, #12123f 100%);
}

.wm-news__media-fallback span {
  font-family: 'Mulish', sans-serif;
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1;
  color: rgb(255 255 255 / .5);
}

/* --- Meta ------------------------------------------------------------------
   The category chip moved onto the image, where it does the work the old card
   needed a block of colour for. Reading time stays in the text panel. */

.wm-news__meta {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-wrap: wrap;
}

.wm-news__category {
  position: absolute;
  inset-block-end: .75rem;
  inset-inline-start: .875rem;
  z-index: 1;
  display: inline-block;
  padding: .25rem .5rem;
  border-radius: 3px;
  font-family: 'Mulish', sans-serif;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--azure-300) !important;
  background-color: rgb(9 9 41 / .72);
  border: 1px solid rgb(41 182 240 / .38);
  backdrop-filter: blur(4px);
}

.wm-news__readtime {
  font-family: 'Mulish', sans-serif;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--news-muted) !important;
}

/* --- Headline --------------------------------------------------------------
   Stepped down from 1.25rem now that the image band carries the top of the
   card; at the old size the two fought each other. Clamped rather than cut at
   50 characters in PHP: two full lines beat half a sentence and an ellipsis. */

.wm-news__title {
  margin: 0;
  font-family: 'Mulish', sans-serif;
  font-size: 1.0625rem !important;
  font-weight: 800 !important;
  line-height: 1.35;
  letter-spacing: -.012em;
  color: var(--news-heading) !important;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wm-news__title a {
  color: inherit !important;
  text-decoration: none;
}

.wm-news__card:hover .wm-news__title { color: var(--azure-300) !important; }

.wm-news__excerpt {
  margin: 0;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--news-body) !important;
  /* Clamped so a 240-character excerpt and a 90-character one produce the
     same card. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Footer ---------------------------------------------------------------- */

.wm-news__footer {
  margin-block-start: auto;
  padding-block-start: 1rem;
  border-block-start: 1px solid rgb(255 255 255 / .09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wm-news__date {
  font-size: .8125rem;
  color: var(--news-muted) !important;
}

/* Arrow link rather than a gradient pill, matching the products grid. */
.wm-news__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 560;
  text-decoration: none;
  color: #f4f8fb !important;
  transition: color .15s ease;
}

.wm-news__link svg {
  width: 1em;
  height: 1em;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}

.wm-news__card:hover .wm-news__link { color: var(--azure-300) !important; }
.wm-news__card:hover .wm-news__link svg { transform: translateX(.25rem); }

/* One anchor covers the card; the visible link stays for screen readers. */
.wm-news__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* The headline is the focusable anchor, and it sits inside the line-clamp's
   overflow: hidden — an outline drawn on it would be clipped. So the ring goes
   on the card instead, where it has room. */
.wm-news__card:focus-within {
  border-color: rgb(41 182 240 / .55);
  outline: 2px solid rgb(95 205 251 / .55);
  outline-offset: 2px;
}

.wm-news__card:focus-within .wm-news__title { color: var(--azure-300) !important; }
.wm-news__title a:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .wm-news *, .wm-news *::before, .wm-news *::after {
    transition-duration: .01ms !important;
  }
}