/**
 * Single Work — case study page styles.
 *
 * Layout DNA borrowed from Studiomast (6-col rhythm, image+kicker variants,
 * single full-bleed exception) but all tokens come from this theme.
 *
 * Attached to: work CPT single views only (enqueued conditionally).
 */

/* ==========================================================================
   Header: title (top), descriptor + meta (below in columns)
   Styled to match the Services page hero (display heading + lg body).
   ========================================================================== */

.ad-single-work__title {
	margin: 0;
}

.ad-single-work__tagline {
	margin: 0;
}

/* Meta-row is a 60/20/20 wp:columns layout: tagline / Industry / Service.
   Each meta-cell lives in its own column, so tags wrap freely within their
   20% width without squeezing the others. No outer flex wrapper needed. */
.ad-single-work__meta-cell {
	min-width: 0;
	align-items: flex-start;
}

.ad-single-work__meta-label {
	margin: 0 !important;
}

/* Industry + Service tags — shared pill style (mirrors .ad-work-grid__tags:
   muted bg, primary text, plus icon, weight 300). */
.ad-single-work__industry-link,
.ad-single-work__service-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0;
}

.ad-single-work__industry-link a,
.ad-single-work__service-tags a {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.875rem;
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--primary);
	border-radius: 0.125rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 300;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.ad-single-work__industry-link a::after,
.ad-single-work__service-tags a::after {
	content: "+";
	font-weight: 300;
	font-size: 1.1em;
	transform: translateY(-0.05em);
}

.ad-single-work__industry-link a:hover,
.ad-single-work__service-tags a:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--secondary);
}

.ad-single-work__industry-link .wp-block-post-terms__separator,
.ad-single-work__service-tags .wp-block-post-terms__separator {
	display: none;
}

/* Collapsed state — hide tags after the 3rd. Uses :nth-of-type because the
   post-terms block renders <span class="...separator"> between each <a>;
   :nth-child would count those too and miscount which tag is "the 3rd". */
.ad-single-work__industry-link[data-collapsed="true"] > a:nth-of-type(n+4),
.ad-single-work__service-tags[data-collapsed="true"] > a:nth-of-type(n+4) {
	display: none;
}

/* "All +" toggle — same pill shape as a tag, but inverted (black on white). */
.ad-tag-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.875rem;
	border: 0;
	border-radius: 0.125rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--secondary);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.ad-tag-toggle::after {
	content: "+";
	font-weight: 300;
	font-size: 1.1em;
	transform: translateY(-0.05em);
}

.ad-tag-toggle[aria-expanded="true"]::after {
	content: "\2212"; /* − minus sign — looks balanced with the + */
}

.ad-tag-toggle:hover {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary);
}

.ad-tag-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* The wp:columns block already stacks on mobile (isStackedOnMobile),
   so no extra mobile rule needed for the meta-row layout. */

/* ==========================================================================
   Row base + image behavior
   ========================================================================== */

.ad-work-row {
	/* Sections are align:full by default via gb_section(); no extra work needed. */
}

.ad-work-row__img img,
.ad-work-row__img--fullbleed img {
	display: block;
	width: 100%;
	height: auto;
}

/* The wp-block-image figure is the child of .wp-block-column — make it stretch. */
.ad-work-row .wp-block-column > .wp-block-image {
	margin: 0;
}

.ad-work-row .wp-block-column > .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Row variant: single image
   ------------------------------------------------------------------ */
.ad-work-row--single .wp-block-image {
	margin: 0;
}

.ad-work-row--single img {
	width: 100%;
	height: auto;
	display: block;
}

/* Row variant: full-bleed (edge-to-edge)
   ------------------------------------------------------------------ */
.ad-work-row--fullbleed {
	padding: 0 !important;
}

.ad-work-row--fullbleed .wp-block-image {
	margin: 0;
}

.ad-work-row--fullbleed img {
	width: 100%;
	height: auto;
	display: block;
}

/* Row variant: kicker-left, kicker-right, triptych
   Column vertical alignment is set by the pattern; just tighten margins.
   ------------------------------------------------------------------ */
.ad-work-row--kicker-left .wp-block-column,
.ad-work-row--kicker-right .wp-block-column,
.ad-work-row--triptych .wp-block-column {
	margin: 0;
}

.ad-work-row--triptych .ad-work-row__cols {
	/* Wider breakpoint — three cells tighten nicely below tablet */
}

