/* ==========================================================================
   Connect 2026 - Home                                        T-20 · artboard p1
   --------------------------------------------------------------------------
   The Home-only rules. Everything Home shares with the Content Library - the
   hero card, headline rows, section headings, the page-start gap, the rail
   grid - is left exactly as the library pages render it, because those were
   signed off against their boards first. This file holds only what p1 draws
   differently from every other board, measured at 4x (1 image px = 0.6 real):

     Most Read panel     first row's ink 40px under the panel top (not 28)
     Latest Insights     headline-only cards, no image plate, rules 119 tall
     Connect Plus        a GREY PANEL with a heading and copy, not a black block
     connect + advert    abuts the panel above it - zero gap
     Research button     LEFT-aligned, 22 under the covers (events: centred, 68)
     Industry Experts    a #f6f7f9 band holding 177 x 155 white cards, 4 x 2
     Videos & Audio      full-bleed #e6e6e6 band, 32 / 42 padding, no eyebrows
     Upcoming Events     26px row gap between the two rows of tiles

   Scoped under .cn-home, which home.jsp puts on <main>, so none of it can
   leak into a page that happens to reuse a class name.

   DEPENDS ON: tokens.css, shell.css, card.css, person.css, tabs.css
   ========================================================================== */

/* ------------------------------------------------------------ Most Read -- */
/*
   p1: panel top y=340.8, first numeral's ink top 380.1, first title's 380.7 -
   40px in. The list panel's 20px pad put the ink at 28. The numeral's own
   line box adds ~8 above its ink, so 32 of padding lands the ink at 40.
   Bottom stays 20: last title ink 891.2 to panel bottom 936 is 44.8, which
   the row's trailing 20 plus the pad already gives.
*/
.cn-home .cn-panel--list { padding-top: var(--cn-space-8); }

/* ------------------------------------------------------ Data pull-outs --- */
/* p1: heading ink at x=116.1 / y=2400.3 inside a panel at 86.4 / 2367.6 -
   a 30px pad, not the centred 40 the Related Research panel on p3 uses. */
