/*
 * Policy Brief front-end styles.
 *
 * Enqueued only on is_singular( 'policy_brief' ) — see
 * ysn_brief_enqueue_frontend_css() in includes/brief-frontend.php.
 *
 * Conventions:
 *   - BEM-style class names rooted at .ysn-brief-* so we don't collide
 *     with theme or plugin styles.
 *   - All layout rules scoped under .ysn-brief-page to keep specificity
 *     low and avoid leaking outside the brief template.
 */

/* Login view: two-column when a hero image is set, single centered
   column otherwise (full-width text inputs look out-of-proportion
   stretched across the Salient content column). */
.ysn-brief-page .ysn-brief-login-layout {
	display: block;
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}

.ysn-brief-page .ysn-brief-login-layout--with-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 2.5rem;
	align-items: stretch;
	max-width: none;
}

@media (max-width: 900px) {
	.ysn-brief-page .ysn-brief-login-layout--with-hero {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

@media (max-width: 600px) {
	.ysn-brief-page .ysn-brief-login-layout {
		max-width: none;
	}
}

/* Hero image + overlay. */
.ysn-brief-page .ysn-brief-login-hero {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	background: #1a1a1a;
}

.ysn-brief-page .ysn-brief-login-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 480px;
	object-fit: cover;
}

.ysn-brief-page .ysn-brief-login-hero__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.25rem 1.5rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
	color: #fff;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	line-height: 1.2;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Right column — sign-in form + CTAs stack. */
.ysn-brief-page .ysn-brief-login-actions {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ysn-brief-page .ysn-brief-login {
	margin-bottom: 1.25rem;
}

.ysn-brief-page .ysn-brief-login p {
	margin-bottom: 0.75rem;
	font-weight: 600;
}

.ysn-brief-page .ysn-brief-login #loginform input[type="text"],
.ysn-brief-page .ysn-brief-login #loginform input[type="password"] {
	width: 100%;
	margin-bottom: 0.5rem;
}

.ysn-brief-page .ysn-brief-login #loginform .login-submit input[type="submit"] {
	width: 100%;
	margin-top: 0.5rem;
}

.ysn-brief-page .ysn-brief-cta {
	margin: 0.75rem 0 0;
}

.ysn-brief-page .ysn-brief-cta--join {
	font-size: 1.05rem;
	font-weight: 600;
}

.ysn-brief-page .ysn-brief-cta--read-only {
	font-size: 0.95rem;
	color: #555;
}

.ysn-brief-page .ysn-brief-member-cta {
	display: inline-block;
	margin-top: 0.25rem;
}

/* Brief Section GF field: render as content only, hide the label.
   The editor preview uses its own markup (no .gform_wrapper, no
   .gfield--type-* on the live page) so this rule is front-end only. */
.gform_wrapper .gfield.gfield--type-ysn_brief_section > .gfield_label,
.gform_wrapper .gfield.gfield--type-ysn_brief_section > legend.gfield_label {
	display: none;
}