/* =================================================================================================
   LFD news archive — the approved layout, full width

   audit/11_canonical_design_inventory.md: sticky left sidebar with the ghost "LFD" and "NEWS",
   a description, a search field, three selects, RESET FILTERS and a result count; main column
   with a serif heading, a lead story with the image left, then a three-column card grid.

   WHAT IS DIFFERENT FROM THE OLD FILE. It is the LFD page shell rather than Manon's boxed
   container, so the grid uses the viewport instead of 1100px of it; the gutters are the
   canonical 42/28/16; and the breakpoints are 1440/1180/834/390/320 rather than the 1024 the
   old file was written against.
   ================================================================================================= */

.lfd-news-archive {
  position: relative;
  isolation: isolate;
  inline-size: 100%;
  padding-block: var(--lfd-space-section) var(--lfd-space-section-lg);
  background: var(--lfd-color-paper);
  color: var(--lfd-color-ink);
  box-sizing: border-box;
}

.lfd-news-archive * {
  box-sizing: border-box;
}

.lfd-news-archive__inner {
  inline-size: 100%;
  max-inline-size: var(--lfd-measure, 97.5rem);
  margin-inline: auto;
  padding-inline: var(--lfd-gutter, 2.625rem);
  display: grid;
  /* The approved sidebar track: minmax(280px, 370px) (theme/manon/lfd/news-archive.css,
     .lfd-news-layout). The rebuild had capped it at 280px. */
  grid-template-columns: minmax(17.5rem, 23.125rem) minmax(0, 1fr);
  gap: var(--lfd-space-gap-lg);
  align-items: start;
}

/* --- the sidebar ------------------------------------------------------------------------------ */

/* A STICKY BOX STICKS TO ITS NEAREST SCROLL CONTAINER, and Manon makes two that never scroll:
   `body { overflow-x: hidden !important }` (with `html { overflow-y: scroll !important }`, so
   body's overflow is not handed to the viewport and body becomes a scroll container) and
   `.edgtf-wrapper-inner { overflow: hidden }`. Neither moves when the page scrolls, so nothing
   inside them could stick - which is why the approved archive pinned its panel with JavaScript.
   overflow-x: clip keeps what `hidden` was there for - no sideways scroll - without making a
   scroll container. Scoped with :has() to a page that carries the sidebar; a browser without
   overflow: clip keeps Manon's `hidden` and the sidebar simply scrolls, as before. */
body:has(.lfd-news-archive__sticky) {
  overflow-x: clip !important;
}

.edgtf-wrapper-inner:has(.lfd-news-archive__sticky) {
  overflow-x: clip;
  overflow-y: visible;
}

/* STRETCHED, so the sticky child has somewhere to stick. With the grid's align-items: start the
   aside was only as tall as its content, and a sticky box cannot leave its parent - so the filters
   scrolled away with the page (measured: top -728px after scrolling 900px at 1440). */
.lfd-news-archive__panel {
  align-self: stretch;
}

.lfd-news-archive__sticky {
  position: sticky;
  /* 6.5rem (104px) of room above the panel while it is pinned. The LFD header is not fixed - it
     scrolls away with the page - so this is spacing, not a clearance for a header. */
  inset-block-start: 6.5rem;
}

/* BOUNDED TO THE VIEWPORT WHILE IT IS PINNED, as the approved News panel is
   (news-single-entry.css: max-height: calc(100vh - 124px); overflow: auto). Pinned at 6.5rem, a
   box taller than the rest of the viewport kept its lower part below the bottom edge until the
   results ended: Tab put focus on Apply, the count and Reset where nobody could see it (WCAG 2.2 SC 2.4.11), and a pointer
   could not reach it. Bounded, it scrolls within itself and the browser scrolls a focused control
   into view. Only where it pins; below 834px it is static. The padding, taken back by the margin,
   is room for the focus ring (outline plus offset), which a box that scrolls would clip - and the
   inset is taken back by the same amount, because the margin is not once the box sticks: the inset
   places the border box, so the content would pin 6px below its 6.5rem.
   NO overscroll-behavior. `contain` stopped scroll chaining, so once the panel reached its end a
   wheel or trackpad gesture over the left column moved nothing at all. The approved panel has none. */
@media (width > 834px) {

  .lfd-news-archive__sticky {
    max-block-size: calc(100vh - 6.5rem - var(--lfd-space-md, 1.5rem));
    overflow-y: auto;
    padding: 0.375rem;
    margin: -0.375rem;
    inset-block-start: calc(6.5rem - 0.375rem);
  }
}