.cn-home .cn-panel--reserved {
  padding: 30px;
  text-align: left;
  /*
     FILLS TO THE FOOT OF THE CONTENT COLUMN. p1 ends this panel at y=2776.8
     and the experts band beside it at 2777.4 - the panel's 409 is not a
     designed height, it is whatever was left under the skyscraper. So the
     rail is a flex column and the panel takes the slack, with 409 as its
     floor. Today the content column runs SHORT of the rail (the Connect
     Plus panel has two lines of copy against the board's five), so the
     floor is what shows; with real copy the panel grows to meet it.

     BUT ONLY SO FAR - 17 Sep 2026. Filling to the foot regardless meant a
     taller content column stretched this panel into a large empty blue
     block under the poll. It now grows to close a gap of up to ~150px
     and then stops: small differences are absorbed, a big one shows as
     the rail ending a little above the column rather than as dead space.
  */
  flex: 1 1 auto;
  max-height: 560px;
}
.cn-home .cn-grid-rail--left > .cn-rail {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

/* ------------------------------------------- Most Read meets the byline --- */
/*
   p1 ends the Most Read panel level with the hero's byline (both ~y=455 on
   the board). The panel's six rows have a fixed pitch and the hero's height
   follows its title and byline, so the two only met by chance - measured 35px
   apart at 1440. The rail now stretches to the hero column and the panel to
   the rail, and the six rows share whatever is left, evenly, so the last
   rule lands on the byline. Only beside the hero (>=1280); stacked, the
   panel is its own height.
*/
@media (min-width: 1280px) {
  .cn-home .cn-grid-rail--reader > .cn-rail {
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }
  .cn-home .cn-grid-rail--reader .cn-panel--list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  .cn-home .cn-grid-rail--reader .cn-panel--list > .cn-headline-row { flex: 1 1 auto; }
}

/* ------------------------------------------------- two rows, four cells --- */
/*
   p1 ends the skyscraper level with the sponsored bar and the polls panel
   level with the experts band. The grid has two rows for that: the rail
   cells stretch to their neighbours' height, the skyscraper's creative
   fills its stretched box (fill - a few percent taller than 1:3, which is
   what the board's 452 x 1357 beside a 1112-tall column implies anyway),
   and the polls panel is exactly the experts section's height. Below 1280
   the grid is one column (shell.css) and the four cells stack in reading
   order: column, experts, skyscraper, panel.
*/
@media (min-width: 1280px) {
  .cn-home__rows {
    grid-template-rows: auto auto;
    row-gap: var(--cn-space-10);
  }
  .cn-home__rows-sky     { grid-column: 1; grid-row: 1; }
  .cn-home__rows-top     { grid-column: 2; grid-row: 1; }
  .cn-home__rows-panel   { grid-column: 1; grid-row: 2; }
  .cn-home__rows-experts { grid-column: 2; grid-row: 2; margin-top: 0; }

  /* contain: size - the box's height comes from the row, never from the
     picture inside it. Without it a wide rail (1920: 602px, so a 1:3
     creative wants 1806) made the ROW as tall as the picture and the
     skyscraper ran 104px past the sponsored bar. */
  .cn-home__rows-sky .cn-ad:not(.cn-ad--placeholder) {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 0;
    contain: size;
  }
  .cn-home__rows-sky .cn-ad:not(.cn-ad--placeholder) .cn-ad__img { height: 100%; }
  .cn-home__rows-panel .cn-panel--reserved { flex: 1 1 auto; max-height: none; }
}
/* Written with the parent so they outrank shell.css's
   ".cn-grid-rail--left > :first-child { order: 2 }" on the skyscraper. */
@media (max-width: 1279px) {
  .cn-home__rows > .cn-home__rows-top     { order: 1; }
  .cn-home__rows > .cn-home__rows-experts { order: 2; }
  .cn-home__rows > .cn-home__rows-sky     { order: 3; }
  .cn-home__rows > .cn-home__rows-panel   { order: 4; }
}

/* ------------------------------------------------------ Latest Insights -- */
/*
   Headline only. The card's title carries an 8px top margin meant to sit it
   under an eyebrow; with nothing above it, that margin became the gap between
   the rule top and the text. p1: rules start at y=1093.2, title ink at
   1099.6 - the line box's own half-leading is that 6.
*/
.cn-home__insights .cn-card__title { margin-top: 0; }

/* --------------------------------------------------------- Connect Plus -- */
/*
   p1 y=1243.8-1482.6: a 774 x 239 panel in the same #e6e6e6 as the Videos
   band, "Connect Plus" in cyan at x=592.9 / y=1291.5 (25 in, 47.7 down), then
   five lines of body copy at 22.2px pitch, ending 47.8 above the bottom. It
   was rendered as a black tbdBlock - but the block on the board is a
   designed text panel; only its COPY is lorem.
*/
.cn-home__plus {
  padding: 46px 25px;
  background: var(--cn-band-mid);
}
.cn-home__plus .cn-section-heading { margin-bottom: var(--cn-space-3); }
.cn-home__plus p {
  margin: 0;
  max-width: 70ch;
  font-size: var(--cn-text-body);
  line-height: var(--cn-lh-body);
  color: var(--cn-ink);
}
.cn-home__plus p + p { margin-top: var(--cn-space-2); }
.cn-home__plus-lede { font-weight: var(--cn-fw-semibold); color: var(--cn-navy); }

/* The perks, one under another with a cyan tick. One column: two columns
   put a wrapped line beside a short one and opened a hole under it. The
   panel was told it may take the height it needs - p1 only measured lorem. */
.cn-home__plus-perks {
  display: grid;
  gap: var(--cn-space-2);
  margin: var(--cn-space-4) 0 0;
  max-width: 70ch;
  font-size: var(--cn-text-body);
  line-height: var(--cn-lh-body);
  color: var(--cn-ink);
}
.cn-home__plus-perks li {
  position: relative;
  padding-left: var(--cn-space-6);
}
.cn-home__plus-perks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--cn-cyan);
  font-weight: var(--cn-fw-bold);
}

.cn-home__plus-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cn-space-3);
  margin-top: var(--cn-space-5);
}
.cn-home__plus-cta { margin-top: 0; }

