/* =============================================================================
   news.css — image news cards on the shared .card shell (Stage 4)
   Rebuilt from prototypes/kitchen-sink-dncg.html (.news). The .card shell owns
   the border, radius, 5px accent foot, hover lift, 16/10 image, card-section
   padding, title link (navy -> blue) and byline. This file adds the grid
   layouts, the "featured" lead (one big post left, the rest stacked right) and
   the uppercase date label. Colour is always a token.
   ========================================================================== */

/* --- Plain grids ------------------------------------------------------- */
.news-cards-3grid { grid-template-columns: repeat(3, 1fr); }
.news-cards-4grid { grid-template-columns: repeat(4, 1fr); }

/* --- Feature layouts: one big post left, the rest stacked right ---------
   The first card spans the left column across as many rows as there are
   remaining cards; those flow down the right column. */
.news-cards-3grid-feature,
.news-cards-4grid-feature,
.news-cards-5grid-feature {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--gap-grid);
  align-items: stretch;
}
.news-cards-3grid-feature > .card:first-child { grid-column: 1; grid-row: 1 / span 2; }
.news-cards-4grid-feature > .card:first-child { grid-column: 1; grid-row: 1 / span 3; }
.news-cards-5grid-feature > .card:first-child { grid-column: 1; grid-row: 1 / span 4; }
/* The feature image fills its column (the column is now short — see below — so
   the image runs as a proper lead rather than a capped strip). */
.news-cards-3grid-feature > .card:first-child > img,
.news-cards-4grid-feature > .card:first-child > img,
.news-cards-5grid-feature > .card:first-child > img {
  aspect-ratio: auto;
  flex: 1 1 auto;
  width: 100%;
  min-height: 220px;
  object-fit: cover;
}
/* Secondary posts are horizontal mini-cards: a square thumbnail cropped on the
   LEFT, the title + date stacked to its right and vertically centred. Four short
   rows instead of four tall stacked cards roughly halves the block height, and
   the feature card — spanning every row — follows the shorter right column. */
.news-cards-3grid-feature > .card:not(:first-child),
.news-cards-4grid-feature > .card:not(:first-child),
.news-cards-5grid-feature > .card:not(:first-child) {
  flex-direction: row;
  align-items: center;
}
.news-cards-3grid-feature > .card:not(:first-child) > img,
.news-cards-4grid-feature > .card:not(:first-child) > img,
.news-cards-5grid-feature > .card:not(:first-child) > img {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.news-cards-3grid-feature > .card:not(:first-child) > .card-section,
.news-cards-4grid-feature > .card:not(:first-child) > .card-section,
.news-cards-5grid-feature > .card:not(:first-child) > .card-section {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .35rem;
}

/* --- Date byline reads as an uppercase label --------------------------- */
.news .card__by {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* Breathing space above the "See more news" CTA — it otherwise butts straight
   against the cards grid. */
.news .cta { margin-top: 2.25rem; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 860px) {
  .news-cards-3grid,
  .news-cards-4grid { grid-template-columns: repeat(2, 1fr); }
  .news-cards-3grid-feature,
  .news-cards-4grid-feature,
  .news-cards-5grid-feature { grid-template-columns: 1fr 1fr; }
  .news-cards-3grid-feature > .card:first-child,
  .news-cards-4grid-feature > .card:first-child,
  .news-cards-5grid-feature > .card:first-child { grid-column: 1 / -1; grid-row: auto; }
  .news-cards-3grid-feature > .card:first-child > img,
  .news-cards-4grid-feature > .card:first-child > img,
  .news-cards-5grid-feature > .card:first-child > img { aspect-ratio: 16 / 10; flex: none; min-height: 0; }
}
@media (max-width: 640px) {
  .news-cards-3grid,
  .news-cards-4grid,
  .news-cards-3grid-feature,
  .news-cards-4grid-feature,
  .news-cards-5grid-feature { grid-template-columns: 1fr; }
}