/* ==========================================================================
   Connect 2026 - Cards                                                 T-13
   --------------------------------------------------------------------------
   Starts with the HEADLINE ROW, which the component matrix shows on all 22
   screens in four variants. It is roughly 60% of the page markup in this
   design, so it is built first and everything else follows.

   Variants (all measured from the artboards):
     plain     listings, Related lists, Connect Plus grid   (p2, p3, p22)
     numbered  Home "Most Read", 1-6 on a blue panel        (p1)
     button    Magazine landing / issue, trailing "View >"  (p10, p11)
     columned  Home "Latest Insights", 3 cols + dividers    (p1)
               -> use .cn-grid.cn-grid--divided from shell.css around them

   DEPENDS ON: tokens.css, shell.css, components/topic.css
   ========================================================================== */

/* ====================================================== HEADLINE ROW ===== */
/*
   Measured, artboard p2 listing rows:
     eyebrow   6.9pt Medium  x2.4 = 17px   (--cn-text-meta)
     title    10.0pt Medium  x2.4 = 24px   (--cn-text-section), line-height 1.2
     gap eyebrow -> title    ~8px
     row pitch               47.7pt = 114px
     divider   1px full column width, sits below the title
*/

.cn-headline-row {
  display: block;
  /*
     MEASURED, and one value fits both places the row is used:

       rail list      (p3, p7)   107px between eyebrows, titles wrap to 2 lines
       in-column list (p18)       78px between eyebrows, titles fit on 1

     Both resolve to eyebrow(17) + 8 + n x 28.8 + 25px of chrome. The divider
     hugs the row it CLOSES - ~4px under the title, 20px before the next
     eyebrow - which is what groups each rule with the item above it. An
     earlier 24/12 split centred the rule between rows and read as 91px
     everywhere, wrong for both.
  */
  /*
     EVEN, since 16 Sep: the same air above the eyebrow as under the title.
     The 20/4 split above grouped each rule with the row it closed, which
     was the board's letter; the client reads it as the rule sitting on top
     of the next title, and asked for the same space above and below. 12
     over the eyebrow, 8 under the title - the title's own descender space
     makes the two read equal.

     AND THE RULE IS INK, NOT THE LIGHT GREY. The boards draw every list rule
     as 0.25pt black (sampled rgb(0,0,0) on p4, rgb(67,67,67) on p6), and the
     listing grid already draws its rows that way; the rail rows were the
     only ruled list still on --cn-border, which is why the Related Reports
     rules read as faint beside the column's. --cn-ink-body is the near-black
     - --cn-ink is navy, despite the names.
  */
  padding-top: var(--cn-space-3);
  padding-bottom: var(--cn-space-2);
  border-bottom: 1px solid var(--cn-ink-body);
}

/* First row in a list sits tight to the heading above it. */
.cn-headline-row:first-child { padding-top: 0; }

/*
   NO RULE UNDER THE LAST ROW IN A RAIL. p7 draws its four Related Q&As with
   three rules - at 1926.5, 2033.7 and 2138.6 - which is between the rows and
   nowhere else. A fourth under the last row hung a line in the gap above the
   Forthcoming Events card. Rail only: a listing's rows are ruled on the top
   edge instead, and this leaves that alone.
*/
.cn-rail .cn-headline-row:last-child { border-bottom: 0; }

