/* Wine house (inc/wijnhuis.php): the intro and story on /vendor/<slug>/, and "Over het wijnhuis" on
   product pages. Loaded on those two page types only. Buttons are reset because Hello styles every <button>. */

/* ---------- Wine house page: intro, in place of the template's title ---------- */
/* Inset like the breadcrumb widget above it, so name, breadcrumb and filters share one edge. */
.iew-house-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin: 0 0 8px; padding: 0 10px; }
.iew-house-intro__text { flex: 1 1 auto; min-width: 0; max-width: 72ch; }
.iew-house-intro .iew-house-intro__title {
	margin: 0; font-family: var(--iew-font-display); font-weight: var(--iew-w-medium);
	font-size: 40px; line-height: 1.1; letter-spacing: -0.01em; color: var(--iew-ink-900);
}
.iew-house-intro__meta { margin: 8px 0 0; font-family: var(--iew-font-sans); font-size: 15px; line-height: 1.4; color: var(--iew-ink-500); }
.iew-house-intro__dot { margin: 0 4px; }
.iew-house-intro__lede { margin: 14px 0 0; }
.iew-house-intro__lede .iew-clamp__text { margin: 0; font-family: var(--iew-font-sans); font-size: 17px; line-height: 1.55; color: var(--iew-ink-700); }
.iew-house-intro__jump { margin: 12px 0 0; font-family: var(--iew-font-sans); font-size: 15px; line-height: 1.4; }
.iew-house-intro__jump a,
.iew-house-intro__jump a:visited { color: var(--iew-olive-700); font-weight: var(--iew-w-semi); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.iew-house-intro__jump a:hover { color: var(--iew-olive-900); }
.iew-house-intro__logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; max-width: 200px; }
.iew-house-intro__logo-img { display: block; width: auto; height: auto; max-width: 200px; max-height: 96px; object-fit: contain; }

/* The template's description container, emptied because the intro carries that text (inc/wijnhuis.php):
   its padding left a gap above the sort. */
body.tax-vendor .elementor-location-archive .e-con:not(:has(*)) { display: none; }

/* Lees meer on a long short text: clamped to three lines once the script finds it overflows. Without
   the script, the text simply shows in full. */
