/* =========================================================================
   InFlightAI — News index + article
   Layers on home.css (tokens, header, footer, topcap).

   Structure follows levatas.com/blog — a plain reverse-chronological list of
   date + title + excerpt, and an article that is title, date and prose. The
   styling is entirely the new site's: same shell width, hairlines, pill
   buttons and type scale as the AI Model Library.
   ========================================================================= */

:root {
  --news-gutter: clamp(20px, 6.944vw, 100px);
  /* Article art: the dark band runs to the image's vertical midpoint, so the
     image reads as overlapping the header. Band = headroom + half the art. */
  --art-h: clamp(200px, 26vw, 340px);
  --art-headroom: clamp(24px, 3vw, 52px);
  /* Index: the first row of thumbnails straddles the band the same way. */
  --thumb-h: 200px;
  --news-head-pad: clamp(48px, 6vw, 88px);
  --news-measure: 760px; /* ~75 characters at 18px — comfortable for long reads */
}

.news-shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--news-gutter);
}

/* =========================================================================
   Dark headline band — shared by the index and the article
   ========================================================================= */
.newshead {
  position: relative;
  z-index: 2;
  padding-block: 16px var(--news-head-pad);
  text-align: center;
}
.newshead__inner { max-width: 875px; margin-inline: auto; padding-inline: var(--news-gutter); }
.newshead__eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-800);
}
.newshead__title {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
}
.newshead__sub {
  max-width: 670px;
  margin: 12px auto 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--gray-600);
}
/* Article: no page title — just the eyebrow, then the featured image rising
   into the band. Padding rather than a fixed height, so the band grows with
   the eyebrow and the art's midpoint still lands on the band's bottom edge. */
.newshead--bare {
  /* padding-bottom only — the top is inherited from .newshead so the eyebrow
     lands in exactly the same place on both templates. */
  padding-bottom: calc(var(--art-headroom) + var(--art-h) / 2);
}
/* the gap to the art is --art-headroom's job here */
.newshead--bare .newshead__eyebrow { margin-bottom: 0; }

/* Generic pages: the same band, minus the room --bare leaves for an article's
   featured image to ride up into. Without art that was 213px of empty dark
   under the title. The panel still overlaps a little, as it does everywhere. */
.newshead--page { padding-bottom: clamp(56px, 7vw, 96px); }
/* these views have no thumbnail row straddling the band, so the panel sits
   below it rather than riding up into it */
.newsmain--page { padding-top: clamp(28px, 4vw, 52px); }
.newsmain--page .newspanel { margin-top: 0; padding-top: 0; background: transparent; }

/* the search form on /?s= — the only control these fallback views add */
.newssearch { display: flex; gap: 10px; margin-bottom: clamp(24px, 3vw, 40px); }
.newssearch .ff-input {
  flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 16px;
  border: 1px solid var(--light); border-radius: 40px; background: #fff;
  font-family: "Outfit", sans-serif; font-size: 15px; color: var(--black);
}
.newssearch .ff-input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.newssearch .btn-pill { flex: 0 0 auto; cursor: pointer; }
.newslist__empty {
  padding: clamp(28px, 4vw, 48px) 0;
  font-family: "DM Sans", "Outfit", sans-serif; font-size: 16px; line-height: 26px; color: var(--gray);
}
.newslist__empty a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.newshead--page + * .article,
.newsmain--page .article { margin-top: 0; }
/* index: deepen the band by half a thumbnail so the top row can ride into it */
.newshead--index { padding-bottom: calc(var(--news-head-pad) + var(--thumb-h) / 2); }

.newshead__meta {
  margin-top: 18px;
  font-family: "DM Sans", "Outfit", sans-serif;
  font-variation-settings: "opsz" 14;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-600);
}

/* =========================================================================
   Content well — the same pale gradient foot as the Library
   ========================================================================= */
.newsmain {
  position: relative;
  background: var(--white);
  padding-block: clamp(48px, 6vw, 80px) clamp(64px, 8vw, 104px);
}
.newsmain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -154px;
  height: 534px;
  background: url("../img/library/footer-gradient.webp") center / cover no-repeat;
  pointer-events: none;
}
.newsmain > * { position: relative; z-index: 1; }
/* Index: the panel rides up so the first row of art crosses the band edge.
   flow-root for the same reason as the article — see below. */
