/*
 * bpwp/contact-info — MOBILE FIRST (INV-01, component contact-info).
 *
 * Base (no media query): the mobile state. default: icon-led items stacked in one column.
 * cards: one column of cards with rounded corners — also when cardShape is arch (arch tops
 * need the width of a column). Action buttons span the card.
 * Tablet: default items in a wrapping row; cards in two columns (--bpwp-columns-tablet) with
 * arch tops for cardShape arch; buttons at their natural width.
 * Desktop: cards in up to four columns (--bpwp-columns-desktop) inside wideSize.
 * Named conditions are resolved by the build; 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-contact .bpwp-icon {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

.bpwp-contact__text {
	margin: 0;
}

.bpwp-contact__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.bpwp-contact__link {
	color: inherit;
	overflow-wrap: anywhere;
}

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

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

/* Icon-only links keep a 44 × 44 CSS px target (A11Y-13); the name is visually hidden text. */
.bpwp-contact__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	color: inherit;
}

/* Opening hours inside a part (the markup of bpwp/opening-hours, styled here because that
   block's stylesheet is only loaded where the block itself renders). */
.bpwp-contact .bpwp-hours__week {
	margin: 0;
}

.bpwp-contact .bpwp-hours__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 var(--wp--preset--spacing--30);
}

.bpwp-contact .bpwp-hours__row dd {
	margin: 0;
}

/* The icon-led list (default variant, the footer) draws its hours rows without the row padding,
   border and day weight of the standalone opening-hours block: that block's stylesheet is loaded on
   every page that contains the block and always in the editor, and must not reach the list — the
   footer looks the same on every page and in the Site Editor (AD-84). */
.bpwp-contact--default .bpwp-hours__row {
	padding-block: 0;
	border-block-end: 0;
}

.bpwp-contact--default .bpwp-hours__row dt {
	font-weight: inherit;
}

.bpwp-contact .bpwp-hours__row.is-today dt,
.bpwp-contact .bpwp-hours__row.is-today dd {
	font-weight: 700;
}

.bpwp-contact .bpwp-hours__today {
	font-size: var(--wp--preset--font-size--small);
}

/* default: icon-led items. */
.bpwp-contact__items {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpwp-contact__item {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
}

.bpwp-contact__icon {
	flex: none;
}

.bpwp-contact__body {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
}

/* Links of the compact items keep a 44 CSS px target height (footer.md, A11Y-13). */
.bpwp-contact--default .bpwp-contact__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

/* cards: one card per part. */
.bpwp-contact__cards {
	display: grid;
	gap: var(--bpwp-item-gap, var(--wp--preset--spacing--40));
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpwp-contact__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	min-width: 0;
	padding: var(--bpwp-card-padding, var(--bpwp-item-padding, var(--wp--preset--spacing--50) var(--wp--preset--spacing--40)));
	border: var(--bpwp-card-border, 1px solid var(--wp--preset--color--border));
	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-contact__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--on-secondary);
}

/* A card title is an engine label in the site language: a long single word (a compound in
   German) breaks with a hyphen inside a narrow card instead of running out of it. */
.bpwp-contact__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	overflow-wrap: break-word;
	hyphens: auto;
}

.bpwp-contact__card .bpwp-hours__week {
	width: 100%;
}

.bpwp-contact__card .bpwp-hours__row {
	padding-block: var(--wp--preset--spacing--20);
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.bpwp-contact__card .bpwp-contact__action {
	width: 100%;
	margin: auto 0 0;
}

.bpwp-contact__button {
	display: block;
	min-height: 2.75rem;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
}

/* 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. */
.bpwp-contact--cards.bpwp-density--compact {
	--bpwp-item-gap: var(--wp--preset--spacing--30);
	--bpwp-item-padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.bpwp-contact--cards.bpwp-density--spacious {
	--bpwp-item-gap: var(--wp--preset--spacing--50);
	--bpwp-item-padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.bpwp-contact--cards.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-contact--cards.bpwp-card--bordered {
	--bpwp-card-background: transparent;
	--bpwp-card-color: currentColor;
	--bpwp-card-border: 1px solid var(--wp--preset--color--border);
}

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

/* Alignment: the badge, the heading, the text and the action of each card. */
.bpwp-contact--cards.bpwp-align--start .bpwp-contact__card {
	align-items: flex-start;
	text-align: start;
}

.bpwp-contact--cards.bpwp-align--center .bpwp-contact__card {
	align-items: center;
	text-align: center;
}

@media (min-width: 48em) {
	.bpwp-contact__items {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	}

	.bpwp-contact.bpwp-contact--cards {
		max-width: var(--wp--style--global--wide-size);
	}

	.bpwp-contact__cards {
		grid-template-columns: repeat(var(--bpwp-columns-tablet, 2), minmax(0, 1fr));
	}

	/* Arch: fully rounded top (the radius is clamped to half the card width), like the arch
	   image shape of text-media. */
	.bpwp-contact--shape-arch .bpwp-contact__card {
		padding-block-start: var(--bpwp-card-padding, var(--wp--preset--spacing--60));
		border-radius: var(--wp--custom--radius--pill) var(--wp--custom--radius--pill) 0 0;
	}

	.bpwp-contact--shape-arch .bpwp-contact__badge {
		align-self: center;
	}

	.bpwp-contact__button {
		display: inline-block;
	}
}

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