/**
 * News page — luxury brand journal (presentation only).
 * Scoped to body.page-news so completed pages are untouched.
 * No new blocks / CMS fields / CPT / plugins.
 *
 * @package Flamingo_Liqueur
 */

/**
 * Consolidated news-page.css.
 *
 * Successive redesign passes re-declared the same selectors on top of each
 * other. Every declaration that a later one at the same selector already
 * overwrote has been removed; the survivors keep their original order, so
 * the rendered result is unchanged (verified declaration-by-declaration).
 *
 * EDIT the existing rule rather than appending another pass. The mixed tile
 * sizes and left-hugging grids of FIX-12 lived in a layer nobody read.
 */

/**
 * News page — luxury brand journal (presentation only).
 * Scoped to body.page-news so completed pages are untouched.
 * No new blocks / CMS fields / CPT / plugins.
 *
 * @package Flamingo_Liqueur
 */

/* ------------------------------------------------------------------ */

/* Global rhythm                                                      */

/* ------------------------------------------------------------------ */

.page-news .c-entry__content--blocks > .fl-news + .fl-news,
.page-news .c-entry__content--blocks > .fl-news + .fl-gallery,
.page-news .c-entry__content--blocks > .fl-gallery + .fl-news,
.page-news .c-entry__content--blocks > .fl-news + .fl-story,
.page-news .c-entry__content--blocks > .fl-story + .fl-story {
  border-top: 0;
}

.page-news .fl-hero__subheading {
  font-weight: 300;
}

.page-news .fl-hero__scroll {
  letter-spacing: 0.28em;
}

/* Strip card language — magazine, not blog */

.page-news .fl-news__card,
.page-news .fl-news__media,
.page-news .fl-gallery__figure,
.page-news .fl-story__media {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.page-news .fl-news__card:hover .fl-news__img,
.page-news .fl-gallery__figure:hover .fl-gallery__img {
  transform: none;
  filter: none;
  box-shadow: none;
}

.page-news .fl-news {
  padding-block: clamp(6.5rem, 16vh, 12rem);
}

.page-news .fl-news__title {
  font-size: clamp(3rem, 6vw, 5rem);
  max-width: 12ch;
  line-height: 1.05;
}

.page-news .fl-news__intro p {
  max-width: 34ch;
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
}

.page-news .fl-news__date {
  color: rgba(201, 161, 74, 0.85);
}

.page-news .fl-news__excerpt {
  font-size: 0.92rem;
  max-width: 36ch;
}

.page-news .fl-news__excerpt p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------------------ */

/* Latest Story — cover feature                                       */

/* ------------------------------------------------------------------ */

.page-news #latest-story {
  background: radial-gradient(ellipse 70% 55% at 18% 40%, rgba(255, 79, 163, 0.182), transparent 58%), linear-gradient(180deg, #0d0d12 0%, #060608 100%);
}

.page-news #latest-story .fl-news__grid {
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.page-news #latest-story.fl-news--single .fl-news__card {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

@media (min-width: 900px) {

  .page-news #latest-story.fl-news--single .fl-news__card {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
  }
}

.page-news #latest-story .fl-news__excerpt p {
  -webkit-line-clamp: 4;
}

.page-news #latest-story .fl-news__body {
  gap: 1rem;
  padding-inline: clamp(0rem, 2vw, 1rem);
}

/* ------------------------------------------------------------------ */

/* Featured Articles — editorial row                                  */

/* ------------------------------------------------------------------ */

.page-news #featured-articles {
  background: linear-gradient(180deg, #0a0a0f 0%, #040405 100%);
}

.page-news #featured-articles .fl-news__title {
  max-width: 14ch;
}

.page-news #featured-articles .fl-news__grid {
  gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 600px) {

  .page-news #featured-articles .fl-news__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {

  .page-news #featured-articles .fl-news__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-news #featured-articles .fl-news__card-title {
  line-height: 1.18;
}

.page-news #featured-articles .fl-news__card {
  gap: 1.1rem;
}

/* ------------------------------------------------------------------ */

/* Campaigns — visual chapter (gallery)                               */

/* ------------------------------------------------------------------ */

