/**
 * Power to Move — "Porque escolher a Power To Move" (Figma "Homepage - 1440 V2"
 * / "Homepage - Mobile"), printed by [ptm_vantagens]; the same design is
 * "Os nossos valores" on Sobre Nós, printed by [ptm_valores].
 *
 * The items on the left are tabs; the card on the right stacks one panel per
 * item and cross-fades to the active one. Text is light: the section sits on
 * a dark page row (palette 2).
 *
 * Breakpoints match Blocksy: tablet ≤ 999.98px, mobile ≤ 689.98px.
 */

.ptm-advantages {
	--ptm-advantages-gap: clamp(48px, 11.75vw, 169px);
	--ptm-advantages-line: rgb(255 255 255 / 0.2);
	--ptm-advantages-divider: rgb(255 255 255 / 0.12);
	--ptm-advantages-fade: 0.4s;
	display: grid;
	/* 586 / 525 in the 1280px Figma container. */
	grid-template-columns: minmax(0, 586fr) minmax(0, 525fr);
	align-items: center;
	column-gap: var(--ptm-advantages-gap);
	color: var(--theme-palette-color-8);
}

/* ------------------------------------------------------------------ */
/* Title and tabs                                                       */
/* ------------------------------------------------------------------ */

.ptm-advantages .ptm-advantages__title {
	/* Figma lets the one-line title run into the column gap. */
	margin: 0 calc(-1 * var(--ptm-advantages-gap)) 32px 0;
	color: var(--theme-palette-color-8);
	/* Figma's tracking (-1.2px): keeps the title on one line at 1440px. */
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.ptm-advantages__highlight {
	color: var(--theme-palette-color-1);
}

.ptm-advantages__tabs {
	display: flex;
	flex-direction: column;
}

.ptm-advantages .ptm-advantage {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 17px;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 40px 0 32px 56px;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--theme-palette-color-8);
	font: inherit;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	transition: border-color var(--ptm-advantages-fade) ease;
}

/* Left rule: a thin line, a thicker green bar on the active item. */
.ptm-advantage::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: -1px;
	left: 0;
	width: 1px;
	background-color: var(--ptm-advantages-line);
	transition: background-color 0.2s ease, width 0.2s ease;
}

.ptm-advantage[aria-selected="true"] {
	border-bottom-color: var(--ptm-advantages-divider);
	cursor: default;
}

.ptm-advantage[aria-selected="true"]::before {
	width: 2px;
	background-color: var(--theme-palette-color-1);
}

.ptm-advantage[aria-selected="false"]:hover::before {
	background-color: rgb(255 255 255 / 0.6);
}

.ptm-advantage:focus-visible {
	outline: 2px solid var(--theme-palette-color-1);
	outline-offset: 2px;
}

.ptm-advantage__heading {
	display: flex;
	align-items: center;
	gap: 15px;
	transition: color 0.2s ease;
}

.ptm-advantage[aria-selected="true"] .ptm-advantage__heading {
	color: var(--theme-palette-color-1);
}

.ptm-advantage__icon {
	flex-shrink: 0;
	width: 25px;
	height: 25px;
	color: var(--theme-palette-color-1);
}

.ptm-advantage__text {
	display: block;
	max-width: 440px;
}

/* ------------------------------------------------------------------ */
/* Card                                                                 */
/* ------------------------------------------------------------------ */

.ptm-advantages__media {
	display: grid;
	aspect-ratio: 525 / 726;
	overflow: hidden;
	border-radius: 20px;
	background-color: var(--theme-palette-color-4);
}

.ptm-advantages__panel {
	position: relative;
	isolation: isolate;
	grid-area: 1 / 1;
	display: flex;
	align-items: flex-end;
	min-width: 0;
	padding: 25px 25px 31px;
	/* The panel being left stays opaque under the incoming one until its fade ends. */
	transition: opacity 0s linear var(--ptm-advantages-fade), visibility 0s linear var(--ptm-advantages-fade);
}

