/*
 * Designed page sections.
 *
 * Loaded on the front page and on pages using template-canvas.php.
 *
 * These styles attach to className values carried by the block patterns in
 * inc/block-patterns.php. Structure and decoration (rules, icons, overlaps,
 * bleeds) live here so the client can rewrite every word in the editor without
 * being able to delete the design.
 *
 * Prefix: .vg- (Veneta George) for pattern sections, to keep them clearly apart
 * from the theme's reusable .myco- primitives.
 */

/* ---------------------------------------------------------------- Canvas ---- */

.page-canvas {
	background: var(--myco-color-bg);
}

/* Blocks default to the content width; wide/full opt out via alignment. */
.page-canvas > .entry-content > * {
	width: min(calc(100% - 2rem), var(--myco-container));
	margin-inline: auto;
}

.page-canvas > .entry-content > .alignwide {
	width: min(calc(100% - 2rem), var(--myco-container-wide));
}

.page-canvas > .entry-content > .alignfull {
	width: 100%;
	max-width: none;
}

/* ------------------------------------------------------------------ Hero ---- */

/*
 * Split hero: copy left, image bleeding to the right edge. Below 900px it stacks
 * with the image first so the page still opens on a face.
 */
.vg-hero {
	background: var(--myco-color-surface);
}

/*
 * Core forces `flex-wrap: nowrap !important` on .wp-block-columns from 782px up,
 * which would jam multi-column sections into slivers on tablets. Switching the
 * container to grid sidesteps that entirely — flex-wrap and the columns'
 * inline flex-basis are inert in a grid formatting context — so the theme
 * controls the breakpoints without needing its own !important.
 */
.vg-hero.wp-block-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin-block: 0;
	align-items: stretch;
}

.vg-hero .wp-block-column {
	padding: var(--myco-space-3xl) var(--myco-space-md);
}

.vg-hero__media.wp-block-column {
	padding: 0;
	align-self: stretch;
}

.vg-hero__media img,
.vg-hero__media figure {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.vg-hero__media figure {
	display: block;
	min-height: 22rem;
}

.vg-hero h1 {
	margin-bottom: var(--myco-space-lg);
	font-size: var(--myco-font-size-3xl);
	text-transform: uppercase;
}

/* Second line of the headline in rose — pattern marks it with .has-accent-strong-color. */
.vg-hero h1 .vg-accent,
.vg-accent {
	color: var(--myco-color-accent-strong);
}

.vg-hero__lead {
	max-width: 34rem;
	margin-bottom: var(--myco-space-xl);
	color: var(--myco-color-muted);
	font-size: var(--myco-font-size-lg);
}

.vg-hero__lead strong {
	color: var(--myco-color-text);
}

/* Dot-separated keyword row. */
.vg-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--myco-space-md);
	margin-bottom: var(--myco-space-xl);
	color: var(--myco-color-text);
	font-size: var(--myco-font-size-xs);
	font-weight: 600;
	letter-spacing: var(--myco-tracking-wide);
	text-transform: uppercase;
}

.vg-tags > * {
	display: flex;
	align-items: center;
	gap: var(--myco-space-md);
	margin: 0;
}

.vg-tags > *:not(:last-child)::after {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: var(--myco-radius-pill);
	background: var(--myco-color-accent);
}

@media (min-width: 900px) {
	.vg-hero.wp-block-columns {
		grid-template-columns: 52fr 48fr;
	}

	.vg-hero .wp-block-column {
		padding: var(--myco-space-5xl) var(--myco-space-3xl);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.vg-hero__copy.wp-block-column {
		padding-left: max(var(--myco-space-xl), calc((100vw - var(--myco-container)) / 2));
	}

	.vg-hero__media.wp-block-column {
		padding: 0;
	}

	.vg-hero__media figure {
		min-height: 100%;
	}
}

/* --------------------------------------------------------------- Pillars ---- */

/*
 * Five-column feature strip on a white card that overlaps the hero band above.
 * The negative margin is only applied where there is room for it.
 */
.vg-pillars {
	position: relative;
	padding-block: var(--myco-space-2xl);
	background: linear-gradient(
		to bottom,
		var(--myco-color-surface) 0,
		var(--myco-color-surface) 4rem,
		var(--myco-color-bg) 4rem,
		var(--myco-color-bg) 100%
	);
}

.vg-pillars__card {
	width: min(calc(100% - 2rem), var(--myco-container-wide));
	margin-inline: auto;
	padding: var(--myco-space-2xl) var(--myco-space-xl);
	background: var(--myco-color-bg);
	box-shadow: var(--myco-shadow-card);
}

/* Grid, not flex — see the note on the hero about core's nowrap !important. */
.vg-pillars__card.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--myco-space-xl);
	margin-block: 0;
}

