/* 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;
}
/* The "FREE" sticker.
 *
 * `section.gt-block.ebook:before` paints a 36rem `free-sticker.svg` over the
 * block's top-right corner, and `.ttc-embed-bare::before` (0,1,0) loses to it
 * (0,2,1) — so the layer survived the last pass and is what Tom photographed
 * lying across "Subscribe For Newsletters" and hanging off the card. It is our
 * theme's decoration, not part of the Tom's Desk form, and with the form now
 * bringing its own card there is nothing for it to decorate. These selectors
 * reach as far as the theme's do. */
section.gt-block.ebook.ttc-embed-bare::before,
section.gt-block.ebook.ttc-embed-bare::after,
#floating-sidebar .ebook.ttc-embed-bare::before,
#floating-sidebar .ebook.ttc-embed-bare::after,
.ttc-embed-bare::before,
.ttc-embed-bare::after { content: none !important; display: none !important; }
/* 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; }
}

/* Add-on C: a step's photograph inside the article at the top of a recipe,
   beside the paragraph that talks about that step. `aspect-ratio` on the
   figure rather than on the image, so the space is reserved before the file
   arrives — this site's CLS is 0.000 and a picture appearing late is exactly
   how that stops being true. 3:2 is the crop Tom shoots for the web. */
.ttc-stepshot {
  margin: 2.4rem 0;
  aspect-ratio: 3 / 2;
  background: rgba(0, 0, 0, .04);
  border-radius: 1.2rem;
  overflow: hidden;
}
.ttc-stepshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Add-on F: the newsletter banner in the sidebar must not change size.
 *
 * The banner is a cross-origin iframe at `width: 100%`, so it is exactly as
 * wide as the column it sits in — and that column was fluid twice over. The
 * theme sets `main #main-right { width: 39.5rem }`, and this site's rem is
 * fluid, so the column is 303px at 1280, 329px at 1600 and 395px at 1920. On
 * top of that `app.js` writes an inline `width` onto #floating-sidebar from
 * `$("#main-right").width()` on every scroll and every resize. The iframe
 * reports only its height back, so it re-flows to whatever width it is given:
 * measured, its heading takes 492px of height at 1920, 440px at 1600 and
 * 462px at 1440 — the heading flipping between one and two lines, which is
 * the wobble Tom sees.
 *
 * 303px is the width the banner had before any of this: it is 39.5rem at
 * 1280, which is what the theme gives the column, and it is the number the
 * pin was first set to. It went to 383 on 9 September and back on Tom's
 * correction the same day — he remembered it as ~311, and git says 303
 * (commit 1cef9cb). Nothing between the rule and the iframe has padding or a
 * border — sidebar 303, its wrapper 303, the iframe 303 — so the width set
 * here is the width the banner renders at, which is what
 * `tools/audit_sidebar_width.py` asserts to the pixel.
 *
 * `#main-right` is widened with it and `#main-left` narrowed to match: the
 * theme computes that as `calc(100% - 39.5rem)` and the two floats have to
 * add up to the row. At 1201 — the narrowest desktop — that leaves the
 * content column 778px, which is comfortably more than it needs.
 *
 * `!important` because the width it is fighting is an inline style. Only
 * above 1200px, which is the theme's own breakpoint — `#main-right` is
 * `display: none` at 1200 and below, and a fixed width there would be a
 * width on nothing.
 */
@media screen and (min-width: 1201px) {
  /* The column, not only the banner inside it. Pinning the banner alone left
     it 92px narrower than its column on a wide monitor, and `margin-left:
     auto` to push it flush made it JUMP those 92px the moment `app.js`
     switched it to `position: fixed` — auto margins have nothing to resolve
     against once an element is out of flow. Measured: left 1492 at rest,
     1400 pinned, at 1920. So the column is pinned too and the two are the
     same width at every desktop size.
     `#main-left` is `calc(100% - 39.5rem)` in the theme and has to be moved
     with it, or the two floats no longer add up to the row. */
  main #main-right {
    width: 303px !important;
  }
  main #main-left {
    width: calc(100% - 303px) !important;
  }
  #main-right #floating-sidebar {
    width: 303px !important;
    max-width: 303px !important;
  }
}