/*
 * Phase 201 / 203 — WineHunter Espositori styles.
 *
 * Loaded INLINE with the shortcode output (see render.php `wh_exhibitors_inline_assets`)
 * so it always applies regardless of theme / page-builder enqueue behaviour.
 *
 * Every rule is scoped under `.wh-exhibitors` — this (a) keeps specificity above
 * generic theme rules that would otherwise flatten the product rows, and (b)
 * prevents any leak into the host theme. The OUTER exhibitor structure (region
 * `<section class="wh-region">`, the `acc-item` accordion + `acc-summary` header
 * + the `badge*` category chip) is deliberately NOT styled here — it uses the
 * site's existing old-page CSS. Everything INSIDE the accordion (the producer
 * header + the anteprima product rows) IS styled here — the "catalogo look".
 */

.wh-exhibitors {
	--sp-3: 12px;
	--sp-4: 16px;
	--border-subtle: rgba(140, 102, 38, 0.18);
	--text-primary: #2a1d10;
	--text-muted: #7a6645;
	--wh-accent: #b03035;
}

/* ---------- Controls: search + filter bar ---------- */
.wh-exhibitors .wh-exh-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--sp-4);
}
.wh-exhibitors .wh-exh-search {
	font: inherit;
	padding: 7px 14px;
	border: 1px solid var(--border-subtle);
	border-radius: 999px;
	min-width: 220px;
	flex: 0 1 260px;
	color: var(--text-primary);
	background: #fff;
}
.wh-exhibitors .wh-exh-search:focus-visible {
	outline: 2px solid var(--wh-accent);
	outline-offset: 2px;
}
.wh-exhibitors .wh-exh-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.wh-exhibitors .wh-exh-tag {
	font: inherit;
	cursor: pointer;
	border: 1px solid var(--border-subtle);
	background: #fff;
	color: var(--text-primary);
	padding: 6px 14px;
	border-radius: 999px;
	line-height: 1.2;
	transition:
		background 120ms ease,
		border-color 120ms ease,
		color 120ms ease;
}
.wh-exhibitors .wh-exh-tag:hover {
	border-color: var(--wh-accent);
}
.wh-exhibitors .wh-exh-tag.is-active {
	background: var(--wh-accent);
	border-color: var(--wh-accent);
	color: #fff;
}
.wh-exhibitors .wh-exh-tag:focus-visible {
	outline: 2px solid var(--wh-accent);
	outline-offset: 2px;
}

/* ---------- Empty state + notices ---------- */
.wh-exhibitors .wh-exh-empty {
	padding: var(--sp-4);
	text-align: center;
	color: var(--text-muted);
}
.wh-exh-notice {
	padding: var(--sp-4);
	border: 1px dashed rgba(140, 102, 38, 0.18);
	border-radius: 10px;
	color: #7a6645;
}

/* ---------- Producer header inside the accordion (catalogo-style) ---------- */
.wh-exhibitors .wh-exh-producer {
	display: flex;
	gap: var(--sp-4);
	align-items: flex-start;
	flex-wrap: wrap;
	padding: var(--sp-3) 0 var(--sp-4);
	margin: 0 0 var(--sp-3);
	border-bottom: 1px solid var(--border-subtle);
}
.wh-exhibitors .wh-exh-producer__logo {
	width: 96px;
	height: 96px;
	object-fit: contain;
	flex: 0 0 auto;
}
.wh-exhibitors .wh-exh-producer__info {
	flex: 1;
	min-width: 200px;
}
.wh-exhibitors .wh-exh-producer__name {
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--text-primary);
	line-height: 1.25;
}
.wh-exhibitors .wh-exh-producer__region {
	color: var(--wh-accent);
	font-size: 0.9rem;
	margin-top: 2px;
}
.wh-exhibitors .wh-exh-producer__facts {
	margin: 8px 0 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.wh-exhibitors .wh-exh-producer__facts div {
	display: flex;
	gap: 6px;
	font-size: 0.85rem;
}
.wh-exhibitors .wh-exh-producer__facts dt {
	color: var(--text-muted);
	font-weight: 600;
	min-width: 84px;
	flex: 0 0 auto;
}
.wh-exhibitors .wh-exh-producer__facts dd {
	margin: 0;
	color: var(--text-primary);
}

/* ---------- Historic-vintages line ---------- */
.wh-exhibitors .wh-exh-historic {
	margin: var(--sp-3) 0 0;
	color: var(--text-muted);
	font-size: 0.85rem;
}
.wh-exhibitors .wh-exh-historic-label {
	font-weight: 600;
}

/* ---------- Anteprima-catalogo product rows (admin globals.css 4535-4605) ---------- */
.wh-exhibitors .wh-catalogue-row-list {
	display: flex;
	flex-direction: column;
}
.wh-exhibitors .wh-catalogue-row {
	display: flex;
	/* HARD RULE (owner, 2026-08-27): one product per row, icon and name on
	   that same row, always. Nothing may ever let two products share a row
	   or push a row's icon onto its own line. */
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--border-subtle);
	text-decoration: none;
	color: inherit;
}
.wh-exhibitors .wh-catalogue-row:last-child {
	border-bottom: none;
}
.wh-exhibitors .wh-catalogue-row__strip {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--sp-3);
	width: 100%;
	min-width: 0;
}
.wh-exhibitors .wh-catalogue-row__icons-left,
.wh-exhibitors .wh-catalogue-row__icons-right {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	flex-shrink: 0;
}
/* The fixed-size award slot: rendered on EVERY row (empty when the product
   has no award) so all product names in a card start at the same x. */