/*
   TWO LINES IN A RAIL. The 107 pitch documented above is eyebrow(17) + 8 +
   TWO 28.8 lines + 25 chrome - it only holds if every title is two lines.
   p3 and p7 both draw four rail rows at a uniform 107 with two-line titles;
   real headlines vary, and a three-line one runs its row 29px over while a
   one-line one collapses it, so the rail steps unevenly against a content
   column that does not.

   Excludes --numbered: Most Read sets its own clamp against a 1.1
   line-height, and 2.4em here would be the wrong floor for it.
*/
/*
   NO FLOOR HERE EITHER - same defect, same measurement. A one-line title in a
   rail list left an empty line above its hairline exactly as the listing rows
   did. See the note in listing.css: the boards hold the ink-to-rule gap
   constant at ~16.5px and let the pitch follow the content.
*/
.cn-rail .cn-headline-row:not(.cn-headline-row--numbered) .cn-headline-row__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The eyebrow: content type, coloured by topic. */
.cn-headline-row__type {
  display: block;
  margin-bottom: var(--cn-space-2);
  font-size: var(--cn-text-meta);
  font-weight: var(--cn-fw-medium);
  line-height: 1;
  color: var(--cn-ink-muted);
}

.cn-headline-row__title {
  /*
     BLOCK, so a CTA after it starts a new line.

     Left inline, the "View >" pill flowed straight on from the last word of
     the title - p11 draws it on its own line at the content edge. It only
     looked right on a row whose title happened to fill the width; measured on
     the September issue, rows 2 and 3 had the pill hanging off the title.
     __type above is already block for the same reason.
  */
  display: block;
  font-size: var(--cn-text-section);
  font-weight: var(--cn-fw-medium);
  line-height: 1.2;
  color: var(--cn-ink);
  transition: color var(--cn-dur) var(--cn-ease);
}

a.cn-headline-row:hover .cn-headline-row__title,
a.cn-headline-row:focus-visible .cn-headline-row__title {
  color: var(--cn-cyan);
}

/* ------------------------------------------------- variant: numbered ---- */
/*
   Home "Most Read". Rank numeral is 22.8pt Bold x2.4 = 55px, sitting on the
   light blue panel. The whole list is inside a --cn-panel-blue container.
*/
.cn-headline-list--numbered {
  background: var(--cn-panel-blue);
  padding: var(--cn-space-6);
}

.cn-headline-row--numbered {
  display: grid;
  /*
     FIXED rank column, not auto. p1 starts all six titles at exactly x=960.5
     while the numerals vary in width - "1" is 20.7 wide and "4" is 37.1 - so
     an auto column moves every title with its own number and the list comes
     out ragged. 37 + 16 = 53, and 887.9 + 20 padding + 53 = 960.9.
  */
  grid-template-columns: 37px minmax(0, 1fr);
  column-gap: var(--cn-space-4);
  align-items: center;
  border-bottom: 0;
  /*
     p1 steps 93.5 between numerals - 398, 492, 585, 679, 772, 866 - and every
     row is exactly two title lines. The old 12 gave ragged rows of 67 to 102
     because each title wrapped to whatever length it happened to be.

     The row is sized by the RANK, not the title: the numeral's em box is 55px
     against a two-line title's 44, and they are centred on each other. So the
     pitch is 55 + 2 x padding, and 20 gives 95 against the measured 93.5 -
     24 overshot it to 103.
  */
  padding-block: var(--cn-space-5);
}

.cn-headline-row__rank {
  font-size: var(--cn-text-rank);
  font-weight: var(--cn-fw-bold);
  line-height: 1;
  color: var(--cn-navy);
  font-variant-numeric: tabular-nums;
  /* Numerals centre in their column - p1 centres all six on x=924. */
  text-align: center;
}

