/* ==========================================================================
   Connect 2026 - Featured item                                    T-23 / T-24
   --------------------------------------------------------------------------
   The "here is the current issue / latest report" block that opens the
   Magazine (p10) and Research (p13) landings. Cover on the left, blurb and
   buttons on the right.

   THE TWO PAGES ARE NOT THE SAME, and the difference is measured:

     Magazine (p10)   sits on a FULL-WIDTH 1256 x 460 band in #bbe9fe
                      (--cn-panel-blue). Cover 277 x 391 at x=53.9, text from
                      x=188pt. One "View" button.
     Research (p13)   has NO band at all - the cover sits straight on the
                      page. Cover 303 x 418 at x=50.2, text from x=188pt. TWO
                      buttons, "View report" (157x34) and "Download report"
                      (197x34).

   Do not unify them by giving Research the band. It does not have one.

   THE BLURB IS NOT BODY COPY. Both artboards set it at 10pt (24px) in
   --cn-ink navy, where reader prose is 7.5pt (18px) in --cn-ink-muted. It is
   promotional text at heading scale, and setting it as body copy makes the
   whole block read as an article intro.

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

/* -------------------------------------------------- Research: no band --- */

/*
   Cover is a FIXED 303px, not a fraction. This block spans the whole 1256px
   container - there is nothing in the rail beside it on p13 - so a `303fr`
   track resolved to 329px against the full width. The artboard cover is 303
   whatever the block spans; only the text column flexes.
*/
.cn-feature {
  display: grid;
  grid-template-columns: 303px minmax(0, 1fr);
  column-gap: var(--cn-space-15);
  align-items: start;
}

.cn-feature__cover {
  width: 100%;
  aspect-ratio: 303 / 418;
  object-fit: cover;
  background: var(--cn-ph-img);
}

/* Text column of the Research feature. The title inside it is
   .cn-reader__title at its usual 36px; only run-in spacing belongs here. */
.cn-feature__body > :first-child { margin-top: 0; }

.cn-feature__blurb {
  margin: var(--cn-space-5) 0 0;
  font-size: var(--cn-text-section);   /* 24px - promo scale, not body */
  font-weight: var(--cn-fw-medium);
  /* 11pt line steps on 10pt type = 1.1, measured on both p10 and p13.
     --cn-lh-snug (1.3) added ~5px a line and pushed the Magazine band from
     460px to 557. */
  line-height: var(--cn-lh-tight);
  color: var(--cn-ink);
}

.cn-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cn-space-4);
  margin-top: var(--cn-space-8);
}

/* ------------------------------------------- Magazine: on a blue band --- */

/*
   1256 x 460, full width inside the container.

   The heading is NOT inside this - on p10 it sits at y=128.8 and the band
   starts at y=138.8. Putting it in added its height plus margin and made the
   band 515 tall.

   Block padding is the smaller step: the band is 460 and the cover inside it
   is 391, so there is (460-391)/2 = 34px above and below. Inline padding
   stays at 40.
*/
.cn-issue-band {
  padding: var(--cn-space-8) var(--cn-space-10);
  background: var(--cn-panel-blue);
}

.cn-issue-band__inner {
  display: grid;
  grid-template-columns: 277px minmax(0, 1fr);   /* fixed cover, as p13 */
  column-gap: var(--cn-space-15);
  align-items: start;
}

.cn-issue-band__cover {
  width: 100%;
  aspect-ratio: 277 / 391;
  object-fit: cover;
  background: var(--cn-ph-img);
}

.cn-issue-band__body {
  font-size: var(--cn-text-section);   /* 24px navy, measured */
  font-weight: var(--cn-fw-medium);
  line-height: var(--cn-lh-tight);     /* 11pt / 10pt = 1.1, measured */
  color: var(--cn-ink);
}
.cn-issue-band__body p { margin: 0 0 var(--cn-space-6); }
.cn-issue-band__body .cn-btn { margin-top: var(--cn-space-2); }

/* --------------------------------------------- Membership benefit panel - */

/*
   369 x 347 on p22, two across the 771px reader column. The artboard only
   says "tick box of whats included" - there is no list, no tiers and no
   pricing in the design. Open question 9.
*/
/* 369 + 33 + 369 = 771. The default 20px card gap gives 376/20/376. */
.cn-benefits { --cn-grid-gap: var(--cn-gutter-read); }

.cn-benefit {
  display: grid;
  place-items: center;
  min-height: 347px;
  text-align: center;
  font-size: var(--cn-text-h3);
  font-weight: var(--cn-fw-semibold);
}

/* =========================================================== RESPONSIVE == */
@media (max-width: 1023px) {
  /* A 303px cover beside a 36px title stops working before the rail stacks. */
  .cn-feature,
  .cn-issue-band__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--cn-space-8);
  }
  .cn-feature__cover,
  .cn-issue-band__cover { max-width: 303px; }
}

@media (max-width: 767px) {
  .cn-issue-band { padding: var(--cn-space-6); }
  .cn-issue-band__body,
  .cn-feature__blurb { font-size: var(--cn-text-card); }

.cn-benefit { min-height: 220px; font-size: var(--cn-text-card); }
  /* Two full-width buttons stacked beat two cramped ones side by side. */
  .cn-feature__actions .cn-btn { flex: 1 1 100%; }
}