/* ==========================================================================
   Vimeo block — atomicdust/work-row-vimeo
   Drop-in replacement for an image inside a work-row. Iframe is sized via
   aspect-ratio (set per-block via --ad-vimeo-aspect, default 16/9).
   Autoplays muted + looping with the native Vimeo controls (no custom button).
   ========================================================================== */

.wp-block-work-row-vimeo {
	margin: 0;
	position: relative;
}

.ad-work-row__vimeo-frame {
	position: relative;
	width: 100%;
	aspect-ratio: var(--ad-vimeo-aspect, 16 / 9);
	overflow: hidden;
	background: #0e0e0e;
}

.ad-work-row__vimeo-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	/* Native Vimeo controls receive clicks. Smooth scroll is disabled on single
	   work posts (see custom.js), so there's no Lenis/iframe scroll conflict to
	   work around here. */
	pointer-events: auto;
}

/* Fullbleed variant — edge-to-edge, no padding, like the image fullbleed.
   Override aspect-ratio with viewport-relative sizing if you want a cinematic
   hero (set --ad-vimeo-aspect inline or override here per-row). */
.ad-work-row--fullbleed .wp-block-work-row-vimeo,
.wp-block-work-row-vimeo.ad-work-row__img--fullbleed {
	margin: 0;
}

/* ==========================================================================
   Video swap — any work-row image can be a core/video block instead.
   Matches the same dimensions as <img> so layout doesn't shift.
   The render_block filter on core/video injects a .ad-work-row__pause btn
   wired up by custom.js (same pattern as the work-grid card video).
   ========================================================================== */

.ad-work-row__img.wp-block-video,
.ad-work-row .wp-block-column > .wp-block-video {
	margin: 0;
	position: relative;
}

.ad-work-row__img.wp-block-video video,
.ad-work-row .wp-block-column > .wp-block-video video,
.ad-work-row--fullbleed .wp-block-video video,
.ad-work-row--single .wp-block-video video {
	display: block;
	width: 100%;
	height: auto;
}

.ad-work-row__pause {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
}

/* ==========================================================================
   Kicker block (label + detail)
   ========================================================================== */

.ad-work-kicker {
	max-width: 28ch;
}

.ad-work-kicker__label {
	margin: 0;
	opacity: 0.85;
}

.ad-work-kicker__detail {
	margin: 0;
	line-height: 1.4;
}

/* ==========================================================================
   Story drawer — editor + frontend
   ========================================================================== */

/* Editor: visually mark the drawer container so editors know content is hoisted.
   The base .ad-story-drawer__body rule collapses the container with
   max-height:0 + overflow:hidden for the frontend accordion animation — but
   in the editor we need the container expanded so content is editable. */
.editor-styles-wrapper .ad-story-drawer__body {
	position: relative;
	padding: 2rem 1.5rem 1.5rem !important;
	border: 1px dashed var(--wp--preset--color--tone-dark);
	background: var(--wp--preset--color--tone-light);
	border-radius: 0.5rem;
	max-height: none !important;
	overflow: visible !important;
	transform: none !important;
}

.editor-styles-wrapper .ad-story-drawer__body::before {
	content: "Full Story — appears in drawer";
	position: absolute;
	top: -0.75rem;
	left: 1rem;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.125rem 0.5rem;
	border-radius: 0.25rem;
}

.editor-styles-wrapper .ad-story-drawer__hint {
	margin-top: 0 !important;
	margin-bottom: 1rem;
}

/* Frontend: drawer body stays in page flow. Placed in grid column 2 when open;
   clipped to zero width when closed. (See .ad-single-work__body grid rules below.) */
.ad-story-drawer__hint {
	display: none;
}

/* ==========================================================================
   Floating drawer trigger button — mirrors .ad-work-filter__btn exactly
   (same classes, same typography, same hover char-stagger roll effect).
   ========================================================================== */

.ad-story-drawer__btn {
	position: fixed;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 52;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--secondary);
	border: none;
	border-radius: 2rem;
	font-family: var(--wp--preset--font-family--sohne);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 400;
	letter-spacing: 0.02em;
	padding: 1rem 2.25rem;
	min-height: 56px; /* WCAG 2.5.5 Target Size — 44×44px minimum */
	cursor: pointer;
	white-space: nowrap;
	box-shadow: var(--ad-shadow-md);
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.3s ease, transform 0.3s ease;
}

/* Hide the floating button when the prev/next nav is approaching the viewport
   so it doesn't overlap the end-of-post navigation. Class toggled by JS via
   a ScrollTrigger on .ad-post-nav. */
