/* ==========================================================================
   PDP § 3.7 — per-product marketing stack
   (template-parts/product/marketing.php)

   Four blocks, all driven by data stored on the product:

     .pm-section--banner      cc-image-banner   full-bleed artwork, no copy
     .pm-section--slideshow   cc-slideshow      image-only carousel
     .pm-section--media-text  cc-media-with-text
     .pm-section--tabs        PageFly "Learn from Tutorials & Pro Reviews"
     .pm-section--links       PageFly "+ Manuals, FAQ, and Support"
     .pm-section--rich-text   cc-rich-text (buttons)

   Height is never hard-coded: each banner box is an aspect-ratio pseudo-element
   (--pm-ratio / --pm-ratio-mobile, the ::after padding-top the live store
   prints inline), so the stack reserves its space before the artwork loads and
   the page never jumps.

   The PageFly blocks are rebuilt with the theme's own primitives — the live
   markup is a hashed styled-components dump — but keep the measured values:
   1200px grid, 36px/20px headings, 20px tab labels on #000 / #d1d5db, 30px
   icons in #272727 and 16px links.
   ========================================================================== */

.product-marketing {
	display: block;
	width: 100%;
}

/* PageFly grid: --cw:1200px with 15px side padding (§3.7.4/§3.7.5). */
.pm-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}

/* The rich-text block reuses the live store's text-overlay width cap. */
.pm-section--rich-text .max-w-text-overlay {
	max-width: 47em;
}

/* ==========================================================================
   Image banner + slideshow slide
   ========================================================================== */

/*
 * .pm-banner is a flex container, so the ::after is blockified and its
 * percentage padding resolves against the banner width — that is what gives
 * the box its height, exactly as on the live store.
 */
.pm-banner {
	position: relative;
	overflow: hidden;
}

.pm-banner::after {
	content: "";
	display: block;
	width: 0;
	padding-top: var(--pm-ratio, 31.25%);
}

/*
 * 600px, not the live store's 767px: the <source> in the template swaps the
 * artwork at 600px and the box must swap with it (spec §6.2).
 */
@media (max-width: 600px) {
	.pm-banner::after {
		padding-top: var(--pm-ratio-mobile, var(--pm-ratio, 75%));
	}
}

.pm-banner .image-banner__image {
	z-index: 0;
	background-color: transparent;
}

.pm-banner picture.img-fit {
	display: block;
}

/* Consecutive banners butt up against each other — .section--full-width has no
   margin, and nothing here adds padding. */
.pm-section--banner .section,
.pm-section--slideshow .section {
	padding-bottom: 0;
}

/* The pagination sits over the artwork; no slide reserves space for it. */
.pm-section--slideshow .slideshow-ctrl {
	--text-color: 241 244 249;
}

/* ==========================================================================
   Media with text (§3.7.3)
   ========================================================================== */

.pm-section--media-text .media-with-text__text {
	padding-top: calc(8 * var(--space-unit));
}

.pm-section--media-text .media-with-text__media .media {
	overflow: hidden;
}

@media (min-width: 769px) {
	.pm-section--media-text .media-with-text {
		display: flex;
		max-width: 1088px;
		margin: 0 auto;
	}

	.pm-section--media-text .media-with-text__media {
		flex: 1 1 var(--media-width, 50%);
		align-items: flex-end;
	}

	.pm-section--media-text .media-with-text__text {
		flex: 1 1 calc(100% - var(--media-width, 50%));
		padding-top: 0;
		padding-inline-start: calc(16 * var(--space-unit));
	}

	.pm-section--media-text .media-with-text--reverse {
		flex-direction: row-reverse;
	}
}

/* ==========================================================================
   PageFly tabs — "Learn from Tutorials & Pro Reviews" (§3.7.4)
   ========================================================================== */

.pm-section--tabs {
	padding: 35px 0 0;
	background-color: #fff;
}

.pm-tabs__heading {
	margin: 30px 0 -20px;
	color: #272727;
	font-family: var(--body-font-family);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.3;
}

.pm-tabs {
	padding: 15px 0;
}

/* The radios drive the panels; they are never seen. */
.pm-tabs__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.pm-tabs__headers {
	display: flex;
	flex-wrap: nowrap;
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}

.pm-tabs__headers::-webkit-scrollbar {
	display: none;
}