.vg-pillars .wp-block-column {
	text-align: center;
}

.vg-pillars h3 {
	margin-bottom: var(--myco-space-sm);
	color: var(--myco-color-accent-strong);
	font-family: var(--myco-font-sans);
	font-size: var(--myco-font-size-xs);
	font-weight: 600;
	letter-spacing: var(--myco-tracking-wide);
	text-transform: uppercase;
}

.vg-pillars p {
	margin: 0;
	color: var(--myco-color-muted);
	font-size: var(--myco-font-size-sm);
}

/*
 * Icons are drawn from the theme's SVG files as CSS masks, so they inherit the
 * accent color and cannot be deleted from the editor.
 */
.vg-pillars .wp-block-column::before {
	content: "";
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 auto var(--myco-space-md);
	background: var(--myco-color-accent-strong);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.vg-pillars .vg-icon-jaw::before {
	-webkit-mask-image: url("../images/icon-jaw.svg");
	mask-image: url("../images/icon-jaw.svg");
}

.vg-pillars .vg-icon-breathing::before {
	-webkit-mask-image: url("../images/icon-breathing.svg");
	mask-image: url("../images/icon-breathing.svg");
}

.vg-pillars .vg-icon-tongue::before {
	-webkit-mask-image: url("../images/icon-tongue.svg");
	mask-image: url("../images/icon-tongue.svg");
}

.vg-pillars .vg-icon-habits::before {
	-webkit-mask-image: url("../images/icon-habits.svg");
	mask-image: url("../images/icon-habits.svg");
}

.vg-pillars .vg-icon-smile::before {
	-webkit-mask-image: url("../images/icon-smile.svg");
	mask-image: url("../images/icon-smile.svg");
}

@media (min-width: 782px) {
	.vg-pillars {
		padding-block: 0 var(--myco-space-4xl);
		background: linear-gradient(
			to bottom,
			var(--myco-color-surface) 0,
			var(--myco-color-surface) 6rem,
			var(--myco-color-bg) 6rem,
			var(--myco-color-bg) 100%
		);
	}

	.vg-pillars__card {
		padding: var(--myco-space-2xl);
	}
}

/* -------------------------------------------------------------- Approach ---- */

.vg-approach {
	padding-block: var(--myco-space-4xl);
	background: var(--myco-color-bg);
}

.vg-approach.wp-block-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--myco-space-2xl);
	align-items: center;
	margin-inline: auto;
}

@media (min-width: 900px) {
	.vg-approach.wp-block-columns {
		grid-template-columns: 38fr 38fr 24fr;
	}
}

/*
 * Decorative still-life. Hidden below the two-column breakpoint: on a phone it
 * would push the actual copy down a full screen for no informational gain.
 */
.vg-approach__decor {
	display: none;
}

.vg-approach__decor figure,
.vg-approach__decor img {
	margin: 0;
	width: 100%;
	height: auto;
}

@media (min-width: 900px) {
	.vg-approach__decor {
		display: block;
	}
}

.vg-approach h2 {
	font-size: var(--myco-font-size-2xl);
	text-transform: uppercase;
}

.vg-approach p {
	color: var(--myco-color-muted);
	font-size: var(--myco-font-size-lg);
}

/* -------------------------------------------------------------- Services ---- */

.vg-services {
	padding-block: var(--myco-space-4xl);
	background: var(--myco-color-bg);
}

/*
 * Width is set here, not with .alignwide.
 *
 * These grids sit inside an .alignfull group, which core renders as
 * .is-layout-constrained — and that layout forces `margin-left/right: auto
 * !important` on its children. main.css's .alignwide widening trick
 * (margin-inline:50% + translateX(-50%)) loses its margins to that !important
 * but keeps the transform, so the block ends up shifted half its width to the
 * left. Sizing the grid directly avoids the conflict entirely.
 */
