/* ==========================================================================
   Fuori Salone (page-templates/page-fuorisalone.php) — 2026-09-25
   --------------------------------------------------------------------------
   The page is built from the design system (.mwfe in /custom-css/mwf.css:
   hero, marquee, index, the arched section figure, the band). This file adds
   only what the page itself needs, scoped to .mwfe-fuorisalone and drawn from
   the system's own tokens, because mwf.css is frozen:

     .fs-block   the exhibitors and the Försterbräu (numbered like
                 .mwfe-section, a centred head)
     .fs-exh     one exhibitor: an outlined number and the logo on a white
                 plate beside the name and the text — every exhibitor is on
                 the page at once; the tab bar they used to hide behind is gone
     .fs-venue   the Försterbräu: photograph, logo and words, one glass panel;
                 its second half (.fs-club) is the WH Buyers Club in the
                 Sala Sixtus, with the hours and the button to whbuyers.club

   Logos sit on white because that is what they are drawn for (the Umbria
   mark has no transparency). Widths and type in rem so the page follows the
   root scale above 1920px. No loading="lazy" anywhere on this page: under
   Lenis a lazy image inside .mwfe is never "near the viewport" and never loads.
   ========================================================================== */

/* ------------------------------------------------------------- the blocks */

.mwfe-fuorisalone .fs-block {
	position: relative;
	padding: clamp(4.5rem, 12vh, 7.5rem) 0;
	border-top: 1px solid rgba(205, 173, 89, .16);
}

.mwfe-fuorisalone .fs-head {
	position: relative;
	max-width: 44rem;
	margin: 0 auto clamp(2.6rem, 6vh, 3.8rem);
	text-align: center;
}

.mwfe-fuorisalone .fs-head .mwfe-kicker {
	justify-content: center;
}

.mwfe-fuorisalone .fs-head .mwfe-kicker::before {
	display: none;
}

/* the 2026 dates under the intro text: the stamp from the system, allowed to
   use the whole column */
.mwfe-fuorisalone .mwfe-section .mwfe-stamp {
	max-width: 100%;
}

/* --------------------------------------------------------- the exhibitors */

.mwfe-fuorisalone .fs-exh-list {
	max-width: 64rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.mwfe-fuorisalone .fs-exh {
	display: grid;
	grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr);
	gap: clamp(1.8rem, 4.5vw, 4.5rem);
	align-items: start;
	padding: clamp(2.2rem, 5.5vh, 3.4rem) 0;
	border-top: 1px solid rgba(205, 173, 89, .16);
}

.mwfe-fuorisalone .fs-exh:first-child {
	border-top: 0;
	padding-top: 0;
}

.mwfe-fuorisalone .fs-exh-mark {
	position: relative;
}

.mwfe-fuorisalone .fs-exh-num {
	display: block;
	margin: 0 0 .9rem;
	font-family: var(--mwfe-serif);
	font-size: clamp(2.6rem, 4.6vw, 3.8rem);
	font-weight: 500;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(205, 173, 89, .55);
	user-select: none;
}

.mwfe-fuorisalone .fs-plate {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.1rem;
	min-height: 12.5rem;
	padding: 1.4rem 1.5rem;
	border: 1px solid rgba(205, 173, 89, .35);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .85);
}

.mwfe-fuorisalone .fs-plate img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 9.5rem;
	object-fit: contain;
}

/* two marks on one plate (Casa Campania): side by side, each its own half */
.mwfe-fuorisalone .fs-plate--pair img {
	max-width: calc(50% - .55rem);
}

.mwfe-fuorisalone .fs-exh-name {
	margin: 0 0 .5rem;
	font-family: var(--mwfe-serif);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 500;
	line-height: 1.1;
	color: var(--mwfe-gold-light);
	text-wrap: balance;
}

.mwfe-fuorisalone .fs-exh-sub {
	margin: 0 0 1.1rem;
	font-family: var(--mwfe-sans);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .24em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--mwfe-brass);
}

.mwfe-fuorisalone .fs-exh-lead {
	margin: 0 0 .9rem;
	max-width: 62ch;
	font-family: var(--mwfe-serif);
	font-size: 1.28rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mwfe-gold-light);
}

/* the body paragraphs only — class-less, so the sub-line and the lead above
   them keep their own size and colour */
.mwfe-fuorisalone .fs-exh-text p:not([class]) {
	max-width: 64ch;
	margin: 0 0 1em;
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--mwfe-cream-dim);
}

.mwfe-fuorisalone .fs-exh-text p:not([class]):last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------- the Försterbräu */