/*
   On the panel the titles are smaller and semibold, not 24px medium - but
   they are 8.2pt (19.7px, --cn-text-card), not 7.5pt. Measured on p1 at
   y=482: Poppins-SemiBold 19.7. Body was 1.7px short on all six rows.
*/
.cn-headline-row--numbered .cn-headline-row__title {
  font-size: var(--cn-text-card);
  font-weight: var(--cn-fw-semibold);
  /*
     1.1, not 1.3: p1's two title lines step 21-22px on 19.7px type.
  */
  line-height: var(--cn-lh-rank);
  /*
     TWO LINES, then ellipsis. All six rows on p1 are two lines and the pitch
     is uniform, which only holds if the title cannot run to a third. Real CRM
     headlines vary far more than the artboard's repeated mock title, so
     without this one long headline pushes the whole panel out of step with
     the hero column beside it.
  */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------- variant: button ---- */
/* Magazine landing / issue: each row carries its own "View >" pill. */
/*
   MEASURED on p11, which draws eight of these down the issue's article list:

       pill   65.5 x 14.2pt = 157 x 34px, at x=36.0 - the content edge
       fill   rgb(28,183,252)  --cn-cyan
       label  "View >" white at 7.5pt, centred in the pill

   The pill is a FIXED WIDTH, not shrink-to-fit. At its natural width the
   label's own padding gave 85px, about half what the board draws, and eight
   short pills down a column read as a different component entirely.
*/
.cn-headline-row__cta {
  display: inline-block;
  min-width: 157px;
  margin-top: var(--cn-space-3);
  padding: var(--cn-space-1) var(--cn-space-5);
  border-radius: var(--cn-radius-pill);
  background: var(--cn-cyan);
  color: var(--cn-ink-invert);
  font-size: var(--cn-text-label);
  font-weight: var(--cn-fw-medium);
  line-height: 1.8;
  text-align: center;
}

a.cn-headline-row:hover .cn-headline-row__cta { background: var(--cn-cyan-alt); }

/* ------------------------------------------------ Connect Plus badge ---- */
/*
   THE CARD HALF OF THE PREMIUM MARKER.

   p8 - the In-depth (Connect Plus) listing - is the only board that draws it,
   because it is the only board whose every item is gated. A cyan lozenge in
   the TOP-LEFT CORNER of the card image, carrying the white Connect logo:

       hero      84.9 x 21.1pt = 204 x 51px   at the hero image's corner
       3-up card 45.1 x 11.2pt = 108 x 27px   at each card image's corner

   Both fill rgb(28,183,252) - --cn-cyan, the same accent as the reader rule.

   IT IS VECTOR ON THE ARTBOARD, not an embedded image, so a scan of the page's
   images finds nothing and concludes the badge is not drawn. It is. That
   mistake is why this arrived late: the shapes are a cyan rect plus ~40 tiny
   white paths forming the lettering.

   Driven by data-access rather than by the page, so it appears wherever the
   content is gated rather than only where a listing happens to be.
*/
.cn-card__media { position: relative; }

.cn-card__plus {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--cn-z-base);
  display: grid;
  /* One cell that IS the padding box, so the mark's height: 100% below has
     something to resolve against - an auto row sizes itself to the image
     and the percentage means nothing. */
  grid-template-rows: 100%;
  grid-template-columns: 100%;
  place-items: center;
  /* The 3-up size. The hero overrides below - measured, not scaled. */
  width: 108px;
  height: 27px;
  padding: 4px var(--cn-space-2);
  background: var(--cn-cyan);
  border-bottom-right-radius: var(--cn-radius-sm);
}

.cn-card__plus img {
  display: block;
  /* BY HEIGHT, not width. The mark is a 1033 x 217 strip; sized to the
     badge's width it came out 14.3px tall in a 13px space (19.3 in 19 at
     the 3-up size) and spilled over the padding on both edges, reading as
     too big for its box. Sized to the height it always sits inside, with
     the padding intact: 62 x 13 in the small badge, 90 x 19 in the large. */
  height: 100%;
  width: auto;
  max-width: 100%;
  justify-self: center;
  object-fit: contain;
}

/*
   THE HERO BADGE IS THE SAME SIZE AS THE CARD BADGE.

   This was 204 x 51 on the strength of a comment saying "p8 draws it at
   roughly twice the card's size". p8 draws NO badge on the hero at all - only
   on the three cards below it - so there was never a measurement behind the
   number. Rendered at 12x, the badge on those cards measures 109 x 28 against
   a 235px card, which is where the 108 x 27 above comes from.

   At 204 x 51 on a 744px hero it was the loudest object on the listing, and
   nothing in the design asked for that. Same lockup, same size, everywhere it
   appears - which is how a badge is supposed to behave.
*/

