/* The shim between the theme's full-bleed layout and Pagelayer's container.
 *
 * The theme's sections are full-bleed: <section class="sect"><div class="wrap">.
 * Pagelayer wraps every widget in a row and column that carry their own width
 * and padding, so left alone a section's background shrinks to a narrow band
 * down the middle of the page.
 *
 * Only strip the container when what sits inside really is a theme block
 * (.tb-block). Pagelayer's own widgets do not carry that class, so they keep
 * the builder's default behaviour — that is the free-form content, and it
 * wants a container.
 *
 * WARNING: the .pagelayer-* selectors below match Pagelayer 2.1.4. Upgrading
 * the plugin means re-reading the real DOM and adjusting them.
 */

.tb-builder .pagelayer-row:has(.tb-block) {
  margin: 0;
  max-width: none;
}

/* Pagelayer wraps every widget in a div of its own — .pagelayer-col-holder >
 * div.tb_gamehero > .tb-block — so a `> .tb-block` child combinator here never
 * matches anything. It never has: the column holder's 10px padding stayed on
 * from the very first migration, insetting every full-bleed section by 10px on
 * all four sides on every migrated page. Nothing broke, so nothing said so;
 * it took the owner looking at a game page's edge-to-edge hero to see it.
 *
 * Both depths are listed rather than a loose descendant `:has(.tb-block)`,
 * which would also strip the padding off a column holding a Pagelayer widget
 * that merely contains one somewhere inside it. */
.tb-builder .pagelayer-col:has(> .pagelayer-col-holder > .tb-block),
.tb-builder .pagelayer-col:has(> .pagelayer-col-holder > * > .tb-block),
.tb-builder .pagelayer-col-holder:has(> .tb-block),
.tb-builder .pagelayer-col-holder:has(> * > .tb-block) {
  padding: 0;
  margin: 0;
}

/* Deleting a widget in the editor leaves its row and column standing. An empty
 * column still carries the builder's 10px padding, so removing a section opens
 * a 20px gap between the two sections that were on either side of it — dead
 * space made out of nothing, and nothing on screen to say where it came from.
 * The row can be deleted in Pagelayer as well; this makes forgetting free.
 *
 * The class is named twice on purpose. Pagelayer prints its own
 * `.p-xxxxxxx .pagelayer-col-holder{padding:10px}` into a <style> in the body,
 * which is (0,2,0) and comes after this file — and :not() and :has() add
 * nothing of their own, so the obvious single-class form ties and loses. The
 * shim above wins only because .tb-block inside its :has() carries a class.
 * Measured in the browser: the rule matched and was simply overruled. */
.tb-builder .pagelayer-col-holder.pagelayer-col-holder:not(:has(*)) {
  padding: 0;
}

/* Sections stacked inside an outer wrapper row, not directly in the page.
 *
 * Pagelayer lets a row be dropped inside a column, and dragging a section onto
 * an existing row's column is the easy accident: the section lands one level
 * deeper instead of beside its neighbours. Measured on /games/jlrc4-remastered/
 * 04.08.2026 — all eight sections sat inside one wrapper row while the other
 * five game pages kept theirs flat, and it is the only page that looked wrong.
 *
 * Two of Pagelayer's own rules then bite, and the shims above cannot reach
 * either, because both look for a .tb-block one or two levels down and here it
 * is five:
 *
 *   .p-XXXXXXX .pagelayer-col-holder{padding:10px}
 *     → a 10px white frame around every section on the page.
 *   .p-XXXXXXX .pagelayer-col-holder > div:not(:last-child){margin-bottom:15px}
 *     → a 15px white band between each pair of sections.
 *
 * The second one is why `.tb-builder .pagelayer-row:has(.tb-block){margin:0}`
 * at the top of this file does not already handle it: that rule matches and is
 * outscored, (0,3,0) against (0,3,1) — the bare `div` is the extra point. Every
 * selector below is written to clear (0,3,1); check that before trimming one. */
.tb-builder .pagelayer-col-holder:has(> .pagelayer-row .tb-block) {
  padding: 0;
  margin: 0;
}

.tb-builder .pagelayer-col-holder:has(> .pagelayer-row .tb-block) > .pagelayer-row:has(.tb-block) {
  margin-bottom: 0;
}

/* Post properties renders nothing at all — it is a zero-height div that exists
 * to carry settings. Left alone it still takes the 15px sibling margin above,
 * which is a gap above the hero with nothing in it. */
.tb-builder .pagelayer-col-holder .pagelayer-post_props.pagelayer-post_props {
  margin: 0;
}

.tb-builder .tb-block {
  width: 100%;
}

.tb-builder .tb-block > .sect,
.tb-builder .tb-block > .hbanner,
.tb-builder .tb-block > .subscribe,
.tb-builder .tb-block > .band {
  margin-inline: 0;
  width: 100%;
}

/* TB Text + image: which side the picture sits on, and what happens when
 * there is no picture at all.
 *
 * The hand-written tb_extra_blocks() did this with an inline `order` style and
 * by skipping the whole grid when the image was empty. A builder widget has
 * one fixed html template, so both cases are expressed as classes instead. */

.tb-band-art { order: 2; }
.tb-band-copy { order: 1; }

