/**
 * Block Hero V2 Section Styles
 */

.main-content .hero-v2-section {
	padding: 0;
}

.hero-v2-section {
	position: relative;
	/* A asa e absoluta e pode passar dos limites; sem isto, criava barra de
	   scroll horizontal na pagina toda. */
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
}

.hero-v2-section:has(.hero-v2-section__overlay) {
    min-height: 400px;
}

.hero-v2-section__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 65%, rgba(0,0,0,0.6) 100%, rgba(0,0,0,0.4) 100%);
	z-index: 1;
}

/* A asa da marca, quando nao ha fotografia de fundo.
   Alinhada ao conteudo e nao ao ecra: o `right: var(--gutter)` poe-lhe a
   extremidade na mesma vertical em que acaba o texto da pagina, em qualquer
   largura — o gutter muda de 14px para 32px e para 100px conforme o breakpoint,
   e a asa acompanha sem se ter de repetir a medida aqui. */
.hero-v2-section__side-image {
	position: absolute;
	top: 0;
	right: var(--gutter);
	z-index: 0;
	width: auto;
	height: 100%;
	opacity: 0.28;
}

.hero-v2-section__side-image svg {
	width: auto;
	height: 100%;
}

/* So em desktop e que a asa e travada. Em tablet e telemovel cresce ao tamanho
   natural que a altura da seccao lhe der — e a seccao corta o que passar, que e
   o que evita barra de scroll horizontal na pagina inteira. */
@media screen and (min-width: 1280px) {
	.hero-v2-section__side-image {
		max-width: 46%;
	}
}

@media screen and (max-width: 767px) {
	.hero-v2-section__side-image {
		opacity: 0.18;
	}
}

.hero-v2-section__inner {
	position: relative;
	z-index: 2;
	padding-block: var(--space-3xl) var(--space-2xl);
	width: 100%;
}

.hero-v2-section__content {
	/* Era 800px. Um título de seis ou sete palavras partia em três linhas dentro
	   dessa caixa enquanto sobrava ecrã à direita. */
	max-width: 62rem;
	text-align: left;
}

/* Acompanha o espaço disponível em vez de assumir os 60px do h1 global. O mínimo
   fica acima do h2 para o título continuar a ser o elemento mais forte da
   página. O `text-wrap: balance` reparte as linhas de forma equilibrada em vez
   de deixar uma palavra sozinha na última. */
.hero-v2-section__title {
	font-size: clamp(2rem, 4.2vw, 3.25rem);
	line-height: 1.1;
	text-wrap: balance;
}

.hero-v2-section__description {
	max-width: 60ch;
}

/* Breadcrumb
   Envolve em vez de esticar: os nomes de região vão de "Cuba" a "República
   Dominicana", e uma linha rígida ou transbordava para fora do container ou
   comprimia o título ao lado. Com `flex-wrap` a linha parte-se, e o `row-gap`
   evita que as linhas partidas fiquem coladas. */
.hero-v2-section__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--space-xs);
	row-gap: var(--space-micro);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	line-height: 1.4;
	opacity: 0.9;
}

.hero-v2-section__breadcrumb .breadcrumb-item {
	text-decoration: none;
	color: inherit;
	/* Um nome sem espaços que não caiba na linha parte-se em vez de empurrar
	   o layout para fora do ecrã. */
	overflow-wrap: anywhere;
	transition: opacity 0.2s;
}

.hero-v2-section__breadcrumb a.breadcrumb-item:hover,
.hero-v2-section__breadcrumb a.breadcrumb-item:focus-visible {
	opacity: 0.7;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.hero-v2-section__breadcrumb .breadcrumb-item--current {
	font-weight: 600;
}

.hero-v2-section__breadcrumb .breadcrumb-separator {
	opacity: 0.5;
}

/* Em ecrãs estreitos, um caminho de quatro níveis ocupa duas linhas. Reduzir o
   tamanho antes de o deixar partir mantém a maioria dos casos numa só. */
@media screen and (max-width: 767px) {
	.hero-v2-section__breadcrumb {
		font-size: var(--fs-tiny);
		column-gap: var(--space-tiny);
	}
}