/*
 * Block style variations registered in functions.php (is-style-*), plus image
 * rounding inside sections.
 */

/* Eyebrow: small spaced capitals with a rule after (or rules either side). */
.is-style-eyebrow,
.is-style-eyebrow-centered {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--wp--preset--font-size--accent);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--heading);
}

.is-style-eyebrow::after,
.is-style-eyebrow-centered::before,
.is-style-eyebrow-centered::after {
	content: "";
	flex: 0 0 50px;
	border-top: 1px solid var(--cw-line);
}

.is-style-eyebrow-centered {
	justify-content: center;
	text-align: center;
}

.is-style-eyebrow-centered::before,
.is-style-eyebrow-centered::after {
	flex-basis: 40px;
}

/* Letter-spacing adds trailing space after the last letter; pull the rule back. */
.is-style-eyebrow-centered::before {
	margin-inline-end: 0;
}

.is-style-eyebrow-centered::after {
	margin-inline-start: -5px;
}

/* Step number: a small filled circle. */
.is-style-step-number {
	display: grid;
	place-items: center;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface-alt);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--text);
}

/* Label: a small heading-like line of text (e.g. "Phone"). */
.is-style-label,
.cw-business-field__label,
.cw-social-links__label {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--heading-6);
	font-weight: 500;
	line-height: 1.6;
	color: var(--wp--preset--color--text);
}

/* Breadcrumb: "Home → Page" in small capitals. */
.is-style-breadcrumb {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 2.6;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.is-style-breadcrumb a {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-inline-end: 14px;
	color: inherit;
	text-decoration: none !important;
}

.is-style-breadcrumb a::after {
	content: "";
	width: 16px;
	height: 10px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14.5M10.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14.5M10.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
	color: var(--wp--preset--color--heading);
}

.is-style-breadcrumb a:hover {
	color: var(--wp--preset--color--heading);
}

/* Tag button: small translucent pill (e.g. the hero's quick links). */
.wp-block-button.is-style-tag .wp-block-button__link {
	padding: 5px 22px;
	border-color: var(--cw-line-soft);
	background: var(--cw-line-soft);
	color: var(--wp--preset--color--heading);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none;
}

.wp-block-button.is-style-tag .wp-block-button__link:hover,
.wp-block-button.is-style-tag .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--heading);
	background: var(--cw-line-soft);
	color: var(--wp--preset--color--heading);
}

/* Solid button: filled white, inverting on hover. */
.wp-block-button.is-style-solid .wp-block-button__link {
	border-color: var(--wp--preset--color--heading);
	background: var(--wp--preset--color--heading);
	color: var(--wp--preset--color--background);
}

.wp-block-button.is-style-solid .wp-block-button__link:hover,
.wp-block-button.is-style-solid .wp-block-button__link:focus-visible {
	background: transparent;
	color: var(--wp--preset--color--heading);
}

/* Card: thin border, rounded corners. */
.wp-block-group.is-style-card {
	padding: 40px;
	border: 1px solid var(--cw-line);
	border-radius: var(--cw-radius);
}

@media (max-width: 767px) {
	.wp-block-group.is-style-card {
		padding: 40px 30px;
	}
}

/* Short separator: a thin rule. */
.wp-block-separator.is-style-short {
	width: min(550px, 100%);
	max-width: 100%;
	margin-block: 35px;
	margin-inline: 0;
	border: 0;
	border-top: 1px solid var(--cw-line-soft);
	opacity: 1;
	background: none;
}

/* Images: rounded corners everywhere in sections. */
.cw-section .wp-block-image img {
	border-radius: var(--cw-radius);
}

/* Masonry gallery: laid out by assets/js/gallery.js (placing each photo in the
   shortest column, like the old site); CSS columns until then or without JS. */
.wp-block-gallery.is-style-masonry {
	--cw-masonry-columns: 3;
	--cw-masonry-gap: 15px;
	display: block;
	columns: var(--cw-masonry-columns);
	column-gap: var(--cw-masonry-gap);
}

.wp-block-gallery.is-style-masonry > .wp-block-image {
	display: block;
	width: 100% !important;
	margin: 0 0 var(--cw-masonry-gap) !important;
	break-inside: avoid;
}

.wp-block-gallery.is-style-masonry > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto !important;
	object-fit: cover;
	border-radius: 30px;
}

.wp-block-gallery.is-style-masonry.is-masonry-ready {
	position: relative;
	columns: auto;
}

.wp-block-gallery.is-style-masonry > .wp-block-image[hidden] {
	display: none !important;
}

.wp-block-gallery.is-style-masonry.is-masonry-ready > .wp-block-image {
	position: absolute;
	margin: 0 !important;
}

.wp-block-gallery.is-style-masonry.is-masonry-ready > .wp-block-image img {
	height: 100% !important;
}

/* Column counts as on the old site: unchanged on tablets, two on large phones, one
   on small phones. */
@media (max-width: 767px) {
	.wp-block-gallery.is-style-masonry {
		--cw-masonry-columns: 2;
	}
}

@media (max-width: 479px) {
	.wp-block-gallery.is-style-masonry {
		--cw-masonry-columns: 1;
	}
}