/**
 * Block styles registered by the plugin (includes/site-styles.php).
 * Loaded on the site and in the block editor, so the editor shows the
 * same look. Pick them in the editor: block toolbar > Styles.
 */

/* Heading > "Section title": same size as the homepage tagline (H1),
   capitals, bold, pure black. The heading level does not change. */
.wp-block-heading.is-style-zani-section-title,
body .wp-block-post-content .wp-block-heading.is-style-zani-section-title {
	font-family: var(--zani-font-heading, var(--wp--preset--font-family--vollkorn, Vollkorn, Georgia, serif)) !important;
	font-size: clamp(1.25rem, 2.2vw, 1.875rem) !important;
	font-weight: 700 !important;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast, #191919) !important;
}

.wp-block-heading.is-style-zani-section-title a,
.wp-block-heading.is-style-zani-section-title strong {
	color: inherit !important;
	font-weight: inherit;
}

/* Button > "Small outline": the category tags (HK Acts, Musicians…).
   Like the old site: small dark capitals in a thin Zani red frame.
   Hover fills the frame. */
body .wp-block-button.is-style-zani-tag > .wp-block-button__link,
body .wp-block-post-content .wp-block-button.is-style-zani-tag > .wp-block-button__link {
	display: inline-block;
	padding: 0.4em 0.85em !important;
	border: 1px solid var(--wp--preset--color--zani-red, #c13303) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--contrast, #191919) !important;
	font-family: var(--wp--preset--font-family--droid-sans, "Droid Sans", sans-serif) !important;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transform: none !important;
}

body .wp-block-button.is-style-zani-tag > .wp-block-button__link:hover,
body .wp-block-button.is-style-zani-tag > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--zani-red, #c13303) !important;
	color: #fff !important;
}

.wp-block-buttons:has(> .wp-block-button.is-style-zani-tag) {
	gap: 0.45rem 0.5rem !important;
}

/* Media & Text > "Photo above text": landscape photo on top, text under
   it (homepage services). */
body .wp-block-media-text.is-style-zani-stacked,
body .wp-block-post-content .wp-block-media-text.is-style-zani-stacked,
body.home .wp-block-post-content .wp-block-media-text.is-style-zani-stacked {
	grid-template-columns: 100% !important;
	grid-template-rows: auto auto !important;
}

body .wp-block-media-text.is-style-zani-stacked > .wp-block-media-text__media {
	grid-column: 1 !important;
	grid-row: 1 !important;
	align-self: start !important;
}

body .wp-block-media-text.is-style-zani-stacked > .wp-block-media-text__content {
	grid-column: 1 !important;
	grid-row: 2 !important;
	align-self: start !important;
	padding: 1rem 0 0 !important;
}

body .wp-block-media-text.is-style-zani-stacked > .wp-block-media-text__media img,
body.home .wp-block-post-content .wp-block-media-text.is-style-zani-stacked .wp-block-media-text__media img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9 !important;
	object-fit: cover !important;
}

/* Media & Text > "Half-width photo": photo half the row, title and text
   beside it, both starting at the top. Phones stack them. The photo keeps
   its own shape (the page script sets its aspect ratio from its size). */
@media (min-width: 601px) {
	body .wp-block-media-text.is-style-zani-half,
	body .wp-block-post-content .wp-block-media-text.is-style-zani-half,
	body.zani-artists-agency .wp-block-post-content .wp-block-media-text.is-style-zani-half {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
		align-items: start;
	}

	body .wp-block-media-text.is-style-zani-half > .wp-block-media-text__content {
		padding: 0 0 0 clamp(1.25rem, 3vw, 2.5rem) !important;
	}

	body .wp-block-media-text.is-style-zani-half.has-media-on-the-right > .wp-block-media-text__content {
		padding: 0 clamp(1.25rem, 3vw, 2.5rem) 0 0 !important;
	}
}

body .wp-block-media-text.is-style-zani-half > .wp-block-media-text__media,
body .wp-block-media-text.is-style-zani-half > .wp-block-media-text__content {
	align-self: start !important;
}

body .wp-block-media-text.is-style-zani-half .wp-block-media-text__content > :first-child {
	margin-top: 0 !important;
}

body .wp-block-post-content .wp-block-media-text.is-style-zani-half:not(.is-image-fill-element) > .wp-block-media-text__media img[class*="wp-image-"],
body.zani-artists-agency .wp-block-post-content .wp-block-media-text.is-style-zani-half:not(.is-image-fill-element) > .wp-block-media-text__media img[class*="wp-image-"] {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	object-fit: contain !important;
	transform: none !important;
}

@media (max-width: 600px) {
	body .wp-block-media-text.is-style-zani-half > .wp-block-media-text__content {
		padding: 0.85rem 0 0 !important;
	}
}

/* "Half-width photo" with "Crop image to fill" on (a tall photo beside
   shorter copy): the photo is as tall as the title and copy beside it,
   cropped around its focal point (both set in the block's sidebar).
   Phones stack the row and show the whole photo. */
body .wp-block-post-content .wp-block-media-text.is-style-zani-half.is-image-fill-element > .wp-block-media-text__media {
	align-self: stretch !important;
	height: 100%;
	min-height: 260px;
}

body .wp-block-post-content .wp-block-media-text.is-style-zani-half.is-image-fill-element > .wp-block-media-text__media img[class*="wp-image-"] {
	position: absolute;
	inset: 0;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	object-fit: cover !important;
	transform: none !important;
}

/* "zani-crop-less" (Additional CSS class on such a row): the frame is at
   least 6:5, taller than wide, so a face close-up is not cut at the chin
   even when the copy beside it is short. The photo column is half the row
   (50cqw). */
@media (min-width: 601px) {
	body .wp-block-post-content .wp-block-media-text.is-style-zani-half.is-image-fill-element.zani-crop-less {
		container-type: inline-size;
	}

	body .wp-block-post-content .wp-block-media-text.is-style-zani-half.is-image-fill-element.zani-crop-less > .wp-block-media-text__media {
		min-height: 60cqw;
	}
}

@media (max-width: 600px) {
	body .wp-block-post-content .wp-block-media-text.is-style-zani-half.is-image-fill-element > .wp-block-media-text__media {
		height: auto;
		min-height: 0;
	}

	body .wp-block-post-content .wp-block-media-text.is-style-zani-half.is-image-fill-element > .wp-block-media-text__media img[class*="wp-image-"] {
		position: static;
		height: auto !important;
		object-fit: contain !important;
	}
}

/* Separator style "Short line": the short rounded bar used under the
   headings, at the start of the text column, in the separator's colour
   (Zani red when none is picked). The block keeps the column width; the
   bar is drawn inside it. */
.wp-block-separator.is-style-zani-short {
	position: relative;
	height: 4px;
	border: 0 !important;
	color: var(--wp--preset--color--zani-red, #c13303);
	background: transparent !important;
	opacity: 1;
}

.wp-block-separator.is-style-zani-short::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 5rem;
	border-radius: 999px;
	background: currentColor;
}