/*
 * Hero — full-bleed atmospheric field + centred "glass" card.
 *
 * Layout/UX adapted from the "Portrait Stories" reference (full-bleed grid,
 * glassy gradient-shell card, rounded corners, soft depth, atmospheric dot field)
 * but rendered entirely in the Atma design system: sand/charcoal/sage/moss,
 * Jost + Cormorant italic. No new palette or type is introduced.
 */

.mcci-hero {
	position: relative;
	/* Base (mobile) fills the screen minus the sticky header. On desktop the
	 * card is sized to its content instead (see the min-width:901px override
	 * below) so the right-hand image tracks the left column's height rather
	 * than stretching into an over-tall full-screen panel. */
	display: flex;
	flex-direction: column;
	min-height: calc( 100vh - var( --wp--custom--header-height, 80px ) );
	min-height: calc( 100dvh - var( --wp--custom--header-height, 80px ) );
	/* Horizontal inset matches the header panes (var --edge) so the card's left
	 * edge aligns with the logo and its right edge with the Contacto pane. A
	 * modest top gap keeps the card close to the header (was excessive before). */
	padding-block: 80px;
	padding-inline: var( --wp--custom--edge, clamp( 1rem, 4vw, 2rem ) );
	overflow: hidden;
	/* Flat sand — matches the site background; the depth comes from the dot
	 * field + the glass card, not a gradient that seams at the section edge. */
	background: var( --wp--preset--color--sand, #ebe8e3 );
}

/* Logged-in preview: the WP admin bar (32px / 46px on small screens) offsets the
 * page, which dvh doesn't subtract. Real visitors have no admin bar and already
 * fit exactly. */
body.admin-bar .mcci-hero {
	min-height: calc( 100vh - var( --wp--custom--header-height, 80px ) - 32px );
	min-height: calc( 100dvh - var( --wp--custom--header-height, 80px ) - 32px );
}

@media screen and ( max-width: 782px ) {
	body.admin-bar .mcci-hero {
		min-height: calc( 100dvh - var( --wp--custom--header-height, 80px ) - 46px );
	}
}

/* Desktop: size the hero to its content so the card isn't forced to a full
 * screenful — that stretch was what made the right-hand image excessively tall
 * relative to the left column. */
@media ( min-width: 901px ) {
	.mcci-hero,
	body.admin-bar .mcci-hero {
		min-height: 0;
	}
}

/* Atmospheric background field (dot-matrix breathing pulse; JS-driven). ------ */
.mcci-hero__aura,
.mcci-hero__aura-fallback {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	width: 100%;
	height: 100%;
}

.mcci-hero__aura {
	opacity: 0.55;
}

/* CSS-only fallback dot grid if the canvas can't run. */
.mcci-hero__aura-fallback {
	background-image: radial-gradient( var( --wp--preset--color--sage, #8b876b ) 1px, transparent 1.4px );
	background-size: 30px 30px;
	opacity: 0.14;
}

/* Gradient border shell — hairline premium frame around the glass card. ------ */
.mcci-hero__shell {
	position: relative;
	z-index: 1;
	/* Spans the full width between the header's edge insets (no narrow max-width),
	 * so the card reads as a large panel rather than a small floating box. */
	width: 100%;
	padding: 1px;
	border-radius: 32px;
	background: linear-gradient(
		140deg,
		rgba( 28, 27, 26, 0.55 ),
		rgba( 139, 135, 107, 0.45 ) 46%,
		rgba( 210, 207, 199, 0.6 )
	);
	/* Soft, diffuse lift — not a hard band that reads as a divider between the
	 * hero and the next section. */
	box-shadow: 0 24px 64px -48px rgba( 28, 27, 26, 0.16 );
}

/* The glass surface itself. -------------------------------------------------- */
.mcci-hero__card {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: stretch;
	gap: clamp( 1.5rem, 3vw, 3rem );
	/* Generous internal padding; a touch more on the block axis so the card
	 * breathes above and below its content. */
	padding-inline: clamp( 2.25rem, 3.6vw, 4.5rem );
	padding-block: clamp( 3rem, 4.5vw, 5.5rem );
	border-radius: 31px;
	/* More opaque + a modest blur: a large blur over the animated aura forces an
	 * expensive per-frame recomposite. 8px reads as glass but stays smooth. */
	background: rgba( 249, 248, 246, 0.74 );
	-webkit-backdrop-filter: blur( 8px ) saturate( 1.05 );
	backdrop-filter: blur( 8px ) saturate( 1.05 );
	overflow: hidden;
}

/* Subtle inner top highlight so the glass reads as a real material. */
.mcci-hero__card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: inset 0 1px 0 rgba( 249, 248, 246, 0.7 );
}

/* Content column ------------------------------------------------------------ */
.mcci-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp( 1rem, 2vw, 1.75rem );
	/* Harmonious vertical breathing room for the left column; because the media
	 * cell stretches to this column's height, it also gives the image a taller,
	 * less compact proportion. */
	padding-block: 50px;
	/* No width cap: the column fills its grid track so the heading spans the
	 * full left side and doesn't leave a void before the image. Paragraph
	 * readability is preserved by its own max-width on .mcci-hero__text. */
	max-width: none;
}

.mcci-hero__eyebrow {
	color: var( --wp--preset--color--moss, #6a6750 );
	margin: 0;
}

/* Desktop: the brand name already sits in the header, so the eyebrow is
 * redundant here — hide it above the mobile breakpoint. */
@media ( min-width: 901px ) {
	.mcci-hero__eyebrow {
		display: none;
	}
}

.mcci-hero__heading {
	/* Sized by width AND capped by viewport height (7.4vh) so the headline — and
	 * therefore the whole card — shrinks to fit short viewports automatically. */
	font-size: min( clamp( 2.35rem, 1.3rem + 3.2vw, 3.35rem ), 6.8vh );
	font-weight: 300;
	line-height: 1.06;
	letter-spacing: var( --wp--custom--tracking--tight, -0.02em );
	margin: 0;
}

.mcci-hero__heading .mcci-accent {
	display: inline;
}

.mcci-hero__text {
	font-size: var( --wp--preset--font-size--medium, 1.125rem );
	line-height: 1.6;
	max-width: 42ch;
	margin: 0;
}

.mcci-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp( 1rem, 2vw, 1.75rem );
	margin-top: 0.5rem;
}

.mcci-hero__cta {
	display: inline-block;
	padding: 15px 30px;
	border: 1px solid var( --wp--preset--color--charcoal, #1e1d1b );
	border-radius: 12px;
	background: var( --wp--preset--color--charcoal, #1e1d1b );
	color: var( --wp--preset--color--light, #f9f8f6 );
	font-size: var( --wp--preset--font-size--label, 0.75rem );
	text-transform: uppercase;
	letter-spacing: var( --wp--custom--tracking--label, 0.2em );
	text-decoration: none;
	transition: background 150ms ease, color 150ms ease;
}

.mcci-hero__cta:hover {
	background: transparent;
	color: var( --wp--preset--color--charcoal, #1e1d1b );
}

.mcci-hero__cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var( --wp--preset--font-size--label, 0.75rem );
	text-transform: uppercase;
	letter-spacing: var( --wp--custom--tracking--label, 0.2em );
	text-decoration: none;
	color: var( --wp--preset--color--charcoal, #1e1d1b );
	transition: color 150ms ease;
}

.mcci-hero__cta-secondary:hover {
	color: var( --wp--preset--color--moss, #6a6750 );
}

/* Integrated portrait media ------------------------------------------------- */
/* The media cell is sized by its grid sibling (align-items: stretch on desktop)
 * or by aspect-ratio on mobile; the figure fills it absolutely so the image's
 * intrinsic height can never inflate the row. */
.mcci-hero__media {
	position: relative;
	min-height: 0;
}

.mcci-hero__figure {
	position: absolute;
	inset: 0;
	margin: 0;
	border-radius: 22px;
	overflow: hidden;
	background: var( --wp--preset--color--muted, #d2cfc7 );
	box-shadow: 0 18px 50px -30px rgba( 28, 27, 26, 0.4 );
}

.mcci-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mcci-hero__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient( 135deg, var( --wp--preset--color--muted, #d2cfc7 ), var( --wp--preset--color--sage, #8b876b ) );
}

/* Glass meta chip on the image corner. */
.mcci-hero__meta {
	position: absolute;
	left: 16px;
	bottom: 16px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba( 249, 248, 246, 0.72 );
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
	color: var( --wp--preset--color--moss, #6a6750 );
	box-shadow: 0 6px 20px -10px rgba( 28, 27, 26, 0.35 );
}

/* Responsive: stack the card on smaller screens. ---------------------------- */
@media ( max-width: 900px ) {
	.mcci-hero {
		min-height: calc( 100dvh - var( --wp--custom--header-height, 80px ) );
		padding-block: clamp( 1.5rem, 6vw, 3rem );
		/* Stacked layout: centre the card rather than stretching it — the
		 * text + landscape crop shouldn't be forced to full screen height. */
		justify-content: center;
	}

	.mcci-hero__shell {
		flex: 0 0 auto;
	}

	.mcci-hero__card {
		grid-template-columns: 1fr;
		gap: clamp( 1.25rem, 5vw, 2rem );
	}

	.mcci-hero__content {
		max-width: none;
		order: 1;
	}

	/* Shorter, landscape crop on mobile so the hero doesn't feel oversized.
	 * Full width of the card's content area, keeping its rounded corners and
	 * the card's inner padding (no full-bleed).
	 *
	 * The image is given a real in-flow box with a definite height here rather
	 * than an absolutely-positioned layer sized only by an aspect-ratio box: on
	 * mobile WebKit (iOS Safari) an empty aspect-ratio container holding an
	 * abs-positioned child inside the backdrop-filter glass card collapsed to
	 * zero height, so the hero image did not render. */
	.mcci-hero__media {
		order: 2;
	}

	.mcci-hero__figure {
		/* In-flow (relative, not absolute) so mobile WebKit composites it, while
		 * still providing the positioning context for the .mcci-hero__meta chip. */
		position: relative;
		inset: auto;
	}

	.mcci-hero__img {
		/* Definite height — no dependency on the aspect-ratio of an empty box. */
		height: clamp( 200px, 34vh, 320px );
	}
}

/* Viewport-HEIGHT adaptation: on short viewports (small laptops, landscape),
 * compress the vertical rhythm with vh-based values so the card keeps fitting
 * within one screen without hardcoded breakpoints. */
@media ( max-height: 820px ) {
	.mcci-hero {
		padding-block: clamp( 1.25rem, 3vh, 2.5rem );
	}

	.mcci-hero__card {
		padding: clamp( 1.5rem, 3.4vh, 3.5rem );
	}

	.mcci-hero__content {
		gap: clamp( 0.6rem, 1.6vh, 1.75rem );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mcci-hero__cta,
	.mcci-hero__cta-secondary {
		transition: none;
	}
}