/**
 * Gallery carousel. See template-parts/gallery-carousel.php.
 * 2 images visible at a time on desktop (measured from production),
 * 1 on mobile. Bare-element rules scoped, same reason as everywhere else
 * in this theme (see footer.css).
 */

.cwf-gallery {
	padding: 60px 56px;
	background: var(--color-black);
	text-align: center;
}

.cwf-gallery .cwf-gallery__heading {
	margin: 0 0 32px;
	font-family: var(--font-nav-submenu); /* Montserrat, measured -- matches this page's other headings */
	font-size: 45px;
	font-weight: 600;
	color: var(--color-bg-light-1);
	text-transform: uppercase;
	overflow-wrap: break-word; /* safety net -- see the mobile clamp()
	                               below, same reasoning as hero.css/
	                               split-section.css */
}

/* Event Spaces variant: measured larger/capitalize/pure white, unlike
   Stages & Studios' 45px/uppercase/#F8F8F8 -- verified against
   production, not assumed consistent (see gallery-carousel.php). */
.cwf-gallery .cwf-gallery__heading--large {
	font-size: 60px;
	text-transform: capitalize;
	color: var(--color-white);
}

.cwf-gallery__carousel {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 1328px;
	margin: 0 auto;
}

/* !important on background/border below is justified, not decorative:
   the parent Hello Elementor theme's reset.css ships a sitewide
   `button{background-color:transparent;border:1px solid #c36}` /
   `button:focus,button:hover{background-color:#c36}` default (a dusty
   pink) -- confirmed a real, winning collision on the video carousel's
   arrows (same markup pattern as this one) despite this rule's higher
   class-specificity. Caught here proactively before a client report,
   not after. See MIGRATION.md. */
.cwf-gallery .cwf-gallery__arrow {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent !important;
	border: 0 !important;
	color: var(--color-white);
	cursor: pointer;
}
.cwf-gallery .cwf-gallery__arrow svg {
	width: 28px;
	height: 28px;
}
.cwf-gallery .cwf-gallery__arrow:hover,
.cwf-gallery .cwf-gallery__arrow:focus {
	background: transparent !important;
	color: var(--color-primary) !important;
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.cwf-gallery__viewport {
	flex: 1 1 auto;
	overflow: hidden;
}

.cwf-gallery__track {
	display: flex;
	gap: 20px;
	transition: transform 0.4s ease;
}

.cwf-gallery .cwf-gallery__slide {
	/* N slides visible, (N-1) 20px gaps between them, within the track's
	   own width -- was hardcoded 50% for the fixed 2-per-view case,
	   generalized when Home needed 6 and 3 per view (see
	   gallery-carousel.php's `slides_per_view` arg). */
	flex: 0 0 calc((100% - (var(--cwf-slides-per-view) - 1) * 20px) / var(--cwf-slides-per-view));
}

.cwf-gallery .cwf-gallery__img {
	display: block;
	width: 100%;
	height: 400px;
	object-fit: cover;
}

/* Home's "Our Credits" logos: no fixed 400px height (would badly
   distort a logo) -- square-ish box, contain not cover. See
   gallery-carousel.php's `image_fit` arg. */
.cwf-gallery__carousel--logos .cwf-gallery__img {
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--color-bg-dark-1);
	padding: 24px;
}

/**
 * "Our Credits" section -- previously a white-strip variant (shipped
 * to production, 27th deploy) so the logos (several of which already
 * sit on a white background themselves -- Boots & Brews, Khay Fest,
 * Live Nation, Insomniac) blended into the section instead of sitting
 * in individual dark tiles on black. Client then asked to switch back
 * to black -- reverted to the base `.cwf-gallery` background (no
 * override needed) and dropped the heading/arrow black-text overrides
 * below so they fall back to the sitewide white/default styling
 * shared with every other `.cwf-gallery` section (Featured Work, and
 * every other page's gallery). Only the logo tiles' own no-box
 * treatment (below) is kept -- not asked to revert that part.
 *
 * A yellow (`--color-primary`) variant was also previewed locally per
 * the client's request ("so I can see how that would look") and
 * rejected while this was still the white-strip build.
 */
