/**
 * Services page (page-services.html): the second use of the
 * carousel-block plugin — this one static (no autoplay, confirmed
 * against the source design), single viewport-height slide,
 * two-column text/photo layout.
 *
 * The shared sub-page header bar (".chennai-world-subpage-header" /
 * ".chennai-world-back-link") lives in patterns.css, not here — it's
 * reused by The City/Store/News/Stories too.
 *
 * Two of five slides (Gifting & Flowers, Medical Coordination) have
 * no real photography in the source artifact itself — it left a
 * literal "flowers & gifts · photo" placeholder string where an
 * image belongs. Rather than inventing stock photos not part of the
 * approved design, those two slides get a styled gradient panel
 * instead of a photo. Swap in a real `wp:cover`/photo once the owner
 * has real photography for those two services (see PLAN.md §9).
 */

.chennai-world-services-counter {
	color: var(--wp--preset--color--text-secondary);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.05em;
}

.chennai-world-services-carousel {
	--wp--custom--carousel-block--navigation-alignfull-color: var(--wp--preset--color--text-primary);
	--wp--custom--carousel-block--navigation-hover-color: var(--wp--preset--color--accent-teal);
	--wp--custom--carousel-block--navigation-size: 20px;
	--wp--custom--carousel-block--navigation-sides-offset: 2rem;
	--wp--custom--carousel-block--pagination-bottom: 2rem;
	--wp--custom--carousel-block--pagination-bullet-size: 8px;
	--wp--custom--carousel-block--pagination-bullet-active-color: var(--wp--preset--color--accent-teal);
	/* text-secondary at a higher opacity than the plugin's own 0.2
	   default — "surface" (near-black in dark, white in light) at 0.2
	   opacity was nearly invisible against the page background in both
	   themes. */
	--wp--custom--carousel-block--pagination-bullet-inactive-color: var(--wp--preset--color--text-secondary);
	--wp--custom--carousel-block--pagination-bullet-inactive-opacity: 0.6;
	--wp--custom--carousel-block--pagination-bullet-inactive-hover-color: var(--wp--preset--color--text-primary);
}

.chennai-world-services-carousel .cb-slide {
	display: flex;
}

.chennai-world-services-slide {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	width: 100%;
	/* Trimmed from 12rem/spacing--30+--50 so the slide + its bottom
	   arrow/dot control row fit in one viewport without scrolling —
	   at 900px tall that previously overflowed by ~63px (measured
	   live: carousel bottom sat at 963px). Deliberate deviation from
	   the design, per owner request. */
	min-height: calc(100vh - 14rem);
	gap: var(--wp--preset--spacing--40);
	/* Horizontal inset matches the page's standard 64px content edge
	   (see SITE-011) rather than spacing--40, so the photo's right edge
	   lines up with the rest of the page instead of bleeding further out. */
	padding: 1rem 4rem 1.5rem;
}

.chennai-world-services-number {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 4.5rem;
	line-height: 1;
	color: var(--wp--preset--color--accent-teal);
}

.chennai-world-services-category {
	margin: 1rem 0 1.5rem;
	color: var(--wp--preset--color--accent-gold);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.chennai-world-services-copy {
	max-width: 48ch;
	margin: 1rem 0 1.5rem;
	color: var(--wp--preset--color--text-secondary);
}

.chennai-world-services-list {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	color: var(--wp--preset--color--text-secondary);
}

.chennai-world-services-photo {
	position: relative;
	min-height: 28rem;
	border-radius: 1.25rem;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	box-shadow: rgba(0, 0, 0, 0.35) 0 30px 80px 0;
}

.chennai-world-services-photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: var(--wp--preset--gradient--panel);
	color: rgba(242, 237, 227, 0.55);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

/*
 * The carousel-block plugin absolutely positions prev/next vertically
 * centered on the slide (`top:50%`) by default, which lands them right
 * on top of this two-column slide's body copy. The design instead
 * groups prev/dots/next into one row below the slide (see
 * design-footer.png). Move the arrows out of the vertical-center
 * placement into that same bottom row, flanking the pagination dots.
 * left/right specifically need to match the plugin's own
 * `.wp-block-cb-carousel-v2.alignfull .cb-button-prev` rule's
 * specificity (2 classes on the wrapper + 1 on the button = 3) — the
 * block markup carries both `.wp-block-cb-carousel-v2` and `.alignfull`
 * already, so chaining them here ties specificity, and cascade order
 * (ours loads after) settles it.
 */
.chennai-world-services-carousel .cb-button-prev,
.chennai-world-services-carousel .cb-button-next {
	top: auto;
	/* Centers the 20px-tall arrow on the pagination dot row. The dot
	   row's real box is 24px tall (the 8px visual dot plus the 8px
	   content-box touch-target padding added in patterns.css for
	   SITE-008), not the 8px the arrow was previously centered
	   against — measured live, arrow center and dot-row center match
	   exactly at bottom:2.125rem. */
	bottom: 2.125rem;
	margin-top: 0;
}

/*
 * Offset was 3rem (48px) until the SITE-008 touch-target fix
 * (patterns.css) grew each pagination dot's real hit box from 8px to
 * 24px for WCAG 2.5.8 — with 5 dots that pushes the row's outer edge
 * out to 76px from center, which at 48px put the arrows ~28px inside
 * the dots' hit boxes (confirmed live via getBoundingClientRect).
 * 5.5rem (88px) clears the new 76px edge with a 12px gap to spare.
 */
.chennai-world-services-carousel.alignfull .cb-button-prev {
	left: auto;
	right: calc(50% + 5.5rem);
}

.chennai-world-services-carousel.alignfull .cb-button-next {
	left: calc(50% + 5.5rem);
	right: auto;
}

@media (max-width: 900px) {

	.chennai-world-services-slide {
		grid-template-columns: 1fr;
		min-height: auto;
		padding-top: var(--wp--preset--spacing--40);
	}

	.chennai-world-services-photo {
		min-height: 18rem;
		order: -1;
	}

	.chennai-world-services-carousel .cb-button-prev,
	.chennai-world-services-carousel .cb-button-next {
		display: none;
	}
}