/* About page (/over-ons/, page-over-ons.php), made of the guest homepage's parts (home-catalogus.css):
   the title over the gold pattern with the white services panel, white cards like "Nieuw" and "Nieuws",
   the region block for Ian's story and the two doors at the foot. Paper, hairlines, gold only on the
   primary button (HOMEPAGE-BESLUITEN 6.1). Scoped to .iew-oo; tokens come from design-system.css. */

body.iew-over-ons-page { background-color: var(--iew-paper); }
body main.iew-oo.site-main { max-width: none; width: 100%; margin: 0; padding: 0; }
.iew-oo {
	--oo-gap: 24px;
	--oo-line: #E2DED3;
	--oo-head: var(--iew-font-heading);
	--oo-ui: var(--iew-font-sans);
	--oo-ease: cubic-bezier(.2, .7, .2, 1);
	color: var(--iew-ink-900);
	font-family: var(--oo-ui);
}
.iew-oo *, .iew-oo *::before, .iew-oo *::after { box-sizing: border-box; }
.iew-oo__page { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.iew-oo .iew-oo__lbl { display: block; margin: 0; font: 600 12px/1.3 var(--oo-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--iew-gold-600); }
.iew-oo .woocommerce-breadcrumb { margin: 0 0 28px; font-size: var(--iew-text-sm); color: var(--iew-ink-500); }
.iew-oo .woocommerce-breadcrumb a { color: var(--iew-ink-500); text-decoration: none; }
.iew-oo .woocommerce-breadcrumb a:hover { color: var(--iew-olive-900); }
.iew-oo [id] { scroll-margin-top: 120px; }

/* ---------- buttons (as on the homepage) ---------- */
.iew-oo .iew-oo__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	font: 700 12px/1 var(--oo-ui); letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
	padding: 15px 24px; border-radius: 2px; border: 1.5px solid transparent; cursor: pointer;
	transition: background .22s var(--oo-ease), color .22s;
}
.iew-oo .iew-oo__btn--primary { background: var(--iew-gold-500); color: var(--iew-olive-900); }
.iew-oo .iew-oo__btn--primary:hover { background: var(--iew-gold-400); color: var(--iew-olive-900); }
.iew-oo .iew-oo__btn--link { padding: 4px 0; border: 0; border-bottom: 1.5px solid var(--iew-gold-500); border-radius: 0; color: var(--iew-olive-700); letter-spacing: .12em; }
.iew-oo .iew-oo__btn--link:hover { color: var(--iew-olive-900); }

/* ---------- title and team panel over the gold icon pattern ---------- */
.iew-oo__hero {
	position: relative; isolation: isolate;
	display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--oo-gap); align-items: start;
	padding: 32px 0 64px;
}
.iew-oo__hero::before {
	content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1;
	background: var(--iew-paper) url("../img/home-catalogus/patroon-licht.svg"); background-size: 320px;
}
.iew-oo__h { grid-column: 1 / 8; display: flex; flex-direction: column; }
.iew-oo__h .iew-oo__lbl { margin-bottom: 18px; }
.iew-oo .iew-oo__h h1 { margin: 0; font: 400 clamp(44px, 5.6vw, 80px)/1.02 var(--oo-head); letter-spacing: -.015em; color: var(--iew-olive-900); text-wrap: balance; }
.iew-oo__h h1 span { color: var(--iew-gold-500); }
.iew-oo .iew-oo__intro { margin: 24px 0 0; padding-right: 8%; font: 400 16px/1.7 var(--oo-ui); color: var(--iew-ink-700); }

