/*
 * Chennai Home Guide — Project Documents / Gated Asset lead-capture
 * modal.
 *
 * Relies on the browser's native [hidden] attribute (same convention
 * assets/css/patterns/lead-popup.css already uses) for the show/hide
 * toggle; assets/js/project-document-gate.js only ever sets
 * `.hidden = true/false`, never inline styles.
 *
 * Deliberately a single-column, compact panel — not a two-column
 * "media + form" layout like the site-wide Lead Popup. This is a
 * research-first, "where should we send you this document?" moment
 * triggered by a specific click, not a marketing popup; kept visually
 * calm and minimal per the feature's own design brief.
 */

.chg-gate-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--sm);
}

/*
 * `[hidden]` and a plain class selector are equal (0,1,0) specificity,
 * so without this rule the `display: flex` above would win the
 * cascade (author styles load after the UA stylesheet) and defeat
 * `modal.hidden = true/false` in project-document-gate.js entirely --
 * the exact same trap this theme's own single-project.css already
 * documents (`.chg-media-hero__item`'s comment). `.chg-gate-modal
 * [hidden]` is (0,2,0), correctly overriding the rule above whenever
 * the attribute is present, regardless of source order.
 */
.chg-gate-modal[hidden] {
	display: none;
}

.chg-gate-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(27, 31, 34, 0.55);
}

.chg-gate-modal__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 28rem;
	max-height: calc(100vh - 2 * var(--wp--preset--spacing--sm));
	overflow-y: auto;
	padding: var(--wp--preset--spacing--lg);
	background: var(--wp--preset--color--background);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--md);
}

.chg-gate-modal__close {
	position: absolute;
	top: var(--wp--preset--spacing--xs);
	right: var(--wp--preset--spacing--xs);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--foreground);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.chg-gate-modal__close:hover {
	background: var(--wp--preset--color--surface);
}

.chg-gate-modal__title {
	margin: 0 0 var(--wp--preset--spacing--xs);
	padding-right: 2.25rem; /* clears the absolutely-positioned close button */
	font-size: var(--wp--preset--font-size--large);
}

.chg-gate-modal__context {
	margin: 0 0 var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.chg-gate-modal__loading,
.chg-gate-modal__noscript {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
}

.chg-gate-modal__success p {
	margin: 0 0 var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--foreground);
}

.chg-gate-modal__open-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.625rem 1rem;
	background: var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--background);
	font-weight: 600;
	text-decoration: none;
	text-align: center;
}

.chg-gate-modal__open-link:hover {
	background: var(--wp--preset--color--accent-dark);
}

.chg-gate-modal__error {
	margin: 0;
	padding: var(--wp--preset--spacing--sm);
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 480px) {
	.chg-gate-modal__panel {
		padding: var(--wp--preset--spacing--md);
	}
}

/*
 * prefers-reduced-motion is already handled globally in base.css --
 * no bespoke rule needed here for any future open/close transition.
 */