/* ==========================================================================
   Connect 2026 - Cover card (reports, magazines)                        T-13
   --------------------------------------------------------------------------
   Cover artwork plus a "View report >" / "View >" button. Used on the
   Research landing (Report Library, 3 across), Magazine landing (Archive,
   3 across), the hero of both, and the Related Research rail panel.

   MEASURED - and the covers are NOT a consistent shape:
     report,   library grid   220.8 x 133.2px   ratio 1.657
     report,   hero           277.7 x 167.6px   ratio 1.657
     magazine, archive grid   220.9 x 227.5px   ratio 0.971
     magazine, hero           277.9 x 286.1px   ratio 0.971
     report,   rail panel     457.8 x 563.7px   ratio 0.812

   So the ratio is a property of the artwork, not of the slot.

   THEREFORE object-fit: contain, NEVER cover. These are real cover designs -
   cropping one cuts the masthead or the title off. The box reserves space and
   the artwork sits inside it whatever its proportions.

   DEPENDS ON: tokens.css, components/button.css
   ========================================================================== */

.cn-cover {
  position: relative;   /* the Connect Plus mark sits on the cover's corner */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cn-space-3);
}

.cn-cover__art {
  width: 100%;
  /* See .cn-card__image: the attributes reserve the box, the ratio below
     decides the shape, and height:auto stops the attribute winning. */
  height: auto;
  object-fit: contain;
  object-position: top left;
  background: var(--cn-band-grey);
}

/* Ratios reserve space so the grid does not reflow as covers load. They are
   defaults - a cover with different proportions still fits, letterboxed. */
/*
   ALL THREE ARE THE SAME RATIO, and it is 1/sqrt(2) - the A-series.

   Previous values (1.657 report, 0.971 magazine, 0.812 portrait) were taken
   from the wrong rects: 452x595 and 453x679 are the rail AD slots, which sit
   directly above and below the covers on p3 and p14 and are easy to grab by
   mistake. Re-measured across every board that carries artwork:

     p1  Home research row        228 x 323   0.707  x3
     p3  Related Research rail    272 x 384   0.707
     p10 Magazine landing         220 x 311   0.707  x4
                                  232 x 322   0.718  x3
     p13 Research landing         277 x 391   0.707  x4
                                  235 x 326   0.721  x3
     p14 Report reader            220 x 311   0.707

   Which is exactly what you would expect: these are real reports and real
   magazines, and both are laid out on A4. The 0.718/0.721 outliers are the
   same ratio drawn a couple of px loose.

   Kept as three named kinds even though the value is shared - they are three
   different pieces of ARTWORK, and if one ever stops being A4 the others
   should not move with it.
*/
.cn-cover--report   .cn-cover__art { aspect-ratio: var(--cn-ratio-a); }
.cn-cover--magazine .cn-cover__art { aspect-ratio: var(--cn-ratio-a); }
.cn-cover--portrait .cn-cover__art { aspect-ratio: var(--cn-ratio-a); }

.cn-cover__title {
  font-size: var(--cn-text-body);
  font-weight: var(--cn-fw-semibold);
  line-height: var(--cn-lh-snug);
  color: var(--cn-ink);
}

a.cn-cover:hover .cn-cover__title { color: var(--cn-cyan); }

/* =========================================================== RESPONSIVE == */
/*
   T-40: covers stay 2-up on mobile rather than dropping to one. They are
   portrait artwork - one per row wastes most of the screen and pushes the
   rest of the page below the fold.
   The grid collapse itself is in shell.css; this only tunes the card.
*/
@media (max-width: 767px) {
  .cn-cover { gap: var(--cn-space-2); }
  .cn-cover__title { font-size: var(--cn-text-label); }
}