/* ---------------------------------------------------------------- */
/* Client notes, 16 Oct (and Issac's 13 Oct notes)                   */
/* Loaded after zani-client-notes.css. Content edits are in          */
/* includes/class-zani-client-notes-oct16.php.                       */
/* ---------------------------------------------------------------- */

/* Homepage hero: no band behind the slogan and no dim layer over the
   video. A text shadow keeps the words readable on light frames. The
   slogan's left edge lines up with the "HONG KONG BEST EVENTS" heading
   below (both use the wide column; the band's inner padding is gone). */
body.home .wp-block-cover.alignfull .wp-block-cover__inner-container > .wp-block-group > p.animated-header-box {
	background: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	border-radius: 0 !important;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 22px rgba(0, 0, 0, 0.45);
}

body.home .wp-block-cover.alignfull:has(> video.wp-block-cover__video-background) > .wp-block-cover__background {
	opacity: 0 !important;
}

/* The gloss sweep needs the band; without it the sweep moved `left` on
   every frame, which phones counted as layout shift (the stutter). */
body.home .wp-block-cover .animated-header-box::after {
	content: none !important;
	animation: none !important;
}

/* Computers: the slogan low in the video (16 Oct). Watch More is gone
   (17 Oct), so no row to share with it. */
@media (min-width: 782px) {
	body.home .wp-block-cover.alignfull:has(> video.wp-block-cover__video-background) {
		padding-bottom: var(--wp--preset--spacing--30) !important;
	}

	body.home .wp-block-cover.alignfull .wp-block-cover__inner-container > .wp-block-group.alignwide > p.animated-header-box {
		margin: 0 !important;
	}
}

/* Phones: the slogan stays inside the page edges. */
@media (max-width: 781px) {
	/* Same left edge as the heading under the video. */
	body.home .wp-block-cover.alignfull:has(> video.wp-block-cover__video-background) {
		padding-left: var(--wp--style--root--padding-left, 1rem) !important;
		padding-right: var(--wp--style--root--padding-right, 1rem) !important;
	}

	body.home .wp-block-cover.alignfull .wp-block-cover__inner-container > .wp-block-group > p.animated-header-box {
		max-width: 100% !important;
		overflow-wrap: anywhere;
	}
}

/* Homepage quotes: quotation marks in the quote's own (black) ink, and
   a small Zani red dot before each quote. */
.zani-testimonials .zani-quote-mark {
	color: inherit !important;
}

.zani-testimonials .wp-block-quote > p:first-of-type::before {
	content: "";
	display: inline-block;
	width: 0.32em;
	height: 0.32em;
	margin-right: 0.45em;
	border-radius: 50%;
	background: #c13303;
	vertical-align: 0.2em;
}

/* Contact form: the confirmation / error message is a solid white box
   with dark text, readable on the photo. */
.wpcf7 form .wpcf7-response-output {
	margin: 1rem 0 0 !important;
	padding: 0.75rem 1rem !important;
	background: #fff;
	color: #191919 !important;
	text-shadow: none !important;
	font-weight: 700;
	border-width: 2px !important;
	border-radius: 4px;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #1e7b34 !important;
}

.wpcf7 form .wpcf7-not-valid-tip {
	color: #fff;
	background: #c13303;
	padding: 0.15rem 0.4rem;
	font-weight: 700;
	text-shadow: none;
}

/* Contact closing lines: 17px bold (the second one stays red). */
.page-id-148 .zani-contact-18 {
	font-size: 17px !important;
	font-weight: 700 !important;
}

/* Music: Classical harp photo runs the full height of the text beside
   it (top and bottom edges line up), with the sky cropped off the top.
   Same photo, cropped in CSS. */
