/* pgri/hero-carousel — front-end (loads in editor too via block.json "style", so mechanics
   render identically). Brand-themed via CSS custom properties; the defaults reproduce Mt
   Washington's current hero exactly. Override the vars per resort (theme.json, pgri-brand, or
   a small site stylesheet) to re-skin without touching this file. */

.wp-block-pgri-hero-carousel {
	--pgri-hc-height: 760px;
	--pgri-hc-height-mobile: 640px;
	--pgri-hc-text-max: 720px;
	--pgri-hc-tab-bg: rgba(14, 36, 24, 0.72);
	--pgri-hc-tab-fg: #fff;
	--pgri-hc-tab-active-bg: #8bc641;
	--pgri-hc-tab-active-fg: #0e2418;
	position: relative;
}

/* ---- carousel stage + cross-fade mechanics ----
   Applied from FIRST PAINT (CSS-only, NOT gated on the JS `.is-ready` class) so the covers are
   an absolutely-stacked fixed-height stage immediately — this kills the pre-JS "all slides
   stacked vertically" flash (a big layout shift / CLS) and makes the first slide the stable LCP
   element. Scoped to `:not(.pgri-hc)` = front end only; the EDITOR wrapper also has
   `.wp-block-pgri-hero-carousel` but carries `.pgri-hc` and must keep its natural height. */
.wp-block-pgri-hero-carousel:not(.pgri-hc) { height: var(--pgri-hc-height); overflow: hidden; }
@media (max-width: 781px) {
	.wp-block-pgri-hero-carousel:not(.pgri-hc) { height: var(--pgri-hc-height-mobile); }
}
.wp-block-pgri-hero-carousel:not(.pgri-hc) > .wp-block-cover {
	position: absolute !important; inset: 0; margin: 0 !important;
	height: 100%; min-height: 0 !important;
	opacity: 0; pointer-events: none; transition: opacity 0.8s ease;
}
/* Pre-JS: show the first slide. Once view.js runs it toggles `.is-active` (same slide first,
   so the handoff is seamless — no flash). */
.wp-block-pgri-hero-carousel:not(.pgri-hc):not(.is-ready) > .wp-block-cover:first-child,
.wp-block-pgri-hero-carousel:not(.pgri-hc) > .wp-block-cover.is-active {
	opacity: 1; pointer-events: auto;
}

/* ---- content constraint ----
   ON (default, .is-constrained): align the content's left edge to the wide-size container
   gutter (i.e. lined up with the site logo/nav) and cap the text column for readability.
   The cover is display:flex with justify-content:flex-start, so margin:auto can't centre the
   inner-container — a symmetric gutter padding is what lands the content on the container edge.
   OFF: let the content stretch to the slide's full width. */
.wp-block-pgri-hero-carousel.is-constrained > .wp-block-cover > .wp-block-cover__inner-container {
	width: 100%; max-width: none; margin-inline: 0; box-sizing: border-box;
	padding-inline: max(clamp(1rem, 3vw, 2rem), calc((100% - var(--wp--style--global--wide-size, 1260px)) / 2));
}
.wp-block-pgri-hero-carousel.is-constrained .wp-block-cover__inner-container > .wp-block-group {
	max-width: var(--pgri-hc-text-max); margin-inline: 0;
}
.wp-block-pgri-hero-carousel:not(.is-constrained) .wp-block-cover__inner-container,
.wp-block-pgri-hero-carousel:not(.is-constrained) .wp-block-cover__inner-container > .wp-block-group {
	max-width: none;
}

/* ---- tab switcher (built by view.js) ---- */
.pgri-hc-tabs {
	position: absolute; right: clamp(1rem, 4vw, 3.5rem); bottom: clamp(7rem, 12vh, 9.5rem);
	z-index: 5; display: flex; gap: 0;
}
.pgri-hc-tabs button {
	background: var(--pgri-hc-tab-bg); color: var(--pgri-hc-tab-fg); border: 0;
	padding: 0.8rem 1.3rem; font-family: inherit; font-weight: 700; font-size: 0.78rem;
	line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.pgri-hc-tabs button + button { border-left: 1px solid rgba(255, 255, 255, 0.18); }
.pgri-hc-tabs button[aria-selected="true"] { background: var(--pgri-hc-tab-active-bg); color: var(--pgri-hc-tab-active-fg); }
.pgri-hc-tabs button:first-child { border-radius: 6px 0 0 6px; }
.pgri-hc-tabs button:last-child { border-radius: 0 6px 6px 0; }

@media (max-width: 781px) {
	.pgri-hc-tabs {
		left: 1rem; right: 1rem; bottom: 1.75rem;
		flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 0.5rem;
	}
	.pgri-hc-tabs button {
		flex: 0 1 auto; white-space: nowrap; padding: 0.62rem 1rem;
		font-size: 0.72rem; letter-spacing: 0.06em;
		border-radius: 7px !important; border-left: 0 !important;
		box-shadow: 0 2px 10px rgba(8, 20, 12, 0.28);
	}
}