@import '../mixins';

// Compact news-list rhythm — deliberately tighter than content-only-intro's
// own section-level gaps (space-14/20, gap-eyebrow-title, gap-title-body):
// those tokens are right for a single standalone section, but read as too
// spacious once repeated down a list of articles. Typography (mixins below)
// stays exactly content-only-intro's — only spacing tokens differ here.
.news-content-intro-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);       // 40px between articles on mobile (was space-8, 32px)
  // Outer padding normalised onto the shared section rhythm (--section-space,
  // tokens.scss: 56px mobile+tablet, 80px laptop+) — was its own off-rhythm
  // 32px/40px. The inter-article `gap` above/below stays deliberately
  // tighter than the rhythm (see file header comment); only this outer
  // padding was ever meant to match every other component's section edge.
  padding-block: var(--section-space);

  @include respond-to('desktop') {
    gap: var(--space-12);      // 48px (was space-20, 80px)
  }

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

.news-content-intro-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);

  &__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);       // 8px title<->excerpt<->link (was gap-title-body-mobile, 16px)
  }

  &__heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);     // 6px date<->title (was gap-eyebrow-title, 16px)
  }

  &__eyebrow {
    @include eyebrow-text($mobile-weight: 500, $uppercase: false);
    color: var(--color-text-secondary);
  }

  &__title {
    @include display-heading;

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

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

  // Spacing now comes entirely from __content's own flex `gap` above — no
  // separate margin needed (the old margin-top duplicated that gap, which
  // was part of why the list felt too spacious).
  &__body {
    @include body-text;
    margin: 0;
  }

  // Markup order is __content then __media (see ContentIntroItem.html) but
  // the image must always appear first visually — above the content on
  // mobile, to the left of it from tablet up — so order:-1 applies at every
  // breakpoint, not just where the two-column split kicks in.
  &__media {
    @include news-item-media;
    order: -1;
  }

  // templateLayout=2 always has an image (see List.html) — 20%/80% column
  // split, matching news-list-view's own "with image" layout so both tx_news
  // list layouts stay visually consistent.
  @include respond-to('tablet') {
    flex-direction: row;
    align-items: flex-start; // top-align image and content columns (not stretch/center)
    gap: var(--space-6); // 24px image <-> content gap

    &__content {
      width: 80%;
      justify-content: flex-start; // let content flow from the top, not center
      gap: var(--space-2);
    }

    &__media {
      width: 20%;
      height: auto;
      flex-shrink: 0;
    }
  }

  @include respond-to('desktop') {
    &__content {
      gap: var(--space-3); // 12px
    }

    &__body {
      max-width: 722px; // content-only-intro__body parity
    }
  }
}