.ad-story-drawer__btn--hide {
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 1rem);
}

@media (prefers-reduced-motion: reduce) {
	.ad-story-drawer__btn {
		transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
	}
	.ad-story-drawer__btn--hide {
		transform: translateX(-50%);
	}
}

/* Plus icon (two bars) that rotates 135° on drawer-open to form an X. */
.ad-story-drawer__icon {
	position: relative;
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	flex-shrink: 0;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ad-story-drawer__icon-bar {
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: currentColor;
	border-radius: 1px;
}

.ad-story-drawer__icon-bar--h {
	width: 100%;
	height: 1.5px;
	transform: translate(-50%, -50%);
}

.ad-story-drawer__icon-bar--v {
	width: 1.5px;
	height: 100%;
	transform: translate(-50%, -50%);
}

body.story-drawer-open .ad-story-drawer__icon {
	transform: rotate(135deg);
}

@media (prefers-reduced-motion: reduce) {
	.ad-story-drawer__icon {
		transition: none;
	}
}

.ad-story-drawer__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Trigger char-stagger roll effect when hovered (same rule as .ad-work-filter__btn) */
.ad-story-drawer__btn:hover .ad-char__inner {
	transform: translateY(-100%);
}

/* The char-stagger split applies display:inline-flex !important — re-hide when toggled off */
.ad-story-drawer__label--open[hidden],
.ad-story-drawer__label--close[hidden] {
	display: none !important;
}

/* ==========================================================================
   Inline accordion: 2-column flex layout ONLY when the drawer is open.

   Default (closed) state intentionally applies ZERO layout CSS to the body
   container — WordPress's native post-content rendering handles widths,
   alignfull escapes, and site padding exactly as on any other post type.

   The .ad-single-work__images wrapper is added server-side by a PHP filter
   (ad_wrap_single_work_images) with .is-layout-constrained so WP's alignfull
   rules continue to apply. When closed, the wrapper and drawer body behave
   as normal block-flow children — no flex at all.

   When body.story-drawer-open toggles, we switch to a flex row that
   compresses the images wrapper to 40% and reveals the drawer body at 60%.
   ========================================================================== */

/* Default (closed): drawer body is collapsed via max-height. No flex. */
.ad-story-drawer__body {
	max-height: 0;
	overflow: hidden;
	padding: 0 clamp(1.25rem, 3vw, 2.5rem);
	transition:
		max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
		padding 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- OPEN STATE --------------------------------------------------------- */

body.story-drawer-open .ad-single-work__body {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 2rem;
}

body.story-drawer-open .ad-single-work__images {
	flex: 0 1 40%;
	min-width: 0;
	overflow: hidden;
}

body.story-drawer-open .ad-story-drawer__body {
	flex: 0 1 60%;
	max-height: none;
	padding-top: var(--wp--preset--spacing--50);
}

/* CTA sits at the end of the drawer content. When the drawer is open, the
   story-drawer.js uses ScrollTrigger.pin to hold it at the top of the
   viewport while the drawer body is still in view. */
.ad-story-drawer__cta {
	background-color: var(--wp--preset--color--secondary);
	border-top: 1px solid var(--wp--preset--color--tone-dark);
	padding: var(--wp--preset--spacing--50) 0;
}

/* When drawer is open, rows stay within the 40% column. Cancel the alignfull
   negative margins and the has-global-padding horizontal padding so images
   fill the compressed column cleanly. */
body.story-drawer-open .ad-single-work__images > .alignfull {
	margin-left: 0;
	margin-right: 0;
}

body.story-drawer-open .ad-single-work__images > .has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

/* --- Image row transition: scale-only, no opacity fade ------------------ */

.ad-single-work__images > .ad-work-row {
	transform-origin: left center; /* anchor scale to the left — reads as the drawer pushing rows inward */
	will-change: transform;
}

/* Directional settle: rows scale toward their final width from the LEFT edge.
   On open: starts larger (1.12) and shrinks in — reads as the drawer pushing
   rows inward from the right.
   On close: starts smaller (0.88) and grows out — reads as the drawer releasing
   and rows expanding back to full width. */
body.story-drawer-settling--in .ad-single-work__images > .ad-work-row {
	animation: adWorkRowSettleIn 0.5s cubic-bezier(0.33, 1, 0.68, 1) both;
}

body.story-drawer-settling--out .ad-single-work__images > .ad-work-row {
	animation: adWorkRowSettleOut 0.5s cubic-bezier(0.33, 1, 0.68, 1) both;
}

@keyframes adWorkRowSettleIn {
	from { transform: scale(1.12); }
	to   { transform: scale(1); }
}

@keyframes adWorkRowSettleOut {
	from { transform: scale(0.88); }
	to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.ad-single-work__images > .ad-work-row,
	body.story-drawer-settling .ad-single-work__images > .ad-work-row {
		animation: none;
		transform: none;
	}
}

/* Drawer body typography when visible. The !important on font-size guards
   against theme.json's :where(h1) cascade which sets xxxl; color is NOT
   !important so the editor's typography panel can still apply per-instance
   changes. Font weight comes from the block attribute (fontWeight: 400) to
   match Insights post titles. */
/* The drawer moves focus to the headline on open (a11y: shifts the reading
   position into the revealed content). It carries tabindex="-1" so it's only
   ever focused programmatically, never via keyboard — so suppress the focus
   ring (Safari draws a heavy blue rounded box otherwise). Keyboard focus on
   real controls keeps its outline via the :focus-visible rules elsewhere. */
.ad-story-drawer__headline:focus {
	outline: none;
}

.ad-story-drawer__headline.wp-block-heading {
	display: block !important;
	font-size: var(--wp--preset--font-size--xxl) !important;
	color: var(--wp--preset--color--primary);
	margin: 0 0 var(--wp--preset--spacing--40) !important;
	line-height: 1.1;
	letter-spacing: -0.01em;
	max-width: 24ch;
}

/* Ensure the drawer body actually reveals when open — the max-height:none
   override was getting suppressed in certain states. Use a large but finite
   value so it's explicitly visible. */
body.story-drawer-open .ad-story-drawer__body {
	max-height: 100000px;
	overflow: visible;
}

.ad-story-drawer__body h2,
.ad-story-drawer__body h3 {
	color: var(--wp--preset--color--primary);
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--30);
}

.ad-story-drawer__body h2:first-child,
.ad-story-drawer__body h3:first-child,
.ad-story-drawer__body p:first-child {
	margin-top: 0;
}

.ad-story-drawer__body p {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--md);
	margin-bottom: 1rem;
	line-height: 1.6;
}