.cwf-gallery--credits {
	/* Space between this section and the "social media content" split-
	   section image directly above it, per the client's request. `padding`
	   (adding to the base `.cwf-gallery` rule's 60px top padding, so 120px
	   total), NOT `margin` -- margin sits outside the section's own black
	   background box, so it exposed the page's white default background
	   as a visible white stripe once this section stopped being white
	   itself (caught from a real device screenshot). See MIGRATION.md. */
	padding-top: 120px;
}
/**
 * Client corrected the initial "smaller carousel" attempt: narrowing
 * it (max-width: 900px, since reverted) made it stop being edge-to-
 * edge like every other section on this page -- width should stay
 * the standard 1328px (the inherited default, no override needed).
 * "Smaller"/"shorter" means less TALL -- overriding the logos'
 * aspect-ratio (1:1 by default) to a shorter box, tighter padding to
 * match.
 */
.cwf-gallery--credits .cwf-gallery__carousel--logos .cwf-gallery__img {
	/* aspect-ratio (coupled to the slide's own width) made the logos
	   render tiny -- fixed height instead, decoupled from width, so the
	   box stays shorter than the original square tile but the logos
	   themselves render much bigger (object-fit: contain scales up to
	   fill the available height, minus padding). */
	height: 150px;
	aspect-ratio: auto;
	padding: 0; /* was 24px (inherited), then 16px, then 10px -- with no background box (below) to breathe against, padding just shrinks the visible logo for no reason; the track's own 20px gap already separates slides */
	background: none; /* was var(--color-white) -- client asked for no per-image boxed background at all, just the bare logo directly on the section's own background */
}

/* Home's "Featured Work" photos: measured ~3:2, shorter than the
   400px-tall default (narrower slides at 3-per-view would look oddly
   tall/cropped at a fixed 400px). */
.cwf-gallery__carousel--wide .cwf-gallery__img {
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Home only: the "See All Our Work" button below the Featured Work
   carousel -- not part of gallery-carousel.php itself since it's a
   one-off standalone element, not a component prop. */
.cwf-home-see-all {
	display: flex;
	justify-content: center;
	padding: 0 0 60px; /* reverted back to its original 0 top padding -- was briefly 60px to symmetrize a section-divider here, removed per the client's request that a CTA button doesn't need one. See MIGRATION.md. */
	background: var(--color-black);
}
.cwf-home-see-all .cwf-split__btn {
	/* Measured: solid gold fill, black text, no border, 5px radius,
	   15px/30px padding -- a distinct style from every other button on
	   this site (all white-outline/transparent, 1px/2px-radius) -- a
	   genuine one-off, not a mistake to unify away. */
	font-family: var(--font-nav-title); /* Inter, measured */
	color: var(--color-black);
	background: var(--color-primary);
	border: 0;
	border-radius: 5px;
	padding: 15px 30px;
}

@media (max-width: 767px) {
	.cwf-gallery {
		padding: 40px 20px;
	}
	.cwf-gallery .cwf-gallery__heading {
		/* Found via the same narrow-viewport sweep as Drone's heading
		   fix -- "Photography" alone overflowed the 280px container on
		   a 320px viewport, being one unbreakable word. clamp() with a
		   vw-based middle value scales continuously with viewport --
		   same reasoning as hero.css/split-section.css/
		   page-contact-us.css/video-grid.css's equivalent fixes.
		   Coefficient tuned against the ACTUAL rendered word width
		   (empirically: max font that keeps "Photography" on one line
		   at 320px measured 34px via the real loaded webfont), not a
		   canvas-based estimate -- an earlier version of this fix used
		   Canvas 2D's measureText() with a generic fallback font
		   (canvas couldn't see the real @font-face Montserrat), which
		   under-measured the word and still let it break
		   ("Photograph"/"y") at the computed 36.6px. See MIGRATION.md. */
		font-size: clamp(20px, calc(11vw - 5px), 45px);
	}
	.cwf-gallery .cwf-gallery__heading--large {
		font-size: clamp(24px, calc(11vw - 5px), 60px);
	}
	.cwf-gallery .cwf-gallery__slide {
		flex: 0 0 100%;
	}
	.cwf-gallery .cwf-gallery__img {
		height: 260px;
	}
	.cwf-gallery__carousel--logos .cwf-gallery__img,
	.cwf-gallery__carousel--wide .cwf-gallery__img {
		height: auto;
	}
}