/* Component: hero — owned by its pattern rebuild. Enqueued after main.css. */

/* Override the centered defaults from main.css: the SCS home hero pins its
   text column to the writing-mode START of a 1200px container — left in LTR,
   right in RTL (Hebrew). Using logical `start` keeps the design mirroring. */
.scs-hero {
	text-align: start;
}

/* main.css centers + caps the inner container at 860px; here it spans the
   full constrained 1200px column and the text block is constrained inside it. */
.scs-hero .wp-block-cover__inner-container {
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}

/* Text column (~640px), pinned to the start edge, never centered. */
.scs-hero .scs-hero-content {
	max-width: 640px;
	margin-inline: 0;
	text-align: start;
}

/* Headline: very large, tight, two lines. xxl token (72px) carries the size;
   we only tune rhythm/spacing here. */
.scs-hero h1 {
	letter-spacing: -0.02em;
	margin: 0;
	max-width: 12ch;
}

/* Subhead — one short white line under the H1. */
.scs-hero .scs-hero-content > p.has-large-font-size {
	margin: 1.25rem 0 0;
	max-width: 34ch;
	opacity: 0.95;
}

/* CTA spacing + helper line. */
.scs-hero .wp-block-buttons {
	margin-top: 2rem;
	justify-content: flex-start;
}

.scs-hero .scs-hero-content > p.has-small-font-size {
	margin: 1.25rem 0 0;
	opacity: 0.85;
}
.scs-hero .scs-hero-content > p.has-small-font-size a {
	color: #fff;
	text-decoration: underline;
}

/* Mobile: stack cleanly, stay left-aligned, let main.css scale the H1 down. */
@media (max-width: 600px) {
	.scs-hero {
		min-height: 70vh;
	}
	.scs-hero .scs-hero-content {
		max-width: 100%;
	}
	.scs-hero h1 {
		max-width: 100%;
	}
	.scs-hero .scs-hero-content > p.has-large-font-size {
		max-width: 100%;
	}
}