/**
 * page-collection — "You may also like" article card collection.
 * Figma: articles/pageCollectionBlock (831:31934).
 * Section padding 80px 96px (desktop), white tiles on grey, 16:9 imagery,
 * H5 title, date + read-time pills (1px #D2D2D2, radius 60px).
 *
 * NOTE: place this block in a FULL-WIDTH section so its grey background spans
 * the viewport (the article reading column is only 776px).
 */

.page-collection.block {
  background: var(--amp-bg);
  padding-block: var(--space-2xl);
  padding-inline: var(--spacing-12);
}

@media (width >= 768px) {
  .page-collection.block {
    padding-inline: var(--spacing-36);
  }
}

/* header: heading + optional "see more" CTA */
.page-collection-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m) var(--spacing-40);
  margin-bottom: var(--spacing-40);

  .page-collection-cta {
    height: var(--spacing-22);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    flex: none;
    padding: var(--space-s) var(--space-m);
    border: 1px solid var(--amp-ultramarine-pressed);
    border-radius: var(--radius-pill);
    font-family: var(--heading-font-family);
    font-weight: var(--font-weight-600);
    font-size: var(--font-size-14);
    line-height: var(--line-height-20);
    letter-spacing: 0.107em;
    color: var(--amp-ink-blue);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .page-collection-cta:hover,
  .page-collection-cta:active {
    color: var(--amp-ultramarine);
    border: 1px solid var(--amp-ultramarine);
  }

  .page-collection-cta:active {
    background: var(--amp-blue-pale);
  }
}

.page-collection-title {
  margin: 0;
  font-family: var(--heading-font-family);
  font-weight: var(--font-weight-600);
  font-size: var(--heading-font-size-xl);
  line-height: var(--heading-line-height-xl);
  letter-spacing: var(--heading-tracking-xl);
  color: var(--amp-ink-blue);
}

/* Trailing arrow — Figma shows it on mobile; hidden on desktop (see @media). */
.page-collection-cta-icon {
  display: none;
  flex: none;
  width: var(--spacing-24);
  height: var(--spacing-24);
  color: var(--amp-ink-blue);
}

.page-collection-cta-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.page-collection-cta:active .page-collection-cta-icon {
  color: var(--amp-ultramarine);
}

/* card grid */
.page-collection-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}

.page-collection-item {
  display: flex;
}

.page-collection-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--amp-bg-grey);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.page-collection-card:focus-visible {
  outline: 2px solid var(--amp-ultramarine);
  outline-offset: 2px;
}

.page-collection-media {
  margin: 0;
}

.page-collection-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.page-collection-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-l);
  padding: var(--space-l) var(--spacing-20);
}

.page-collection-card-title {
  margin: 0;
  font-family: var(--heading-font-family);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-20);
  line-height: var(--line-height-24);
  letter-spacing: -0.0125em;
  color: var(--amp-ink-blue);
}

.page-collection-card:active {
  border-color: var(--amp-ultramarine);
  text-decoration: none;
}

.page-collection-card:active .page-collection-card-title {
  color: var(--amp-ultramarine);
}

/* date + read-time pills */
.page-collection-tags {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-top: auto;
}

.page-collection-taxonomy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-xs);
  padding: 0;
  list-style: none;
}

.page-collection-taxonomy-tag {
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--amp-grey-d2);
  border-radius: 60px;
  font-family: var(--body-font-family);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  color: var(--amp-ink-blue);
}

.page-collection-taxonomy-tag-type {
  font-weight: var(--font-weight-400);
  border-color: var(--amp-grey-e8);
}

.page-collection-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-s) var(--space-2xs) var(--space-xs);
  border: 1px solid var(--amp-grey-d2);
  border-radius: 60px;
  font-family: var(--body-font-family);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  color: var(--amp-ink-blue);
  white-space: nowrap;
}

.page-collection-card:active .page-collection-tag {
  border-color: var(--amp-ultramarine);
  color: var(--amp-ultramarine);
}

.page-collection-tag svg {
  width: var(--spacing-16);
  height: var(--spacing-16);
  flex: none;
}

/**
 * MOBILE (< 768px): horizontal snap carousel.
 * Figma: articles/relatedArticles (1010:39630) — section is white with
 * 56/20/0/0 padding, tiles are 311px wide with 12px gap, CTA sits BELOW
 * the carousel (not next to the heading as on desktop).
 *
 * Structure trick: .page-collection-header is `display: contents` so its
 * children (title + optional CTA) participate directly in the inner
 * flex-column and can be reordered around the list.
 */
@media (width < 1024px) {
  .page-collection.block {
    background: var(--amp-bg);
    padding: var(--spacing-56) 0 0 var(--spacing-20);
  }

  .page-collection-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
  }

  .page-collection-header {
    display: contents;

    .page-collection-cta {
      order: 3;
      align-self: flex-start;
      color: var(--amp-ink-blue);
    }
  }

  /* Reveal the trailing arrow only on mobile (Figma 1010:39630). */
  .page-collection-cta-icon {
    display: inline-flex;
  }

  .page-collection-title {
    order: 1;
  }

  .page-collection-list {
    order: 2;
    display: flex;
    grid-template-columns: none;
    gap: var(--spacing-12);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--spacing-20);
    scrollbar-width: none;

    /* Block has 0 right padding so tiles bleed to the viewport edge; a 20px
       trailing padding gives the last snapped tile breathing room. */
    padding-inline-end: var(--spacing-20);
  }

  .page-collection-list::-webkit-scrollbar {
    display: none;
  }

  .page-collection-item {
    flex: 0 0 311px;
    scroll-snap-align: start;
  }

  .page-collection-media img {
    aspect-ratio: 3 / 2;
  }

  .page-collection-body {
    gap: var(--spacing-40);
    padding: var(--space-xl) var(--space-l);
  }
}

@media (width >= 1024px) {
  .page-collection-inner {
    width: min(var(--content-max-width), 100% - 64px);
    margin: 0 auto;
    padding: 0;
  }

  .page-collection.block {
    background: var(--amp-bg);
    padding-block: var(--space-4xl);
    padding-inline: 0;
  }

  /* title font metrics already switch via --heading-*-xl tokens at 768px */

  .page-collection-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-collection-body {
    gap: var(--spacing-40);
    padding: var(--space-xl) var(--space-l);
  }

  .page-collection-card:hover {
    border-color: var(--amp-ultramarine);
    text-decoration: none;
  }

  .page-collection-card:hover .page-collection-card-title {
    color: var(--amp-ultramarine);
  }

  .page-collection-card:hover .page-collection-tag {
    border-color: var(--amp-ultramarine);
    color: var(--amp-ultramarine);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-collection-cta,
  .page-collection-card {
    transition: none;
  }
}