.lfd-news-archive__watermark {
  display: block;
  font-family: var(--lfd-font-editorial);
  font-size: var(--lfd-size-display-lg);
  line-height: var(--lfd-leading-flat);
  letter-spacing: var(--lfd-tracking-display);
  color: var(--lfd-color-line-soft, rgba(0, 0, 0, 0.085));
  user-select: none;
}

.lfd-news-archive__title {
  margin: -0.35em 0 var(--lfd-space-md);
  font-family: var(--lfd-font-editorial);
  font-size: var(--lfd-size-display-lg);
  font-weight: var(--lfd-weight-regular);
  line-height: var(--lfd-leading-flat);
  letter-spacing: var(--lfd-tracking-display);
}

.lfd-news-archive__intro {
  margin: 0 0 var(--lfd-space-lg);
  font-size: var(--lfd-size-body-sm, 0.875rem);
  line-height: var(--lfd-leading-body);
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
}

/* --- the filter form --------------------------------------------------------------------------- */

.lfd-news-archive__filters {
  margin: 0 0 var(--lfd-space-lg);
}

.lfd-news-archive__field {
  margin: 0 0 var(--lfd-space-md);
}

.lfd-news-archive__label {
  display: block;
  margin-block-end: var(--lfd-space-3xs);
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-2xs, 0.625rem);
  font-weight: var(--lfd-weight-bold);
  letter-spacing: var(--lfd-tracking-label-lg);
  text-transform: uppercase;
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
}

.lfd-news-archive__input,
.lfd-news-archive__select {
  inline-size: 100%;
  /* 44px: a touch target somebody has to hit on a phone, above the 24px SC 2.5.8 floor. */
  min-block-size: 2.75rem;
  padding: var(--lfd-space-2xs) var(--lfd-space-sm);
  border: var(--lfd-border-line);
  border-radius: 1.375rem;
  background: var(--lfd-color-paper);
  font-family: inherit;
  font-size: var(--lfd-size-body-sm, 0.875rem);
  color: inherit;
}

.lfd-news-archive__button {
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: var(--lfd-space-2xs) var(--lfd-space-md);
  border: var(--lfd-border-hairline) solid var(--lfd-color-ink);
  background: var(--lfd-color-ink);
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-sm, 0.75rem);
  font-weight: var(--lfd-weight-bold);
  letter-spacing: var(--lfd-tracking-label);
  text-transform: uppercase;
  color: var(--lfd-color-paper);
  cursor: pointer;
}

.lfd-news-archive__button:hover,
.lfd-news-archive__button:focus-visible {
  background: var(--lfd-color-paper);
  color: var(--lfd-color-ink);
}

.lfd-news-archive__count,
.lfd-news-archive__reset {
  margin: 0 0 var(--lfd-space-xs);
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-xs, 0.6875rem);
  font-weight: var(--lfd-weight-bold);
  letter-spacing: var(--lfd-tracking-label);
  text-transform: uppercase;
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
}

.lfd-news-archive__reset a {
  color: inherit;
}

/* --- the results ------------------------------------------------------------------------------- */

.lfd-news-archive__heading {
  margin: 0 0 var(--lfd-space-lg);
  font-family: var(--lfd-font-editorial);
  font-size: var(--lfd-size-display-md);
  font-weight: var(--lfd-weight-regular);
  line-height: var(--lfd-leading-tight);
  letter-spacing: var(--lfd-tracking-snug);
  text-transform: uppercase;
}

.lfd-news-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lfd-space-gap);
}

.lfd-news-archive__empty {
  margin: 0;
  padding-block: var(--lfd-space-2xl);
  font-size: var(--lfd-size-lead, 1.0625rem);
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
}

/* --- a card ------------------------------------------------------------------------------------ */

.lfd-news-card {
  display: flex;
  flex-direction: column;
  gap: var(--lfd-space-sm);
}

