/*
 * Hero do portal — a escolha entre Ateliê e Autoral.
 *
 * Conceito encerrado no checkpoint de 02/09/2026: fotografia única de obra,
 * logotipo como eixo, dois caminhos sem divisória, sem card central e sem
 * instrução do tipo "escolha por onde entrar".
 *
 * Construída sobre core/cover, para que o seletor de ponto focal do WordPress
 * fique disponível à Flavia sem que ela precise mexer em estrutura. Setas e
 * véus são desenhados em CSS: não existem no editor, logo não há como apagá-los.
 *
 * Durações aprovadas: títulos 220–320 ms, marca 350–450 ms, imagem 500–650 ms.
 */

.mm-portal {
	--mm-t-titulo: 270ms;
	--mm-t-marca: 400ms;
	--mm-t-imagem: 580ms;
	--mm-ease: cubic-bezier(.2, .7, .25, 1);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 30rem;
	padding: 0;
}

@media (min-width: 48em) {
	.mm-portal {
		min-height: min(72vh, 40rem);
	}
}

/* ---- fotografia ---- */

.mm-portal .wp-block-cover__image-background,
.mm-portal .wp-block-cover__video-background {
	transform: scale(1.03);
	transition: transform var(--mm-t-imagem) var(--mm-ease);
}

/*
 * Proteção de contraste em três camadas. A base garante leitura do topo e do
 * rodapé sobre qualquer fotografia; as laterais escurecem apenas o lado ativo,
 * preservando a imagem em vez de lavá-la com um véu inteiro.
 */
.mm-portal .wp-block-cover__background {
	background:
		linear-gradient(180deg,
			rgba(20, 22, 29, .62) 0%,
			rgba(20, 22, 29, .12) 34%,
			rgba(20, 22, 29, .20) 62%,
			rgba(20, 22, 29, .80) 100%) !important;
	opacity: 1 !important;
}

.mm-portal::before,
.mm-portal::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--mm-t-imagem) var(--mm-ease);
}

.mm-portal::before {
	background: linear-gradient(90deg, rgba(20, 22, 29, .78) 0%, rgba(20, 22, 29, .28) 38%, rgba(20, 22, 29, 0) 62%);
}

.mm-portal::after {
	background: linear-gradient(270deg, rgba(20, 22, 29, .78) 0%, rgba(20, 22, 29, .28) 38%, rgba(20, 22, 29, 0) 62%);
}

.mm-portal[data-lado="esq"]::before,
.mm-portal[data-lado="dir"]::after {
	opacity: 1;
}

.mm-portal[data-lado="esq"] .wp-block-cover__image-background {
	transform: scale(1.05) translateX(-.375rem);
}

.mm-portal[data-lado="dir"] .wp-block-cover__image-background {
	transform: scale(1.05) translateX(.375rem);
}

/* ---- caminhos ---- */

/*
 * O core alinha o conteudo do cover ao centro. Aqui os caminhos moram no rodape
 * da fotografia, e prender por CSS e mais confiavel do que depender da classe
 * has-custom-content-position, que some se alguem reeditar o bloco.
 */
.mm-portal > .wp-block-cover__inner-container {
	align-self: flex-end;
	width: 100%;
	max-width: none;
	margin-block: 0;
}

.mm-portal .mm-portal__vias {
	position: relative;
	z-index: 4;
	width: 100%;
	max-width: none;
	gap: 0;
	align-self: flex-end;
	margin-block: 0;
}

.mm-portal__via {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: .5rem;
	padding: clamp(1.25rem, 3vw, 2.25rem);
	/* Reserva a zona do botão flutuante: ele nunca cobre um caminho. */
	padding-bottom: 5.5rem;
	min-width: 0;
}

.mm-portal__via--dir {
	align-items: flex-end;
	text-align: right;
}

/* O título carrega o link; a seta é desenhada antes ou depois dele. */
.mm-portal__via h2 {
	position: static;
	display: flex;
	align-items: center;
	gap: clamp(.625rem, 1.6vw, 1.125rem);
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.875rem, 5.4vw, 3.75rem);
	font-weight: 400;
	line-height: 1;
}

.mm-portal__via--dir h2 {
	flex-direction: row-reverse;
}

.mm-portal__via h2::before {
	content: "";
	flex: none;
	display: block;
	width: clamp(1.875rem, 3.6vw, 2.875rem);
	height: clamp(.875rem, 1.6vw, 1.25rem);
	background-color: currentColor;
	transition:
		transform var(--mm-t-titulo) var(--mm-ease),
		background-color var(--mm-t-titulo) var(--mm-ease);
	-webkit-mask: var(--mm-seta) center / contain no-repeat;
	mask: var(--mm-seta) center / contain no-repeat;
}

