/* ==========================================================================
   GATED CONTENT
   Shortcode: [gated_content]

   Container-query driven — the block adapts to the width of whatever it sits
   in (half column, full-width blog post, narrow sidebar) rather than the
   viewport. Two styles: --feature (two-panel) and --slim (compact bar).
   ========================================================================== */

.pbc-gated {
	--gated-pad: clamp(1.75rem, 4cqi, 3.5rem);
	--gated-border: rgba(28, 28, 28, 0.14);

	container-type: inline-size;
	container-name: gated;
	position: relative;
	width: 100%;
	margin: 2.5rem 0;
	background: var(--color-white);
	border: 1px solid var(--gated-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.wysiwyg .pbc-gated,
.post-content .pbc-gated {
	margin: clamp(2rem, 4vw, 3.5rem) 0;
}

/*
 * Drop the inherited editor rhythm. Inside a post the block sits in .wysiwyg,
 * whose `h1–h6 { margin-top: 1.1em }` would otherwise out-specify the
 * component's own margins. Everything here is spaced with flex gaps instead.
 */
.pbc-gated :is(h1, h2, h3, h4, h5, h6, p) {
	margin: 0;
}

/* ── Shared inner scaffolding ───────────────────────────────────────────── */

.pbc-gated__inner {
	display: grid;
	gap: 0;
}

.pbc-gated__content {
	padding: var(--gated-pad);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}

.pbc-gated__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

.pbc-gated__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--color-primary) 10%, transparent);
	color: var(--color-primary);
	flex-shrink: 0;

	& svg {
		width: 24px;
		height: 24px;
	}
}

.pbc-gated__eyebrow {
	font-family: var(--font-heading);
	font-size: var(--fs-eyebrow);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-primary);
}

.pbc-gated__title {
	font-family: var(--font-heading);
	font-weight: var(--fw-heading);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
	font-size: var(--fs-h4);
	color: var(--color-black);
	margin: 0;
}

.pbc-gated__desc {
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	color: rgba(28, 28, 28, 0.72);
	margin: 0;
}

.pbc-gated__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-top: 0.25rem;
	font-family: var(--font-heading);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(28, 28, 28, 0.5);
}

.pbc-gated__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;

	& + &::before {
		content: '';
		width: 3px;
		height: 3px;
		border-radius: 50%;
		background: currentColor;
		margin-right: 0.35rem;
	}
}

/* Slim's eyebrow rides at the front of the meta line */
.pbc-gated__meta-item--accent {
	color: var(--color-primary);
}

/* ── Panel (form / unlocked state) ──────────────────────────────────────── */

.pbc-gated__panel {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: var(--gated-pad);
	background: var(--color-alt-bg);
	border-top: 1px solid var(--gated-border);
}

.pbc-gated__panel-title {
	font-family: var(--font-heading);
	font-size: var(--fs-h6);
	font-weight: 600;
	color: var(--color-black);
}

/* Fields sit tighter than the global contact form */
.pbc-gated__form {
	& .form-row {
		margin-bottom: 0.9rem;
	}

	& label {
		margin-bottom: 0;
		font-size: var(--fs-small);
		font-weight: 600;
		color: rgba(28, 28, 28, 0.65);
	}

	& input[type="text"],
	& input[type="email"] {
		font-size: var(--fs-small);
		padding: 0.65em 0.9em;
	}

	& input[type="submit"],
	& .wpcf7-submit {
		width: 100%;
		font-size: var(--fs-small);
		padding: 0.85em 2em;
		margin-top: 0.35rem;
	}

	& .wpcf7-spinner {
		display: block;
		margin: 0.75rem auto 0;
	}

	& .wpcf7-response-output {
		margin-top: 1rem;
		font-size: 0.9375rem;
	}
}

/*
 * Hidden tracking fields. CF7 has no core hidden-field tag, so the asset
 * title/URL ride along as text inputs that are removed from layout and from
 * the tab order (see the [gated_content] docblock).
 */