.lfd-news-card__media {
  display: block;
  overflow: hidden;
  background: var(--lfd-color-mist, #f6f6f6);
}

.lfd-news-card__image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  /* PORTRAIT, like the gallery tiles and the approved cards. A runway photograph is a portrait
     and a 16:9 crop of one is a photograph of somebody's waist. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 25%;
}

.lfd-news-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lfd-space-2xs) var(--lfd-space-sm);
  margin: 0;
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-2xs, 0.625rem);
  font-weight: var(--lfd-weight-bold);
  letter-spacing: var(--lfd-tracking-label);
  text-transform: uppercase;
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
}

.lfd-news-card__category {
  color: inherit;
}

/* THE APPROVED CARD HEADLINE: Georgia, 21-29px, weight 400, -0.045em, sentence case
   (theme/manon/lfd/news-archive.css, `.lfd-news-card__title`: clamp(21px, 1.55vw, 29px)). The
   size has no token - the display scale starts at 22-32px - so the approved curve is kept as
   written. text-transform is reset because Manon's h3 is uppercase, which is how the cards came
   out in 32px capitals (measured: uppercase, 32px, -0.64px at 1440). */
.lfd-news-card__title {
  margin: 0;
  font-family: var(--lfd-font-editorial);
  font-size: clamp(1.3125rem, 1.55vw, 1.8125rem);
  font-weight: var(--lfd-weight-regular);
  line-height: var(--lfd-leading-tight);
  letter-spacing: var(--lfd-tracking-display);
  text-transform: none;
}

.lfd-news-card__link {
  color: inherit;
  text-decoration: none;
  border-block-end: var(--lfd-border-hairline) solid transparent;
}

.lfd-news-card__link:hover,
.lfd-news-card__link:focus-visible {
  border-block-end-color: currentcolor;
}

.lfd-news-card__excerpt {
  margin: 0;
  font-size: var(--lfd-size-body-sm, 0.875rem);
  line-height: var(--lfd-leading-body);
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
}

/* READ MORE with its arrow - the approved `.lfd-news-card__read` (theme/manon/lfd/news-archive.css):
   11px, 600, 0.08em, uppercase, 7px to the arrow. 24px tall, the SC 2.5.8 minimum, because on a
   phone it is the card's second tap target. */
.lfd-news-card__read {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-block-size: 1.5rem;
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-xs, 0.6875rem);
  font-weight: var(--lfd-weight-semibold);
  line-height: 1;
  letter-spacing: var(--lfd-tracking-label-sm);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--lfd-color-ink);
}

.lfd-news-card__read span[aria-hidden="true"] {
  transition: transform var(--lfd-duration-base, 250ms) ease;
}

.lfd-news-card__read:hover span[aria-hidden="true"],
.lfd-news-card__read:focus-visible span[aria-hidden="true"] {
  transform: translateX(0.25rem);
}

/* --- the lead story ----------------------------------------------------------------------------- */

.lfd-news-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--lfd-space-gap-lg);
  align-items: center;
  margin-block-end: var(--lfd-space-2xl);
  padding-block-end: var(--lfd-space-2xl);
  border-block-end: var(--lfd-border-rule);
}

.lfd-news-card--featured .lfd-news-card__image {
  aspect-ratio: 4 / 5;
}

.lfd-news-card--featured .lfd-news-card__title {
  font-size: var(--lfd-size-display-md);
}

/* --- pagination ---------------------------------------------------------------------------------- */

.lfd-news-archive__pagination {
  margin-block-start: var(--lfd-space-2xl);
  padding-block-start: var(--lfd-space-lg);
  border-block-start: var(--lfd-border-rule);
}

.lfd-news-archive__pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lfd-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lfd-news-archive__pagination a,
.lfd-news-archive__pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding-inline: var(--lfd-space-2xs);
  border: var(--lfd-border-line);
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-sm, 0.75rem);
  font-weight: var(--lfd-weight-bold);
  letter-spacing: var(--lfd-tracking-label-sm);
  text-decoration: none;
  color: inherit;
}

.lfd-news-archive__pagination .current {
  background: var(--lfd-color-ink);
  color: var(--lfd-color-paper);
}

/* --- breakpoints --------------------------------------------------------------------------------- */

@media (max-width: 1180px) {

  /* The approved narrower-screen track, minmax(270px, 340px). */
  .lfd-news-archive__inner {
    grid-template-columns: minmax(16.875rem, 21.25rem) minmax(0, 1fr);
  }

  .lfd-news-archive__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 834px) {

  .lfd-news-archive__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Sticky is meaningless once the sidebar is a band across the top: it would pin the filters
     over the results as somebody scrolls past them. */
  .lfd-news-archive__sticky {
    position: static;
  }

  .lfd-news-archive__filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--lfd-space-md);
  }

  .lfd-news-card--featured {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lfd-space-md);
  }
}

/* 520, the design-system step the Gallery and Designers grids use, not an invented 640: a 600px
   screen shows the same number of columns on all three. Unchanged at every canonical width. */
@media (max-width: 520px) {

  .lfd-news-archive__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lfd-news-archive__filters {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {

  .lfd-news-card__link,
  .lfd-news-card__read span[aria-hidden="true"] {
    transition: none;
  }
}