/* ==========================================================================
   TUOIL — inside TUOIL
   The latest pieces, full width, opened by a hairline each. No boxes.
   ========================================================================== */

.s-news {
  padding-block: var(--section-pad);
  background: var(--c-surface-2);
}

.s-news__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gutter);
}

.s-news__item {
  border-top: 1px solid var(--c-border-strong);
  padding-top: var(--sp-3);
}

.s-news__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.s-news__media {
  /* the element is a span inside the link, so it has to be told to be a box
     before the ratio and the crop mean anything */
  display: block;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  margin-bottom: var(--sp-3);
}

.s-news__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.s-news__link:hover .s-news__img,
.s-news__link:focus-visible .s-news__img { transform: scale(1.04); }

.s-news__date {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--c-muted);
}

.s-news__headline {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  letter-spacing: var(--ls-heading);
}

.s-news__link:hover .s-news__headline,
.s-news__link:focus-visible .s-news__headline {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* On the listing page each item also carries a line of what it is about. */
.s-news__excerpt {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.s-news__list--detailed { row-gap: var(--sp-6); }

/* The home page runs five across, so the picture stands taller and the
   headline is set a size down to hold three lines in a narrower column. */
.s-news__list--home { grid-template-columns: repeat(var(--news-cols, 5), minmax(0, 1fr)); }

/* The home cards open with the photograph, so the hairline that separates the
   items on the listing page would only cut the section head off from them. */
.s-news__list--home .s-news__item { border-top: 0; padding-top: 0; }
.s-news__list--home .s-news__media { aspect-ratio: 4 / 3; }
.s-news__list--home .s-news__headline { font-size: 1.0625rem; }

.s-news__more { margin-top: var(--sp-5); }

@media (max-width: 1280px) {
  .s-news__list--home { grid-template-columns: repeat(var(--news-cols-md, 3), minmax(0, 1fr)); row-gap: var(--sp-5); }
}

@media (max-width: 900px) {
  .s-news__list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .s-news__list--home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .s-news__media,
  .s-news__list--home .s-news__media { aspect-ratio: 16 / 9; }
}

@media (max-width: 600px) {
  .s-news__list--home { grid-template-columns: minmax(0, 1fr); }
}