.vg-services__grid.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--myco-space-xl);
	width: min(100%, var(--myco-container-wide));
	margin-block: var(--myco-space-xl);
	margin-inline: auto;
}

.vg-service-card {
	padding: var(--myco-space-xl);
	background: var(--myco-color-bg);
	border: 1px solid var(--myco-color-border);
	transition: border-color var(--myco-transition), transform var(--myco-transition);
}

.vg-service-card:hover {
	border-color: var(--myco-color-accent);
	transform: translateY(-4px);
}

.vg-service-card h3 {
	margin-bottom: var(--myco-space-md);
	font-size: var(--myco-font-size-xl);
}

.vg-service-card p {
	margin: 0;
	color: var(--myco-color-muted);
}

/*
 * Icon per service card, drawn as a CSS mask from the theme's SVGs — same
 * technique as the pillars, so the icon inherits the accent colour and cannot be
 * deleted from the editor.
 */
.vg-service-card::before {
	content: "";
	display: block;
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: var(--myco-space-lg);
	background: var(--myco-color-accent-strong);
	-webkit-mask-position: left center;
	mask-position: left center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.vg-service-card.vg-icon-jaw::before {
	-webkit-mask-image: url("../images/icon-jaw.svg");
	mask-image: url("../images/icon-jaw.svg");
}

.vg-service-card.vg-icon-breathing::before {
	-webkit-mask-image: url("../images/icon-breathing.svg");
	mask-image: url("../images/icon-breathing.svg");
}

.vg-service-card.vg-icon-tongue::before {
	-webkit-mask-image: url("../images/icon-tongue.svg");
	mask-image: url("../images/icon-tongue.svg");
}

.vg-service-card.vg-icon-habits::before {
	-webkit-mask-image: url("../images/icon-habits.svg");
	mask-image: url("../images/icon-habits.svg");
}

.vg-service-card.vg-icon-smile::before {
	-webkit-mask-image: url("../images/icon-smile.svg");
	mask-image: url("../images/icon-smile.svg");
}

.vg-service-card.vg-icon-retention::before {
	-webkit-mask-image: url("../images/icon-retention.svg");
	mask-image: url("../images/icon-retention.svg");
}

/* "Who is this for" — the line that answers a parent's first question. */
.vg-service-card__for {
	margin-bottom: var(--myco-space-sm);
	color: var(--myco-color-accent-strong);
	font-size: var(--myco-font-size-xs);
	font-weight: 600;
	letter-spacing: var(--myco-tracking-wide);
	text-transform: uppercase;
}

/* --------------------------------------------------------------- Results ---- */

/*
 * Before/after. Each case is a single side-by-side JPEG, so the caption carries
 * the "преди / след" labelling rather than a CSS split.
 */
.vg-results {
	padding-block: var(--myco-space-4xl);
	background: var(--myco-color-bg);
}

/* Own width, not .alignwide — see the note on .vg-services__grid. */
.vg-results__grid.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--myco-space-xl);
	align-items: center;
	width: min(100%, var(--myco-container-wide));
	margin-block: var(--myco-space-2xl);
	margin-inline: auto;
}

.vg-results figure {
	margin: 0;
	background: var(--myco-color-surface);
}

.vg-results img {
	display: block;
	width: 100%;
	height: auto;
}

.vg-results figcaption {
	padding: var(--myco-space-md);
	color: var(--myco-color-muted);
	font-size: var(--myco-font-size-sm);
	text-align: center;
}

/* -------------------------------------------------------------- Contact ----- */

/*
 * Contact: full-bleed clinic photo with an overlay card. The overlay only floats
 * on wide screens; on mobile the card sits below the image.
 */
.vg-contact {
	position: relative;
	background: var(--myco-color-surface);
}

.vg-contact.wp-block-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin-block: 0;
	align-items: stretch;
}

.vg-contact__panel.wp-block-column {
	padding: var(--myco-space-3xl) var(--myco-space-md);
	background: var(--myco-color-bg);
}

.vg-contact__media.wp-block-column {
	padding: 0;
}

.vg-contact__media figure {
	display: block;
	min-height: 20rem;
	height: 100%;
	margin: 0;
}

.vg-contact__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vg-contact h1 {
	text-transform: uppercase;
}

.vg-contact__lead {
	max-width: 26rem;
	color: var(--myco-color-muted);
}