.tb-art-left .tb-band-art  { order: 1; }
.tb-art-left .tb-band-copy { order: 2; }

/* No image chosen: Pagelayer strips the <img if=""> and leaves the column
 * empty. Drop the column and let the copy run the full width, rather than
 * leaving a blank half-page beside it.
 *
 * The :has(.tb-band-art) on the second line is load-bearing. .heritage-grid is
 * the theme's two-column grid, not this widget's — TB Contact form uses it too,
 * with two plain divs and no .tb-band-art anywhere. Without that first test,
 * "no band art here" is true of the contact form by definition, and the rule
 * flattened it: the form ran the full width and the brand picture dropped
 * underneath it. Measured on dev 05.08.2026, the moment Contact was put back on
 * the builder template. Scope a shim to the widget it was written for. */
.tb-band-art:not(:has(img)) { display: none; }
.heritage-grid:has(.tb-band-art):not(:has(.tb-band-art img)) { display: block; }

/* The reading width is deliberately NOT restated here. Each widget wraps its
 * own content in the theme's .sect > .wrap, the same structure tpl-home.php
 * uses, so the gutter and the width come from one place (--max and --gut in
 * site.css). Copying that arithmetic into this file is the surest way to let
 * the two drift apart. */

/* Pagelayer wraps every child widget in a div of its own.
 *
 * That div becomes the grid item, and the theme's element sits inside it — so a
 * container whose children are meant to be grid or flex items loses that
 * relationship the moment the page moves to the builder. Seen on the migrated
 * Home page: the three game cards stretched to 370px as wrappers, but the third
 * .tile only filled 334px of its own wrapper because its title ran to one line
 * instead of two. Nothing was wrong with .tiles; the item it was sizing simply
 * was not the card any more.
 *
 * Passing the wrapper through — flex parent, child flexed to fill — restores
 * exactly the geometry the hand-written page has. Kept as a container rather
 * than display:contents on purpose: Pagelayer hangs its drag handles off these
 * wrappers, and contents would take them out of the box tree.
 *
 * Any future container that takes child widgets needs a line here too, and
 * build/test-builder.php fails if one is missing. */
.tb-builder .tiles > *,
.tb-builder .scoreboard > *,
.tb-builder .timeline > *,
.tb-builder .heritage-stats > *,
.tb-builder .gallery > *,
.tb-builder .feat > *,
.tb-builder .info > *,
.tb-builder .faq > * {
  display: flex;
  /* .scoreboard div is a DESCENDANT selector, so it paints the injected
   * wrapper as well as the tile inside it — card inside an identical card.
   * The wrapper carries no appearance of its own; the theme's element keeps
   * all of it. */
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.tb-builder .tiles > * > .tile,
.tb-builder .scoreboard > * > div,
.tb-builder .timeline > * > li,
.tb-builder .heritage-stats > * > .hstat,
.tb-builder .gallery > * > button,
.tb-builder .feat > * > .fcard,
.tb-builder .info > * > div,
.tb-builder .faq > * > div { flex: 1; }

/* .timeline sizes and spaces its own <li>. Those two declarations have to move
 * out to whatever is actually the flex item, which is now the wrapper. */
.tb-builder .timeline > *      { flex: 1 1 150px; margin-right: 18px; }
.tb-builder .timeline > * > li { flex: 1; margin-right: 0; }


/* The release rows are a data source, not the table.
 *
 * site.js reads them and builds the real markup into #releases, so a visitor
 * must never see them twice. But they still have to exist somewhere the owner
 * can click and drag, and an element with display:none cannot be dragged — so
 * they show inside the live editor and nowhere else. */
.releases-built { display: none; }
.tb-pl-live .releases-built { display: block; margin: 18px 0; }
.tb-pl-live .releases-built > * { display: block; }
.tb-pl-live .rel-src {
  display: block; padding: 8px 12px; margin-bottom: 6px;
  border: 1px dashed var(--rule); border-radius: 6px;
  font-size: .9rem; color: var(--ink-2);
}

/* The game hero's button carries one of two icon sets, and Pagelayer can only
 * drop a whole tag — so each set sits in a span of its own with an if= on it.
 * That span must not become a flex item of .btn: the button lays its icons and
 * its label out with gap:9px, and .btn-wish nudges the second glyph back over
 * the first with svg + svg. display:contents leaves both rules looking at
 * exactly the boxes they were written for. */
.tb-cta-ic { display: contents; }

/* The store rows are a data source and nothing else: site.js reads them and
 * builds the real buy grid into .buy-grid, which sits right underneath and
 * renders in the editor too. Showing the raw rows as well put the same eleven
 * storefronts on the canvas twice — a wall of dashed boxes above the block they
 * describe — so they stay hidden everywhere, exactly as a visitor sees it.
 *
 * The stores are still added, reordered and deleted from the widget's own
 * "Store buttons" list in the sidebar, which is where the hero's store buttons
 * have been managed since v3.1.0: tb_store renders an empty <span> and has
 * never been visible on the canvas either.
 *
 * The two column notes go the same way — the built grid prints them again as
 * .buy-note, so leaving them visible here showed each note twice. */
.buy-built,
.buy-notes { display: none; }