/* ==========================================================================
   Newsroom page (page-templates/template-newsroom.php)
   Figma: VNF (Copy), node 7043:13626.

   Only page layout lives here. The article card is the global .news-card in
   cards.css, the section headings are .section-head--rule (layout.css) plus
   .section-head__title--rule (typography.css), and the buttons are the ones
   in buttons.css.
   ========================================================================== */
.newsroom {
  padding-block: var(--space-section) var(--space-4xl);
  background: var(--c-bg);
}

.newsroom__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  text-align: center;
  color: var(--c-ink-pure);
}

.newsroom__section > .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* --- Tin nổi bật ----------------------------------------------------------
   One large card and up to two beside it. Every card is as tall as its own
   content: nothing here stretches a photo to fill a leftover row height. */
.featured__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.featured__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* The large card's photo is wider than the shared card's default. */
.featured__main .news-card__photo {
  aspect-ratio: 822 / 399;
}

@media (min-width: 1024px) {
  .featured__grid {
    flex-direction: row;
    align-items: stretch;
  }

  .featured__main {
    flex: 1 1 0;
    min-width: 0;
  }

  .featured__side {
    flex: 0 0 calc(960 / 1822 * 100%);
    min-width: 0;
  }
}

/* --- Hình ảnh & Video ------------------------------------------------------
   Two rows of square cells that scroll past on their own. --cell is the side
   of one cell, so a tile spanning 2x2 is square too; the tiles set --cols and
   --rows inline because those are content, not styling.

   The rail is full bleed: it deliberately sits outside .container and is
   wider than the viewport - that is what there is to scroll. */
.gallery__rail {
  display: flex;
  overflow: hidden;
  margin-top: var(--space-lg);

  /* Desktop: six cells across the viewport. */
  --cell: calc(100vw / 6);
}

.gallery__track {
  display: grid;
  grid-auto-flow: column dense;
  grid-template-rows: repeat(2, var(--cell));
  grid-auto-columns: var(--cell);
  gap: var(--space-2xs);
  padding-right: var(--space-2xs);
  flex: none;
  list-style: none;
  animation: gallery-scroll 60s linear infinite;

  @media (min-width: 768px) {
    gap: var(--space-sm);
    padding-right: var(--space-sm);
  }
}

.gallery__item {
  grid-column: span var(--cols, 1);
  grid-row: span var(--rows, 1);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--c-media-placeholder);
}

/* The tile is the aspect-ratio box here, so the media fills and crops. */
.gallery__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes gallery-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@media (max-width: 767px) {
  .gallery__rail {
    /* Phones: four cells across, so a tile is still legible. */
    --cell: calc(100vw / 4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__track {
    animation: none;
  }

  .gallery__rail {
    overflow-x: auto;
  }
}

/* --- Entrance --------------------------------------------------------------
   Featured and the article lists follow the home page news section: the
   heading rises first, then the cards (and "Xem thêm") one after another.
   Keyframes with `backwards` fill rather than a transition so the cards' own
   hover transition survives; `reveal-up` is defined in home.css.

   Cards that "Xem thêm" appends later land inside an already revealed section,
   so they play the same animation on insertion; past the fourth they share one
   delay instead of queueing up. The gallery is one block that rises whole. */
@media (prefers-reduced-motion: no-preference) {
  .has-reveal .featured[data-reveal]:not(.is-revealed) .section-head,
  .has-reveal .featured[data-reveal]:not(.is-revealed) .news-card,
  .has-reveal .article-list[data-reveal]:not(.is-revealed) .section-head,
  .has-reveal .article-list[data-reveal]:not(.is-revealed) .news-card,
  .has-reveal .article-list[data-reveal]:not(.is-revealed) .article-list__more {
    opacity: 0;
  }

  .has-reveal .featured[data-reveal].is-revealed .section-head,
  .has-reveal .featured[data-reveal].is-revealed .news-card,
  .has-reveal .article-list[data-reveal].is-revealed .section-head,
  .has-reveal .article-list[data-reveal].is-revealed .news-card,
  .has-reveal .article-list[data-reveal].is-revealed .article-list__more {
    animation: reveal-up var(--reveal-dur) var(--ease) calc(var(--i, 0) * 0.2s) backwards;
  }

  .featured__main .news-card { --i: 1; }
  .featured__side > :nth-child(1) { --i: 2; }
  .featured__side > :nth-child(n + 2) { --i: 3; }

  .article-list__grid > .news-card { --i: 1; }
  .article-list__grid > :nth-child(2) { --i: 2; }
  .article-list__grid > :nth-child(3) { --i: 3; }
  .article-list__grid > :nth-child(4) { --i: 4; }
  .article-list__more { --i: 5; }

  .has-reveal .gallery[data-reveal] > * {
    opacity: 0;
    transform: translateY(var(--reveal-dist));
    transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease);
  }

  .has-reveal .gallery[data-reveal].is-revealed > * {
    opacity: 1;
    transform: none;
  }
}