.pm-tabs__header {
	flex: 0 0 auto;
	padding: 8px 5px 8px 8px;
	transition: background-color .2s, color .2s;
	border-radius: 0;
	background-color: #000;
	color: #fff;
	font-family: var(--body-font-family);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
}

.pm-tabs__header:hover {
	background-color: #ecedf0;
	color: #000;
}

/* Active tab + visible panel. Four indexes is more than the live store uses
   (two), and the template only ever emits as many as there are tabs. */
.pm-tabs__radio--0:checked ~ .pm-tabs__headers .pm-tabs__header--0,
.pm-tabs__radio--1:checked ~ .pm-tabs__headers .pm-tabs__header--1,
.pm-tabs__radio--2:checked ~ .pm-tabs__headers .pm-tabs__header--2,
.pm-tabs__radio--3:checked ~ .pm-tabs__headers .pm-tabs__header--3 {
	background-color: #d1d5db;
	color: #fff;
}

.pm-tabs__radio:focus-visible ~ .pm-tabs__headers .pm-tabs__header {
	outline: 2px solid rgb(var(--text-color));
	outline-offset: 2px;
}

.pm-tabs__panel {
	display: none;
	padding-top: 15px;
}

.pm-tabs__radio--0:checked ~ .pm-tabs__panel--0,
.pm-tabs__radio--1:checked ~ .pm-tabs__panel--1,
.pm-tabs__radio--2:checked ~ .pm-tabs__panel--2,
.pm-tabs__radio--3:checked ~ .pm-tabs__panel--3 {
	display: block;
}

.pm-tabs__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

/* --- video / YouTube facade ------------------------------------------------
   The poster is local; the media itself is only fetched when the visitor hits
   play (assets/js/product-marketing.js), which is what the live PageFly block
   does with its IntersectionObserver srcdoc trick. */

.pm-video {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: var(--pm-video-ratio, 56.25%);
	overflow: hidden;
	/* Visible only behind a facade that has no poster (the YouTube tab): the
	   theme's media tint reads as "video not loaded yet", not as a broken box. */
	background-color: var(--blend-bg-color, #f1f4f9);
}

.pm-video__btn {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
}

button.pm-video__btn {
	cursor: pointer;
}

.pm-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.pm-video__media {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background-color: #000;
	object-fit: cover;
}

@media (max-width: 767px) {
	.pm-section--tabs {
		padding-top: 10px;
	}

	.pm-tabs__heading {
		margin: 10px 0 -20px;
		font-size: 20px;
		text-align: center;
	}

	.pm-tabs__headers {
		justify-content: center;
	}

	.pm-tabs__header {
		font-size: 14px;
	}

	.pm-tabs__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
}

/* ==========================================================================
   PageFly link row — "+ Manuals, FAQ, and Support" (§3.7.5)
   ========================================================================== */

.pm-section--links {
	padding: 45px 0;
	background-color: #fff;
}

.pm-links__heading {
	margin: 0 0 15px;
	color: #272727;
	font-family: var(--body-font-family);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	text-align: start;
	text-transform: capitalize;
}

.pm-links__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	padding-top: 15px;
}

.pm-links__icon {
	display: block;
	margin-bottom: 10px;
	color: #272727;
	line-height: 0;
}

.pm-links__icon svg {
	display: inline-block;
	width: 30px;
	height: 30px;
}

.pm-links__label {
	margin: 0;
	color: #272727;
	font-size: 16px;
	line-height: 1.4;
}

.pm-links__label a {
	color: inherit;
}

.pm-links__label a:hover {
	text-decoration: underline;
}

@media (min-width: 768px) {
	.pm-links__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px;
	}
}

@media (min-width: 1025px) {
	.pm-links__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ≥1200: the e-mail column is dropped and the three remaining links share the
   row (the live block's pf-lg-hide). */
@media (min-width: 1200px) {
	.pm-links__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pm-links__item--hide-lg {
		display: none;
	}
}

@media (max-width: 767px) {
	.pm-links__heading {
		text-align: center;
	}

	.pm-links__item {
		text-align: center;
	}

	.pm-links__icon svg {
		margin: 0 auto;
	}
}

/* ==========================================================================
   Accordion (schema completeness — no shipped product uses it yet)
   ========================================================================== */

.pm-accordion__heading {
	margin-bottom: var(--heading-gap);
	text-align: center;
}