.mm-portal__via--esq h2::before {
	--mm-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 20'%3E%3Cpath d='M45 10H3M11 2 3 10l8 8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E");
}

.mm-portal__via--dir h2::before {
	--mm-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 20'%3E%3Cpath d='M1 10h42M35 2l8 8-8 8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E");
}

/*
 * O link do título cobre a metade inteira: a área clicável é a coluna toda,
 * como o checkpoint pede, sem duplicar links para o leitor de tela.
 */
.mm-portal__via h2 a {
	color: var(--wp--preset--color--cal);
	text-decoration: none;
	transition:
		color var(--mm-t-titulo) var(--mm-ease),
		transform var(--mm-t-titulo) var(--mm-ease);
}

.mm-portal__via h2 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
}

.mm-portal__via {
	position: relative;
}

.mm-portal__via p {
	margin: 0;
	max-width: 26ch;
	font-size: .84375rem;
	line-height: 1.45;
	color: var(--wp--preset--color--agua);
}

/* No celular a descrição fica sempre visível: hover não pode ser a única via. */
@media (min-width: 48em) {
	.mm-portal__via p {
		opacity: 0;
		transform: translateY(.375rem);
		transition:
			opacity var(--mm-t-titulo) var(--mm-ease),
			transform var(--mm-t-titulo) var(--mm-ease);
	}
}

.mm-portal__via:hover h2 a,
.mm-portal__via:focus-within h2 a {
	color: var(--wp--preset--color--rosa);
}

.mm-portal__via:hover h2::before,
.mm-portal__via:focus-within h2::before {
	background-color: var(--wp--preset--color--rosa);
}

.mm-portal__via--esq:hover h2::before,
.mm-portal__via--esq:focus-within h2::before {
	transform: translateX(-.4375rem);
}

.mm-portal__via--dir:hover h2::before,
.mm-portal__via--dir:focus-within h2::before {
	transform: translateX(.4375rem);
}

.mm-portal__via:hover p,
.mm-portal__via:focus-within p {
	opacity: 1;
	transform: translateY(0);
}

.mm-portal__via h2 a:focus-visible {
	outline: 2px solid var(--wp--preset--color--rosa);
	outline-offset: .5rem;
}

/* ---- marca como eixo ---- */

.mm-portal__eixo {
	position: absolute;
	z-index: 6;
	left: 50%;
	top: 44%;
	transform: translate(-50%, -50%);
	width: clamp(4.75rem, 10vw, 7.25rem);
	pointer-events: none;
	filter: drop-shadow(0 2px 16px rgba(20, 22, 29, .75));
	transition: transform var(--mm-t-marca) var(--mm-ease);
}

.mm-portal__eixo img {
	display: block;
	width: 100%;
	height: auto;
}

.mm-portal[data-lado="esq"] .mm-portal__eixo {
	transform: translate(-50%, -50%) translateX(-.875rem);
}

.mm-portal[data-lado="dir"] .mm-portal__eixo {
	transform: translate(-50%, -50%) translateX(.875rem);
}

@media (prefers-reduced-motion: reduce) {
	.mm-portal *,
	.mm-portal *::before,
	.mm-portal *::after {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}
}

/* A imagem ocupa a entrada; os dois caminhos têm toda a metade clicável. */
.mm-portal { min-height: calc(100svh - 88px) !important; }
.mm-portal > .wp-block-cover__inner-container { position: static; }
.mm-portal .mm-portal__vias { position: absolute; inset: 0; }
.mm-portal__via { padding: 3.5rem clamp(1.5rem, 5vw, 5rem) 5.5rem; }
.mm-portal__eixo { top: 50%; width: clamp(4rem, 7vw, 6rem); }
.mm-portal__via h2 { font-size: clamp(2rem, 4.8vw, 4.5rem); }
.mm-portal__via p { font-size: .9375rem; color: var(--wp--preset--color--cal); }
@media (max-width: 767px) {
 .mm-portal { min-height: max(34rem, calc(88svh - 88px)) !important; }
 .mm-portal__via { padding-inline: 1.25rem; padding-bottom: 5.5rem; }
 .mm-portal__via h2 { gap: .4rem; font-size: clamp(1.75rem, 7vw, 2.5rem); }
 .mm-portal__via h2::before { width: 1.25rem; }
 .mm-portal__via p { max-width: 15ch; font-size: .8125rem; }
}

.mm-portal .mm-portal__vias { height: 100%; margin: 0 !important; top: 0; bottom: 0; align-self: stretch; }
.mm-portal__via { box-sizing: border-box; }