@media (min-width: 601px) {
	body .wp-block-post-content .wp-block-media-text.zani-crop-top.zani-crop-top {
		align-items: stretch !important;
	}

	body .wp-block-post-content .wp-block-media-text.zani-crop-top.zani-crop-top > .wp-block-media-text__media {
		position: relative !important;
		align-self: stretch !important;
		height: auto !important;
		max-height: none !important;
		min-height: 420px;
		overflow: hidden;
	}

	/* Out of the flow, so the text alone sets the row height. About the
	   top sixth (sky) is cropped; the harp and the player stay whole. */
	body .wp-block-post-content .wp-block-media-text.is-style-zani-half.zani-crop-top:not(.is-image-fill-element) > .wp-block-media-text__media img[class*="wp-image-"] {
		position: absolute !important;
		top: 0 !important;
		bottom: 0 !important;
		right: 0 !important;
		left: auto !important;
		width: auto !important;
		max-width: 100% !important;
		height: 100% !important;
		max-height: none !important;
		aspect-ratio: 0.74 !important;
		object-fit: cover !important;
		object-position: center bottom !important;
	}
}

/* Stage Shows: no line under FACTS ABOUT INTERACTIVE SHOWS. */
.page-id-8 .wp-block-post-content h2.wp-block-heading:has(+ .zani-traits)::after {
	content: none !important;
	display: none !important;
}

/* Giant Smiley on a computer: the video is one large player like Fire
   Show and Safety First (720px), with no title or text under it. */
@media (min-width: 782px) {
	.page-id-311 .wp-block-post-content > .wp-block-custom-video-carousel {
		width: min(720px, var(--zani-page-width), 100%);
		max-width: min(720px, var(--zani-page-width), 100%);
	}

	.page-id-311 .wp-block-custom-video-carousel .vc-gallery-grid > .vc-gallery-item {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}

	.page-id-311 .wp-block-custom-video-carousel .vc-gallery-item :is(h3, p) {
		display: none !important;
	}

	.page-id-311 .wp-block-custom-video-carousel .vc-gallery-item .vc-play-icon {
		font-size: 64px;
	}
}

/* Marketing: the video a little bigger on computers. */
@media (min-width: 782px) {
	.page-id-316 main .wp-block-post-content.is-layout-constrained > .wp-block-embed.zani-inline-video.zani-embed-center {
		width: min(900px, var(--zani-page-width), 100%) !important;
		max-width: min(900px, var(--zani-page-width), 100%) !important;
	}
}

/* Small photos grow on hover (computers with a mouse): Party's four
   photos and every multi-photo gallery on the site. Transform only, so
   nothing around them moves. Reduced motion keeps them still. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image,
	.wp-block-post-content .zani-hover-zoom figure.wp-block-image,
	.wp-block-post-content figure.wp-block-image.zani-hover-zoom {
		transition: transform 0.25s ease, box-shadow 0.25s ease;
		will-change: transform;
	}

	.wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:hover,
	.wp-block-post-content .zani-hover-zoom figure.wp-block-image:hover,
	.wp-block-post-content figure.wp-block-image.zani-hover-zoom:hover {
		position: relative;
		z-index: 5;
		transform: scale(1.35);
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	}

	/* Edge photos grow inwards, so they stay on the screen. */
	.wp-block-post-content .wp-block-gallery.has-nested-images > figure.wp-block-image:first-child,
	.wp-block-post-content .wp-block-gallery.has-nested-images > .zani-fit-row > figure.wp-block-image:first-child {
		transform-origin: left center;
	}

	.wp-block-post-content .wp-block-gallery.has-nested-images > figure.wp-block-image:last-child,
	.wp-block-post-content .wp-block-gallery.has-nested-images > .zani-fit-row > figure.wp-block-image:last-child {
		transform-origin: right center;
	}

	.page-id-320 .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:hover {
		transform: scale(1.6);
	}
}

/* Other costumes on a phone: four equal cells per row inside the page
   edges (the packed rows stopped short of the right edge, and before
   the script ran the fifth photo hung off the screen). */
@media (max-width: 599px) {
	body.page-id-506 .wp-block-post-content .wp-block-gallery.zani-gallery-fit.has-nested-images {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 6px !important;
	}

	body.page-id-506 .wp-block-post-content .wp-block-gallery.zani-gallery-fit.has-nested-images > figure.wp-block-image {
		width: auto !important;
		height: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}

	body.page-id-506 .wp-block-post-content .wp-block-gallery.zani-gallery-fit figure.wp-block-image img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 3 / 5;
		object-fit: contain;
	}
}

/* Corporate: a little more space between paragraphs (was 1.05rem). */
.page-id-315 .wp-block-post-content p.wp-block-paragraph {
	margin-block-start: 1.4rem !important;
}