.page-news #campaigns {
  background: radial-gradient(ellipse 55% 50% at 80% 45%, rgba(255, 79, 163, 0.156), transparent 60%), linear-gradient(180deg, #0d0d12 0%, #060608 100%);
}

.page-news #campaigns .fl-gallery__title {
  font-size: clamp(3rem, 6vw, 5rem);
  max-width: 10ch;
  line-height: 1.05;
}

.page-news #campaigns .fl-gallery__intro p {
  max-width: 28ch;
}

.page-news #campaigns .fl-gallery__grid {
  gap: clamp(0.65rem, 1.25vw, 1.1rem);
}

.page-news #campaigns .fl-gallery__img {
  object-fit: cover;
}

/* ------------------------------------------------------------------ */

/* Media Coverage — quiet list                                        */

/* ------------------------------------------------------------------ */

.page-news #media-coverage {
  background: linear-gradient(180deg, #0b0b10 0%, #050506 100%);
}

.page-news #media-coverage .fl-news__grid {
  gap: 0;
}

@media (min-width: 600px) {

  .page-news #media-coverage .fl-news__grid {
    grid-template-columns: 1fr;
  }
}

.page-news #media-coverage .fl-news__item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.page-news #media-coverage .fl-news__card {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}

@media (min-width: 700px) {

  .page-news #media-coverage .fl-news__card {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

.page-news #media-coverage .fl-news__img {
  object-position: center;
}

.page-news #media-coverage .fl-news__card-title {
  max-width: 18ch;
}

.page-news #media-coverage .fl-news__body {
  gap: 0.55rem;
}

/* ------------------------------------------------------------------ */

/* Archive — denser journal index                                     */

/* ------------------------------------------------------------------ */

.page-news #archive {
  background: linear-gradient(180deg, #0d0d12 0%, #060608 100%);
}

.page-news #archive .fl-news__title {
  max-width: 16ch;
}

@media (min-width: 600px) {

  .page-news #archive .fl-news__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {

  .page-news #archive .fl-news__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ */

/* Follow + CTA — soft invitations                                    */

/* ------------------------------------------------------------------ */

.page-news #follow {
  background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(255, 79, 163, 0.208), transparent 62%), linear-gradient(180deg, #0a0a0f 0%, #040405 100%);
  text-align: center;
}

.page-news #follow .fl-story__grid {
  display: block;
  max-width: 36rem;
  margin-inline: auto;
}

.page-news #follow .fl-story__title {
  font-size: clamp(3rem, 6vw, 4.75rem);
  max-width: 14ch;
  margin-inline: auto;
}

.page-news #follow .fl-story__description {
  margin-inline: auto;
}

.page-news #follow .fl-story__description p {
  max-width: 28ch;
  margin-inline: auto;
}

.page-news #follow .fl-story__actions {
  justify-content: center;
}

.page-news #invite {
  background: linear-gradient(180deg, #0d0d12 0%, #060608 100%);
  text-align: center;
}

.page-news #invite .fl-story__grid {
  display: block;
  max-width: 36rem;
  margin-inline: auto;
}

.page-news #invite .fl-story__title {
  font-size: clamp(2.75rem, 5.5vw, 4.25rem);
  max-width: 16ch;
  margin-inline: auto;
}

.page-news #invite .fl-story__description p {
  max-width: 30ch;
  margin-inline: auto;
}

.page-news #invite .fl-story__actions {
  justify-content: center;
}

.page-news #follow .fl-story__cta,
.page-news #invite .fl-story__cta {
  min-width: 11rem;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  background: transparent;
  letter-spacing: 0.16em;
}

.page-news #follow .fl-story__cta:hover,
.page-news #follow .fl-story__cta:focus-visible,
.page-news #invite .fl-story__cta:hover,
.page-news #invite .fl-story__cta:focus-visible {
  border-color: var(--fl-pink, #d12b74);
  color: var(--fl-pink, #d12b74);
  background: transparent;
}

@media (max-width: 699px) {

  /* ------------------------------------------------------------------ */

  /* Mobile                                                             */

  /* ------------------------------------------------------------------ */

  .page-news #latest-story .fl-news__img {
    aspect-ratio: 5 / 6;
  }

  .page-news #media-coverage .fl-news__card {
    gap: 1rem;
  }
}

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

  .page-news .fl-news__img,
  .page-news .fl-gallery__img {
    transition: none;
  }
}

