/*
 * The four newest articles, on the home page.
 *
 * The card itself is not styled here. .ad-art, .ad-art__media, .ad-art__cat
 * and .ad-art__meta all come from articles.css, which the blog already uses,
 * so a card on the home page and a card on the index are the same object and
 * cannot drift apart. Only what is specific to this section lives below: the
 * section frame, the head, the four-column row and the link under it.
 *
 * Logical properties throughout, so the Hebrew RTL layout needs no second
 * stylesheet.
 */

.ad-posts {
  padding: var(--ad-space-section) var(--ad-space-page);
}

/* ------------------------------------------------------------- the head */

/*
 * The same 1fr / 2fr head every other section on this page uses: the eyebrow
 * in the narrow column, the headline and intro in the wide one, both sitting
 * on the same baseline.
 */
.ad-posts__head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  align-items: end;
  margin-block-end: 48px;
}

.ad-posts__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  font-family: var(--ad-font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--ad-color-accent);
}

.ad-posts__heading {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.ad-posts__intro {
  margin-block-start: 16px;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ad-color-text-secondary);
}

/* -------------------------------------------------------------- the row */

/* Four across, one line. The gap is the site's card gap, so this row lines
   up with every other grid on the page. */
.ad-posts__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ad-space-card-gap);
}

.ad-posts__title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.ad-posts__title a:hover,
.ad-posts__title a:focus-visible { color: var(--ad-color-accent); }

/* ------------------------------------------------------------- the link */

.ad-posts__foot {
  display: flex;
  justify-content: flex-end;
  margin-block-start: 44px;
  padding-block-start: 28px;
  border-block-start: 1px solid var(--ad-color-hairline);
}

.ad-posts__cta {
  gap: 10px;
  min-height: var(--ad-size-hit);
  padding-inline: 22px;
}


/* ========================================================== breakpoints */

@media (max-width: 1100px) {
  .ad-posts__head {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
  }

  .ad-posts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .ad-posts {
    padding: var(--ad-space-section-mobile) 0;
  }

  .ad-posts__head,
  .ad-posts__foot {
    margin-inline: var(--ad-space-page-mobile);
  }

  .ad-posts__head { margin-block-end: 28px; }

  .ad-posts__heading { font-size: 34px; }

  .ad-posts__intro { font-size: 17px; }

  /*
   * A swipe row rather than a 2x2 grid: the same shape the related-articles
   * row on an article uses, and it keeps a long home page from growing
   * another full screen. The section's side padding moves onto this list so
   * the row scrolls edge to edge instead of stopping in a 20px gutter, which
   * reads as the end of the list.
   *
   * blog.js gives it a tabindex once it actually overflows, so it can be
   * panned from the keyboard (SC 2.1.1) without adding a tab stop at widths
   * where it does not scroll.
   */
  .ad-posts__list {
    display: flex;
    gap: 16px;
    padding-inline: var(--ad-space-page-mobile);
    padding-block-end: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
  }

  .ad-posts__list:focus-visible {
    outline: 2px solid var(--ad-color-accent);
    outline-offset: 2px;
  }

  .ad-posts__item {
    flex: 0 0 auto;
    inline-size: 240px;
    scroll-snap-align: start;
  }

  /*
   * The cards do not fade in here.
   *
   * The stagger earns its place at desktop, where all four are on screen at
   * once and the delay reads as a sequence. In a swipe row the last two sit
   * outside the viewport, so they stay at opacity 0 until they are scrolled
   * to and then fade in under the reader's thumb. Measured on the live page:
   * cards three and four were opacity 0 at rest and only revealed on swipe.
   *
   * The head above still reveals; only the row opts out.
   */
  .js .ad-posts__item[data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ad-posts__title { font-size: 17px; }

  .ad-posts__foot { justify-content: stretch; }

  .ad-posts__cta {
    inline-size: 100%;
    min-height: var(--ad-size-btn);
  }
}