/**
 * Resource templates — gated / ungated single layouts.
 * Colors bind to the Elementor global palette, with hex fallbacks.
 * Borders are owned by the Elementor template, never by this file.
 */

:root {
	--st-resource-border: var(--e-global-color-64afaf0, #c2d4db);
	--st-resource-navy: var(--e-global-color-primary, #072131);
	--st-resource-orange: var(--e-global-color-a1d1909, #f26417);
	--st-resource-orange-hover: var(--e-global-color-4eefc17, #cd4a23);
}

/* ---------------------------------------------------------------- hero */

/* Centre the cover vertically in its 40% column. */
.st-hero-image-col {
	display: flex;
	align-items: center;
	justify-content: center;
}

.st-hero-image-col .st-hero-image,
.st-hero-image-col .st-hero-image .elementor-widget-container,
.st-hero-image-col .st-hero-image picture {
	display: block;
	width: 100%;
}

/* Show the whole asset — resource covers must never be cropped. */
.st-hero-image-col .st-hero-image img {
	width: 100%;
	height: auto;
	max-height: 368px;
	object-fit: contain;
	object-position: center;
	display: block;
	margin: 0 auto;
}

/* No featured image: collapse the column so the copy uses the full width. */
.st-hero-image-col:not(:has(img)) {
	display: none;
}

/* ------------------------------------------------- inherited body frame */

/**
 * Bodies migrated from the old build carry their own bordered
 * `case-study-content` wrapper. The template supplies the card now, so
 * neutralise the inner one instead of showing two frames.
 * Conversion unwraps this properly; this is the safety net.
 */
.st-resource-content .case-study-content {
	border: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ----------------------------------------------------------- gated body */

.st-gated-body {
	position: relative;
}

/**
 * The fade covers the last real content block — the one before the
 * author/published/related credits, which stay fully readable.
 */
.st-resource-gated .st-gate-fade {
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 12%, rgba(0, 0, 0, 0) 88%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 12%, rgba(0, 0, 0, 0) 88%);
	pointer-events: none;
	user-select: none;
	/* a long final block would otherwise leave a tall blank gap below the CTA */
	max-height: 260px;
	overflow: hidden;
}

/* CTA sitting in the fade, above the credits */
.st-gated-cta {
	margin: -3rem 0 1.5rem;
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 16px 18px;
	background: radial-gradient(ellipse at center, #fff 0%, rgba(255, 255, 255, 0) 72%);
}

/* Per the mockup: orange text, not a filled button. */
.st-gated-cta-button,
.st-gated-cta-button:visited {
	display: inline-block;
	background: none;
	border: 0;
	padding: 0;
	color: var(--st-resource-orange);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.2s ease;
}

.st-gated-cta-button,
.st-gated-cta-button span,
.st-gated-cta-button:hover,
.st-gated-cta-button:hover span {
	text-decoration: none !important;
}

.st-gated-cta-button:hover,
.st-gated-cta-button:focus {
	color: var(--st-resource-orange-hover);
}

/* ----------------------------------------------------------- form rail */

/* The Elementor container draws the frame; this wrapper stays neutral. */
.st-resource-form-card {
	background: transparent;
}

.st-resource-form-heading {
	color: var(--st-resource-navy);
	margin: 0 0 0.5rem;
}

.st-resource-form-desc {
	margin-bottom: 1rem;
}

.st-resource-form-desc > p:last-child {
	margin-bottom: 0;
}

/* The CTA can't focus a field inside HubSpot's cross-origin iframe, so it
   scrolls and flags the form instead. */
.st-resource-form-card.st-form-flash {
	animation: st-form-flash 1.4s ease-out 1;
}

@keyframes st-form-flash {
	0%   { box-shadow: 0 0 0 0 rgba(242, 100, 23, 0.55); }
	100% { box-shadow: 0 0 0 14px rgba(242, 100, 23, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.st-resource-form-card.st-form-flash { animation: none; }
}


/* ------------------------------------------------- injected TOC anchors */

/**
 * Elementor drops a zero-width <span class="elementor-menu-anchor"> before any
 * heading the table of contents links to. Inside a `space-between` flex row it
 * counts as an item and shoves the heading off its left edge, so keep it out of
 * the layout wherever the theme lays headings out in a row.
 */
.st-authors-and-hosts__info > .elementor-menu-anchor,
.st-authors-and-hosts__item > .elementor-menu-anchor {
	display: none;
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 1024px) {
	.st-gated-form-col,
	.st-gated-body {
		width: 100% !important;
	}

	/* The form must not be stuck off-screen once the columns stack. */
	.st-gated-form-col {
		position: static !important;
	}
}

@media (max-width: 767px) {
	.st-hero-image-col {
		width: 100% !important;
	}

	.st-gated-body {
		padding: 18px !important;
	}
}