.iew-oo__panel {
	grid-column: 8 / 13; position: relative; overflow: hidden; display: flex; flex-direction: column;
	margin-top: 46px; padding: 8px 0 0; border-radius: 4px;
	background: radial-gradient(110% 60% at 100% 0%, rgba(241, 187, 71, .14), transparent 62%), #fff;
}
.iew-oo__index { margin: 0; padding: 0; list-style: none; }
.iew-oo__index li { position: relative; margin: 0; }
.iew-oo__index li + li::before { content: ""; position: absolute; left: 30px; right: 30px; top: 0; border-top: 1px solid var(--iew-ink-100); }
.iew-oo .iew-oo__index a {
	display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; row-gap: 1px; align-items: center;
	padding: 9px 30px; color: inherit; text-decoration: none; transition: background .25s var(--oo-ease);
}
.iew-oo .iew-oo__face { grid-column: 1; grid-row: 1 / 3; display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.iew-oo__index b { grid-column: 2; grid-row: 1; align-self: end; font: 500 18px/1.2 var(--oo-head); color: var(--iew-olive-900); }
.iew-oo__index span { grid-column: 2; grid-row: 2; align-self: start; font: 400 13px/1.4 var(--oo-ui); color: var(--iew-ink-500); }
.iew-oo .iew-oo__index a:hover { background: var(--iew-paper); color: inherit; }
.iew-oo__index a:focus-visible { outline: 2px solid var(--iew-olive-700); outline-offset: -4px; }
.iew-oo__foot { display: flex; align-items: center; margin-top: 8px; padding: 15px 30px 17px; background: var(--iew-paper-2); font: 500 13.5px/1.6 var(--oo-ui); color: var(--iew-ink-700); }
.iew-oo .iew-oo__foot a { color: var(--iew-olive-700); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid var(--iew-gold-500); }
.iew-oo__icon { flex: none; width: 22px; height: 22px; margin-right: 10px; color: var(--iew-gold-600); --iw-accent: currentColor; --iw-detail: currentColor; }

/* ---------- the team: the group photo, then a card each, as the homepage's "Nieuw" band ---------- */
.iew-oo__team { --oo-band: #FCFCFB; position: relative; padding: 56px 0 64px; background: var(--oo-band); box-shadow: 0 0 0 100vmax var(--oo-band); clip-path: inset(0 -100vmax); }
.iew-oo__photo { margin: 0; }
.iew-oo .iew-oo__photo img { display: block; width: 100%; height: auto; aspect-ratio: 2500 / 1250; object-fit: cover; object-position: 50% 42%; border-radius: 2px; }
.iew-oo__sec { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 56px 0 20px; }
.iew-oo .iew-oo__sec h2 { margin: 0; font: 400 34px/1.1 var(--oo-head); color: var(--iew-olive-900); }
.iew-oo__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--oo-gap); margin: 0; padding: 0; list-style: none; }
.iew-oo__card { display: flex; flex-direction: column; min-width: 0; margin: 0; background: #fff; border-radius: 2px; }
.iew-oo__pim { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--iew-paper-2); }
.iew-oo .iew-oo__pim img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.iew-oo__ptx { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 20px 20px; }
.iew-oo__k { font: 700 10px/1.4 var(--oo-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--iew-gold-600); }
.iew-oo .iew-oo__card h3 { margin: 0; font: 400 22px/1.2 var(--oo-head); color: var(--iew-olive-900); }
.iew-oo .iew-oo__card p { margin: 2px 0 0; font: 400 14.5px/1.6 var(--oo-ui); color: var(--iew-ink-700); }
.iew-oo .iew-oo__p { margin-top: auto; padding-top: 14px; font: 600 10.5px/1.4 var(--oo-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--iew-olive-700); text-decoration: none; }
.iew-oo .iew-oo__p:hover { color: var(--iew-olive-900); }
.iew-oo__p:focus-visible, .iew-oo__jobs a:focus-visible { outline: 2px solid var(--iew-olive-700); outline-offset: 3px; }

/* Lees meer (over-ons.js), as on the wine house pages: Ian's story folds to its first paragraph. Without
   the script the whole story shows. */
.iew-oo__lead.is-collapsible:not(.is-open) .iew-oo__more { display: none; }
.iew-oo .iew-oo__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: 600 15px/1.3 var(--oo-ui); letter-spacing: normal; text-transform: none;
	color: var(--iew-olive-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.iew-oo .iew-oo__toggle[hidden] { display: none; }
.iew-oo .iew-oo__toggle:hover, .iew-oo .iew-oo__toggle:focus { background: none; color: var(--iew-olive-900); }
.iew-oo .iew-oo__toggle:focus-visible { outline: 2px solid var(--iew-gold-500); outline-offset: 2px; border-radius: var(--iew-radius-xs); }

/* the last card: the olive panel with the vineyard rows of the homepage's news cards, and the werken-bij icon */
.iew-oo__card--join .iew-oo__pim { display: grid; place-items: center; background: var(--iew-olive-900) url("../img/home-catalogus/wijngaard-lijn-nacht.svg") 0 0 / 640px 640px; }
.iew-oo__mark { width: 34%; height: 34%; color: var(--iew-gold-500); --iw-accent: currentColor; --iw-detail: currentColor; }
.iew-oo__jobs { margin: 8px 0 0; padding: 0; list-style: none; }
.iew-oo .iew-oo__jobs a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--oo-line); font: 600 14px/1.4 var(--oo-ui); color: var(--iew-ink-900); text-decoration: none; }
.iew-oo__jobs a::after { content: "\2192"; color: var(--iew-gold-600); }
.iew-oo .iew-oo__jobs a:hover { color: var(--iew-olive-700); }