.ptm-advantages__panel:not(.is-active) {
	opacity: 0;
	visibility: hidden;
}

.ptm-advantages__panel.is-active {
	z-index: 1;
	transition: opacity var(--ptm-advantages-fade) ease;
}

.ptm-advantages__panel:focus-visible {
	outline: 2px solid var(--theme-palette-color-1);
	outline-offset: -4px;
	border-radius: 20px;
}

.ptm-advantages__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Keeps the caption readable on light photos. */
.ptm-advantages__panel.has-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgb(0 0 0 / 0.6) 0%, rgb(0 0 0 / 0) 40%);
}

.ptm-advantages__footer {
	display: flex;
	align-items: center;
	gap: 24px;
}

.ptm-advantages .ptm-advantages__play {
	flex-shrink: 0;
	border-color: color-mix(in srgb, var(--theme-palette-color-1), var(--theme-palette-color-8) 50%);
}

.ptm-advantages .ptm-advantages__play .ptm-icon {
	width: 15px;
	height: 18px;
	margin-left: 3px;
}

.ptm-advantages .ptm-advantages__caption {
	max-width: 15.5em;
	margin: 0;
	font-size: var(--ptm-text-sm-size);
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: var(--theme-palette-color-8);
}

.ptm-advantages__caption a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--theme-palette-color-1);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color 0.15s ease;
}

.ptm-advantages__caption a:hover {
	color: var(--theme-palette-color-1);
}

/* ------------------------------------------------------------------ */
/* Video dialog                                                         */
/* ------------------------------------------------------------------ */

.ptm-video-dialog {
	width: min(1100px, calc(100vw - 32px), calc((100dvh - 136px) * 16 / 9));
	max-width: none;
	max-height: none;
	padding: 0;
	overflow: visible;
	border: 0;
	background: #000;
}

.ptm-video-dialog::backdrop {
	background-color: rgb(19 19 19 / 0.88);
}

.ptm-video-dialog__player {
	aspect-ratio: 16 / 9;
}

.ptm-video-dialog__player iframe,
.ptm-video-dialog__player video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.ptm-video-dialog .ptm-video-dialog__close {
	position: absolute;
	right: 0;
	bottom: calc(100% + 12px);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--theme-palette-color-8);
	color: var(--theme-palette-color-2);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ptm-video-dialog__close:hover {
	background-color: var(--theme-palette-color-1);
}

.ptm-video-dialog__close:focus-visible {
	outline: 2px solid var(--theme-palette-color-1);
	outline-offset: 2px;
}

.ptm-video-dialog__close .ptm-icon {
	width: 14px;
	height: 14px;
}

/* ------------------------------------------------------------------ */
/* Tablet and mobile: title, tabs, then the card                        */
/* ------------------------------------------------------------------ */

@media (max-width: 999.98px) {
	.ptm-advantages {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	.ptm-advantages .ptm-advantages__title {
		margin-right: 0;
		margin-bottom: 24px;
	}

	.ptm-advantages .ptm-advantage {
		padding: 32px 0 32px 40px;
	}

	.ptm-advantages__media {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 689.98px) {
	.ptm-advantages .ptm-advantage {
		gap: 8px;
		padding: 24px 0 24px 20px;
	}

	.ptm-advantage__heading {
		align-items: flex-start;
	}

	.ptm-advantage__icon {
		margin-top: 1px;
	}

	.ptm-advantages__media {
		aspect-ratio: 1;
		border-radius: 16px;
	}

	/* Figma lets the caption run close to the right edge to keep it on two lines. */
	.ptm-advantages__panel {
		padding: 24px 8px 24px 24px;
	}

	.ptm-advantages__panel:focus-visible {
		border-radius: 16px;
	}

	.ptm-advantages__footer {
		gap: 16px;
	}

	.ptm-advantages .ptm-advantages__play .ptm-icon {
		width: 12px;
		height: 15px;
		margin-left: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ptm-advantages {
		--ptm-advantages-fade: 0s;
	}
}