/* At 3-up on a phone the card is ~160px wide; a 108px badge covers most of it. */
@media (max-width: 767px) {
  .cn-card__plus { width: 84px; height: 21px; }
}

/* ---------------------------------------------------- premium marker ---- */
/*
   REMOVED: " · Connect Plus" appended to the headline-row eyebrow.

   It was never on an artboard. Rendered at 4x, p2 and p8 both draw the row
   eyebrow as the bare type word in its topic colour and nothing else - p8 puts
   the Connect Plus mark ON THE CARD IMAGE (which .cn-card__plus above draws)
   and states the gating in its H1, "In-depth (Connect Plus)". The rows carry
   no premium signal in either board.

   The rule was invented because p2 mixes gated and free articles in one list
   and the design gives those rows nothing to tell them apart. That is a real
   gap, but it is the client's to close, not ours to fill in - CONNECT2026.md
   question 28.
*/

/* =========================================================== RESPONSIVE == */
/* T-40 spec - see CONNECT2026.md section 4.7. */
@media (max-width: 767px) {
  .cn-headline-row--numbered { column-gap: var(--cn-space-4); }
  .cn-headline-row__rank { font-size: var(--cn-text-h1); }
}

/* ====================================================== CONTENT CARD ===== */
/*
   Image + type eyebrow + title + author. Two variants, measured on p2:

     hero   image 743 x 419 (16:9), title 14.5pt SemiBold x2.4 = 35px, lh 1.1
     grid   image 235 x 132 (16:9), title 10.0pt Medium   x2.4 = 24px, lh 1.2
                  -> identical to the headline row title

   Author line is one string in three weights:
     "Namit Sharma," Medium cyan / "Head of Third Party Risk," italic muted /
     "US Bank" SemiBold navy.  .cn-author in shell.css already does this.

   Used by: all 7 designed listings (hero + 3-up), Home trending hero.
*/

.cn-card { display: block; }

