/* ============================================================
   WMC House — hero
   Full height, image bottom-anchored, type in the lower third
   so the scrim never has to fight the middle of the photograph.
   ============================================================ */

/* === Frame === */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; background: var(--dark); overflow: hidden; }

/* === Image === */
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.12) 38%, rgba(0,0,0,.78) 100%); }

/* === Content === */
.hero__inner { position: relative; width: 100%; max-width: var(--wrap); margin-inline: auto; padding: 0 var(--gutter) clamp(3rem, 7vh, 5.5rem); color: var(--on-dark); }
.hero__eyebrow { opacity: .72; margin-bottom: var(--s-3); }
/* The mark, when a brand has one. Capped so a circular logo never becomes the
   hero itself. */
.hero__mark { margin-bottom: var(--s-3); }
.hero__mark img { display: block; width: var(--hero-mark, 150px); max-width: 46vw; height: auto; }

/*
 * When there is a mark, the wordmark inside it already says the name — so the
 * heading steps down from display size to something that sits WITH the emblem
 * instead of shouting over it. The h1 text is unchanged; only its size is.
 */
.hero--mark .hero__title-name { font-size: clamp(30px, 4.4vw, 58px); letter-spacing: -.01em; }
.hero--mark .hero__title { max-width: 24ch; gap: .55rem; }

/* One h1, two lines. The name keeps the display size; the cuisine drops to
   eyebrow scale and sits under it as a subtitle. Both are inside the heading. */
.hero__title { max-width: 18ch; margin-bottom: var(--s-3); display: grid; gap: .7rem; }
.hero__title-name { display: block; }
.hero__title-sub { display: block; font-family: var(--font-text); font-size: var(--eyebrow-size); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; opacity: .82; }
.hero__line { font-family: var(--font-display); font-style: italic; font-size: var(--h3-size); line-height: 1.3; opacity: .86; max-width: 30ch; margin-bottom: var(--s-4); }

/* === Actions === */
.hero__acts { display: flex; flex-wrap: wrap; gap: .9rem; }
/*
 * Ghost on a photograph.
 *
 * An outline alone leaves the label sitting directly on whatever the picture
 * is doing behind it, which on a busy hero is a lottery. A translucent wash of
 * the house green gives the type its own ground without turning the button
 * solid, and the blur softens whatever detail survives underneath.
 */
.btn--ghost-light { border: 1px solid color-mix(in srgb, var(--on-dark) 42%, transparent); color: var(--on-dark); background: color-mix(in srgb, var(--nav-bg) 55%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: background .3s ease, filter .3s ease; }
.btn--ghost-light:hover { background: color-mix(in srgb, var(--nav-bg) 78%, transparent); }

/* === Scroll cue === */
.hero__scroll { position: absolute; right: var(--gutter); bottom: clamp(3rem, 7vh, 5.5rem); writing-mode: vertical-rl; color: var(--on-dark); opacity: .55; }
@media (max-width: 900px) { .hero__scroll { display: none; } }


/* ============================================================
   Mobile hero
   Centred on both axes. On a tall narrow screen the lower-third
   composition leaves the mark stranded mid-photograph with the
   type crushed under it; centred, the emblem, the name and the
   two actions read as one stacked lockup.
   ============================================================ */
@media (max-width: 760px) {
	.hero { align-items: center; }

	/*
	 * The scrim has to move with the type.
	 *
	 * The desktop gradient is built for a lower-third lockup: dark at the
	 * bottom, and only 12% black at the 38% mark. Centring the content on
	 * mobile put every word into that near-transparent band — over a backlit
	 * bar full of bottles, which is the brightest, busiest part of the
	 * photograph. Nothing was wrong with the type; it was sitting in the one
	 * place the scrim does not cover.
	 *
	 * A radial pool centred on the lockup darkens where the words are and
	 * leaves the corners of the photograph alone.
	 */
	/*
	 * Franck's values, tuned in the live editor and kept here so a theme
	 * upload cannot revert them.
	 *
	 * The 27% first stop is the part that matters: holding .44 as a plateau
	 * before it falls away, rather than decaying from the centre pixel,
	 * keeps the whole lockup on even ground instead of letting the subtitle
	 * run out of scrim at its edges.
	 */
	.hero__bg::after {
		background:
			radial-gradient(115% 58% at 50% 52%, rgba(0,0,0,.44) 27%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.12) 72%, rgba(0,0,0,0) 100%),
			linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.3) 42%, rgba(0,0,0,.16) 100%);
	}

	/*
	 * Belt and braces for the subtitle: 12px, letterspaced and thin is the
	 * first thing to disappear against a highlight the scrim did not flatten.
	 */
	.hero__inner { text-shadow: 0 1px 18px rgba(0,0,0,.45); }
	.hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: clamp(2rem, 8vh, 4rem); }
	.hero__mark { margin-bottom: var(--s-2); }
	.hero__title { max-width: 20ch; justify-items: center; }
	.hero--mark .hero__title { max-width: 20ch; }

	/* Inline, never stacked: two full-width buttons on top of each other read
	   as a form. nowrap keeps each label on one line at 375px. */
	.hero__acts { flex-wrap: nowrap; justify-content: center; width: 100%; gap: .6rem; }
	.hero__acts .btn { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; padding: .95rem .6rem; letter-spacing: .05em; font-size: clamp(10px, 3vw, 12px); }
}