/* p1's three lines of copy under "Latest Research Reports". */
.cn-home__reports-intro {
  margin: 0 0 var(--cn-space-5);
  max-width: 70ch;
  font-size: var(--cn-text-body);
  line-height: var(--cn-lh-body);
  color: var(--cn-ink);
}

/*
   THE ADVERT UNDER IT TOUCHES IT. p1 draws the lime "connect + advert" bar
   starting at y=1482.6 - the panel's bottom edge to the pixel. The two read
   as one unit: the Connect Plus panel and its promotional banner.
*/
.cn-home__plus + .cn-home__plus-ad { margin-top: 0; }

/* ------------------------------------------------------------- Buttons --- */
/*
   Two "View ..." buttons, two alignments, both measured:
     Research   x=567.6 = the column's left edge; 21.6 under the covers
     Events     x=791.4, 326 wide, centred on the 774 column; 68 under the tiles
   .cn-listing__pagination centres with a 40px top margin, which is right for
   the second and wrong twice for the first.
*/
/* Two classes: .cn-listing__pagination loads after this file and would win
   a single-class tie. */
.cn-home .cn-home__reports-cta {
  justify-content: flex-start;
  margin-top: 22px;
}
.cn-home .cn-home__events-cta { margin-top: 68px; }

/* The sponsored bar sits 18 under the Research button (2159.4 -> 2177.4). */
.cn-home__sponsored { margin-top: 18px; }

/* ----------------------------------------------------- Industry Experts -- */
/*
   p1 y=2430.6-2777.4: a 776-wide band in #f6f7f9 behind eight white cards,
   177 x 155.4, four across and two down, 18.6 between columns and 12.6
   between rows; 15.6 of band above the first row. The cards are a pasted
   screenshot on the board, so the numbers are +/- 1.
*/
.cn-home__experts {
  padding: var(--cn-space-4);
  background: var(--cn-band-grey);
}
.cn-home__experts .cn-grid {
  --cn-grid-gap: 18px;
  /*
     140, not the ladder's 170: at 375 the band's inner width is 311 and a
     170 floor drops eight cards into ONE column, a 1,300px stack. At 140
     they go two across (146 each) - a name, a wrapped "role, company" and
     the stats still fit. No mobile board; the 3-up listing cards do the
     same step.
  */
  --cn-grid-floor: 140px;
  row-gap: 12px;
}
/* The subtitle sits 4.5px above the band on p1 - the band all but touches it. */
.cn-home .cn-section-sub { margin-bottom: var(--cn-space-2); }

/*
   THE CARD. Measured inside the first one:
     17.4 pad, 45.6 disc, 6.6, name (13.2 ink = 14px semibold), 9, role +
     company as ONE wrapped run in 12px grey, 8.4, stats in 12px grey, ~10 pad.
   The expert card in person.css was built before p1's cards were counted:
   20px pad, a 1px border, italic 14px role and company on separate lines,
   and stats that wrapped to two lines at 93px. 223 tall against 155.
*/
.cn-home .cn-person--expert {
  padding: 16px 12px 14px;
  border: 0;
  border-radius: var(--cn-radius-md);
  background: var(--cn-surface);
  box-shadow: 0 1px 3px rgba(0, 28, 100, 0.08);
}
.cn-home .cn-person--expert .cn-person__avatar-wrap {
  width: 46px;
  height: 46px;
  margin-bottom: var(--cn-space-2);
  font-size: var(--cn-text-meta);
  background: #f0f1f7;               /* sampled: the disc is a paler blue-grey */
}
.cn-home .cn-person--expert .cn-person__initials { color: var(--cn-cyan); }
.cn-home .cn-person--expert .cn-person__name {
  display: block;
  margin-bottom: 6px;
  font-size: var(--cn-text-label);
  font-weight: var(--cn-fw-semibold);
  line-height: 1.3;
  color: var(--cn-ink);
}
/*
   TWO LINES OF "role, company", however long the CRM's strings are. Real
   records carry titles like "Head of Business Continuity & Resilience EMEA"
   at "Cantor Fitzgerald & BGC Group" - four lines in a 148px card, and the
   equal-height grid stretched every card in the row to match (247 against
   the board's 155). The full text is still there for a screen reader and
   on the search page the card opens.
*/
.cn-home .cn-person--expert .cn-person__meta {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.cn-home .cn-person--expert .cn-person__role,
.cn-home .cn-person--expert .cn-person__org {
  font-size: 12px;
  font-style: normal;
  font-weight: var(--cn-fw-regular);
  line-height: 1.4;
  color: var(--cn-ink-muted);
}
/* "Head of Third Party Risk, US Bank" - one run, wrapping where it must.
   personCard.tag breaks the line between role and company; here the break
   is hidden and a comma joins them. */
.cn-home .cn-person--expert .cn-person__name + br,
.cn-home .cn-person--expert .cn-person__role + br { display: none; }
.cn-home .cn-person--expert .cn-person__role ~ .cn-person__org::before { content: ", "; }
.cn-home .cn-person--expert .cn-person__stats {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--cn-ink-faint);
}