/*
   THE BOARD'S FRAME, FILLED - 17 Sep 2026. The frame is p2's 16:9 (the hero
   p1's 775 x 460) and does not change with the file: the picture is
   stretched to fill it (object-fit: fill, the live site's own rule). A
   banner cut at 16:9 is untouched; another shape is squeezed in proportion
   rather than cropped or left in bars. Cover, contain, a blurred ground
   and natural height were each tried on screen and turned down.
*/
.cn-card__image {
  display: block;
  width: 100%;
  /* The <img> carries width/height attributes (1200x700) so the grid does
     not jump while pictures load. Without this line the browser would use
     that 700 as the rendered height and the aspect-ratio below would never
     get a say - the hero drew 667x700 instead of its 16:9 box. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: fill;
  background: var(--cn-band-grey);
}
.cn-card__media { display: block; }

/*
   A BANNER THAT DID NOT LOAD IS THE BRANDED PLACEHOLDER, as on the current
   site, which swaps a dead banner for ContentBanner1200wX700h.png.

   An earlier version of this used a transparent pixel instead, on the grounds
   that the placeholder 403s from the CDN. It does not - that reading came from
   a test run against the wrong path, without the /regportal prefix. It serves
   correctly at 1200x700, so there is no reason to show an empty grey band
   where the rest of the estate shows artwork.

   Not hypothetical: two of the 100 banners on News are dead in the CRM today.

   object-fit stays `fill` because the placeholder is authored at the card's
   own 16:9-ish ratio, so it should stretch to the box rather than be cropped
   the way a photograph is.
*/
/*
   THE DUMMY BANNER IS A REAL PICTURE, not a grey hole.

   An earlier pass rendered no <img> at all when the record had no image and
   let the media block paint a grey ground. It held the geometry, but it read
   as a broken card - and with nothing behind it the Connect Plus badge sat
   against the headline, which is what the screenshot from testing showed.

   So both failure modes now load ContentBanner1200wX700h.png, the same
   stand-in the legacy views use 154 times. object-fit stays COVER, not fill:
   the banner is 1200x700 (1.714) against a 16:9 box and stretching it to
   fit would distort the logo inside it.
*/
.cn-card__image--fallback {
  object-fit: cover;
}

/*
   THE LABEL SITS WELL CLEAR OF THE PICTURE, and by more than a 16px step.

   Measured on p2, the listing artboard:

       hero    image ends 1042.2, "Article" starts 1087.6   -> 45px
       3-up    image ends 1389.7, "Article" starts 1427.4   -> 38px

   An earlier pass read this off p1 and set 19px. That was the wrong screen:
   p1 is Home, whose hero is a 775px column, where the step really is ~19.
   The listing hero is the 743px column and sits nearly two and a half times
   further from its label - which is the gap that kept looking too tight.

   Scoped to a label that FOLLOWS the media. A card with no image renders the
   type first, and a 38px top margin there would open a hole above it.
*/
.cn-card__media + .cn-card__type { margin-top: 38px; }
.cn-card--hero .cn-card__media + .cn-card__type { margin-top: 45px; }

/*
   Those are desktop measurements off a 743px column. On a phone the card is
   343px and its image about 193px tall, so a 45px gap is nearly a quarter of
   the picture's height and reads as a hole rather than as air. No artboard
   draws mobile, and the rest of the design already steps its rhythm down
   here, so this follows suit.
*/
@media (max-width: 767px) {
  .cn-card__media + .cn-card__type,
  .cn-card--hero .cn-card__media + .cn-card__type { margin-top: var(--cn-space-6); }
}

.cn-card__type {
  display: block;
  margin-top: var(--cn-space-4);
  font-size: var(--cn-text-meta);
  font-weight: var(--cn-fw-medium);
  line-height: 1;
  color: var(--cn-ink-muted);
}

/*
   Reading time sits after the type label on the same line - "Article - 7 min
   read". Inherits the type label's size but not its topic colour, because the
   colour identifies the topic and the duration is not part of it.
*/
.cn-card__readtime {
  color: var(--cn-ink-muted);
}
/*
   THE EDITION, on magazine cards and rows only.

   Brief p12 wants a magazine article to say which issue it came from. It sits
   after the type label in the same line, muted like the reading time, and for
   the same reason: the topic colour identifies the topic, and the issue is not
   part of that.

   It can be long - "Connect Magazine July Edition 2026" - so unlike the type
   label it is allowed to wrap rather than force the card wider.
*/
.cn-card__edition {
  color: var(--cn-ink-muted);
  white-space: normal;
}
.cn-card__edition::before {
  content: "\0000b7";
  margin-inline: 0.35em;
}

.cn-card__readtime::before {
  /* Middot, CSS-escaped rather than literal: this file is served from a
     CDN that does not always send a charset. It was written as a raw NUL
     byte followed by "b7", which would have printed as "News b7 7 min
     read" the day a reading time exists to print. */
  content: "\0000b7";
  margin-inline: 0.35em;
}

.cn-card__title {
  display: block;
  margin-top: var(--cn-space-2);
  font-size: var(--cn-text-section);
  font-weight: var(--cn-fw-medium);
  line-height: 1.2;
  color: var(--cn-ink);
  transition: color var(--cn-dur) var(--cn-ease);
}

a.cn-card:hover .cn-card__title,
a.cn-card:focus-visible .cn-card__title { color: var(--cn-cyan); }

.cn-card__author {
  display: block;
  margin-top: var(--cn-space-3);
  font-size: var(--cn-text-author);
  line-height: var(--cn-lh-snug);
  color: var(--cn-cyan);
}
.cn-card__author em     { font-style: italic; color: var(--cn-ink-muted); }
.cn-card__author strong { font-weight: var(--cn-fw-semibold); color: var(--cn-ink); }

/* -------------------------------------------------------- crop: tall --- */
/*
   The listing heroes really are 16:9 - p2, p4 and p6 all measure 743.6 x
   418.6, a ratio of 1.7763. Home's "Trending this week" hero is NOT: it is
   774.9 x 460.2, a ratio of 1.685, and at 16:9 it renders 24px short in the
   single largest image on the page.

   So the ratio is a crop, set per use, and 16:9 stays the default because six
   of the seven heroes want it.
*/
.cn-card--crop-tall .cn-card__image { aspect-ratio: 775 / 460; }

/* ------------------------------------------------------ variant: hero --- */
.cn-card--hero .cn-card__title {
  font-size: var(--cn-text-h1);
  font-weight: var(--cn-fw-semibold);
  line-height: 1.1;
}

/* Premium marker. Needs the card to be a positioned ancestor. */
.cn-card { position: relative; }

/* ------------------------------------------------------ variant: media -- */
/*
   Video / audio card. Structurally a content card with a play affordance -
   Home "Latest Videos & Audio" (p1), Audio listing (p19), Webinar listing.
   Not a separate component: it differs from the grid card by one overlay.
*/
.cn-card--media .cn-card__media { position: relative; display: block; }

.cn-card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.cn-card__play::before {
  content: "";
  width: 56px;
  height: 56px;
  border-radius: var(--cn-radius-pill);
  background: var(--cn-cyan);
  box-shadow: var(--cn-shadow-card);
}

.cn-card__play::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 18px solid var(--cn-ink-invert);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 5px;
}