/* When open, image rows' internal wp:columns stack vertically inside 40% */
body.story-drawer-open .ad-single-work__images .wp-block-columns {
	flex-direction: column !important;
	flex-wrap: nowrap !important;
}

body.story-drawer-open .ad-single-work__images .wp-block-column {
	flex-basis: 100% !important;
	width: 100% !important;
}

/* Kicker text cells collapse when open — only images stack on the left */
body.story-drawer-open .ad-work-kicker,
body.story-drawer-open .ad-work-row__col--text {
	opacity: 0;
	pointer-events: none;
	max-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	transition: opacity 0.25s ease, max-height 0.4s ease;
}

/* --- Mobile: slide-over drawer (not split layout) ---------------------- */
/* On mobile (frontend only) the drawer is a self-contained fixed panel that
   slides over the main content. Main content stays where it is (JS locks html
   overflow + calls lenis.stop() so page scroll freezes). The drawer has
   its own overflow-y:auto and a sticky close × button at the top. The CTA
   pin is skipped on mobile — the CTA just scrolls naturally inside.

   ALL rules below are prefixed with `body.single-work` so they only apply on
   the frontend — the block editor's iframe body does NOT have this class, so
   editor renderings of the drawer content stay editable at any viewport width. */

@media (max-width: 900px) {
	/* Drawer body: closed = off-screen right, open = slid below header.
	   Header stays visible on mobile — drawer starts at --ad-drawer-top
	   (set by story-drawer.js on open = admin bar + header height) and runs
	   to the bottom of the viewport. z-index: 1050 keeps the drawer above
	   below-the-fold content; the fixed site header (z-index: 1000) remains
	   painted at the top.

	   No CSS transition on mobile — snap the drawer in/out via transform
	   change alone. */
	body.single-work .ad-story-drawer__body {
		position: fixed;
		top: var(--ad-drawer-top, 4.5rem);
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1050;
		background-color: var(--wp--preset--color--secondary);
		transform: translateX(100%);
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		touch-action: pan-y;
		-webkit-overflow-scrolling: touch;
		max-height: none;
		padding: 1.5rem clamp(1.25rem, 4vw, 2rem) clamp(2rem, 6vw, 3rem);
	}

	body.single-work.story-drawer-open .ad-story-drawer__body {
		transform: translateX(0);
	}

	/* Revert desktop side-by-side behavior — no flex split on mobile. */
	body.single-work.story-drawer-open .ad-single-work__body {
		display: block;
	}
	body.single-work.story-drawer-open .ad-single-work__images {
		flex: none;
		width: auto;
	}

	/* Cancel the desktop's "kicker cell collapse" and "inner column stack"
	   overrides — drawer floats above, main content underneath looks normal. */
	body.single-work.story-drawer-open .ad-work-kicker,
	body.single-work.story-drawer-open .ad-work-row__col--text {
		opacity: 1;
		max-height: none;
		margin: unset;
		padding: unset;
		pointer-events: auto;
		overflow: visible;
	}
	body.single-work.story-drawer-open .ad-single-work__images .wp-block-columns {
		flex-direction: initial !important;
	}
	body.single-work.story-drawer-open .ad-single-work__images .wp-block-column {
		flex-basis: auto !important;
		width: auto !important;
	}
	body.single-work.story-drawer-open .ad-single-work__images > .alignfull {
		margin-left: calc(-1 * var(--wp--style--root--padding-left, 0));
		margin-right: calc(-1 * var(--wp--style--root--padding-right, 0));
	}
	body.single-work.story-drawer-open .ad-single-work__images > .has-global-padding {
		padding-left: var(--wp--style--root--padding-left);
		padding-right: var(--wp--style--root--padding-right);
	}

	/* Mobile: the floating trigger/close pill is hidden when drawer is open —
	   the sticky pill close button inside the drawer takes over. */
	body.single-work.story-drawer-open .ad-story-drawer__btn {
		display: none;
	}

	/* Fixed close pill that FLOATS above the drawer content — always visible,
	   always clickable, never affected by the drawer's internal scroll state.
	   Pinned to the bottom-center of the viewport so it exactly replaces the
	   "Reader View" trigger pill (same position, thumb-reach). */
	body.single-work .ad-story-drawer__close {
		position: fixed;
		bottom: 2rem;
		left: 50%;
		top: auto;
		transform: translateX(-50%);
		z-index: 1060;
		margin: 0;
		align-items: center;
		justify-content: center;
		gap: 0.6rem;
		padding: 1rem 2.25rem;
		min-height: 56px; /* WCAG 2.5.5 Target Size — 44×44px minimum */
		background-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--secondary);
		border: none;
		border-radius: 2rem;
		font-family: var(--wp--preset--font-family--sohne);
		font-size: var(--wp--preset--font-size--md);
		font-weight: 400;
		letter-spacing: 0.02em;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		box-shadow: var(--ad-shadow-md);
	}
	body.single-work .ad-story-drawer__close:focus-visible {
		outline: 2px solid var(--wp--preset--color--accent);
		outline-offset: 3px;
	}

	/* Reserve space at the bottom of the drawer body so the final content
	   (CTA) clears the fixed close pill. Higher specificity than the non-media
	   rule at .story-drawer-open to guarantee mobile overflow behavior wins
	   (overflow: hidden auto, not the desktop's visible). */
	body.single-work.story-drawer-open .ad-story-drawer__body {
		padding-bottom: 6rem;
		overflow-x: hidden;
		overflow-y: auto;
		max-height: none;
	}
}

/* Hide the close button everywhere except mobile frontend WHEN the drawer is
   open. The close pill is position: fixed (not inside the drawer's slide
   transform) so it needs its own visibility gate — otherwise it'd sit on
   every Work page whether or not the drawer was open. */
.ad-story-drawer__close {
	display: none;
}
@media (max-width: 900px) {
	body.single-work.story-drawer-open .ad-story-drawer__close {
		display: flex;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ad-single-work__body,
	.ad-single-work__images,
	.ad-story-drawer__body,
	.ad-story-drawer__btn,
	.ad-work-kicker,
	.ad-work-row__col--text {
		transition: none !important;
	}
}

/* --- Work-single 50/50 CTA (ad-work-cta) ------------------------------- */
/* Equal-height panels: let the column flex so the panel fills the tallest
   column's height instead of hugging its own content. */
.ad-work-cta__cols > .wp-block-column { display: flex; }
.ad-work-cta__panel { width: 100%; }

/* The drawer (Reader View) carries its own end-of-story CTA, so hide this
   template-level CTA while the drawer is open — otherwise the ask shows twice. */
body.story-drawer-open .ad-work-cta { display: none; }