.wh-exhibitors .wh-catalogue-row__award-slot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
}
.wh-exhibitors .wh-catalogue-row__icons-right {
	margin-left: auto;
}
.wh-exhibitors .wh-catalogue-row__award {
	display: inline-flex;
	line-height: 0;
}
.wh-exhibitors .wh-catalogue-row__icon {
	width: 30px;
	height: 30px;
	object-fit: contain;
}
.wh-exhibitors .wh-catalogue-row__title-block {
	flex: 1;
	min-width: 0;
}
.wh-exhibitors .wh-catalogue-row__title {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--text-primary);
	line-height: 1.3;
}
.wh-exhibitors .wh-catalogue-row__secondary {
	font-size: 0.8rem;
	color: var(--text-muted);
	margin-top: 2px;
}

/* ---------- Phase 235: masterclass wine rows ---------- */

/* The producer line. The espositori card carries the company name in its
   header, so the shared row has no slot for it; a masterclass roster mixes
   producers and the list this replaces read "Quintodecimo, Grande Cuvee ...".
   Scoped to `.wh-mc-wines` so the espositori page renders byte-identically. */
.wh-exhibitors.wh-mc-wines .wh-catalogue-row__producer {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 2px;
}

/* The rows sit inside an accordion body that already has its own padding. */
.wh-exhibitors.wh-mc-wines {
	margin: 6px 0 14px;
}

/* Phase 426 - the masterclass card image. Portrait 4:5, NOT the 5:3 the events
   gallery uses. Deliberately unscoped: the masterclass markup is not wrapped in
   .wh-exhibitors (only its wine list is), so a scoped rule would never match -
   the same reason .wh-tavolo-switch below is unscoped. */
.wh-mc-card {
	margin: 0 0 14px;
}

/* The expanded panel's top half: card left, prose right, wine list full width
   below (owner, 2026-08-31). The right column is deliberately the wider of the
   two -- it carries "Relatore: ...", the description and the remaining fields,
   which is where the actual reading happens.

   minmax(0, ...) on BOTH tracks because a grid track's default `min-width:auto`
   refuses to shrink below its content: a long unbroken producer name in the
   right column would otherwise push the whole grid wider than its container
   instead of wrapping. */
.wh-mc-top {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: 22px;
	align-items: start;
	margin-bottom: 18px;
}

/* Inside the grid the gap does the spacing, so the card's own bottom margin
   would just add a stray 14px. */
.wh-mc-top .wh-mc-card {
	margin: 0;
}

/* A slot with no card image must not leave its prose stranded in the narrow
   left column. The feed says cardImageUrl is never null, but "never null" is a
   promise about today's data, not a layout guarantee. */
.wh-mc-top > .wh-mc-meta:only-child {
	grid-column: 1 / -1;
}

/* The prose column's first and last paragraphs should align with the top of the
   image rather than floating on their own margins. */
.wh-mc-meta > :first-child {
	margin-top: 0;
}
.wh-mc-meta > :last-child {
	margin-bottom: 0;
}

