/* Rentals landing page (taxonomy-product_cat-rental.php). Same
   palette/tokens as every other component in this theme. The card
   grid itself (.cwm-card-grid/.cwm-card/...) is the shared component
   in cards.css -- this file only covers what's unique to this page. */

.cwm-rentals-hero {
	position: relative;
	/* Full-bleed: breaks out of the theme's centered content-width
	   wrapper regardless of how that wrapper computes its own width,
	   so this doesn't depend on matching mediaflex_get_content_width()'s
	   own math -- a standard, robust technique for a full-viewport-width
	   section inside an otherwise-centered layout. */
	width: 100vw;
	/* 2026-08-22: without this, the classic 100vw-plus-padding trap --
	   this element's own left/right padding (20px each, below) added
	   ON TOP of the 100vw width in the default content-box model,
	   pushing the real rendered box 40px wider than the viewport and
	   overflowing text/content off the right edge on mobile (confirmed
	   via computed style: box-sizing was "content-box", box rect was
	   430px wide in a 390px viewport). border-box makes the padding
	   come out of the 100vw budget instead of adding to it. */
	box-sizing: border-box;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: #010101;
	overflow: hidden;
	/* Taller than a typical section on purpose: at full viewport width
	   the box's aspect ratio is much wider/shorter than Hero.jpg's own
	   (1600x936) -- too little height here forces object-fit:cover to
	   crop in hard on a plain part of the photo instead of showing the
	   actual inventory. Also clears the transparent header floating on
	   top of it (cwm-header--overlay) -- see header.css. */
	padding: 170px 20px 110px;
}

.cwm-rentals-hero__bg {
	position: absolute;
	inset: 0;
	opacity: 0.85;
}

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

/* Image stays clear/bright through the top and middle -- only fades
   into the section's own background color near the bottom edge,
   rather than a dark tint over the whole image. */
.cwm-rentals-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(1, 1, 1, 0) 0%, rgba(1, 1, 1, 0) 55%, #010101 100%);
}

/* A separate scrim just for the strip the transparent header floats
   over -- the bottom fade above stays fully transparent up top, which
   would otherwise leave the nav sitting directly on the brightest part
   of the photo with nothing to keep it legible. */
.cwm-rentals-hero__nav-scrim {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 220px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

.cwm-rentals-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

/* The image no longer has a dark tint over the top/middle (only the
   bottom-edge fade), so the heading needs its own legibility insurance
   against a busy product-photo background instead. */
.cwm-rentals-hero__eyebrow {
	color: #75CABA;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0 0 16px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.cwm-rentals-hero__heading {
	margin: 0 0 20px;
	font-size: clamp(36px, 6vw, 64px);
	text-shadow: 0 4px 20px rgba(0, 0, 0, 0.85);
}

.cwm-rentals-hero__sub {
	color: #C3C0C0;
	font-size: 18px;
	line-height: 1.6;
	max-width: 600px;
	margin: 0 auto 32px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

.cwm-rentals-hero__cta {
	display: inline-block;
	padding: 18px 44px;
	background: #75CABA;
	color: #010101;
	text-decoration: none;
	font-weight: 700;
	border-radius: 30px;
}

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

/* .cwm-rentals-story removed 2026-08-23 -- its section was dropped
   from rentals-landing-content.php (its own text had become a direct
   duplicate of the hero subheading), so this had nothing left to
   style. */

.cwm-rentals-categories {
	background-color: #010101;
	padding: 80px 20px;
}

.cwm-rentals-categories__inner {
	max-width: 1400px;
	margin: 0 auto;
}

/* .cwm-rentals-categories__heading ("Search By Category") removed
   2026-08-31 direct request -- the 4 group headings below now carry
   the section on their own, sized as real titles rather than small
   subheadings. */

/* 2026-08-31 direct request: "organize the cards by their 4 heading
   groups" -- each group is its own labeled block (heading + its own
   .cwm-card-grid from cards.css) stacked in place of the removed
   single section heading above. */
.cwm-category-group {
	margin-bottom: 56px;
}

.cwm-category-group:last-child {
	margin-bottom: 0;
}

.cwm-category-group__heading {
	/* 2026-08-31 direct request: "make the four section titles larger
	   Title sized font" -- bumped from a 26px subheading up to the
	   same size/weight the page's old single "Search By Category" h2
	   used (47.005px computed, this theme's default h2 size), rather
	   than an arbitrary bigger number. */
	font-family: "Bebas Neue", cursive; /* matches this theme's own h2 default font, explicit here since h3 doesn't inherit that default. */
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.75px;
	font-size: 47px;
	color: #75CABA; /* Cyan, matching the header nav's own active-item color -- ties each group label to the site's accent language. */
	margin: 0 0 32px;
}

.cwm-rentals-fullservice {
	margin-top: 60px;
	padding: 40px;
	background: #1f1f1f;
	border: 1px solid #2F7574;
	border-radius: 14px;
	text-align: center;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.cwm-rentals-fullservice__heading {
	margin: 0 0 12px;
}

.cwm-rentals-fullservice__text {
	color: #C3C0C0;
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 24px;
}

.cwm-rentals-fullservice__cta {
	display: inline-block;
	padding: 14px 30px;
	background: transparent;
	border: 2px solid #75CABA;
	color: #ffffff;
	text-decoration: none;
	font-weight: 700;
	border-radius: 30px;
	transition: background 0.2s ease;
}

.cwm-rentals-fullservice__cta:hover {
	background: #75CABA;
	color: #010101;
}

.cwm-rentals-video {
	background-color: #191919;
	padding: 80px 20px;
}

.cwm-rentals-video__inner {
	max-width: 1400px;
	margin: 0 auto;
}

.cwm-rentals-video__heading {
	text-align: center;
	margin: 0 0 40px;
}

/* .cwm-rentals-video__grid removed 2026-08-31 -- the section no longer
   renders its own 2-embed grid; it now renders the Smash Balloon
   "Feeds for YouTube" plugin's own shortcode output (see
   rentals-landing-content.php), which brings its own internal grid/
   responsive CSS. .cwm-rentals-video__feed below is just a light
   width/spacing wrapper around that plugin output, not a real grid. */
.cwm-rentals-video__feed {
	max-width: 100%;
}

.cwm-rentals-events {
	background-color: #010101;
	padding: 80px 20px;
}

.cwm-rentals-events__inner {
	max-width: 1400px;
	margin: 0 auto;
}

.cwm-rentals-events__heading {
	text-align: center;
	margin: 0 0 40px;
}

.cwm-rentals-final-cta {
	background-color: #191919;
	padding: 70px 20px;
	text-align: center;
}

.cwm-rentals-final-cta__tagline {
	font-family: "Bebas Neue", cursive;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #75CABA;
	font-size: 24px;
	margin: 0 0 24px;
}

.cwm-rentals-final-cta__button {
	display: inline-block;
	padding: 18px 44px;
	background: #75CABA;
	color: #010101;
	text-decoration: none;
	font-weight: 700;
	border-radius: 30px;
}

.cwm-rentals-final-cta__button:hover {
	background: #ffffff;
}