/* ================================================================== */

/* FINAL DIRECTOR PASS — Editorial newspaper / magazine cover         */

/* ================================================================== */

.page-news {
  --fl-dir-reveal-y: 1.75rem;
  --fl-dir-reveal-ms: 0.95s;
}

.page-news .fl-hero__heading {
  font-weight: 500;
}

.page-news .fl-hero__actions {
  justify-content: flex-start;
}

.page-news .fl-news__date {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  font-weight: 500;
}

.page-news .fl-news__label {
  letter-spacing: 0.3em;
}

.page-news .fl-news__title {
  font-style: italic;
  letter-spacing: -0.01em;
}

.page-news #media-coverage .fl-news__item {
  border-color: rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: no-preference) {

  .page-news .fl-reveal.is-pending {
    transform: translateY(var(--fl-dir-reveal-y));
    transition-duration: var(--fl-dir-reveal-ms);
  }
}

.page-news .fl-hero__heading {
  margin-bottom: 1.5rem;
}

.page-news .fl-hero__subheading {
  line-height: 1.7;
}

.page-news #latest-story .fl-news__title {
  font-size: clamp(3.25rem, 6.5vw, 5.25rem);
  font-style: italic;
  max-width: 12ch;
}

.page-news #latest-story .fl-news__excerpt {
  line-height: 1.8;
}

.page-news #latest-story .fl-news__date {
  letter-spacing: 0.28em;
  font-size: 0.6rem;
}

.page-news #featured-articles .fl-news__card-title {
  max-width: 14ch;
}

.page-news #media-coverage .fl-news__card {
  padding-block: clamp(1.5rem, 3vw, 2.15rem);
}

.page-news #media-coverage .fl-news__img {
  aspect-ratio: 16 / 10;
  max-width: 100%;
}

.page-news #archive .fl-news__title {
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-style: italic;
}

.page-news #archive .fl-news__img {
  object-position: center 30%;
}

.page-news #archive .fl-news__excerpt {
  -webkit-line-clamp: 2;
}

.page-news #archive .fl-news__date {
  opacity: 0.85;
}

.page-news #campaigns .fl-gallery__img {
  aspect-ratio: 3 / 4;
  object-position: center 28%;
}

/* ================================================================== */

/* FINAL ART DIRECTION — Magazine journal chapter                     */

/* ================================================================== */

.page-news .c-site-main {
  --fl-container: 70rem;
}

.page-news .c-site-main .l-container {
  max-width: var(--fl-container);
}

.page-news #latest-story .l-container {
  max-width: 64rem;
}

.page-news #archive .l-container {
  max-width: 58rem;
}

.page-news .fl-hero {
  min-height: 92svh;
  align-items: end;
}

.page-news .fl-hero__image,
.page-news .fl-hero__video {
  object-position: 70% 32%;
  transform: scale(1.07);
  transform-origin: 70% 32%;
  /* No brightness/contrast correction here. Measured on the live images:
     this filter clipped 13-68% of every hero to flat white or flat black,
     which is what read as "hazy". The hero block already exposes
     --fl-hero-filter for genuine per-image correction from the editor.
     See FIX-15 — and FIX-06, which removed the same filter from the block
     stylesheet but left these nine page-level copies behind. */
}

.page-news .fl-hero__overlay {
  background: linear-gradient(95deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 48%, rgba(0, 0, 0, 0.35) 100%);
}

.page-news .fl-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 40rem;
  text-align: left;
  padding-block: clamp(5rem, 12vh, 8rem) clamp(4rem, 10vh, 6.5rem);
}

.page-news .fl-hero__heading {
  font-size: clamp(4.75rem, 11vw, 8.25rem);
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: 0.9;
  max-width: 9ch;
  text-transform: none;
}

.page-news .fl-hero__subheading {
  max-width: 28ch;
  border-left: 1px solid rgba(201, 161, 74, 0.65);
  padding-left: 1.4rem;
  font-size: 1.05rem;
}

.page-news .fl-btn--primary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.38);
}

.page-news .fl-btn--primary:hover,
.page-news .fl-btn--primary:focus-visible {
  background: rgba(255, 255, 255, 0.130);
  transform: none;
  box-shadow: none;
}

