/* ==========================================================================
   EAW IMAGE SYSTEM
   One set of ratios for the whole site, and a rule about what may be cropped.

   The problem this replaces: six different aspect ratios spread across three
   stylesheets, and a hero that cropped a designed graphic until its text was
   cut off.
   ========================================================================== */

:root {
  --ar-wide:  16 / 9;    /* everything editorial: cards, hero, river */
  --ar-cover:  3 / 4;    /* magazine covers only — a cover is portrait */
  --ar-square: 1 / 1;    /* logos and avatars only */
  --img-bg: #E8EEF3;     /* what shows while an image loads, or behind a fit */
}

/* --------------------------------------------------------------------------
   THE RULE
   A photograph may be cropped. A designed graphic may not.

   Press-release posters, award banners and event creatives carry text inside
   the image. Crop those and you cut the words off — which is exactly what was
   happening to the Awards banner in the hero.
   -------------------------------------------------------------------------- */

/* Editorial thumbnails: cropping is fine and consistency matters more. */
.card > a:first-child,
.card > .ph,
.card img:not(.logo):not(.avatar) {
  aspect-ratio: var(--ar-wide);
  width: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--img-bg);
  display: block;
  border-radius: 4px;
}
.card > a:first-child { overflow: hidden }
.card > a:first-child img { aspect-ratio: var(--ar-wide); width: 100%; height: 100%; object-fit: cover }

/* The hero shows whatever it is given, whole. Never cropped. */
.hero-media a { display: block; position: relative; border-radius: 6px; overflow: hidden;
  background: rgba(255,255,255,.04); box-shadow: 0 28px 60px rgba(0,0,0,.42) }
.hero-media img, .hero-media .ph {
  aspect-ratio: var(--ar-wide);
  width: 100%;
  object-fit: contain;          /* the whole graphic, always */
  object-position: center;
  background: rgba(255,255,255,.03);
  border-radius: 0;
  box-shadow: none;
}

/* Magazine covers are portrait and must never be cropped either. */
.magrid img, .issue-cover img, .card.issue img {
  aspect-ratio: var(--ar-cover);
  object-fit: contain;
  background: var(--img-bg);
}

/* Logos keep their shape inside a square box. */
.logo, .avatar, .company-logo, .card img.logo {
  aspect-ratio: var(--ar-square);
  object-fit: contain;
  background: #fff;
  padding: 6px;
}

/* --------------------------------------------------------------------------
   ROW ALIGNMENT
   Cards in a grid row were ending at different heights because some carry an
   excerpt and some do not. The image is the same size; the card was not.
   -------------------------------------------------------------------------- */
.grid > .card,
.grid > article.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.grid > .card > h3 { margin-bottom: 8px }
.grid > .card > .dek,
.grid > .card > p.sm.muted:last-child { margin-top: auto }   /* meta sits on the floor */
.grid { align-items: stretch }

/* Three lines of headline, then stop. A six-line headline in a card breaks
   the row far worse than a truncated one reads badly. */
.card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card .dek {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The hero headline needs the same discipline — six lines was pushing the
   whole slide past the fold. */
.hero-copy h2 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-dek {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   NO LAYOUT SHIFT
   Every image reserves its space before it loads, so the page does not jump
   as it comes in. Cheap, and it is a Core Web Vitals score.
   -------------------------------------------------------------------------- */
img { max-width: 100%; height: auto; background-color: var(--img-bg) }
img[loading="lazy"] { min-height: 1px }

/* Placeholders match whatever they are standing in for. */
.ph { background: var(--img-bg); display: block; width: 100% }
.ph.r34  { aspect-ratio: var(--ar-wide) }
.ph.slate { background: linear-gradient(135deg, #DCE6ED, #C6D5E0) }
.ph.warm  { background: linear-gradient(135deg, #F0E6D2, #E2D3B8) }
.ph.gold  { background: linear-gradient(135deg, #F5E9D0, #E8D3A8) }

@media (max-width: 640px) {
  .card h3 { -webkit-line-clamp: 3 }
  .hero-copy h2 { -webkit-line-clamp: 3 }
  .hero-media img, .hero-media .ph { aspect-ratio: var(--ar-wide) }
}