/* Narrow screens: stack, image first. */
@media (max-width: 700px) {
	.wh-mc-top {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
	.wh-mc-top .wh-mc-card img {
		max-width: 260px;
	}
}
.wh-mc-card img {
	display: block;
	width: 100%;
	max-width: 320px;
	/* NATURAL RATIO, deliberately no aspect-ratio + object-fit: cover.
	   Measured 2026-08-31 against the first real upload to reach the site
	   (Zyme di Celestino Gaspari): 2365x3543, ratio 0.6675 -- i.e. 2:3, which
	   is NEITHER the 4:5 this rule used to force NOR the 1:1 the platform's own
	   Phase 185 comment claims. The portale confirms no dimension or ratio
	   validation exists anywhere in its upload chain, so the true ratio is
	   whatever each admin happened to upload.
	   Forcing 4/5 on a 2:3 image cropped ~17% of its height, ~8% off the top
	   and bottom -- precisely where a poster carries its title and producer
	   name. Nothing here needs a uniform height: only one card is visible at a
	   time inside an expanded slot, so there is no row to align against, and
	   letting each image keep its own shape cannot crop anything. */
	height: auto;
	border-radius: 10px;
}

/* The card is a zoom trigger. Button chrome is stripped back to nothing so the
   control is invisible until focused — the picture IS the affordance, with the
   cursor doing the explaining. */
.wh-mc-card__zoom {
	display: block;
	width: 100%;
	max-width: 320px;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	border-radius: 10px;
	line-height: 0;
}

.wh-mc-card__zoom:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---------- the lightbox itself ---------- */

.wh-mc-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(20, 10, 12, 0.93);
	cursor: zoom-out;
}

/* `display:flex` above beats the [hidden] attribute's UA `display:none`, so it
   has to be restated or the box would be permanently open. */
.wh-mc-lb[hidden] {
	display: none;
}

.wh-mc-lb__img {
	max-width: min(1100px, 95vw);
	max-height: 92vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
	cursor: default;
}

.wh-mc-lb__close {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 30px;
	line-height: 1;
	color: #f7f5f2;
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(247, 245, 242, 0.35);
	border-radius: 50%;
	cursor: pointer;
}

.wh-mc-lb__close:hover,
.wh-mc-lb__close:focus-visible {
	background: rgba(0, 0, 0, 0.75);
	border-color: #f7f5f2;
}

/* Stop the page behind the overlay scrolling under the visitor's fingers. */
html.wh-mc-lb-open {
	overflow: hidden;
}

/* Phase 386 - the table-number switch (plugin-owned in both modes). */
.wh-tavolo-switch {
	margin: 0 0 14px;
}
.wh-tavolo-switch label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 0.95em;
}
.wh-tavolo-flat > .wh-region-list {
	margin-top: 0;
}

/* ------------------------------------------------------------------
   Phase 392 - the 2025 filter layer (category pills + text/region row)
   ------------------------------------------------------------------ */