.page-news #latest-story {
  padding-block: clamp(10rem, 24vh, 16rem);
}

.page-news #latest-story .fl-news__card-title {
  font-size: clamp(3.25rem, 6.5vw, 5.25rem);
  font-style: italic;
  letter-spacing: -0.025em;
  max-width: 13ch;
  line-height: 1.02;
}

.page-news #latest-story .fl-news__img {
  aspect-ratio: 3 / 4;
  object-position: center 18%;
}

.page-news #latest-story .fl-news__excerpt {
  font-size: 1.15rem;
  max-width: 32ch;
}

.page-news #featured-articles {
  padding-block: clamp(5.5rem, 13vh, 9rem);
}

.page-news #featured-articles .fl-news__card-title {
  font-style: italic;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
}

.page-news #featured-articles .fl-news__img {
  aspect-ratio: 3 / 4;
  object-position: center 22%;
}

.page-news #media-coverage {
  padding-block: clamp(5rem, 12vh, 8rem);
}

.page-news #media-coverage .fl-news__item {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.page-news #media-coverage .fl-news__card-title {
  font-style: italic;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
}

.page-news #archive {
  padding-block: clamp(4rem, 10vh, 6.5rem);
}

.page-news #archive .fl-news__grid {
  gap: clamp(1.25rem, 2.5vw, 1.85rem);
}

.page-news #archive .fl-news__card-title {
  font-size: clamp(0.98rem, 1.4vw, 1.15rem);
  font-style: normal;
  letter-spacing: 0.02em;
  max-width: 24ch;
}

.page-news #archive .fl-news__img {
  aspect-ratio: 5 / 4;
  opacity: 0.88;
}

.page-news #archive .fl-news__excerpt {
  font-size: 0.78rem;
  opacity: 0.68;
}

.page-news #archive .fl-news__date {
  font-size: 0.55rem;
  letter-spacing: 0.24em;
}

.page-news #campaigns {
  padding-block: clamp(4.5rem, 11vh, 7.5rem);
}

.page-news #campaigns .fl-gallery .l-container {
  max-width: 72rem;
}

.page-news #follow,
.page-news #invite {
  padding-block: clamp(6rem, 14vh, 10rem);
}

/* ==========================================================================
   NEWS GRID — rebuilt (S27)

   The page had aspect-ratio declared on the IMG, in five different values
   across five sections (5/6, 3/4, 16/10, 5/4 …), added by successive passes.
   An aspect on the image does not give the CARD a height, so every card was
   as tall as its own picture and its own headline: nothing lined up.

   How the editorial sites in the brief actually do it — VinePair, Punch,
   Monocle all share one structure:

     · the media CELL owns the aspect; the photo covers it
     · the card is a column, the text block grows, the bottoms align
     · one ratio per grid, not one per image
     · the lead story is the ONLY thing allowed to break the ratio

   That last point is the hierarchy. A journal index with five equal sections
   is a list. One large opener followed by an even grid is an issue.
   ========================================================================== */

/* -------------------------------------------------------------- the cell -- */

.page-news .fl-news__media,
.page-news .fl-news__media-link {
  display: block;
  width: 100%;
  overflow: hidden;
}

/* The image fills whatever the cell decides. It must not carry a ratio of
   its own — that is what made every card a different height. */
.page-news .fl-news__img,
.page-news .fl-news__media img,
.page-news .fl-gallery__img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: var(--fl-img-x, 50%) var(--fl-img-y, 42%);
}

/* The frame wrapper positions its viewport absolutely; with a fixed cell
   ratio that is exactly what we want — but the frame itself must stop
   imposing its own slot aspect. */
.page-news .fl-image-frame.fl-news__media {
  aspect-ratio: auto;
  height: auto;
}

.page-news .fl-image-frame.fl-news__media .fl-image-frame__viewport {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
}

/* -------------------------------------------------------------- the card -- */

.page-news .fl-news__item {
  display: flex;
}

.page-news .fl-news__card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* The body grows so that cards in a row finish level even when one headline
   runs to two lines and another to one. */
.page-news .fl-news__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding-block-start: clamp(1rem, 2.2vw, 1.5rem);
}

