// =============================================================================
// NEWS-LIST-VIEW — tx_news default list layout (vendor Partials/List/Item.html,
// unstyled markup — no sflg override exists for this itemPartial, unlike the
// Slider/ContentIntro layouts which do). Visually matches content-only-intro's
// typography/spacing/hierarchy (eyebrow-text / display-heading / body-text /
// prose-link mixins — the same ones news-content-intro-item already reuses
// for its own tx_news layout).
//
// Two states, selected purely by markup presence (no HTML/template changes):
//   - No .news-img-wrap in the DOM (newsItem has no media) -> pure
//     content-only-intro replica, single column, no image space reserved.
//   - .news-img-wrap present -> 20%/80% image/content columns (:has() lets
//     this be conditional without touching the frozen vendor template).
//
// HTML is FROZEN (vendor extension template) — every child of .article
// (.header, .news-img-wrap, .teaser-text, .footer) is a plain sibling <div>,
// not nested in column wrappers, so both layouts are done with CSS Grid +
// grid-template-areas: this places each sibling into a column/row by name
// only, with no dependency on (and no need to change) source order.
// =============================================================================

@import '../mixins';

.news-list-view {
  display: flex;
  flex-direction: column;
  // Section rhythm: 56px mobile+tablet, 80px laptop+ (--section-space, tokens.scss).
  padding-block: var(--section-space);

  .article {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      'footer'
      'header'
      'teaser';
    row-gap: var(--gap-eyebrow-title); // 16px
    padding-block: var(--space-6);      // 24px divider spacing between items

    &:not(:first-child) {
      border-top: 1px solid var(--color-border);
    }

    &:first-child {
      padding-top: 0;
    }

    // ─── No image: exact content-only-intro parity, no reserved column ────
    &:not(:has(.news-img-wrap)) {
      @include respond-to('desktop') {
        .footer {
          max-width: 536px; // content-only-intro__eyebrow max-width
        }

        .teaser-text div[itemprop='description'] {
          max-width: 722px; // content-only-intro__body max-width
        }
      }
    }

    // ─── Image present: 20% / 80% column split ─────────────────────────────
    &:has(.news-img-wrap) {
      grid-template-areas:
        'media'
        'footer'
        'header'
        'teaser';

      @include respond-to('tablet') {
        grid-template-columns: 20% 80%;
        grid-template-areas:
          'media footer'
          'media header'
          'media teaser';
        column-gap: var(--space-6); // 24px image <-> content gap
        align-items: start;
      }
    }

    @include respond-to('desktop') {
      padding-block: var(--space-6);
      row-gap: var(--gap-title-body); // 24px
    }
  }

  // ─── Image (first column, only rendered when present) ──────────────────
  .news-img-wrap {
    grid-area: media;
    @include news-item-media;
  }

  // ─── Date / category / tags / author (rendered first in column 2) ──────
  .footer {
    grid-area: footer;

    p {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-2); // 8px
      margin: 0;
    }

    .news-list-date,
    .news-list-category,
    .news-list-tags,
    .news-list-author {
      @include eyebrow-text($mobile-weight: 500, $uppercase: true);
      color: var(--color-text-secondary);
    }

    .news-list-category::before,
    .news-list-tags::before,
    .news-list-author::before {
      content: '\2022'; // middot separator between meta pieces
      margin-right: var(--space-2);
    }
  }

  // ─── Title ───────────────────────────────────────────────────────────────
  .header {
    grid-area: header;

    h3 {
      @include display-heading;

      a {
        color: inherit;
        text-decoration: none;

        &:hover,
        &:focus-visible {
          text-decoration: underline;
        }
      }
    }
  }

  // ─── Description + Read More ────────────────────────────────────────────
  .teaser-text {
    grid-area: teaser;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-title-body-mobile); // 16px

    div[itemprop='description'] {
      @include body-text;
      margin: 0;
    }

    .more {
      @include prose-link;
    }

    @include respond-to('desktop') {
      gap: var(--gap-title-body); // 24px
    }
  }

  // ─── Pagination ──────────────────────────────────────────────────────────
  .f3-widget-paginator {
    @include news-pagination;
  }
}

.no-news-found {
  @include body-text;
  // Section rhythm: 56px mobile+tablet, 80px laptop+ (--section-space, tokens.scss).
  padding-block: var(--section-space);
}