.newsmain--index { padding-top: 0; display: flow-root; }
.newsmain--index .newspanel {
  margin-top: calc(-1 * var(--thumb-h) / 2);
  padding-top: 0;
  /* the panel is a layout box only; a white fill would cover the dark band */
  background: transparent;
}

/* The art supplies its own top spacing via a negative margin. `flow-root` is
   load-bearing: with padding-top removed there is nothing to stop that margin
   collapsing out to .newsmain and dragging its white background up with it —
   which moves the whole section instead of overlapping the band above. */
.newsmain--article { padding-top: 0; display: flow-root; }
.newsmain + .footer { position: relative; z-index: 1; }

/* =========================================================================
   Index — a wrapping grid of image cards inside one white panel, matching
   the source site: 300px cards, 300x200 art rounded at the top only.
   ========================================================================= */
.newspanel {
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(24px, 3vw, 44px);
  border-radius: var(--radius-lg);
  background: var(--white);
}

/* Grid, not flex-wrap: `justify-content: center` on a flex row centres the
   *items*, so a final row of two would float in the middle. On a grid it
   centres the *tracks*, and items still fill from the left. */
.newsgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  justify-content: center;
  gap: 40px 24px;
  list-style: none;
}

.newscard {
  display: flex;
  flex-direction: column;
}
.newscard__media {
  position: relative;
  width: 100%;
  height: var(--thumb-h);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--light-300);
  /* the source site's deep card lift, re-tinted to the brand ink */
  box-shadow: 0 20px 44px -18px rgba(0, 15, 35, 0.55);
}
.newscard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.newscard:hover .newscard__media img { transform: scale(1.04); }

.newscard__body { padding: 18px 4px 0; }
.newscard__date {
  display: block;
  margin-bottom: 8px;
  font-family: "DM Sans", "Outfit", sans-serif;
  font-variation-settings: "opsz" 14;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}
.newscard__title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--black);
}
.newscard__excerpt {
  margin-top: 10px;
  font-family: "DM Sans", "Outfit", sans-serif;
  font-variation-settings: "opsz" 14;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--gray);
  /* PHP trims these to a word count, which evens out the text but still leaves
     a line either way depending on where the words fall. Clamping to three
     lines keeps every card's block the same height, so the grid rows line up. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.newslist__empty {
  padding: 48px 8px;
  font-family: "DM Sans", "Outfit", sans-serif;
  font-size: 15px;
  color: var(--gray);
  text-align: center;
}

/* =========================================================================
   Article — the source site's order: art first, then a white panel riding up
   over it carrying the title, date and prose.
   ========================================================================= */
.article__art {
  position: relative;
  z-index: 2;
  /* pulls up so exactly half the art sits over the dark band */
  margin-top: calc(-1 * var(--art-h) / 2);
  width: min(800px, 100%);
  height: var(--art-h);
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--light-300);
  box-shadow: 0 28px 60px -24px rgba(0, 15, 35, 0.55);
}
.article__art img { width: 100%; height: 100%; object-fit: cover; }

.article {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin-inline: auto;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-lg);
  background: var(--white);
}
/* pull the panel up over the art, then push the content back clear of it */
.article--has-art { margin-top: clamp(-120px, -9vw, -70px); padding-top: clamp(96px, 12vw, 170px); }

.article__title {
  max-width: var(--news-measure);
  margin-inline: auto;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--black);
  text-align: center;
}
.article__date {
  margin: 14px auto 0;
  font-family: "DM Sans", "Outfit", sans-serif;
  font-variation-settings: "opsz" 14;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  text-align: center;
}

.article__body {
  max-width: var(--news-measure);
  margin: clamp(28px, 3.5vw, 44px) auto 0;
  /* Long bare URLs in body copy (the legal page has several) would otherwise
     push the page wider than the viewport on a phone. */
  overflow-wrap: break-word;
  font-family: "DM Sans", "Outfit", sans-serif;
  font-variation-settings: "opsz" 14;
  font-size: 17px;
  font-weight: 400;
  line-height: 30px;
  color: #33445c;
}
/* Both rules must sit at the same specificity: `.article__body p { margin: 0 }`
   is (0,1,1) and would beat the (0,1,0) sibling rule, collapsing every gap. */
.article__body > * { margin: 0; }
.article__body > * + * { margin-top: 24px; }
.article__body h2,
.article__body h3 {
  margin-top: 44px;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--black);
}
/* An article opens with prose, but a legal page opens with a heading — whose
   44px top margin would otherwise stack onto the panel's own padding. The
   body's own top margin clears the article title and date; where the body
   leads the panel instead, there is nothing above it to clear. */