.page-news .fl-news__card-title {
  /* Two lines maximum. A four-line headline in a grid of one-liners is what
     makes a tidy grid look accidental. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-news .fl-news__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------------- the ratios -- */

/* One ratio per grid. 4:5 for the standard card — portrait reads as editorial
   and gives the headline room beneath without a tall row. */
.page-news #featured-articles .fl-news__media,
.page-news #featured-articles .fl-news__media-link,
.page-news #archive .fl-news__media,
.page-news #archive .fl-news__media-link,
.page-news #media-coverage .fl-news__media,
.page-news #media-coverage .fl-news__media-link,
.page-news #campaigns .fl-gallery__figure {
  aspect-ratio: 4 / 5;
}

/* The lead story is the exception, and the only one. */
.page-news #latest-story .fl-news__media,
.page-news #latest-story .fl-news__media-link {
  aspect-ratio: 3 / 4;
}

@media (min-width: 900px) {
  .page-news #latest-story .fl-news__media,
  .page-news #latest-story .fl-news__media-link {
    aspect-ratio: 4 / 5;
  }
}

/* ------------------------------------------------------------- the grids -- */

.page-news .fl-news__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  align-items: start;
}

@media (min-width: 1024px) {
  .page-news #archive .fl-news__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-news #featured-articles .fl-news__grid,
  .page-news #media-coverage .fl-news__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ==========================================================================
   CAMPAIGNS — the staircase, and why it happened

   The opener carried `grid-column: span 2` and the IMAGE inside it carried
   `aspect-ratio: 16 / 10`. The intent was sound: a tile twice as wide but a
   third as tall per unit, so it finishes level with the 4:5 singles beside it.

   It never took effect. `.fl-gallery__img` is `position: absolute; inset: 0`,
   and an absolutely positioned box with all four insets fixed takes its size
   from those insets — its aspect-ratio is inert. So the FIGURE decided the
   height, and the figure was still 4:5. Twice as wide at 4:5 is twice as
   tall: the opener set the row height, the two singles beside it kept their
   own height and left a hole under them, and the fourth tile was pushed onto
   a row of its own. That is the staircase. Not a design — a dead declaration.

   The ratio belongs to the CELL. Same lesson as the news card grid above.
   ========================================================================== */

@media (min-width: 900px) {

  /* Explicit tracks. auto-fit resolved to three columns at some widths and
     four at others, and a span-2 opener tiles differently in each — the same
     section looked like two different layouts depending on the window. */
  .page-news #campaigns.fl-gallery--count-4 .fl-gallery__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Row 1 — opener + two singles fills all four tracks exactly.
     16:10 across two tracks lands within a few pixels of 4:5 across one, so
     the row finishes level with no hole. */
  .page-news #campaigns.fl-gallery--count-4 .fl-gallery__item:nth-child(1) {
    grid-column: span 2;
  }

  .page-news #campaigns.fl-gallery--count-4 .fl-gallery__item:nth-child(1) .fl-gallery__figure {
    aspect-ratio: 16 / 10;
  }

  /* The opener is two tracks wide PLUS the gap between them, so it is wider
     than 2x a single and no fixed ratio keeps the row level at every window
     width. Let the opener decide the row height and have the singles fill
     it — exact at any size, rather than tuned for one. */
  .page-news #campaigns.fl-gallery--count-4 .fl-gallery__item:nth-child(2) .fl-gallery__figure,
  .page-news #campaigns.fl-gallery--count-4 .fl-gallery__item:nth-child(3) .fl-gallery__figure {
    aspect-ratio: auto;
    height: 100%;
  }

  /* Row 2 — 2+1+1+1 can never fill four tracks, so the fourth image was
     always going to be alone. Make that deliberate: a full-width closing
     band reads as a decision, an orphan tile with dead space beside it
     reads as a mistake. */
  .page-news #campaigns.fl-gallery--count-4 .fl-gallery__item:nth-child(4) {
    grid-column: 1 / -1;
  }

  .page-news #campaigns.fl-gallery--count-4 .fl-gallery__item:nth-child(4) .fl-gallery__figure {
    aspect-ratio: 24 / 7;
    --fl-img-y: 45%;
  }
}

/* Any other number of images falls through to the plain uniform grid — the
   rules above are keyed to count-4 so that adding a fifth photo degrades to
   an even wall rather than to a broken mosaic. */