/* --------------------------------------------------- hero event label --- */
/*
   The event an Event Q&A was recorded at, set inside the hero image. p6 places
   it at the top left of the 744x418 hero box. Only Q&A cards pass one.
   .cn-card__media is the positioned ancestor.
*/
.cn-card__media { position: relative; display: block; }

.cn-card__event {
  position: absolute;
  top: var(--cn-space-4);
  left: var(--cn-space-4);
  z-index: var(--cn-z-base);
  max-width: calc(100% - var(--cn-space-8));
  padding: var(--cn-space-2) var(--cn-space-3);
  background: var(--cn-navy);
  color: var(--cn-ink-invert);
  font-size: var(--cn-text-meta);
  font-weight: var(--cn-fw-semibold);
  line-height: 1.25;
}

/* ==================================================== LONG TITLES === */
/*
   A TITLE THAT RUNS LONG IS CUT WITH AN ELLIPSIS - 17 Sep 2026. The boards
   are drawn with one mock headline everywhere; real CRM titles run from four
   words to twenty, and one long one pushed its whole row out of line (seen
   on Home's Event Q&A tab and the listing 3-ups). The full text stays in
   the markup for screen readers and the title attribute is the card link's
   own. Line counts are the boards': cards three, headline-only insight
   cards four, rows two, event tiles two, cover captions three.
*/
.cn-card__title,
.cn-cover__title,
.cn-event-tile__name,
.cn-fce__name,
.cn-headline-row__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cn-card__title { -webkit-line-clamp: 3; }
.cn-cover__title { -webkit-line-clamp: 3; }
.cn-event-tile__name,
.cn-fce__name,
.cn-headline-row__title { -webkit-line-clamp: 2; }
/* The related-content strips (Related Webinars / Interviews / Audio - the
   divided 4-up under a reader) give a title three lines: two cut "The
   Science of Smarter Balance Sheet..." on three of four cells at once. */
.cn-grid--divided .cn-headline-row__title { -webkit-line-clamp: 3; }
/* Home's Latest Insights - headline only, the board's four lines. */
.cn-home__insights .cn-card__title { -webkit-line-clamp: 4; }