.iew-clamp.is-clampable:not(.is-open) .iew-clamp__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--iew-clamp-lines, 3); line-clamp: var(--iew-clamp-lines, 3); overflow: hidden; }
.iew-house-intro .iew-clamp__toggle,
.iew-house-story .iew-house-story__toggle {
	display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0;
	background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
	font-family: var(--iew-font-sans); font-size: 15px; font-weight: var(--iew-w-semi); line-height: 1.3; letter-spacing: normal; text-transform: none;
	color: var(--iew-olive-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.iew-house-intro .iew-clamp__toggle[hidden],
.iew-house-story .iew-house-story__toggle[hidden] { display: none; }
.iew-house-intro .iew-clamp__toggle:hover,
.iew-house-intro .iew-clamp__toggle:focus,
.iew-house-story .iew-house-story__toggle:hover,
.iew-house-story .iew-house-story__toggle:focus { background: none; color: var(--iew-olive-900); }
.iew-house-intro .iew-clamp__toggle:focus-visible,
.iew-house-story .iew-house-story__toggle:focus-visible,
.iew-house-intro__jump a:focus-visible,
.iew-house-card__link:focus-visible { outline: 2px solid var(--iew-gold-500); outline-offset: 2px; border-radius: var(--iew-radius-xs); }

/* ---------- Wine house page: "Over <house>" under the wines ---------- */
/* Positioned at z-index 99, the level of Elementor's sticky filter column: later in the page, so the story
   covers that column when it scrolls along, and stays under the site header (100). */
.iew-house-story { position: relative; z-index: 99; margin: 56px 0 0; padding: 64px 0 72px; background: var(--iew-paper-2); color: var(--iew-ink-900); font-family: var(--iew-font-sans); }
/* Same edges as the breadcrumb, intro and wine grid above: Elementor's 1140px box with its 10px inset. */
.iew-house-story__in { box-sizing: border-box; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.iew-house-story.has-media .iew-house-story__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.iew-house-story__body { min-width: 0; max-width: 68ch; }
.iew-house-story .iew-house-story__title:focus { outline: none; }
.iew-house-story .iew-house-story__title {
	margin: 0 0 20px; font-family: var(--iew-font-display); font-weight: var(--iew-w-medium);
	font-size: 32px; line-height: 1.15; letter-spacing: -0.01em; color: var(--iew-ink-900);
}
.iew-house-story__text { font-size: 17px; line-height: 1.7; color: var(--iew-ink-700); }
.iew-house-story__text p { margin: 0 0 1em; }
.iew-house-story__text > :last-child,
.iew-house-story__more > :last-child { margin-bottom: 0; }
.iew-house-story__text strong { color: var(--iew-ink-900); }
/* The picture stays in view beside a long story. */
.iew-house-story__photo,
.iew-house-story__logo { position: sticky; top: 112px; margin: 0; }
.iew-house-story__photo-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--iew-radius-sm); }
.iew-house-story__logo { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 32px; background: var(--iew-surface); border-radius: var(--iew-radius-sm); }
.iew-house-story__logo-img { display: block; width: auto; height: auto; max-width: 100%; max-height: 180px; object-fit: contain; }

/* ---------- Product page: "Over het wijnhuis" ---------- */
.iew-house-card { display: flex; align-items: flex-start; gap: 16px; margin: 32px 0 0; padding: 20px 22px 12px; background: var(--iew-paper-2); border-radius: var(--iew-radius-md); font-family: var(--iew-font-sans); }
.iew-house-card__logo { flex: 0 0 64px; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; padding: 6px; background: var(--iew-surface); border-radius: var(--iew-radius-sm); box-sizing: border-box; }
.iew-house-card__logo-img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.iew-house-card__body { flex: 1 1 auto; min-width: 0; }
.iew-product .iew-house-card__title { margin: 0; font-family: var(--iew-font-display); font-size: 22px; font-weight: var(--iew-w-medium); line-height: 1.2; letter-spacing: -0.005em; color: var(--iew-ink-900); }
.iew-house-card__eyebrow { display: block; margin: 0 0 4px; font-family: var(--iew-font-sans); font-size: var(--iew-text-xs); font-weight: var(--iew-w-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--iew-ink-500); }
.iew-house-card__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--iew-ink-700); }
.iew-product .iew-house-card__link,
.iew-product .iew-house-card__link:visited {
	display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: var(--iew-w-semi); line-height: 1.3;
	color: var(--iew-olive-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.iew-product .iew-house-card__link:hover { color: var(--iew-olive-900); }
.iew-house-card__link span { margin-left: 6px; text-decoration: none; }

/* ---------- Tablet and phone ---------- */
@media (max-width: 1024px) {
	.iew-house-story.has-media .iew-house-story__in { gap: 40px; }
}
@media (max-width: 767px) {
	/* Logo above the name, so the name keeps the full width. */
	.iew-house-intro { flex-direction: column; gap: 12px; }
	.iew-house-intro__logo { order: -1; justify-content: flex-start; max-width: 160px; }
	.iew-house-intro__logo-img { max-width: 160px; max-height: 56px; }
	.iew-house-intro .iew-house-intro__title { font-size: 30px; }
	/* A normal one- or two-sentence text runs to four lines on a phone: show it whole, clamp only longer ones. */
	.iew-house-intro__lede { --iew-clamp-lines: 4; }
	.iew-house-intro__lede .iew-clamp__text { font-size: 16px; }

	.iew-house-story { margin-top: 40px; padding: 40px 0 48px; }
	.iew-house-story.has-media .iew-house-story__in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.iew-house-story__photo,
	.iew-house-story__logo { position: static; }
	.iew-house-story__photo-img { aspect-ratio: 3 / 2; }
	.iew-house-story__logo { aspect-ratio: auto; padding: 20px; justify-content: flex-start; background: none; padding: 0; }
	.iew-house-story__logo-img { max-height: 64px; }
	.iew-house-story .iew-house-story__title:focus { outline: none; }
.iew-house-story .iew-house-story__title { font-size: 26px; margin-bottom: 14px; }
	.iew-house-story__text { font-size: 16px; }
	/* Phones: the first paragraph, then Lees meer. */
	.iew-house-story.is-collapsible:not(.is-open) .iew-house-story__more { display: none; }
	.iew-house-story.is-collapsible:not(.is-open) .iew-house-story__text > p:first-child { margin-bottom: 0; }
	.iew-house-story.is-collapsible .iew-house-story__toggle { margin-top: 8px; }

	.iew-house-card { padding: 16px 16px 8px; gap: 14px; }
	.iew-house-card__logo { flex-basis: 52px; width: 52px; height: 52px; }
	.iew-product .iew-house-card__title { font-size: 20px; }
}
@media (min-width: 768px) {
	/* The story's Lees meer is for phones only; wider screens show the whole story. */
	.iew-house-story .iew-house-story__toggle { display: none; }
}