/**
 * Podcast, Vodcast & Voice page (post ID 727, slug "podcast-studio",
 * live at /podcast-voice-over/).
 *
 * REDESIGNED per the client's own mockup screenshots -- same situation
 * page-social-media-content.css was in (net new content, no production
 * baseline to measure against), in that same page's dark visual
 * language (--color-primary yellow accent rather than the mockup's
 * orange, --font-heading/Oswald headings, --font-body body copy). The
 * old production-measured styles (Services icon strip, Tech Specs
 * bullet-list variant, split-section studio descriptions) are gone from
 * this file along with the sections that used them -- see
 * page-podcast-voice-over.php and MIGRATION.md. The eyebrow label, step
 * list, CTA block, feature row, card grid, and FAQ accordion this page
 * reuses all live in shared-blocks.css, not here (promoted there once
 * Drone Cinematography's own redesign reused them on a second page).
 *
 * Bare-element rules scoped, same reason as everywhere else in this
 * theme (see footer.css).
 */

/* ---- Studio Picker ("Pick Your Studio") ---- */

.cwf-studio-picker {
	padding: 60px 56px 48px;
	background: var(--color-black);
}
.cwf-studio-picker .cwf-studio-picker__heading {
	max-width: 800px;
	margin: 0 auto 40px;
	font-family: var(--font-nav-submenu); /* Montserrat -- matches Event Coverage's mockup, this project's shared heading template now */
	font-size: 32px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-white);
	text-align: center;
}
.cwf-studio-picker__row {
	display: flex;
	gap: 24px;
	max-width: 1328px;
	margin: 0 auto;
}
.cwf-studio-picker__card {
	flex: 1 1 0;
	min-width: 0;
	background: var(--color-bg-dark-1);
	border: 1px solid var(--color-border-on-dark);
	border-radius: 10px;
	overflow: hidden;
}
.cwf-studio-picker__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 0;
	background: var(--color-bg-dark-2);
	border-bottom: 1px solid var(--color-border-on-dark);
}
.cwf-studio-picker__icon {
	width: 48px;
	height: 48px;
	color: var(--color-text);
}
.cwf-studio-picker__body {
	padding: 28px 28px 32px;
	text-align: center;
}
.cwf-studio-picker .cwf-studio-picker__name {
	margin: 0 0 6px;
	font-family: var(--font-nav-submenu); /* Montserrat -- matches the shared heading template, see MIGRATION.md */
	font-size: 30px;
	font-weight: 700;
	color: var(--color-white);
}
.cwf-studio-picker .cwf-studio-picker__tagline {
	margin: 0 0 22px;
	font-family: var(--font-body);
	font-size: 22px;
	font-weight: 600;
	color: var(--color-primary);
}
.cwf-studio-picker .cwf-studio-picker__features {
	margin: 0 0 28px;
	padding-left: 0;
	list-style-position: inside; /* keeps the bullet centered with its
	                                 line instead of pinned to the list's
	                                 outer (left) edge -- see MIGRATION.md */
	font-family: var(--font-body);
	font-size: 22px;
	line-height: 1.6;
	color: var(--color-text);
}
.cwf-studio-picker .cwf-studio-picker__features li::marker {
	color: var(--color-primary);
}
.cwf-studio-picker .cwf-studio-picker__btn {
	display: inline-block;
	padding: var(--button-padding);
	font-family: var(--font-nav-submenu);
	font-size: 16px;
	font-weight: var(--fw-button);
	text-decoration: none;
	border-radius: var(--button-radius);
}
.cwf-studio-picker .cwf-studio-picker__btn--solid {
	background: var(--color-primary);
	color: var(--color-black);
	border: 1px solid var(--color-primary);
}
.cwf-studio-picker .cwf-studio-picker__btn--outline {
	background: transparent;
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
}
.cwf-studio-picker .cwf-studio-picker__note {
	max-width: 700px;
	margin: 32px auto 0;
	font-family: var(--font-body);
	font-size: 20px;
	line-height: 1.5;
	color: var(--color-text);
	text-align: center;
}

/* ---- Image grid ("Inside the Studio") ---- */

