/*
 * bpwp/service-list — MOBILE FIRST (INV-01, component service-list).
 *
 * Base (no media query): the mobile state — single column; name, then duration and price
 * on one line; description below; booking link as a full-width button. table: one table
 * per category whose service names may wrap; a duration (number / unit) and a price (amount /
 * currency) are two explicit lines; category navigation as a wrapping row of links, or one row
 * that scrolls inside the navigation (navigationMobile scroll); the current link underlined.
 * Image frame, shape and index style per state: the base classes are mobile, the tablet- and
 * desktop- classes apply from that state up; an index badge lies on the slot image.
 * category-cards: one card per category in a single column, the slot image above the name.
 * Tablet: cards and category cards may use two columns (--bpwp-columns-tablet), list rows put
 * the price on the right, table durations and prices on one line ("10 minutes", "89 CHF"). Desktop: cards and
 * category cards up to three columns (--bpwp-columns-desktop); table: the category head (image
 * slot, index, name, description) as one unit beside its table inside wideSize; the category
 * navigation becomes a sticky sidebar. Tokens only.
 */

.bpwp-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bpwp-services__group + .bpwp-services__group {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* A category reached through the navigation lands with a small gap below the fixed header (the
   root scroll padding is the header height token; the gap keeps the category clear of it). */
.bpwp-services__group {
	scroll-margin-top: var(--wp--preset--spacing--20);
}

.bpwp-services__category {
	margin-block: 0 var(--wp--preset--spacing--30);
}

.bpwp-services__list {
	display: grid;
	gap: var(--bpwp-item-gap, var(--wp--preset--spacing--30));
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpwp-services__row {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.bpwp-services__name {
	font-weight: 600;
}

.bpwp-services__meta {
	color: var(--wp--preset--color--muted);
}

.bpwp-services__description {
	margin-block: var(--wp--preset--spacing--20) 0;
}

.bpwp-services--list .bpwp-services__item {
	padding-block-end: var(--bpwp-item-gap, var(--wp--preset--spacing--30));
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.bpwp-services--cards .bpwp-services__item {
	padding: var(--bpwp-card-padding, var(--bpwp-item-padding, var(--wp--preset--spacing--40)));
	border: var(--bpwp-card-border, 0);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--bpwp-card-background, var(--wp--preset--color--surface));
	color: var(--bpwp-card-color, var(--wp--preset--color--on-surface));
}

/* category-cards: one card per category — the slot image, the category name (a link to the page
   that lists the services, when the section names one) and optionally its description. The
   card has no surface of its own: it stands on the surface of its section. The link covers
   the whole card (its name stays the accessible name); the arrow is decorative. */
.bpwp-services--category-cards .bpwp-services__item {
	position: relative;
}

.bpwp-services--category-cards .bpwp-services__category {
	margin-block: 0 var(--wp--preset--spacing--20);
}

.bpwp-services--category-cards .bpwp-services__category-description {
	margin-block: 0;
	color: var(--wp--preset--color--muted);
}

.bpwp-services__category-link {
	color: inherit;
	text-decoration: none;
}

.bpwp-services__category-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.bpwp-services__category-link:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.bpwp-services__category-link:focus-visible {
	outline: 0;
}

.bpwp-services__category-link:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--medium);
}

.bpwp-services__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 2.75rem;
	height: 2.75rem;
	margin-block-start: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
}