.pbc-gated__hidden-field {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Cloudflare Turnstile. The widget is a fixed 300x65 cross-origin iframe, so
 * nothing inside it can be styled — theme="light" is set on the CF7 tag to
 * match the panel. All we control is the space around it, and keeping it from
 * being stretched by the slim style's two/three-up field grid.
 */
.pbc-gated__turnstile {
	margin: 1.35rem 0 0.5rem;

	& .cf-turnstile,
	& iframe {
		max-width: 100%;
	}

	/* CF7 shows its validation tip below the widget */
	& .wpcf7-not-valid-tip {
		margin-top: 0.5rem;
		max-width: 300px;
	}
}

.pbc-gated__privacy {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgba(28, 28, 28, 0.55);

	& a {
		color: var(--color-primary);
		text-decoration: underline;
	}
}

/* ── Unlocked state ─────────────────────────────────────────────────────── */

.pbc-gated__unlocked {
	display: none;
}

.pbc-gated.is-unlocked {
	& .pbc-gated__form,
	& .pbc-gated__panel-title,
	& .pbc-gated__privacy,
	& .pbc-gated__toggle {
		display: none;
	}

	& .pbc-gated__unlocked {
		display: flex;
	}
}

.pbc-gated__unlocked {
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.pbc-gated__unlocked-msg {
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	color: var(--color-black);
}

/*
 * Buttons ride the theme's .btn system rather than reimplementing it. That
 * matters for more than consistency: .wysiwyg styles `a:not(.btn)` as an
 * underlined primary link, so a bare anchor here rendered as purple text on
 * the purple fill inside a post. .btn is the theme's own opt-out.
 * These rules are only the deltas.
 */
.pbc-gated__download,
.pbc-gated__toggle {
	& svg {
		flex-shrink: 0;
	}
}

.pbc-gated__download {
	& svg {
		width: 18px;
		height: 18px;
	}
}

/*
 * Pre-paint unlock. A tiny head script (inc/enqueue.php) sets .pbc-has-lead
 * on <html> when localStorage already holds a lead, so returning visitors
 * never see the form flash up before the footer JS swaps it out.
 */
html.pbc-has-lead {
	& .pbc-gated__form,
	& .pbc-gated__panel-title,
	& .pbc-gated__privacy,
	& .pbc-gated__toggle {
		display: none;
	}

	& .pbc-gated__unlocked {
		display: flex;
	}

	/* Slim collapses entirely — the download sits in the bar itself */
	& .pbc-gated--slim[data-collapsible="1"] .pbc-gated__panel {
		display: none;
	}

	& .pbc-gated--slim[data-collapsible="1"] .pbc-gated__inline-download {
		display: inline-flex;
	}
}

/* ── Toggle (slim style) ────────────────────────────────────────────────── */

.pbc-gated__toggle {
	& svg {
		width: 16px;
		height: 16px;
		transition: transform var(--transition-fast);
	}
}

.pbc-gated.is-open .pbc-gated__toggle svg {
	transform: rotate(180deg);
}

/* .wysiwyg gives buttons a top margin; here the flex gaps already do it */
.pbc-gated .btn {
	margin-top: 0;
}

/* Collapsed panel. A <noscript> override in the shortcode reopens this for
   visitors without JS, who'd otherwise have no way to reach the toggle. */
.pbc-gated[data-collapsible="1"] .pbc-gated__panel {
	display: none;
}

.pbc-gated[data-collapsible="1"].is-open .pbc-gated__panel,
.pbc-gated[data-collapsible="1"].is-unlocked .pbc-gated__panel {
	display: block;
}


/* ==========================================================================
   STYLE: FEATURE
   ========================================================================== */

.pbc-gated--feature {
	& .pbc-gated__title {
		font-size: var(--fs-h4);
	}

	/* The meta line is a footnote to the copy, not part of it — give it air */
	& .pbc-gated__meta {
		margin-top: 0.85rem;
	}
}

/* Side-by-side once the block itself is wide enough */
@container gated (min-width: 620px) {
	.pbc-gated--feature .pbc-gated__inner {
		grid-template-columns: 1.1fr 1fr;
		align-items: stretch;
	}

	.pbc-gated--feature .pbc-gated__panel {
		border-top: none;
		border-left: 1px solid var(--gated-border);
	}

	/* The form is usually the taller column. Rather than centre the lot,
	   anchor the copy to the top and drop the meta line to the bottom, so
	   both columns read as full-height and the meta lines up with the foot
	   of the form. */
	.pbc-gated--feature .pbc-gated__content {
		justify-content: flex-start;
	}

	.pbc-gated--feature .pbc-gated__text {
		flex: 1 1 auto;
	}

	.pbc-gated--feature .pbc-gated__meta {
		margin-top: auto;
		padding-top: 1.5rem;
	}
}

/* Roomier at generous widths (full-bleed blog post, full-width block) */
@container gated (min-width: 900px) {
	.pbc-gated--feature .pbc-gated__inner {
		grid-template-columns: 1.25fr 1fr;
	}

	.pbc-gated--feature .pbc-gated__title {
		font-size: var(--fs-h3);
	}

	.pbc-gated--feature .pbc-gated__desc {
		font-size: var(--fs-body);
		max-width: 46ch;
	}
}

/* Narrow (sidebar, quarter column) — shrink the icon, tighten everything */
@container gated (max-width: 380px) {
	.pbc-gated--feature .pbc-gated__icon {
		width: 40px;
		height: 40px;

		& svg {
			width: 20px;
			height: 20px;
		}
	}
}


/* ==========================================================================
   STYLE: SLIM
   ========================================================================== */

/*
 * Slim is deliberately NOT a card. A boxed panel repeated three times down a
 * blog post reads as clutter, so this is an editorial download *row*: hairline
 * rules top and bottom, no fill, and a solid file-type badge doing the work
 * the generic document icon used to do badly. Stack several and they read as
 * one list rather than three competing boxes.
 */
.pbc-gated--slim {
	--gated-pad: clamp(1.25rem, 3cqi, 1.5rem);

	background: transparent;
	border: none;
	border-top: 1px solid var(--gated-border);
	border-bottom: 1px solid var(--gated-border);
	border-radius: 0;
	margin: 2rem 0;

	/* Everything stacks — no columns to fight over at any width */
	& .pbc-gated__content {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
		padding: var(--gated-pad) 0;
	}

	& .pbc-gated__text {
		gap: 0.3rem;
	}

	/* Badge and label share one compact line above the title */
	& .pbc-gated__head {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		margin-bottom: 0.55rem;
	}

	& .pbc-gated__meta {
		margin: 0;
		font-size: 0.75rem;
	}

	& .pbc-gated__title {
		font-size: var(--fs-h5);
		transition: color var(--transition-fast);
	}

	& .pbc-gated__desc {
		font-size: 0.9375rem;
		line-height: 1.55;
		max-width: 62ch;
	}

	& .pbc-gated__toggle {
		padding: 0.65em 1.6em;
		font-size: 0.9375rem;
	}

	/* The drawer sits flush in the row, no inset panel */
	& .pbc-gated__panel {
		background: transparent;
		border-top: 1px solid var(--gated-border);
		padding: var(--gated-pad) 0;
	}

	/* Without a panel fill the title needs its own breathing room to read
	   as a heading rather than as the first field's label */
	& .pbc-gated__panel-title {
		margin-bottom: 0.5rem;
	}

	&:hover .pbc-gated__badge {
		background: var(--color-black);
	}

	&:hover .pbc-gated__title {
		color: var(--color-primary);
	}
}

/* Consecutive rows share a hairline instead of doubling up */
.pbc-gated--slim + .pbc-gated--slim {
	margin-top: -1px;
}

/* File-type badge — states something the icon never did, in less space */
.pbc-gated__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0.25rem 0.5rem;
	font-family: var(--font-heading);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-white);
	background: var(--color-primary);
	border-radius: var(--radius-sm);
	transition: background var(--transition-fast);
}