.cwf-image-grid {
	padding: 24px 56px 56px;
	background: var(--color-black);
}
.cwf-image-grid .cwf-image-grid__heading {
	max-width: 800px;
	margin: 0 auto 32px;
	font-family: var(--font-nav-submenu); /* Montserrat -- matches the shared heading template, see MIGRATION.md */
	font-size: 32px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-white);
	text-align: center;
}
.cwf-image-grid__row {
	display: flex;
	gap: 16px;
	max-width: 1328px;
	margin: 0 auto 16px;
}
.cwf-image-grid__row:last-child {
	margin-bottom: 0;
}
.cwf-image-grid__tile {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 4 / 3;
	background: var(--color-bg-dark-2);
	border-radius: 8px;
	overflow: hidden;
}
.cwf-image-grid__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cwf-image-grid__placeholder {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 32px;
	height: 32px;
	color: var(--color-text);
	opacity: 0.5;
}

/* ---- Size bump for the shared cta-block text, this page only ----
 * cta-block.php's own CSS lives in shared-blocks.css (also used by
 * Social Media Content, at its own original smaller size) -- this
 * overrides the secondary/body text size specifically for this page
 * rather than editing the shared rule directly, so Social Media
 * Content's sizing is untouched. Loads after shared-blocks.css
 * (enqueue order in functions.php), so equal-specificity selectors
 * here win the cascade.
 *
 * step-list.php's own label/subtext size bump used to live here too --
 * promoted to shared-blocks.css's own default once Event Coverage/
 * Social Media Content needed the exact same bigger size (client
 * request, see MIGRATION.md), so it's no longer page-specific at all.
 */
.cwf-cta-block .cwf-cta-block__text {
	font-size: 20px;
}
.cwf-cta-block .cwf-cta-block__subtext {
	font-size: 16px;
}

@media (max-width: 900px) {
	.cwf-studio-picker,
	.cwf-image-grid {
		padding-left: 20px;
		padding-right: 20px;
	}
	.cwf-studio-picker .cwf-studio-picker__heading,
	.cwf-image-grid .cwf-image-grid__heading {
		font-size: clamp(22px, 6vw, 32px);
	}
	.cwf-studio-picker__row {
		flex-direction: column;
	}
	/* Without this, the cards effectively vanish below 900px: `flex: 1 1 0`
	   (set for the desktop row layout, above) means "start from zero and
	   grow" on whichever axis is the flex main axis -- once the row
	   switches to flex-direction: column just above, that axis becomes
	   height, and a block container's height is indefinite (auto) unless
	   set explicitly, so the cards collapse toward zero height instead of
	   sizing to their own content. `flex: 1 1 auto` sizes each card by its
	   content again, the same as a plain block would. See MIGRATION.md. */
	.cwf-studio-picker__card {
		flex: 1 1 auto;
	}
	.cwf-card-grid__row {
		grid-template-columns: repeat(2, 1fr);
	}
	.cwf-image-grid__row {
		flex-wrap: wrap;
	}
	.cwf-image-grid__tile {
		flex: 1 1 calc(50% - 8px);
	}
}

@media (max-width: 600px) {
	.cwf-card-grid__row {
		grid-template-columns: 1fr;
	}
}

/* ---- Section-divider padding symmetry ----
   template-parts/section-divider.php now sits between some (not all --
   see below) of this page's solid-black content sections (see
   page-podcast-voice-over.php and shared-blocks.css's
   .cwf-section-divider). That component has no padding of its own by
   design -- these overrides bring each such pair's facing padding to a
   matching 40px so the divider sits vertically centered in the gap.
   Bare-class selectors are safe here: every one of these components
   appears only once on this page, and this file loads only on this
   page.
   No divider (and so no override) between the Inquire strip and either
   neighbor, or between "Common Questions" and the closing CTA -- those
   were removed per the client's request that a CTA button already
   reads as the section break on its own; the sides facing that removed
   divider are left at their own default padding instead. See
   MIGRATION.md. */
.cwf-studio-picker {
	padding-bottom: 40px;
}
.cwf-feature-row {
	padding-top: 40px;
	padding-bottom: 40px;
}
.cwf-card-grid {
	padding-top: 40px;
	/* bottom left at its default 64px -- faced the Inquire strip, no divider there now */
}
.cwf-image-grid {
	/* top left at its default 24px -- faced the Inquire strip, no divider there now */
	padding-bottom: 40px;
}
.cwf-step-list {
	padding-top: 40px;
	padding-bottom: 40px;
}
.cwf-faq {
	padding-top: 40px;
	/* bottom left at its default 64px -- faced the closing CTA, no divider there now */
}