/* Shared styling for the 12 service sub-pages
   (template-service-detail.php) -- hero, pricing cards, and photo
   gallery. Scoped under .cwm-svc-* only, matching the sitewide
   "no bare-element selectors" rule (see shared-blocks.css). */

/* Root cause of the "photo doesn't reach behind the header" bug
   (2026-08-21): the parent theme reserves 7.1rem of top padding on
   .page_content_wrap by default -- real space for a normal push-down
   header -- and only zeroes it via the .remove_margins or
   .body_style_fullscreen body classes (confirmed via the theme's own
   compiled CSSOM, not guessed). The homepage/Rentals hero already carry
   those classes so this was never an issue there; these pages don't, so
   the transparent overlay header was floating over ~113px of plain
   .page_content_wrap background instead of the actual photo. Same fix
   the theme itself already uses elsewhere, just scoped to our template. */
body.page-template-template-service-detail-php .page_content_wrap {
	padding-top: 0;
}

.cwm-svc-hero {
	position: relative;
	/* Full-bleed, same technique as the Rentals hero (rentals-landing.css)
	   -- breaks out of the theme's centered content-width wrapper so the
	   photo actually fills the whole page width, not just a boxed
	   column inside it. */
	width: 100vw;
	/* 2026-08-22: same 100vw-plus-padding overflow trap as the Rentals
	   hero (see that file's own comment) -- the horizontal padding below
	   was adding 40px on top of 100vw in content-box mode, overflowing
	   the heading/description text off the right edge on mobile. */
	box-sizing: border-box;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: #010101;
	/* Header is an absolutely-positioned overlay on these pages (see
	   header-custom.php) -- it doesn't push this section down by its
	   own height, so the top padding has to clear it manually. Matches
	   the Rentals hero's own clearance value. */
	padding: 170px 20px 110px;
	text-align: center;
	overflow: hidden;
}

.cwm-svc-hero__bg {
	position: absolute;
	inset: 0;
	/* No opacity reduction, no overlay gradient -- 2026-08-21, direct
	   request: the photo shows at full brightness/color, nothing tints
	   it. Legibility comes entirely from the text's own shadow below and
	   (where there's pricing content) a real card background, never
	   from darkening the photo itself. */
}

.cwm-svc-hero__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.cwm-svc-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	padding: 0 20px;
}

.cwm-svc-hero__heading {
	margin: 0 0 24px;
	color: #ffffff;
	/* Untinted photo can get bright/busy behind the text -- this is the
	   only legibility aid now, on the text itself, not the image. */
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.9);
}

.cwm-svc-hero__description {
	color: #ffffff;
	font-size: 16px;
	line-height: 1.7;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.9);
}

.cwm-svc-hero__description p {
	margin: 0 0 18px;
}

.cwm-svc-hero__description p:last-child {
	margin-bottom: 0;
}

.cwm-svc-hero__cta {
	display: inline-block;
	margin-top: 32px;
	padding: 16px 40px;
	background: #75CABA;
	color: #010101;
	text-decoration: none;
	font-weight: 700;
	border-radius: 30px;
	transition: background 0.2s ease;
}

.cwm-svc-hero__cta:hover {
	background: #ffffff;
}

/* Pricing */

/* Nested inside .cwm-svc-hero (see template-service-detail.php) rather
   than a separate section with its own background -- 2026-08-21, direct
   request: the hero photo should keep showing behind the pricing cards
   on every page, not just the single-tier merged-card case. No
   background/full-bleed of its own needed here; the hero already
   provides both. */
.cwm-svc-hero__pricing {
	position: relative;
	z-index: 1;
	padding: 40px 20px 0;
}

.cwm-svc-pricing__inner {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: start;
}

.cwm-svc-pricing__inner--count-1 {
	grid-template-columns: minmax(280px, 400px);
	justify-content: center;
}

.cwm-svc-pricing__inner--count-2 {
	grid-template-columns: repeat(2, minmax(280px, 1fr));
	max-width: 900px;
}