/* Slim fields go two-up when there's room */
@container gated (min-width: 640px) {
	.pbc-gated--slim .pbc-gated__fields {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 1rem;
	}

	.pbc-gated--slim .pbc-gated__form input[type="submit"],
	.pbc-gated--slim .pbc-gated__form .wpcf7-submit {
		width: auto;
		min-width: 220px;
	}
}

@container gated (min-width: 900px) {
	.pbc-gated--slim .pbc-gated__fields {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Slim, unlocked and collapsed: swap the toggle for the download button
   right in the row so there's nothing left to expand. */
.pbc-gated--slim.is-unlocked[data-collapsible="1"] .pbc-gated__panel {
	display: none;
}

.pbc-gated--slim.is-unlocked[data-collapsible="1"] .pbc-gated__inline-download {
	display: inline-flex;
}

.pbc-gated__inline-download {
	display: none;
}


/* ==========================================================================
   DARK BLOCK CONTEXT
   ========================================================================== */

.bg-dark .pbc-gated {
	--gated-border: rgba(253, 252, 251, 0.16);
	background: rgba(253, 252, 251, 0.04);

	& .pbc-gated__title,
	& .pbc-gated__unlocked-msg {
		color: var(--color-white);
	}

	& .pbc-gated__desc {
		color: rgba(253, 252, 251, 0.72);
	}

	& .pbc-gated__meta {
		color: rgba(253, 252, 251, 0.5);
	}

	& .pbc-gated__panel {
		background: rgba(253, 252, 251, 0.06);
	}
}

/* .btn-primary-dark hovers to black type, which vanishes on a dark block */
.bg-dark .pbc-gated .btn.btn-primary-dark:hover {
	color: var(--color-white);
	box-shadow: inset 0 0 0 2px var(--color-white);
}

/* Slim stays unfilled on dark too — it's a rule, not a card */
.bg-dark .pbc-gated--slim {
	background: transparent;

	& .pbc-gated__panel {
		background: transparent;
	}

	&:hover .pbc-gated__badge {
		background: var(--color-white);
		color: var(--color-black);
	}

	&:hover .pbc-gated__title {
		color: var(--color-white);
		opacity: 0.75;
	}
}


/* ==========================================================================
   MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.pbc-gated *,
	.pbc-gated *::before,
	.pbc-gated *::after {
		transition: none !important;
	}
}