.bpwp-services__more .bpwp-icon {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

/* Image slots (imageFrame, imageShape): one image per card (cards, category-cards) or category group
   (default, table), above the text at the full width of its card or group, cropped to the
   frame of the block around the media focal point. A real and a provisional image share this
   frame — replacing one by the other changes no geometry; an absent slot has no image area. */
.bpwp-services__media {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.bpwp-services__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: var(--bpwp-focal-x, 50%) var(--bpwp-focal-y, 50%);
}

.bpwp-services--image-frame-1-1 .bpwp-services__media img {
	aspect-ratio: 1;
}

.bpwp-services--image-frame-4-3 .bpwp-services__media img {
	aspect-ratio: 4 / 3;
}

.bpwp-services--image-frame-3-4 .bpwp-services__media img {
	aspect-ratio: 3 / 4;
}

.bpwp-services--image-frame-4-5 .bpwp-services__media img {
	aspect-ratio: 4 / 5;
}

.bpwp-services--image-frame-16-9 .bpwp-services__media img {
	aspect-ratio: 16 / 9;
}

.bpwp-services--image-shape-rounded .bpwp-services__media img {
	border-radius: var(--wp--custom--radius--medium);
}

/* Arch: fully rounded top corners (the radius is clamped to half the width). */
.bpwp-services--image-shape-arch .bpwp-services__media img {
	border-radius: var(--wp--custom--radius--pill) var(--wp--custom--radius--pill) 0 0;
}

.bpwp-services__booking {
	margin-block: var(--wp--preset--spacing--40) 0;
}

.bpwp-services__booking-link {
	display: block;
	text-align: center;
}

/* Index badge (indexStyle badge): the index number on the slot image of its card or group, in the
   states that use it; there the inline number of a card or group with an image is hidden (one
   visible number, both decorative). A card or group without an image keeps its inline number. */
.bpwp-services--index-inline .bpwp-services__media,
.bpwp-services--index-badge .bpwp-services__media {
	position: relative;
}

.bpwp-services__badge {
	display: none;
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--20);
	inset-inline-end: var(--wp--preset--spacing--20);
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--on-surface);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	line-height: 1;
}

.bpwp-services--index-badge .bpwp-services__badge {
	display: inline-flex;
}

.bpwp-services--index-badge .bpwp-services__media + .bpwp-services__category .bpwp-services__index {
	display: none;
}

/* Category index numbers (categoryIndex) above the category name; decorative. */
.bpwp-services__index {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0.08em;
}

.bpwp-services__category-description {
	margin-block: 0 var(--wp--preset--spacing--30);
}

/* Category navigation (categoryNavigation): in-page links, a wrapping row above the groups on
   mobile and tablet — on mobile one row that scrolls inside the navigation with navigationMobile
   scroll (never the page) — and a sticky sidebar on desktop. The link of the category in view is
   current (aria-current, set by view.js; plain anchors without it). */
.bpwp-services__nav {
	margin-block-end: var(--wp--preset--spacing--50);
}

.bpwp-services__nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpwp-services__nav-link {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	min-height: 2.75rem;
	color: inherit;
	text-decoration: none;
}

.bpwp-services__nav-link:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.bpwp-services__nav-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 2px;
}

.bpwp-services__nav-link[aria-current="true"] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

/* navigationMobile scroll: one row that does not wrap; it scrolls inside the navigation only, its
   scrollbar hidden (touch, trackpad, keyboard focus still scroll it). The padding keeps focus
   outlines inside the scroll box and the last link clear of the edge. */
.bpwp-services--nav-mobile-scroll .bpwp-services__nav-list {
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--wp--preset--spacing--20);
	padding-block: calc(var(--wp--preset--spacing--20) / 2);
	padding-inline: calc(var(--wp--preset--spacing--20) / 2) var(--wp--preset--spacing--20);
	scrollbar-width: none;
}

.bpwp-services--nav-mobile-scroll .bpwp-services__nav-list::-webkit-scrollbar {
	display: none;
}

.bpwp-services--nav-mobile-scroll .bpwp-services__nav-list > li {
	flex: none;
	scroll-snap-align: start;
}

.bpwp-services--nav-mobile-scroll .bpwp-services__nav-link {
	white-space: nowrap;
}

/* table: one table card per category; the service name is the row header. On mobile the
   service name wraps, so the table never overflows (A11Y-14); durations and prices take two
   explicit lines instead of wrapping. */