/* Contact rows: pink circular icon badge, divider, label + value. */
.vg-contact-list {
	display: grid;
	gap: var(--myco-space-lg);
	margin: var(--myco-space-xl) 0;
	padding: 0;
	list-style: none;
}

.vg-contact-list li {
	display: grid;
	grid-template-columns: auto 1px 1fr;
	align-items: center;
	gap: var(--myco-space-lg);
}

/*
 * Pink circular icon badge. The glyph is a centred CSS mask over the circle, so
 * the icon is decoration the editor cannot remove.
 */
.vg-contact-list li::before {
	content: "";
	width: 3rem;
	height: 3rem;
	border-radius: var(--myco-radius-pill);
	background: var(--myco-color-accent-soft);
	background-image: var(--vg-icon);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.35rem;
}

.vg-contact-list .vg-icon-pin {
	--vg-icon: url("../images/icon-pin.svg");
}

.vg-contact-list .vg-icon-phone {
	--vg-icon: url("../images/icon-phone.svg");
}

.vg-contact-list .vg-icon-mail {
	--vg-icon: url("../images/icon-mail.svg");
}

.vg-contact-list .vg-icon-instagram {
	--vg-icon: url("../images/icon-instagram.svg");
}

.vg-contact-list li::after {
	content: "";
	grid-column: 2;
	grid-row: 1;
	width: 1px;
	height: 2.5rem;
	background: var(--myco-color-border);
}

.vg-contact-list__body {
	grid-column: 3;
}

.vg-contact-list__label {
	display: block;
	margin-bottom: var(--myco-space-2xs);
	color: var(--myco-color-muted);
	font-size: var(--myco-font-size-xs);
	font-weight: 600;
	letter-spacing: var(--myco-tracking-wide);
	text-transform: uppercase;
}

.vg-contact-list a {
	text-decoration: none;
}

.vg-contact-list a:hover {
	text-decoration: underline;
}

.vg-contact__actions {
	display: grid;
	gap: var(--myco-space-md);
	max-width: 22rem;
}

@media (min-width: 900px) {
	.vg-contact.wp-block-columns {
		grid-template-columns: 46fr 54fr;
	}

	.vg-contact__panel.wp-block-column {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: var(--myco-space-4xl) var(--myco-space-3xl);
		padding-left: max(var(--myco-space-3xl), calc((100vw - var(--myco-container)) / 2));
	}
}

/* ------------------------------------------------------------------ CTA ----- */

.vg-cta {
	padding-block: var(--myco-space-4xl);
	background: var(--myco-color-surface);
	text-align: center;
}

.vg-cta h2 {
	max-width: 24ch;
	margin-inline: auto;
	font-size: var(--myco-font-size-2xl);
}

.vg-cta p {
	max-width: 46ch;
	margin-inline: auto;
	margin-bottom: var(--myco-space-xl);
	color: var(--myco-color-muted);
}

.vg-cta .section-eyebrow {
	justify-content: center;
}

.vg-cta .section-eyebrow::after {
	display: none;
}

/* ----------------------------------------------------------- About / text --- */

.vg-about {
	background: var(--myco-color-bg);
}

.vg-about.wp-block-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin-block: 0;
	align-items: stretch;
}

.vg-about__copy.wp-block-column {
	padding: var(--myco-space-3xl) var(--myco-space-md);
}

.vg-about__media.wp-block-column {
	padding: 0;
}

.vg-about__media figure {
	display: block;
	min-height: 22rem;
	height: 100%;
	margin: 0;
}

.vg-about__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vg-about h1 {
	margin-bottom: var(--myco-space-lg);
}

.vg-about p {
	max-width: 34rem;
	color: var(--myco-color-muted);
}

@media (min-width: 900px) {
	.vg-about.wp-block-columns {
		grid-template-columns: 52fr 48fr;
	}

	.vg-about__copy.wp-block-column {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: var(--myco-space-4xl) var(--myco-space-3xl);
		padding-left: max(var(--myco-space-3xl), calc((100vw - var(--myco-container)) / 2));
	}
}

/* ---------------------------------------------------------- Credentials ---- */

.vg-credentials {
	padding-block: var(--myco-space-2xl);
	background: var(--myco-color-accent-soft);
}

.vg-credentials__grid.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: var(--myco-space-xl);
	width: min(calc(100% - 2rem), var(--myco-container-wide));
	margin-block: 0;
	margin-inline: auto;
	text-align: center;
}