.article > .article__body:first-child { margin-top: 0; }
.article__body > :first-child { margin-top: 0; }
.article__body h2 { font-size: 26px; }
.article__body h3 { font-size: 20px; }
.article__body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.article__body a:hover { color: #1668d6; }

/* Call to action at the foot of an article — build-partner-articles.php appends
   it for posts that point at a session hosted elsewhere. Selector carries
   .article__body so it outranks the underlined body-link rule above. */
.article__ctawrap { margin-top: 36px; }
.article__body a.article__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid var(--blue);
  border-radius: 40px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.article__body a.article__cta span { transition: transform 0.2s var(--ease); }
.article__body a.article__cta:hover {
  background: #1668d6;
  border-color: #1668d6;
  color: #fff;
}
.article__body a.article__cta:hover span { transform: translateX(3px); }
.article__body a.article__cta:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.article__body a.article__cta:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .article__body a.article__cta span { transition: none; }
}
.article__body ul,
.article__body ol { padding-left: 22px; }
.article__body li + li { margin-top: 8px; }
.article__body img { border-radius: var(--radius-md); margin-block: 8px; }

/* Embedded video (YouTube et al). WordPress returns the oEmbed as an iframe with
   fixed pixel dimensions — 500x281 for this provider — and the .wp-embed-aspect-*
   classes the editor writes onto the block are implemented in wp-block-library,
   which functions.php dequeues. So those classes are inert here and the film sat
   500px wide inside a 760px column, reading as narrower than the prose it sits
   in. Size it from the column instead and take the ratio from the block's own
   class, so the editor's aspect choice still drives the shape. */
.article__body .wp-block-embed iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;   /* default; the classes below override per embed */
  border: 0;
  border-radius: var(--radius-md);   /* matches .article__body img */
}
.article__body .wp-embed-aspect-21-9 iframe { aspect-ratio: 21 / 9; }
.article__body .wp-embed-aspect-18-9 iframe { aspect-ratio: 18 / 9; }
.article__body .wp-embed-aspect-4-3 iframe  { aspect-ratio: 4 / 3; }
.article__body .wp-embed-aspect-1-1 iframe  { aspect-ratio: 1 / 1; }
.article__body .wp-embed-aspect-9-16 iframe { aspect-ratio: 9 / 16; }
.article__body .wp-embed-aspect-1-2 iframe  { aspect-ratio: 1 / 2; }
.article__body blockquote {
  padding-left: 22px;
  border-left: 3px solid var(--blue-300);
  font-size: 19px;
  line-height: 30px;
  color: var(--black);
}
.article__body strong { font-weight: 600; color: var(--black); }

.article__foot {
  max-width: var(--news-measure);
  margin: clamp(36px, 4vw, 52px) auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--light);
  text-align: center;
}

/* =========================================================================
   Pagination
   paginate_links( type => list ) emits a plain <ul class="page-numbers">, which
   inherited the document's disc bullets. Styled as the same pill row the rest
   of the site uses for controls.
   ========================================================================= */
.newspager {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--light);
}
.newspager .page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.newspager li { margin: 0; }
.newspager li .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;          /* 44px keeps every control at the touch minimum */
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--light);
  border-radius: 40px;
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gray);
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.newspager a.page-numbers:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(46, 136, 254, 0.06);
}
.newspager a.page-numbers:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.newspager .page-numbers.current {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
/* prev/next carry words, so they size to their text rather than the 44px square */
.newspager .prev,
.newspager .next { padding: 0 20px; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
/* the ellipsis is a label, not a control */
.newspager .dots { border-color: transparent; background: none; }

@media (max-width: 560px) {
  /* the numbers are the part you can do without when space is tight */
  .newspager li:not(:first-child):not(:last-child) { display: none; }
  .newspager .prev, .newspager .next { padding: 0 18px; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 760px) {
  .newspanel { padding: 20px 16px; border-radius: var(--radius-md); }
  .newsgrid { grid-template-columns: 1fr; gap: 32px; }
  .article__body { font-size: 16px; line-height: 27px; }
  /* both overlaps read as mistakes once the panel is nearly full-bleed */
  .article--has-art { margin-top: -40px; padding-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .newsitem, .newsitem__go { transition: none; }
}