/* The Tom's Desk form embeds, showing their own design and nothing of ours.
 *
 * Two jobs.
 *
 * 1. Take our card down. `ttc-embed-bare` is put on the wrapper by
 *    app/embeds.py, only on a wrapper that actually holds a form slot. The
 *    theme's `ebook` block is an orange card with a star field, a "free"
 *    sticker drawn in `::before` and 3.8rem/4.6rem of padding — all of it
 *    designed around a heading and bullets that are no longer there, and all
 *    of it competing with the card the embed now brings.
 *
 * 2. Reserve the space. The embed arrives as an iframe that starts small and
 *    is resized by its script, which is a layout shift on every page that has
 *    one — 324 of them for the sidebar alone. The heights below are measured
 *    from the rendered frames, not estimated:
 *
 *        slot                 1280   1000    760    390
 *        newsletter-inline     401    407    517    435
 *        newsletter-sidebar    464      –      –      –  (sidebar not shown)
 *        contact               665    665    662    736
 *
 *    Measured with the cards already off, which matters: the sidebar frame is
 *    464 tall without our 4.6rem of padding squeezing it and 680 with.
 *
 *    The exit-intent embed has no target div — it overlays the page and brings
 *    its own — so there is nothing to reserve for it.
 */

/* `#floating-sidebar .ebook` and `section.gt-block.ebook` both paint the card,
 * and an id beats a class — so the selectors here have to reach at least as
 * far as the theme's do. */
#floating-sidebar .ebook.ttc-embed-bare,
section.gt-block.ebook.ttc-embed-bare,
.ttc-embed-bare {
  padding: 0;
  background: none;
  background-image: none;
  border-radius: 0;
  box-shadow: none;
}
.ttc-embed-bare::before,
.ttc-embed-bare::after { content: none; display: none; }
/* The theme's spinner sat under our own form. The embed has its own. */
.ttc-embed-bare > .loading-component { display: none; }

.ttc-embed { display: block; }
.ttc-embed > iframe { display: block; width: 100%; border: 0; }

/* The in-page newsletter frame is the awkward one, and the awkwardness is on
 * Tom's Desk's side. Same form, same `?embed=1` URL, same 894px of width — and
 * it reports 401px on the homepage and 720px on /about/. At 350px it reports
 * 720 on the homepage and 435 on /contact/. Three loads of each, cache
 * disabled, every one identical: deterministic per page, and not a function of
 * anything this side can see.
 *
 *        width   / (home)   /about/   category   /contact/  /subscribe/
 *         1280       401       720        401        401        401
 *         1000       407       720        720        407        407
 *          760       517       720        720        517        517
 *          390       720       720        720        435        435
 *
 * So one number per breakpoint cannot be right for every page. Under-reserving
 * is a shift, which scores; over-reserving is a gap, which does not — so each
 * breakpoint holds the height of the pages readers actually land on, which at
 * phone width is the homepage and the 49 category archives. /contact/ and
 * /subscribe/ carry a gap there instead of a jump.
 *
 * This is item 2 of POST-CUTOVER-SPEED.md arriving exactly as it was written:
 * "It should be done together with Tom's Desk's auto-sizing fix, so the
 * reserved height matches what they finally report."
 */
.ttc-embed--newsletter-inline { min-height: 401px; }
.ttc-embed--contact { min-height: 665px; }

@media screen and (max-width: 1024px) {
  .ttc-embed--newsletter-inline { min-height: 720px; }
}
@media screen and (max-width: 600px) {
  .ttc-embed--newsletter-inline { min-height: 720px; }
  .ttc-embed--contact { min-height: 736px; }
}

/* The advertising banner slots.
 *
 * `advertising-banner.js` fetches `load.php` and drops an <a> into an empty
 * div, so the page grew by the banner's whole height after first paint — 259px
 * on one slot and 495px on another at 390, and the largest single contributor
 * to this site's CLS. app/embeds.py writes the ratio of the tallest eligible
 * banner onto the slot as three custom properties, one per artwork, because
 * the theme swaps between them at 1100 and 600 and the three are not the same
 * shape.
 *
 * Over-reserving leaves a gap, which scores nothing. Under-reserving is a
 * shift, which scores — so the tallest eligible banner is the one held for.
 */
.ads-banner-slot[style*="--ttc-ad-d"] { aspect-ratio: var(--ttc-ad-d); }
@media screen and (min-width: 600px) and (max-width: 1099px) {
  .ads-banner-slot[style*="--ttc-ad-t"] { aspect-ratio: var(--ttc-ad-t); }
}
@media screen and (max-width: 599px) {
  .ads-banner-slot[style*="--ttc-ad-m"] { aspect-ratio: var(--ttc-ad-m); }
}
/* Once filled, the <a> and its image set the height and the reservation gets
 * out of the way. Holding the ratio afterwards was tried and is worse — 0.336
 * against 0.106 on a category page at 390 — because the artwork the loader
 * picks is not always the shape of the tallest one held for, and a forced
 * ratio then fights the image instead of framing it. */
.ads-banner-slot:has(a) { aspect-ratio: auto; }


/* The sidebar the theme pins with JavaScript.
 *
 * `app.js` switches `#floating-sidebar` to `position: fixed` on the first
 * scroll. That takes it out of flow, `#main-right` collapses to nothing behind
 * it, and everything below moves — a shift on every page, every time anybody
 * scrolls. It is the theme's own behaviour and predates this rebuild; what it
 * needs is for the column to keep the height the sidebar left behind.
 *
 * The number is the same one `--ttc-embed-sidebar-h` reserves for the frame,
 * because the sidebar is that frame and nothing else. The theme drops the
 * sidebar entirely below 1024, where there is nothing to hold open.
 */
:root { --ttc-embed-sidebar-h: 464px; }
.ttc-embed--newsletter-sidebar { min-height: var(--ttc-embed-sidebar-h); }
@media screen and (min-width: 1025px) {
  #main-right { min-height: var(--ttc-embed-sidebar-h); }
}
@media screen and (max-width: 1024px) {
  :root { --ttc-embed-sidebar-h: 0px; }
}