.vg-fact h3 {
	margin-bottom: var(--myco-space-2xs);
	color: var(--myco-color-accent-strong);
	font-size: var(--myco-font-size-2xl);
	line-height: 1;
}

.vg-fact p {
	margin: 0;
	color: var(--myco-color-muted);
	font-size: var(--myco-font-size-xs);
	font-weight: 600;
	letter-spacing: var(--myco-tracking-wide);
	text-transform: uppercase;
}

/* -------------------------------------------------------------- Process ---- */

/*
 * Treatment journey. Step numbers come from a CSS counter rather than the
 * content, so the client can delete or reorder a step in the editor and the
 * numbering stays correct.
 */
.vg-process {
	padding-block: var(--myco-space-4xl);
	background: var(--myco-color-surface);
	text-align: center;
	counter-reset: vg-step;
}

.vg-process__lead {
	max-width: 52ch;
	margin-inline: auto;
	color: var(--myco-color-muted);
	font-size: var(--myco-font-size-lg);
}

.vg-process .section-eyebrow {
	justify-content: center;
}

.vg-process .section-eyebrow::after {
	display: none;
}

.vg-process__grid.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--myco-space-xl);
	width: min(100%, var(--myco-container-wide));
	margin-block: var(--myco-space-2xl) 0;
	margin-inline: auto;
	text-align: left;
}

.vg-step {
	position: relative;
	padding-top: var(--myco-space-xl);
	border-top: 1px solid var(--myco-color-border);
}

.vg-step::before {
	counter-increment: vg-step;
	content: counter(vg-step, decimal-leading-zero);
	position: absolute;
	top: var(--myco-space-md);
	left: 0;
	color: var(--myco-color-accent-strong);
	font-family: var(--myco-font-display);
	font-size: var(--myco-font-size-xl);
	line-height: 1;
}

.vg-step h3 {
	margin-top: var(--myco-space-2xl);
	margin-bottom: var(--myco-space-sm);
	font-family: var(--myco-font-sans);
	font-size: var(--myco-font-size-xs);
	font-weight: 600;
	letter-spacing: var(--myco-tracking-wide);
	text-transform: uppercase;
}

.vg-step p {
	margin: 0;
	color: var(--myco-color-muted);
	font-size: var(--myco-font-size-sm);
}

/* --------------------------------------------------------- Testimonials ---- */

.vg-testimonials {
	padding-block: var(--myco-space-4xl);
	background: var(--myco-color-bg);
	text-align: center;
}

.vg-testimonials .section-eyebrow {
	justify-content: center;
}

.vg-testimonials .section-eyebrow::after {
	display: none;
}

.vg-testimonials__grid.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--myco-space-xl);
	width: min(100%, var(--myco-container-wide));
	margin-block: var(--myco-space-2xl) 0;
	margin-inline: auto;
	text-align: left;
}

.vg-quote {
	position: relative;
	padding: var(--myco-space-2xl) var(--myco-space-xl) var(--myco-space-xl);
	background: var(--myco-color-surface);
}

/* Decorative opening quote — CSS, so it survives any content edit. */
.vg-quote::before {
	content: "\201C";
	position: absolute;
	top: 0;
	left: var(--myco-space-lg);
	color: var(--myco-color-accent);
	font-family: var(--myco-font-display);
	font-size: 5rem;
	line-height: 1;
}

.vg-quote__text {
	position: relative;
	margin-bottom: var(--myco-space-lg);
	font-size: var(--myco-font-size-lg);
	font-style: italic;
}

.vg-quote__author {
	margin: 0;
	color: var(--myco-color-muted);
	font-size: var(--myco-font-size-xs);
	font-weight: 600;
	letter-spacing: var(--myco-tracking-wide);
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ FAQ ---- */

/*
 * Native details/summary: no JS, keyboard accessible, and findable by the
 * browser's own in-page search even while collapsed.
 */
.vg-faq {
	padding-block: var(--myco-space-4xl);
	background: var(--myco-color-bg);
}

.vg-faq__list {
	width: min(100%, 48rem);
	margin-inline: auto;
	margin-top: var(--myco-space-2xl);
}

.vg-faq__item {
	border-bottom: 1px solid var(--myco-color-border);
}

.vg-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--myco-space-lg);
	padding-block: var(--myco-space-lg);
	color: var(--myco-color-text);
	font-family: var(--myco-font-display);
	font-size: var(--myco-font-size-lg);
	cursor: pointer;
	list-style: none;
}

