

.l-section.c-as-seen-on-tv {
	background: var(--meda-shell-beige) !important;
}

.l-section.c-awards-logos,
.l-section.c-as-seen-on-tv,
.l-section:has(.c-awards-grid) {
	overflow: visible;
}

.l-section.c-awards-logos .c-section__intro,
.l-section.c-as-seen-on-tv .c-section__intro,
.l-section:has(.c-awards-grid) .c-section__intro {
	width: 100%;
}

.l-section.c-awards-logos .c-section__intro > .vc_column-inner,
.l-section.c-as-seen-on-tv .c-section__intro > .vc_column-inner,
.l-section:has(.c-awards-grid) .c-section__intro > .vc_column-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	text-align: center;
}

.l-section.c-awards-logos .c-section__intro > .vc_column-inner > .c-section__heading,
.l-section.c-as-seen-on-tv .c-section__intro > .vc_column-inner > .c-section__heading,
.l-section:has(.c-awards-grid) .c-section__intro > .vc_column-inner > .c-section__heading {
	width: 100%;
	max-width: none;
	margin-inline: auto;
}

.l-section.c-awards-logos .c-section__content,
.l-section.c-as-seen-on-tv .c-section__content,
.l-section:has(.c-awards-grid) .c-section__content {
	width: 100%;
	max-width: none;
	margin-top: var(--meda-awards-header-gap, 4.6875rem);
}

.l-section.c-awards-logos .c-section__content .vc_column-inner,
.l-section.c-as-seen-on-tv .c-section__content .vc_column-inner,
.l-section:has(.c-awards-grid) .c-section__content .vc_column-inner {
	display: block;
	width: 100%;
	padding: 0;
}

.l-section.c-awards-logos .c-section__heading,
.l-section.c-awards-logos h2.c-section__heading,
.l-section.c-as-seen-on-tv .c-section__heading,
.l-section.c-as-seen-on-tv h2.c-section__heading,
.l-section:has(.c-awards-grid) .c-section__heading,
.l-section:has(.c-awards-grid) h2.c-section__heading {
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-size: var(--h2-font-size);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none !important;
	color: var(--meda-text, #1a1a1a);
}

.c-awards-grid.w-grid {
	width: 100%;
}

/* Branded Owl chrome — opt in with u-enable-branded-carousel on the section (c-awards-logos / c-as-seen-on-tv) or on the grid. Logo styles stay on. */
.u-enable-branded-carousel.c-awards-grid.type_carousel .owl-nav,
.u-enable-branded-carousel.c-awards-grid.type_carousel .owl-dots,
.u-enable-branded-carousel.c-awards-grid .owl-nav,
.u-enable-branded-carousel.c-awards-grid .owl-dots,
.u-enable-branded-carousel .c-awards-grid.type_carousel .owl-nav,
.u-enable-branded-carousel .c-awards-grid.type_carousel .owl-dots,
.u-enable-branded-carousel .c-awards-grid .owl-nav,
.u-enable-branded-carousel .c-awards-grid .owl-dots {
	display: none !important;
}

.u-enable-branded-carousel.c-awards-grid.type_carousel .owl-stage-outer,
.u-enable-branded-carousel .c-awards-grid.type_carousel .owl-stage-outer {
	overflow: visible;
}

.c-awards-grid.type_carousel .owl-item {
	display: flex;
	padding-inline: calc(var(--meda-awards-logo-gap, 4.75rem) / 2);
}

.c-awards-grid .w-grid-item {
	height: 100%;
}

.c-awards-grid .w-grid-item-h {
	height: 100%;
}

html.meda-motion-gsap .c-awards-grid .w-grid-item-h {
	transition: none !important;
}

.c-awards-grid__content {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--meda-awards-badge-max-height, 8.75rem);
	padding: 0;
}

.c-awards-grid__logo,
.c-awards-grid__logo.post_image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.c-awards-grid__logo a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-decoration: none;
}

.l-section.c-awards-logos .c-awards-grid__logo img,
.l-section:has(.c-awards-grid):not(.c-as-seen-on-tv) .c-awards-grid__logo img {
	display: block;
	width: auto;
/* max-width: var(--meda-awards-badge-max-width, 8.625rem); max-height: var(--meda-awards-badge-max-height, 8.75rem); */
	height: auto;
	object-fit: contain;
}

.c-awards-grid__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/* Phones: the Owl slide padding (logo gap) plus Impreza's 24px grid-item padding left award badges and TV logos 53px wide, too small to read. The slide padding alone keeps them apart; with the Home carousels at 2 per view this gives ~164px logos. TV logos also get the desktop height instead of the 36px phone clamp. */
@media (max-width: 900px) {
	.l-section.c-awards-logos .c-awards-grid .w-grid-item,
	.l-section:has(.c-awards-grid) .c-awards-grid .w-grid-item {
		padding: 0;
	}

	.l-section.c-as-seen-on-tv {
		--meda-as-seen-logo-max: 3.125rem;
	}

	/* 2-up on a tablet would otherwise blow the 300px badges up to ~340px. */
	.l-section.c-awards-logos .c-awards-grid__logo img,
	.l-section:has(.c-awards-grid):not(.c-as-seen-on-tv) .c-awards-grid__logo img {
		max-width: min(100%, 10.5rem);
	}
}

.c-awards-grid__logo a:focus-visible {
	outline: 2px solid var(--meda-gold, #a58b46);
	outline-offset: 4px;
	border-radius: 2px;
}

/* viewport's width in dead space — scales down with the screen. */
.l-section.c-as-seen-on-tv {
	padding-top: var(--meda-space-lg) !important;
	padding-bottom: var(--meda-space-2xl) !important;
}

.l-section.c-as-seen-on-tv .c-section__intro > .vc_column-inner {
	gap: 0;
}

.l-section.c-as-seen-on-tv .c-section__content {
	margin-top: var(--meda-as-seen-header-gap, 5.1875rem);
}

.l-section.c-as-seen-on-tv .c-awards-grid__logo img {
	max-height: var(--meda-as-seen-logo-max, 3.125rem);
	mix-blend-mode: multiply;
}

.l-section.c-as-seen-on-tv .c-awards-grid__content {
	min-height: var(--meda-as-seen-logo-max, 3.125rem);
	padding: 0;
}

/* "As Seen On" reads as a small label so the media logos are the hero (client, 2026-10-02). */
.l-section.c-as-seen-on-tv .c-section__heading,
.l-section.c-as-seen-on-tv h2.c-section__heading,
.l-section.c-as-seen-on-tv .c-section__intro > .vc_column-inner > .c-section__heading {
	font-family: inherit;
	font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase !important; /* the shared heading rule above forces none */
	color: #6b6b6b;
}

.l-section.c-as-seen-on-tv .l-section-h > .g-cols + .g-cols,
.l-section.c-as-seen-on-tv .l-section-h > .g-cols:has(.c-section__content),
.l-section.c-as-seen-on-tv .c-section__intro .c-section__content {
	margin-top: 1.25rem;
}
