/** * Ezoic layout for content pages (single wiki / single condition). * * Activated client-side by ezoic.js, which adds `has-ezoic` to * and injects the ad zone around the run of content sections. Every rule is * scoped to `.has-ezoic`, so the normal (no-ads) layout is never touched. * * Two layouts, chosen by viewport width in ezoic.js: * - .ezoic-zone--desktop (>= 900px): a billboard on top, left/right * skyscraper rails and a leaderboard at the bottom. The middle content * column is forced to a single, stacked layout (title above content). * - .ezoic-zone--mobile (< 900px): ad units placed inline in the * content flow (no rails). * * Slot appearance (set by ezoic.js): * - .ezoic-ad--preview : ?ezoic=test — labelled box, no real ad. * - live : Ezoic injects its own markup after the anchor div * inside .ezoic-slot (showAds anchor option) — never style that markup; * sizing/space reservation lives on the .ezoic-slot wrapper instead. * * Note: preview boxes get an explicit width AND height inline (from ezoic.js) * and are centred with text-align (not flex). We deliberately avoid flexbox + * aspect-ratio here — that combination collapses the slot height in some * browsers, making the ad overlap the text. * * Ad sizes follow the Figma design (IAB standard formats). */ /* ------------------------------------------------------------------ * * Shared slot + ad box * ------------------------------------------------------------------ */ .has-ezoic .ezoic-slot { display: block; width: 100%; text-align: center; } .has-ezoic .ezoic-ad { display: inline-block; vertical-align: top; max-width: 100%; /* never overflow a narrow column */ margin: 0; } /* In the membership-wall "locked/teaser" state the sticky submenu keeps a stale, far-too-tall height, which leaves a large empty gap above the billboard. Pin it back to its content height (a no-op in the normal state). */ .has-ezoic .s-submenu { height: auto !important; } /* Preview box (?ezoic=test): striped + size label, no real ad request. */ .has-ezoic .ezoic-ad--preview { background-color: #f4f4f7; background-image: repeating-linear-gradient( 45deg, transparent, transparent 12px, rgba(73, 59, 144, 0.06) 12px, rgba(73, 59, 144, 0.06) 24px ); border: 1px solid #d7d7e1; border-radius: 4px; position: relative; } .has-ezoic .ezoic-ad--preview::after { content: attr(data-ezoic-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: #6b6b86; text-transform: uppercase; } /* Empty reserved box (live trigger, slot id not configured yet). */ .has-ezoic .ezoic-ad--empty { background-color: #f4f4f7; border: 1px solid #e6e6ee; border-radius: 4px; } /* Keep wide content media within the (narrower) content column so it never causes horizontal overflow — WordPress caption figures carry an inline pixel width, which max-width overrides. */ .has-ezoic .ezoic-zone__main img, .has-ezoic .ezoic-zone__main figure, .has-ezoic .ezoic-zone__main .wp-caption { max-width: 100%; } .has-ezoic .ezoic-zone__main img { height: auto; } /* ------------------------------------------------------------------ * * Desktop (>= 900px): rails + billboard + leaderboard * ------------------------------------------------------------------ */ .has-ezoic .ezoic-zone--desktop { max-width: 1600px; margin: 0 auto; /* Modest top gap below the (sticky) submenu, per the design. */ padding: 48px 16px 0; } /* Billboard sits above the rails and spans the full zone width. */ .has-ezoic .ezoic-billboard { margin: 0 0 32px; } .has-ezoic .ezoic-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 24px; align-items: start; } .has-ezoic .ezoic-rail { display: flex; flex-direction: column; align-items: center; gap: 24px; } .has-ezoic .ezoic-zone__main { min-width: 0; /* let the column shrink below its content's intrinsic size */ } /* The tall rails make the grid row a definite height; without this the content sections collapse to a stale (pre-video-load) height and their content overflows on top of the leaderboard. Forcing auto keeps each section at its real content height. */ .has-ezoic .ezoic-zone--desktop .ezoic-zone__main > section { height: auto !important; } /* Drop the theme's 96px submenu→content top margin on the first section — the billboard already separates it from the submenu. */ .has-ezoic .ezoic-zone--desktop .ezoic-zone__main > section:first-child { margin-top: 0 !important; } /* In-content ad (leaderboard): clear vertical space so it sits between the text, never on top of it. */ .has-ezoic .ezoic-zone__main > .ezoic-slot { margin: 40px 0; } /* Force the content sections to a single, stacked column inside the narrowed middle — the "< lg" layout. No template change: this only applies inside the ad zone, and covers both .s-content-content (wiki) and .s-content-with-sidebar (conditions). */ .has-ezoic .ezoic-zone--desktop .ezoic-zone__main > section > .container > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; } .has-ezoic .ezoic-zone--desktop .ezoic-zone__main > section > .container > .row > [class*="offset-"] { margin-left: 0; } /* Gap between the stacked columns (title/content above sidebar). */ .has-ezoic .ezoic-zone--desktop .ezoic-zone__main > section > .container > .row > [class*="col-"]:not(:last-child) { margin-bottom: 32px; } /* Safety net: if the desktop zone is ever shown below its target width (e.g. for a moment while resizing, before ezoic.js rebuilds), drop the rails. */ @media (max-width: 899.98px) { .has-ezoic .ezoic-grid { grid-template-columns: minmax(0, 1fr); } .has-ezoic .ezoic-rail { display: none; } } /* ------------------------------------------------------------------ * * Mobile / narrow (< 900px): inline ad units * ------------------------------------------------------------------ */ .has-ezoic .ezoic-zone--mobile { padding-top: 32px; } .has-ezoic .ezoic-zone--mobile .ezoic-zone__main > .ezoic-slot { margin: 32px 0; }