/* ------------------------------------------------- Latest Videos & Audio -- */
/*
   p1 y=2818.2-3322.2: the ONE full-bleed band on the page, 1429 wide (the
   whole board) in #e6e6e6. Inside it the content stays on the 1256 grid:
   heading ink at 2852.2 (34 down, ~32 to the line box), pills at 2915.4,
   images at 2973.6, four-line titles ending 3276.7, band bottom 45.5 below
   that ink (~42 below the line box).

   .cn-band > .cn-container gives 80 top and bottom; this band is tighter.
*/
.cn-home__media-band { background: var(--cn-band-mid); }
.cn-home__media-band > .cn-container { padding-block: 32px 42px; }

/*
   NO EYEBROW. p1's four cards go image, then title at 24px - "Webinar" is
   what the selected pill above already says. home.jsp passes no type, so
   the title follows the media directly and takes the 8px it would have had
   under an eyebrow; the board's 24 to the ink is ~20 to the line box.
*/
.cn-home__media .cn-card__media + .cn-card__title { margin-top: 20px; }

/* Pills to images: 24 on p1 (2949.6 -> 2973.6). The strip's own 15px of
   bottom padding is the Insights row's gap (14.4); this row has 9 more. */
.cn-home__media .cn-grid--media { margin-top: 9px; }

/*
   FLOOR = CEILING, as the 3-up listing cards do. All four of p1's titles run
   four lines; a shorter real headline must not let the band shrink under
   its neighbours. Same 24px type, same 1.2 line-height: 4 x 28.8 = 115.2.
*/
.cn-home__media .cn-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  min-height: 4.8em;
}

/* ------------------------------------------------------- CeFPro Academy -- */
/*
   "Coming soon" on the rail's pale-blue panel. p1 draws heading + three
   lines of copy (62px of text); a short panel of about that depth keeps
   the newsletter where the board puts it. Left-aligned like the pull-outs
   panel, not the centred Related Research treatment.
*/
.cn-home__academy {
  padding: 30px;
  text-align: left;
}
.cn-home__academy p {
  margin: 0;
  font-size: var(--cn-text-body);
  font-weight: var(--cn-fw-medium);
  line-height: var(--cn-lh-body);
  color: var(--cn-navy);
}

/* ------------------------------------------------------ Upcoming Events -- */
/*
   p1: heading ink bottom 3387.9, tiles at 3413.4 - 25.5, where the section
   heading's 16 left 15.7. Row 1 ends 3540, row 2 starts 3566.4: 26 between
   the rows against the 20 between the columns.
*/
.cn-home__events .cn-section-heading { margin-bottom: var(--cn-space-6); }
.cn-home__events .cn-grid { row-gap: 26px; }

/* =========================================================== RESPONSIVE == */
@media (max-width: 767px) {
  .cn-home__plus { padding: var(--cn-space-6) var(--cn-space-4); }
  .cn-home__media-band > .cn-container { padding-block: var(--cn-space-6) var(--cn-space-8); }
  .cn-home__events-cta { margin-top: var(--cn-space-8); }
}