/* ---------- Ian's story: the homepage's region block (text and quote left, index right) ---------- */
.iew-oo__story { padding-bottom: 8px; }
.iew-oo__idx { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--oo-gap); }
.iew-oo__lead { grid-column: 1 / 8; padding: 6px 8% 0 0; }
.iew-oo .iew-oo__lead p { margin: 0 0 1em; font: 400 16px/1.7 var(--oo-ui); color: var(--iew-ink-700); }
.iew-oo .iew-oo__lead blockquote { margin: 24px 0 0; padding: 18px 20px; border: 0; background: var(--iew-paper-2); font: italic 400 19px/1.55 var(--oo-head); color: var(--iew-olive-900); }
.iew-oo__lead cite { display: block; margin-top: 10px; font: 700 10px var(--oo-ui); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--iew-gold-600); }
.iew-oo__facts { grid-column: 8 / 13; }
.iew-oo .iew-oo__facts .iew-oo__lbl { margin: 6px 0 4px; }
.iew-oo__facts ol { margin: 0; padding: 0; list-style: none; }
.iew-oo__facts li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--oo-line); font: 600 14px/1.4 var(--oo-ui); color: var(--iew-ink-900); }
.iew-oo__facts li b { flex: none; font-weight: 700; color: var(--iew-gold-600); }

/* ---------- two doors: contact, and becoming a customer ---------- */
.iew-oo__doors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--oo-gap); margin: 72px 0; }
.iew-oo__doors > div { padding: 38px 34px 42px; background: var(--iew-paper-2); }
.iew-oo__doors > div + div { background: var(--iew-gold-100); }
.iew-oo__doors .iew-oo__lbl { margin-bottom: 12px; }
.iew-oo .iew-oo__doors h2 { margin: 0 0 12px; font: 500 32px/1.15 var(--oo-head); color: var(--iew-olive-900); }
.iew-oo .iew-oo__doors p { max-width: 500px; margin: 0 0 24px; font: 400 16px/1.7 var(--oo-ui); color: var(--iew-ink-700); }
.iew-oo .iew-oo__doors p a { color: var(--iew-olive-700); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--iew-gold-500); }
.iew-oo .iew-oo__doors .iew-oo__reg { margin: 0; font-size: 13.5px; color: var(--iew-ink-500); font-variant-numeric: tabular-nums; }

/* ---------- tablet and phone ---------- */
@media (max-width: 1000px) {
	.iew-oo__page { padding: 0 18px; }
	.iew-oo__hero, .iew-oo__idx { grid-template-columns: 1fr; column-gap: 0; }
	.iew-oo__hero { padding: 20px 0 40px; }
	.iew-oo__h, .iew-oo__panel, .iew-oo__lead, .iew-oo__facts { grid-column: 1 / -1; }
	.iew-oo__panel { margin-top: 32px; }
	.iew-oo__team { padding-top: 40px; }
	.iew-oo__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.iew-oo__lead { padding: 0 0 24px; }
	.iew-oo__doors { grid-template-columns: 1fr; margin: 56px 0; }
}
@media (max-width: 1000px) and (min-width: 561px) {
	/* the seven team rows as two columns, so the panel doesn't get taller than the screen */
	.iew-oo__index { display: grid; grid-template-columns: 1fr 1fr; }
	.iew-oo__index li:nth-child(2)::before { display: none; }
}
@media (max-width: 560px) {
	.iew-oo .iew-oo__h h1 { font-size: 40px; }
	.iew-oo .iew-oo__intro { padding-right: 0; }
	.iew-oo .iew-oo__index a { padding: 8px 22px; }
	.iew-oo__index li + li::before { left: 22px; right: 22px; }
	.iew-oo__foot { padding: 14px 22px 16px; }
	.iew-oo .iew-oo__photo img { aspect-ratio: 3 / 2; }
	.iew-oo__sec { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 40px; }
	/* one card per row, the photo beside the name as the homepage's news on phones */
	.iew-oo__cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.iew-oo__card { display: grid; grid-template-columns: 108px minmax(0, 1fr); grid-template-rows: 54px 54px auto; }
	.iew-oo__pim { grid-column: 1; grid-row: 1 / 3; }
	.iew-oo__ptx { display: contents; }
	.iew-oo__k { grid-column: 2; grid-row: 1; align-self: end; padding: 0 14px 2px; }
	.iew-oo .iew-oo__card h3 { grid-column: 2; grid-row: 2; align-self: start; padding: 0 14px; font-size: 20px; }
	.iew-oo .iew-oo__card p, .iew-oo .iew-oo__p, .iew-oo__jobs { grid-column: 1 / -1; margin-left: 14px; margin-right: 14px; }
	.iew-oo .iew-oo__card p { margin-top: 12px; font-size: 14px; }
	.iew-oo .iew-oo__p { padding-bottom: 16px; }
	.iew-oo .iew-oo__ptx > p:last-child { margin-bottom: 16px; } /* a card without mail link (Marco) */
	.iew-oo__card--join .iew-oo__jobs { margin-bottom: 16px; }
	.iew-oo .iew-oo__doors h2 { font-size: 26px; }
	.iew-oo__doors > div { padding: 28px 22px 30px; }
	.iew-oo__doors .iew-oo__btn--primary { width: 100%; }
}