.wh-exhibitors--v2 .tab-headers { width: 92%; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 20px auto 0 auto; list-style: none; justify-content: center; }
.wh-exhibitors--v2 .tab-headers .tab { display: flex; align-items: center; padding: .35rem .8rem .35rem 0; border: 1px solid #1d072f; border-radius: 999px; cursor: pointer; user-select: none; background: #fff; }
.wh-exhibitors--v2 .tab-headers .tab.active { background: #cdad59; color: #fff; border-color: #1d072f; }
.wh-exhibitors--v2 .tab-headers .tab.active .filterbadge { filter: drop-shadow(2px 4px 6px #cdad59); }
.wh-exhibitors--v2 .badge { display: inline-block; width: 1.6em; height: 1.6em; background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle; }
.wh-exhibitors--v2 .filterbadge { width: 3rem; height: 2rem; margin: 0 .4rem; }
.wh-exhibitors--v2 .wh-filter-actions { display: flex; gap: .5rem; align-items: stretch; margin: 1rem 0; }
.wh-exhibitors--v2 #searchInput { flex: 1 1 auto; width: auto; height: 50px; border: 1px solid #cdad59; padding: 0 .8rem; font-size: 1rem; }
.wh-exhibitors--v2 #regionSelect { flex: 0 1 22rem; height: 50px; border: 1px solid #cdad59; background: #fff; padding: 0 .8rem; font-size: 1rem; max-width: 40%; }
@media (max-width: 640px) {
	.wh-exhibitors--v2 .wh-filter-actions { flex-wrap: wrap; }
	.wh-exhibitors--v2 #regionSelect { flex: 1 1 100%; max-width: 100%; }
}
.wh-exhibitors--v2 .acc-summary .badges .badge { margin-left: .3rem; }

/* 1.14.0 - the per-category product groups inside a card: a divider (label,
   rule, the pill's own badge icon) opens each group, so the sezione a product
   is shown in reads at a glance and looks nothing like a product row. */
.wh-exhibitors .wh-catalogue-group[hidden] { display: none; }
/* 1.20.0 - 498 cards with ~4,200 rows are a lot of boxes to lay out on first
   paint; let the browser skip the ones off screen (a closed card is about
   3.75rem tall, the open size is remembered). Browsers without support ignore it. */
.wh-exhibitors--v2 .acc-item { content-visibility: auto; contain-intrinsic-size: auto 3.75rem; }
.wh-exhibitors .wh-catalogue-divider { display: flex; align-items: center; gap: 10px; margin: 5rem 0 8px; padding: 0 0 4px; }
/* The 5rem separates a divider from the rows ABOVE it, so the first divider a
   visitor sees in a card carries none: the first group by default, and — once
   pills hide groups — whichever group is the first still shown (the filter JS
   marks it `is-first-visible`, 1.15.3). */
.wh-exhibitors .wh-catalogue-group:first-child > .wh-catalogue-divider,
.wh-exhibitors .wh-catalogue-group.is-first-visible > .wh-catalogue-divider { margin: 0 0 8px; }
.wh-exhibitors .wh-catalogue-divider__label { font-size: .9rem; font-weight: 700; line-height: 1.25; color: #8c6d1f; }
.wh-exhibitors .wh-catalogue-divider__rule { flex: 1 1 auto; min-width: 24px; height: 1px; background: linear-gradient(90deg, #cdad59 0%, rgba(205, 173, 89, .2) 100%); }
/* The divider badge is the pill's badge, sized for a row (the pill rule
   `.wh-exhibitors--v2 .filterbadge` is outranked here on purpose). */
.wh-exhibitors .wh-catalogue-divider .badge { flex: 0 0 auto; width: 2.6rem; height: 1.8rem; margin: 0; background-size: contain; background-position: center; background-repeat: no-repeat; }
.wh-exhibitors .wh-catalogue-divider .badge + .badge { margin-left: 2px; }
/* The last row of a group keeps its rule — only the card's very last row drops it. */
.wh-exhibitors .wh-catalogue-group .wh-catalogue-row:last-child { border-bottom: 1px solid var(--border-subtle); }
.wh-exhibitors .wh-catalogue-group:last-child .wh-catalogue-row:last-child { border-bottom: none; }

/* 1.15.0 - the miniverticale block (owner's rules, 2026-09-04): the vintages of
   one wine presented together. Lives inside its sezione group, after the
   plain rows: its own divider, the newest vintage as a normal product row,
   then the other vintages as chips linking to award.winehunter.it. */
.wh-exhibitors .miniverticale-container { margin-top: 1.6rem; }
.wh-exhibitors .miniverticale-container > .wh-catalogue-row:last-of-type { border-bottom: none; }
.wh-exhibitors .minivertical-annate { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; margin-top: 18px; }
.wh-exhibitors .minivertical-annate a,
.wh-exhibitors .minivertical-annate span { padding: 18px 30px; border: 1px solid #cdad59; border-radius: 8px; background: rgb(205 173 89 / 28%); font-family: sans-serif; letter-spacing: .05em; color: #c65f14; text-decoration: none; cursor: pointer; transition: 0.6s; }
.wh-exhibitors .minivertical-annate a:hover { font-weight: 600; background: rgb(205 173 89 / 78%); }
.wh-exhibitors .minivertical-annate h6 { width: 100%; text-align: center; margin: 0 0 20px; font-size: 0.8rem; color: var(--text-muted); font-weight: 100; letter-spacing: 8px; }

/* 1.15.0 - the two extra pills (Annate storiche, Miniverticale) collapse the
   sezione groups to their divider titles and show only their own blocks. The
   filter JS sets the classes on the .wh-exhibitors root. */
.wh-exhibitors.wh-special-on .wh-catalogue-group > .wh-catalogue-row { display: none; }
.wh-exhibitors.wh-special-on .miniverticale-container { display: none; }
.wh-exhibitors.wh-special-on.wh-special-miniverticale .miniverticale-container { display: block; }
/* 1.19.0 - the annate storiche live INSIDE their sezione group (.wh-catalogue-historic,
   after the miniverticali); with a special pill active the filter JS also hides
   every sezione group that holds none of the selected blocks (owner, 2026-09-07). */
.wh-exhibitors.wh-special-on .wh-catalogue-historic { display: none; }
.wh-exhibitors.wh-special-on.wh-special-historic .wh-catalogue-historic { display: block; }
.wh-exhibitors.wh-special-on .wh-catalogue-group--historic { display: none; }
.wh-exhibitors.wh-special-on.wh-special-historic .wh-catalogue-group--historic:not([hidden]) { display: block; }
/* 1.15.1 - spacing while a special pill is active (owner, 2026-09-06): with
   the sezione rows collapsed the 5rem divider gaps are just air. Miniverticale
   active → every divider 0 0 8px and the containers flush; Annate storiche
   active → the annate group flush (22px otherwise). The rules hang off the
   root classes the filter JS toggles, so the normal margins come back the
   moment the pill is untoggled. */
.wh-exhibitors .wh-catalogue-group--historic,
.wh-exhibitors .wh-catalogue-historic { margin-top: 22px; }
.wh-exhibitors .wh-catalogue-historic > .wh-catalogue-row:last-of-type { border-bottom: none; }
/* 1.15.2 - the two block dividers belong to their section, so they sit closer
   to it than a sezione divider does (1rem vs 5rem); with EITHER special pill
   active every divider drops to 0 0 8px. */
.wh-exhibitors .wh-catalogue-divider--miniverticale,
.wh-exhibitors .wh-catalogue-divider--historic { margin: 1rem 0 8px; }
.wh-exhibitors.wh-special-on .wh-catalogue-divider { margin: 0 0 8px; }
.wh-exhibitors.wh-special-miniverticale .miniverticale-container { margin-top: 0; }
.wh-exhibitors.wh-special-historic .wh-catalogue-group--historic,
.wh-exhibitors.wh-special-historic .wh-catalogue-historic { margin-top: 0; }
/* The two special badges ship with the plugin (assets/icons); the pill and the
   divider reuse the same classes as every other category badge. */
.wh-exhibitors--v2 .filterbadge.badge-miniverticale,
.wh-exhibitors .wh-catalogue-divider .badge-miniverticale { background-size: auto 100%; }

/* 1.16.0 - the shared icon tooltip (assets/tooltip.js): ONE fixed node on
   <body>, so no overflow on a row, a card or a <details> can clip it. The
   arrow follows the icon (--wh-tip-arrow), the --below variant flips under
   the icon near the top edge. Deliberately unscoped: the node is not inside
   .wh-exhibitors. */
.wh-tip { position: fixed; z-index: 100000; max-width: 260px; padding: 7px 11px; border-radius: 8px; background: #2a1d10; color: #f7f5f2; font-size: 0.8rem; font-weight: 600; line-height: 1.35; letter-spacing: 0.01em; text-align: center; white-space: normal; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
.wh-tip[hidden] { display: none; }
.wh-tip::after { content: ""; position: absolute; left: var(--wh-tip-arrow, 50%); bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #2a1d10; border-bottom: 0; }
.wh-tip--below::after { bottom: auto; top: -6px; border-top: 0; border-bottom: 6px solid #2a1d10; }
/* The icons are focusable now (tabindex), so keyboard users see where they are. */
.wh-exhibitors [data-tip]:focus-visible { outline: 2px solid #8c6d1f; outline-offset: 2px; border-radius: 4px; }
.wh-exhibitors .wh-catalogue-row__icon[data-tip],
.wh-exhibitors .acc-summary .badges .badge[data-tip] { cursor: help; }

/* Phase 393 - product title links to its award.winehunter.it page */
.wh-exhibitors .wh-catalogue-row__link { color: inherit; text-decoration: none; border-bottom: 1px dotted #8c6d1f; transition: color .25s, border-color .25s; }
.wh-exhibitors .wh-catalogue-row__link:hover { color: #8c6d1f; border-bottom-style: solid; }
.wh-exhibitors .wh-catalogue-row__link::after { content: " \2197"; font-size: .75em; color: #8c6d1f; }