/* Hide the default disclosure triangle in both engines. */
.vg-faq__item summary::-webkit-details-marker {
	display: none;
}

.vg-faq__item summary::marker {
	content: "";
}

.vg-faq__item summary:hover {
	color: var(--myco-color-accent-strong);
}

.vg-faq__item summary:focus-visible {
	outline: 2px solid var(--myco-color-accent-strong);
	outline-offset: 4px;
}

/* Plus/minus drawn with two bars; the vertical one collapses when open. */
.vg-faq__item summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.85rem;
	height: 0.85rem;
	background:
		linear-gradient(var(--myco-color-accent-strong), var(--myco-color-accent-strong)) center / 100% 1px no-repeat,
		linear-gradient(var(--myco-color-accent-strong), var(--myco-color-accent-strong)) center / 1px 100% no-repeat;
	transition: transform var(--myco-transition);
}

.vg-faq__item[open] summary::after {
	background:
		linear-gradient(var(--myco-color-accent-strong), var(--myco-color-accent-strong)) center / 100% 1px no-repeat;
	transform: rotate(180deg);
}

.vg-faq__item p {
	max-width: 62ch;
	margin: 0;
	padding-bottom: var(--myco-space-lg);
	color: var(--myco-color-muted);
}

/* ---------------------------------------------------------------- Hours ---- */

.vg-hours__list {
	margin: var(--myco-space-md) 0 0;
	padding: 0;
	list-style: none;
}

.vg-hours__list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--myco-space-md);
	padding-block: var(--myco-space-sm);
	border-bottom: 1px solid var(--myco-color-border);
}

.vg-hours__day {
	color: var(--myco-color-muted);
	font-size: var(--myco-font-size-sm);
}

.vg-hours__time {
	font-variant-numeric: tabular-nums;
}

.vg-hours__list .is-closed .vg-hours__time {
	color: var(--myco-color-muted);
}

.vg-hours h3 {
	font-family: var(--myco-font-sans);
	font-size: var(--myco-font-size-xs);
	font-weight: 600;
	letter-spacing: var(--myco-tracking-wide);
	text-transform: uppercase;
}

/* Hours + practical notes band under the contact split. */
.vg-contact-extra {
	padding-block: var(--myco-space-3xl);
	background: var(--myco-color-bg);
}

.vg-contact-extra__grid.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--myco-space-2xl);
	width: min(100%, var(--myco-container));
	margin-block: 0;
	margin-inline: auto;
}

.vg-contact-extra p {
	color: var(--myco-color-muted);
	font-size: var(--myco-font-size-sm);
}

/* ------------------------------------------------------------------ Map ---- */

.vg-map {
	background: var(--myco-color-surface);
}

.vg-map__frame {
	display: block;
	width: 100%;
	height: clamp(18rem, 40vw, 28rem);
	border: 0;
	/* The embed renders a bright map; the filter settles it into the palette. */
	filter: grayscale(0.35) contrast(0.95);
}

/* ---------------------------------------------------------------- Legal ---- */

/*
 * Long-form legal copy. Narrower measure than the design sections because this
 * is text to be read rather than scanned.
 */
.vg-legal {
	width: min(calc(100% - 2rem), 46rem);
	margin-inline: auto;
	padding-block: var(--myco-space-3xl) var(--myco-space-4xl);
}

.vg-legal h2 {
	margin-top: var(--myco-space-2xl);
	margin-bottom: var(--myco-space-md);
	font-size: var(--myco-font-size-xl);
}

.vg-legal h2:first-of-type {
	margin-top: 0;
}

.vg-legal p {
	color: var(--myco-color-muted);
}

/* Simple intro band for interior pages. */
.vg-intro {
	padding-block: var(--myco-space-4xl) var(--myco-space-2xl);
	background: var(--myco-color-surface);
	text-align: center;
}

.vg-intro h1 {
	text-transform: uppercase;
}

.vg-intro p {
	max-width: 52ch;
	margin-inline: auto;
	color: var(--myco-color-muted);
	font-size: var(--myco-font-size-lg);
}

.vg-intro .section-eyebrow {
	justify-content: center;
}

.vg-intro .section-eyebrow::after {
	display: none;
}