.mwfe-fuorisalone .fs-venue {
	display: grid;
	grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
	gap: clamp(1.8rem, 4.5vw, 4rem);
	align-items: center;
	max-width: 60rem; /* clear of the outlined 03 at the right edge */
	margin: 0 auto;
	padding: clamp(1.7rem, 4vw, 3rem) clamp(1.6rem, 4.5vw, 3.6rem);
	border: 1px solid var(--mwfe-line);
	border-radius: 22px;
	background: var(--mwfe-glass);
	backdrop-filter: blur(6px);
	box-shadow: 0 24px 48px -32px rgba(0, 0, 0, .7);
}

.mwfe-fuorisalone .fs-venue-photo {
	margin: 0;
	border-radius: 999px 999px 18px 18px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .85);
}

.mwfe-fuorisalone .fs-venue-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mwfe-fuorisalone .fs-venue-head {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin: 0 0 1rem;
}

.mwfe-fuorisalone .fs-venue-logo {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5.5rem;
	height: 5.5rem;
	padding: .5rem;
	border-radius: 14px;
	background: #fff;
}

.mwfe-fuorisalone .fs-venue-logo img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

.mwfe-fuorisalone .fs-venue .fs-exh-name {
	margin: 0;
}

/* the WH Buyers Club in the Sala Sixtus (2026-09-25): the card's second half,
   under a hairline across its whole width — the words left, the room and the
   hours right, the button under the words (it fits one line there) */
.mwfe-fuorisalone .fs-club {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
	grid-template-areas:
		"text side"
		"cta  side";
	column-gap: clamp(1.8rem, 4.5vw, 4rem);
	align-items: start;
	margin-top: .4rem;
	padding-top: clamp(1.8rem, 4vw, 2.6rem);
	border-top: 1px solid var(--mwfe-line);
}

.mwfe-fuorisalone .fs-club-text {
	grid-area: text;
}

.mwfe-fuorisalone .fs-club-side {
	grid-area: side;
	padding: 1.2rem 1.3rem .5rem;
	border: 1px solid var(--mwfe-line);
	border-radius: 16px;
	background: rgba(var(--mwfe-ink-rgb), .35);
}

.mwfe-fuorisalone .fs-club-cta {
	grid-area: cta;
	margin-top: 1.6rem;
}

/* the club's name never breaks inside the button */
.mwfe-fuorisalone .fs-club-cta .mwfe-btn [translate="no"] {
	white-space: nowrap;
}

.mwfe-fuorisalone .fs-club-title {
	margin: 0 0 .9rem;
	font-family: var(--mwfe-serif);
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	font-weight: 500;
	line-height: 1.15;
	color: var(--mwfe-gold-light);
	text-wrap: balance;
}

.mwfe-fuorisalone .fs-club-room {
	margin: 0 0 .5rem;
	font-family: var(--mwfe-sans);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .24em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--mwfe-brass);
}

.mwfe-fuorisalone .fs-club-hours {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mwfe-fuorisalone .fs-club-hours li {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: .7rem 0;
	border-bottom: 1px dashed rgba(205, 173, 89, .3);
	font-size: .98rem;
	line-height: 1.4;
	color: var(--mwfe-cream-dim);
}

.mwfe-fuorisalone .fs-club-hours li:last-child {
	border-bottom: 0;
}

.mwfe-fuorisalone .fs-club-hours b {
	font-family: var(--mwfe-sans);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--mwfe-gold-light);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- phones */

@media (max-width: 760px) {
	.mwfe-fuorisalone .fs-exh {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.4rem;
	}

	.mwfe-fuorisalone .fs-exh-num {
		margin-bottom: .7rem;
	}

	.mwfe-fuorisalone .fs-plate {
		min-height: 10rem;
	}

	.mwfe-fuorisalone .fs-plate img {
		max-height: 7.5rem;
	}

	.mwfe-fuorisalone .fs-venue {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
	}

	.mwfe-fuorisalone .fs-venue-photo {
		width: min(100%, 13rem);
	}

	.mwfe-fuorisalone .fs-venue-text {
		width: 100%;
	}

	.mwfe-fuorisalone .fs-club {
		width: 100%;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"text"
			"side"
			"cta";
		row-gap: 1.4rem;
	}

	.mwfe-fuorisalone .fs-club-cta {
		margin-top: 0;
	}

	.mwfe-fuorisalone .fs-club-cta .mwfe-btn {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	/* a label too long for one line breaks into two even lines, never one word under the rest */
	.mwfe-fuorisalone .fs-club-cta .mwfe-btn > span:first-child {
		text-wrap: balance;
	}
}

/* the scroll cue must not sit on the last line of the hero (the Gala lesson) */
@media (max-width: 700px) {
	.mwfe-fuorisalone .mwfe-hero-inner {
		padding-bottom: 6.5rem;
	}
}