/* #####################################
	Componentes compartilhados entre as seções do site.
	Usados pelos blocos, então também entram no editor.
	Medidas conferidas contra o layout do cliente em viewport de 1920px.
##################################### */

/* ######
	Seções
############ */

.section {
	padding-block: var(--section-space);
}

.section--tight { padding-block: calc(var(--section-space) * .7); }
.section--flush { padding-block: 0; }
.section--gray { background: var(--color-bg-alt); }
.section--dark { background: var(--color-dark); color: var(--color-white); }
.section--yellow { background: var(--color-yellow); color: var(--color-white); }

/* ######
	Títulos
############ */

.section-title {
	color: var(--color-dark);
	font-size: var(--size-title);
	font-weight: 700;
	letter-spacing: var(--tracking-title);
	line-height: var(--line-title);
	text-transform: uppercase;
}

.section-title--light { font-weight: 300; }
.section-title--white { color: var(--color-white); }

.display-title {
	color: var(--color-dark);
	font-size: var(--size-display);
	font-weight: 300;
	letter-spacing: var(--tracking-display);
	line-height: var(--line-display);
	text-transform: uppercase;
}

.display-title strong,
.display-title b {
	font-weight: 700;
}

.display-title--white { color: var(--color-white); }

.eyebrow {
	color: var(--color-orange);
	font-size: var(--size-label);
	font-weight: 700;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.lead {
	font-size: var(--size-lead);
	line-height: var(--line-lead);
}

.lead strong,
.lead b {
	color: var(--color-orange);
	font-weight: 700;
}

/* ######
	Barra "/" inclinada da marca
############ */

.slash {
	display: inline-block;
	flex: none;
	width: .3em;
	height: 1.15em;
	margin-right: .55em;
	transform: skewX(var(--skew));
	vertical-align: -.15em;
	background: var(--color-yellow);
}

.slash--dark { background: var(--color-dark); }
.slash--white { background: var(--color-white); }
.slash--red { background: var(--color-red-bright); }
.slash--orange { background: var(--color-orange); }
.slash--sm { width: .26em; height: 1em; margin-right: .45em; }

/* ######
	Divisor com linhas vinho (sangra até as bordas da tela)
############ */

.divider {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-inline: calc(50% - 50vw);
	padding-inline: 0;
}

.divider::before,
.divider::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--color-wine);
}

.divider__label {
	color: var(--color-wine);
	font-size: var(--size-nav);
	font-weight: 700;
	letter-spacing: var(--tracking-label);
	text-align: center;
	text-transform: uppercase;
}

@media (max-width: 599px) {
	.divider::before,
	.divider::after { display: none; }

	.divider { margin-inline: 0; }
}

/* ######
	Botões
############ */

.button {
	color: var(--color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 58px;
	padding: 14px clamp(18px, 3.2vw, 40px);
	overflow-wrap: anywhere;
	font-size: var(--size-button);
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	background: var(--color-yellow);
}

.button:hover,
.button:focus-visible {
	color: var(--color-white);
	background: var(--color-dark);
}

.button-pair {
	display: flex;
	flex-wrap: wrap;
	width: min(100%, 944px);
	background: var(--color-white);
}
.about .button-pair {
	background: var(--color-bg);
}

.button-pair .button {
	flex: 1 1 0;
	min-width: 0;
}

.button-pair--yellow .button:first-child { background: var(--color-yellow-alt); }
.button-pair--yellow .button:last-child { background: var(--color-yellow); }

.button-pair--dark .button:first-child { background: var(--color-dark); }
.button-pair--dark .button:last-child { color: var(--color-orange); background: var(--color-white); }
.button-pair--dark .button:last-child:hover { color: var(--color-white); background: var(--color-dark); }

@media (min-width: 600px) {
	.button-pair:not(.button-pair--single) .button:first-child {
		padding-right: 60px;
		clip-path: polygon(0 0, 100% 0, calc(100% - 32px) 100%, 0 100%);
	}

	.button-pair:not(.button-pair--single) .button:last-child {
		margin-left: -22px;
		padding-left: 60px;
		clip-path: polygon(32px 0, 100% 0, 100% 100%, 0 100%);
	}
}

.button-pair--single {
	width: auto;
	max-width: 100%;
}

.button-pair--single .button {
	padding-right: 60px;
	clip-path: polygon(0 0, 100% 0, calc(100% - 32px) 100%, 0 100%);
}

/* Link textual com barra */

.text-link {
	display: inline-flex;
	align-items: center;
	color: var(--color-dark);
	font-size: var(--size-button);
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

/* ######
	Carrosséis (Flickity)
############ */

.carousel-nav {
	color: var(--color-red);
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	transform: translateY(-50%);
	line-height: 0;
}

.carousel-nav[disabled] { opacity: .25; cursor: default; }
.carousel-nav--prev { left: -22px; }
.carousel-nav--next { right: -22px; }

.carousel-nav::before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-block: 14px solid transparent;
}

.carousel-nav--prev::before { border-right: 19px solid currentColor; }
.carousel-nav--next::before { border-left: 19px solid currentColor; }

.flickity-button { display: none; }

.flickity-page-dots {
	bottom: 20px;
}

.flickity-page-dots .dot {
	width: 10px;
	height: 10px;
	margin: 0 5px;
	background: var(--color-white);
	border-radius: 50%;
	opacity: .5;
}

.flickity-page-dots .dot.is-selected {
	background: var(--color-yellow);
	opacity: 1;
}