.cwm-svc-pricing-card {
	/* Dark purple gradient, 2026-08-21 direct request -- also ties the
	   card visually to the purple/violet club-photo tones the hero
	   backgrounds tend to have (DJ booths, stage lighting, etc.). */
	background: linear-gradient(160deg, #2a1a3d 0%, #150c22 60%, #0d0812 100%);
	border: 1px solid #2F7574;
	border-radius: 14px;
	padding: 36px 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.cwm-svc-pricing-card:hover {
	border-color: #75CABA;
	transform: translateY(-4px);
}

/* The single-tier "combine the two button cards" case (e.g. DJ
   Accelerator): the pricing card sits directly inside the hero instead
   of a separate section below it, replacing what used to be a second,
   redundant hero CTA button -- one card, one button, not two. Its own
   solid background is what keeps it legible against the now fully
   untinted hero photo, no page-wide darkening needed. */
.cwm-svc-pricing-card--merged {
	max-width: 400px;
	margin: 36px auto 0;
}

.cwm-svc-pricing-card__title {
	font-family: "Bebas Neue", cursive;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 34px;
	color: #ffffff;
}

.cwm-svc-pricing-card__subtitle {
	margin-top: 6px;
	color: #75CABA;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cwm-svc-pricing-card__price {
	margin-top: 20px;
	color: #ffffff;
	font-size: 34px;
	font-weight: 700;
}

.cwm-svc-pricing-card__price-unit {
	display: block;
	margin-top: 2px;
	color: #C3C0C0;
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cwm-svc-pricing-card__features {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

.cwm-svc-pricing-card__features li {
	padding: 10px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: #C3C0C0;
	font-size: 14px;
	line-height: 1.5;
}

.cwm-svc-pricing-card__features li:first-child {
	border-top: none;
}

.cwm-svc-pricing-card__button {
	display: inline-block;
	margin-top: 28px;
	padding: 14px 36px;
	background: transparent;
	border: 1px solid #75CABA;
	color: #75CABA;
	text-decoration: none;
	font-weight: 700;
	border-radius: 30px;
	transition: background 0.2s ease, color 0.2s ease;
}

.cwm-svc-pricing-card__button:hover {
	background: #75CABA;
	color: #010101;
}

/* Gallery */

.cwm-svc-gallery {
	/* Full-bleed, same technique as .cwm-svc-hero -- without this the
	   section's own black background stayed boxed to the theme's
	   centered content width, leaving the page's own (lighter grey)
	   background visible as side bars outside it. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: #010101;
	/* Was 0 top padding -- the grid sat flush against whatever section
	   ended right above it (the hero, or the pricing cards), with no
	   breathing room at all. */
	padding: 80px 0 100px;
}

.cwm-svc-gallery__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
}

.cwm-svc-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.cwm-svc-gallery__image {
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(160deg, #2a2a2a, #101010);
}

.cwm-svc-gallery__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.cwm-svc-pricing__inner,
	.cwm-svc-pricing__inner--count-2 {
		grid-template-columns: 1fr;
		max-width: 500px;
	}

	.cwm-svc-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.cwm-svc-hero {
		padding: 110px 0 50px;
	}

	.cwm-svc-gallery__grid {
		grid-template-columns: 1fr;
	}
}

/**
 * 2026-08-25: per-page embedded Amelia booking widget ("each it's own",
 * not one shared booking page). Amelia's own widget UI is a light/white
 * card by default -- rather than fighting its internal CSS to match the
 * page's dark theme (a much bigger job than this needed), it sits inside
 * its own light rounded card here, which reads as intentional against the
 * dark section instead of looking broken.
 */
.cwm-svc-book {
	/* Full-bleed, same technique/box-sizing fix as .cwm-svc-hero and
	   .cwm-svc-gallery -- box-sizing: border-box is not optional here,
	   see the hero's own comment for the mobile overflow bug this avoids. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
	background-color: #0d0d0d;
	padding: 80px 20px 100px;
}

.cwm-svc-book__inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.cwm-svc-book__heading {
	color: #ffffff;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 34px;
	letter-spacing: 0.03em;
	margin: 0 0 12px;
}

.cwm-svc-book__note {
	color: rgba(255, 255, 255, 0.7);
	margin: 0 0 32px;
}

.cwm-svc-book__inner .amelia-v2-booking {
	background: #ffffff;
	border-radius: 12px;
	padding: 24px;
	text-align: left;
}