/* ==========================================================================
   Connect 2026 - Third-party embed slot                                 T-32
   --------------------------------------------------------------------------
   Reserves space for content this rebuild does NOT render itself:

     audio      the Podbean player on the Audio reader (p20). The artboard
                shows a screenshot of Podbean's own widget, so this is an
                iframe from a third party, not a component to build.
     document   embedded report / magazine pages (p14, p11). Both artboards
                draw the same 769x685 block.

   MEASURED, converted at 1pt = 2.4px:
     audio      771 x 109
     document   769 x 685

   WHY THIS RESERVES SPACE - identical reasoning to adSlot. A third-party
   iframe loads late or is blocked outright by a tracker blocker. Without a
   reserved box the reader reflows under the user mid-read, and on the Audio
   shell the embed sits directly above the action pills, so the pills jump.

   OPEN QUESTIONS for the client - both flagged in CONNECT2026.md section 9:
     - is the audio host Podbean for good, or is it moving? The embed's
       height is fixed by the provider, not by us.
     - the document embed is behind the Connect Plus gate ("Report pages
       embedded here once logged into connect plus"). Which viewer renders
       the pages is unconfirmed.

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

.cn-embed {
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--cn-band-grey);
}

.cn-embed > iframe,
.cn-embed > embed,
.cn-embed > object {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------------------------- sizes ---- */
/*
   The audio player is a FIXED-HEIGHT widget - the provider renders the same
   109px chrome whatever the width - so it takes a min-height, not a ratio.
   Giving it an aspect ratio would make it 400px tall on a desktop column and
   30px tall on a phone, neither of which the provider will honour.
*/
.cn-embed--audio    { min-height: 109px; }

/* Document pages DO scale with width - they are pages, so a ratio is right. */
.cn-embed--document { aspect-ratio: 769 / 685; }

/*
   NOT ON A PHONE. The flipbook is a landscape spread with its own toolbar
   inside the frame; at 343px wide the 769:685 box is 305px tall, the page
   is a thumbnail and the toolbar the brief complains about ("cannot see the
   bottom banner to scroll through or download") is not there. A portrait
   frame gives the viewer a page it can show at reading size and room for
   its controls. 130vw: 446px on a 343 column, 520 measured as readable on a
   375 phone; the floor is for the narrowest screens.
*/
@media (max-width: 767px) {
  .cn-embed--document {
    aspect-ratio: auto;
    height: 130vw;
    min-height: 480px;
  }
}

/* -------------------------------------------------------- placeholder --- */
/*
   Artboard state: the black block and its caption.

   MUST NOT SHIP:
     grep -rn "cn-embed--placeholder" src/main/webapp/WEB-INF/views/connect2026/
*/
.cn-embed--placeholder {
  display: grid;
  place-items: center;
  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;
}

/* =========================================================== RESPONSIVE == */
@media (max-width: 767px) {
  /* 685px of document at 343px wide is 611px tall - fine. But the caption
     inside the placeholder has to stop being a 36px headline. */
  .cn-embed--placeholder { font-size: var(--cn-text-card); }
}