/* ==========================================================================
   Connect 2026 - Undesigned region                                T-21..T-24
   --------------------------------------------------------------------------
   The artboards mark several regions with a black block and a white caption
   rather than a design:

     "Pull out quote section"                    p10   744 x 251
     "section about upgrading to connect plus"   p10   744 x 460
     "Contribute section advert"                 p10
     "survey banner ad to take part"             p13   744 x 251
     "event images on rotation"                  p21
     "Video demo of connect benefits"            p22   771 x 433

   These are NOT ads and NOT third-party embeds - they are parts of the design
   the client has not specified yet. Giving them their own component keeps that
   distinction visible instead of burying it in an adSlot, and makes the whole
   set findable in one grep when the designs arrive.

   EVERY ONE OF THESE IS AN OPEN QUESTION. They are listed in CONNECT2026.md
   section 9 as a group: six regions across four screens with no design and no
   content brief.

   The block RESERVES ITS SPACE for the same reason adSlot does - whatever
   eventually fills it will be roughly this size, so the page around it should
   not move when it lands.

   MUST NOT SHIP:
     grep -rn "cn-tbd" src/main/webapp/WEB-INF/views/connect2026/pages/

   DEPENDS ON: tokens.css
   ========================================================================== */

.cn-tbd {
  display: grid;
  place-items: center;
  width: 100%;
  padding: var(--cn-space-6);
  background: var(--cn-ph-img);
  color: var(--cn-ink-invert);
  font-size: var(--cn-text-h1);
  font-weight: var(--cn-fw-semibold);
  line-height: var(--cn-lh-tight);
  text-align: center;
}

/* Ratios, not heights, so the block scales with its column. Measured. */
/*
   p1's Connect Plus block is 773.3 x 238.8, a flatter 3.24 than p10's 2.96.
   Both are "wide" in the loose sense; they are not the same rectangle.
*/
.cn-tbd--banner { aspect-ratio: 773 / 239; }  /* Home Connect Plus             */
/*
   A region the artboard leaves EMPTY - no block drawn, just a heading and the
   space beneath it. p1 does this twice: Connect Industry Experts (heading,
   one-line subtitle, then ~378px of nothing) and CeFPro Acadamy (heading at
   y=3811, then straight to the newsletter at y=3939, with no shape between).
   Reserve the height so the page does not move when the design arrives.
*/
/*
   99 is the raw gap on p1 between the CeFPro Acadamy heading (bottom ~3840)
   and the newsletter (3939). The heading's own 16px margin and the
   newsletter's 48px section margin already supply 64 of it, so the block
   itself only has to hold the remaining ~35.
*/
.cn-tbd--reserved { min-height: 35px; }

.cn-tbd--wide  { aspect-ratio: 744 / 251; }   /* pull-out quote, survey banner */
.cn-tbd--tall  { aspect-ratio: 744 / 460; }   /* upgrade-to-Connect-Plus block */
.cn-tbd--video { aspect-ratio: 16 / 9; }      /* video demo                    */

/*
   p14's embedded report: 320.3 x 285.3pt = 769 x 685, the full 771 content
   column less its own hairline. Reserved rather than built - which viewer
   fills it is CONNECT2026.md question 23, the same question the magazine
   issue asks.
*/
.cn-tbd--report { aspect-ratio: 769 / 685; }

/*
   p21's "event images on rotation" blocks measure 171.4 x 130.3, four across.
   That is 1.32, not the 16/9 they were first built with.

   The LABEL has to come down with the box. Every other placeholder captions at
   --cn-text-h1, but p21 sets this one at 23.4px, and at 34.8 in a 131px column
   the four words cannot fit the ratio - min-content wins over aspect-ratio, so
   the block rendered 208 tall against the 130 drawn. Sizing the caption is what
   lets the ratio hold.
*/
.cn-tbd--rotator {
  aspect-ratio: 171.4 / 130.3;
  padding: var(--cn-space-3);
  font-size: var(--cn-text-section);
}

/* =========================================================== RESPONSIVE == */
@media (max-width: 767px) {
  /*
     A 744x251 block at 343px wide is only 116px tall, which is not enough for
     a 36px caption. Drop the caption and let the block find its own height.
  */
  .cn-tbd {
    font-size: var(--cn-text-card);
    min-height: 140px;
  }
  .cn-tbd--wide { aspect-ratio: auto; }
}

/* p22 draws the video demo block as an OUTLINE, not a filled placeholder:
   white inside, a dark rule around it, dark caption. Measured 771.3 x 432.6. */
.cn-tbd--outline {
  background: var(--cn-surface);
  color: var(--cn-ink);
  border: 2px solid var(--cn-ink);
}