.bpwp-services--table .bpwp-services__group + .bpwp-services__group {
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.bpwp-services__table-wrap {
	padding: var(--bpwp-card-padding, var(--wp--preset--spacing--20) var(--wp--preset--spacing--30));
	border: var(--bpwp-card-border, 0);
	border-radius: var(--wp--custom--radius--large);
	background-color: var(--bpwp-card-background, var(--wp--preset--color--surface));
	color: var(--bpwp-card-color, var(--wp--preset--color--on-surface));
}

.bpwp-services__table {
	width: 100%;
	border-collapse: collapse;
}

.bpwp-services__table th,
.bpwp-services__table td {
	padding: var(--bpwp-row-padding, var(--wp--preset--spacing--20)) 0;
	border-block-end: 1px solid var(--wp--preset--color--border);
	text-align: start;
	vertical-align: top;
	overflow-wrap: normal;
}

.bpwp-services__table tbody tr:last-child > * {
	border-block-end: 0;
}

.bpwp-services__table thead th {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Only a service name may break inside a word (a long runtime name must never overflow);
   column labels break between words only; durations and prices do not break (two lines). */
.bpwp-services__table tbody th {
	font-weight: 400;
	overflow-wrap: anywhere;
}

.bpwp-services__table .bpwp-services__duration,
.bpwp-services__table .bpwp-services__price {
	padding-inline-start: var(--wp--preset--spacing--20);
	text-align: end;
}

.bpwp-services__table .bpwp-services__description {
	display: block;
	font-size: var(--wp--preset--font-size--small);
}

/* Duration and price as two layout units on mobile — the number (amount) on the first line,
   the unit (currency) on the second — never produced by word wrapping: each line is one
   element that does not break. */
.bpwp-services__table .bpwp-services__value,
.bpwp-services__table .bpwp-services__unit,
.bpwp-services__table .bpwp-services__currency {
	display: block;
	white-space: nowrap;
}

/* Semantic presentation controls (components.md rule 19, AD-82): a human override of one block
   instance adds one modifier class to its wrapper; the class sets instance-scoped custom properties
   that the rules above read, each falling back to the token of the design. No override = no class:
   the block renders exactly as designed. Nothing here changes a global token or another block.
   density: --bpwp-item-gap (between records), --bpwp-item-padding (inside a card),
   --bpwp-row-padding (a table row). cardStyle (cards, table): --bpwp-card-background, -color,
   -border, -padding. */
.bpwp-services.bpwp-density--compact {
	--bpwp-item-gap: var(--wp--preset--spacing--20);
	--bpwp-item-padding: var(--wp--preset--spacing--30);
	--bpwp-row-padding: calc(var(--wp--preset--spacing--20) / 2);
}

.bpwp-services.bpwp-density--spacious {
	--bpwp-item-gap: var(--wp--preset--spacing--50);
	--bpwp-item-padding: var(--wp--preset--spacing--50);
	--bpwp-row-padding: var(--wp--preset--spacing--30);
}

.bpwp-services.bpwp-card--subtle {
	--bpwp-card-background: var(--wp--preset--color--surface);
	--bpwp-card-color: var(--wp--preset--color--on-surface);
	--bpwp-card-border: 0;
}

.bpwp-services.bpwp-card--bordered {
	--bpwp-card-background: transparent;
	--bpwp-card-color: currentColor;
	--bpwp-card-border: 1px solid var(--wp--preset--color--border);
}

.bpwp-services.bpwp-card--none {
	--bpwp-card-background: transparent;
	--bpwp-card-color: currentColor;
	--bpwp-card-border: 0;
	--bpwp-card-padding: 0;
}

@media (min-width: 48em) {
	.bpwp-services--list .bpwp-services__row {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 0 var(--wp--preset--spacing--30);
	}

	.bpwp-services--list .bpwp-services__meta {
		text-align: end;
	}

	.bpwp-services--cards .bpwp-services__list,
	.bpwp-services--category-cards .bpwp-services__list {
		grid-template-columns: repeat(var(--bpwp-columns-tablet, 1), minmax(0, 1fr));
	}

	.bpwp-services__booking-link {
		display: inline-block;
	}

	.bpwp-services__table .bpwp-services__duration,
	.bpwp-services__table .bpwp-services__price {
		white-space: nowrap;
		overflow-wrap: normal;
	}

	.bpwp-services__table .bpwp-services__value,
	.bpwp-services__table .bpwp-services__unit,
	.bpwp-services__table .bpwp-services__currency {
		display: inline;
	}

	/* navigationMobile scroll is mobile only: from tablet up the row wraps as before. */
	.bpwp-services--nav-mobile-scroll .bpwp-services__nav-list {
		flex-wrap: wrap;
		overflow-x: visible;
		scroll-snap-type: none;
		padding: 0;
	}

	.bpwp-services--nav-mobile-scroll .bpwp-services__nav-link {
		white-space: normal;
	}

	/* Tablet frame, shape and index style of a section that changes them per state (responsive overrides). */

	.bpwp-services--tablet-image-frame-1-1 .bpwp-services__media img {
		aspect-ratio: 1;
	}

	.bpwp-services--tablet-image-frame-4-3 .bpwp-services__media img {
		aspect-ratio: 4 / 3;
	}

	.bpwp-services--tablet-image-frame-3-4 .bpwp-services__media img {
		aspect-ratio: 3 / 4;
	}

	.bpwp-services--tablet-image-frame-4-5 .bpwp-services__media img {
		aspect-ratio: 4 / 5;
	}

	.bpwp-services--tablet-image-frame-16-9 .bpwp-services__media img {
		aspect-ratio: 16 / 9;
	}

	.bpwp-services--tablet-image-shape-rectangle .bpwp-services__media img {
		border-radius: 0;
	}

	.bpwp-services--tablet-image-shape-rounded .bpwp-services__media img {
		border-radius: var(--wp--custom--radius--medium);
	}

	.bpwp-services--tablet-image-shape-arch .bpwp-services__media img {
		border-radius: var(--wp--custom--radius--pill) var(--wp--custom--radius--pill) 0 0;
	}

	.bpwp-services--tablet-index-inline .bpwp-services__badge {
		display: none;
	}

	.bpwp-services--tablet-index-inline .bpwp-services__media + .bpwp-services__category .bpwp-services__index {
		display: block;
	}

	.bpwp-services--tablet-index-badge .bpwp-services__badge {
		display: inline-flex;
	}

	.bpwp-services--tablet-index-badge .bpwp-services__media + .bpwp-services__category .bpwp-services__index {
		display: none;
	}
}

@media (min-width: 64em) {
	.bpwp-services--cards .bpwp-services__list,
	.bpwp-services--category-cards .bpwp-services__list {
		grid-template-columns: repeat(var(--bpwp-columns-desktop, 1), minmax(0, 1fr));
	}

	/* table: the category head (image slot, index, name, description) beside its table, inside
	   wideSize. The head is one grid item: its parts keep their own spacing however long the
	   table grows. */
	.bpwp-services.bpwp-services--table {
		max-width: var(--wp--style--global--wide-size);
	}

	.bpwp-services--table .bpwp-services__group {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		column-gap: var(--wp--preset--spacing--50);
		align-items: start;
	}

	.bpwp-services--table .bpwp-services__group > .bpwp-services__category-head {
		grid-column: 1;
	}

	.bpwp-services--table .bpwp-services__group > .bpwp-services__table-wrap {
		grid-column: 2;
	}

	.bpwp-services--table .bpwp-services__group > .bpwp-services__table-wrap:only-child {
		grid-column: 1 / -1;
	}

	/* Category navigation as a sticky sidebar below the fixed header. */
	.bpwp-services.bpwp-services--has-nav {
		display: grid;
		grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--60);
		align-items: start;
		max-width: var(--wp--style--global--wide-size);
	}

	.bpwp-services--has-nav > .bpwp-services__nav {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--header-height) + var(--wp--preset--spacing--40));
		margin: 0;
	}

	.bpwp-services--has-nav .bpwp-services__nav-list {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.bpwp-services--has-nav > .bpwp-services__booking {
		grid-column: 2;
	}

	/* Desktop frame, shape and index style of a section that changes them per state (responsive overrides). */

	.bpwp-services--desktop-image-frame-1-1 .bpwp-services__media img {
		aspect-ratio: 1;
	}

	.bpwp-services--desktop-image-frame-4-3 .bpwp-services__media img {
		aspect-ratio: 4 / 3;
	}

	.bpwp-services--desktop-image-frame-3-4 .bpwp-services__media img {
		aspect-ratio: 3 / 4;
	}

	.bpwp-services--desktop-image-frame-4-5 .bpwp-services__media img {
		aspect-ratio: 4 / 5;
	}

	.bpwp-services--desktop-image-frame-16-9 .bpwp-services__media img {
		aspect-ratio: 16 / 9;
	}

	.bpwp-services--desktop-image-shape-rectangle .bpwp-services__media img {
		border-radius: 0;
	}

	.bpwp-services--desktop-image-shape-rounded .bpwp-services__media img {
		border-radius: var(--wp--custom--radius--medium);
	}

	.bpwp-services--desktop-image-shape-arch .bpwp-services__media img {
		border-radius: var(--wp--custom--radius--pill) var(--wp--custom--radius--pill) 0 0;
	}

	.bpwp-services--desktop-index-inline .bpwp-services__badge {
		display: none;
	}

	.bpwp-services--desktop-index-inline .bpwp-services__media + .bpwp-services__category .bpwp-services__index {
		display: block;
	}

	.bpwp-services--desktop-index-badge .bpwp-services__badge {
		display: inline-flex;
	}

	.bpwp-services--desktop-index-badge .bpwp-services__media + .bpwp-services__category .bpwp-services__index {
		display: none;
	}
}