/**
 * Ilustrações decorativas (legumes).
 *
 * Extraídas diretamente do design-home.svg (Figma, 1440 × 4877), uma por
 * ficheiro, com a geometria e o recorte do design já aplicados. Não é preciso
 * exportar nada do Figma: as posições abaixo são as do desenho, ao pixel.
 *
 * COMO FUNCIONA A CAMADA
 * ----------------------
 * No design há legumes que atravessam a fronteira entre secções — a cenoura
 * passa do rosa para o verde, a batata-doce do verde para o laranja, o pimento
 * amarelo do laranja para o cinza do rodapé. Um `background-image` nunca
 * desenha fora da caixa do seu elemento, por isso a decoração vive numa camada
 * própria:
 *
 *   .lg-section          position: relative  SEM z-index  → não cria contexto
 *                        de empilhamento, o seu fundo pinta na camada 0
 *   .lg-decor            position: absolute; z-index: 1   → pinta acima do
 *                        fundo de TODAS as secções, incluindo as seguintes
 *   .lg-section > *      position: relative; z-index: 2   → o texto continua
 *                        acima da decoração
 *
 * É por isso que `.lg-section` não pode levar `overflow: hidden` nem `z-index`.
 * O scroll horizontal é travado com `overflow-x: clip` em `.wp-site-blocks`
 * (ver style.css) — `clip`, ao contrário de `hidden`, não cria contentor de
 * scroll e deixa o eixo vertical visível.
 *
 * A decoração é injetada por PHP (ver `legumina_inject_decor()` em
 * functions.php), não por blocos no editor: assim não pode ser apagada por
 * acidente ao editar a página, e as secções mantêm-se limpas no editor.
 *
 * Tamanhos e posições escalam com a largura da janela (o desenho tem 1440px),
 * com piso a 50% para não desaparecerem no telemóvel.
 */

.lg-decor {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: visible;
}

/* As secções são grupos com layout `constrained`, e o WordPress aplica a todos
   os filhos diretos que não sejam `alignfull`:
       max-width: var( --wp--style--global--content-size );  (975px)
       margin-left: auto; margin-right: auto;
   Isso prendia a camada de decoração à largura do texto e centrava-a — os
   legumes apareciam encostados ao meio em vez das margens da janela. O seletor
   com duas classes ganha à regra do core (uma classe), independentemente da
   ordem em que as folhas de estilo saem. */
.lg-section > .lg-decor,
.lg-header > .lg-decor {
	max-width: none;
	margin: 0;
}

.lg-decor__item {
	position: absolute;
	display: block;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* ==========================================================================
   Posições (geradas a partir do design-home.svg)
   ========================================================================== */

/* abobora — desenho: x=942 y=0 392×168
   Ancorada ao cabeçalho para o corte cair no topo da página, como no desenho.
   Desce por cima do hero: o cabeçalho tem z-index 10, logo pinta acima do
   `<main>` inteiro, e a navegação fica acima dela (ver style.css). */
.lg-header .lg-d--abobora {
	aspect-ratio: 392 / 168;
	width: clamp(196px, 27.222vw, 392px);
	background-image: url( "../img/decor-abobora.svg" );
	left: 65.42%;
	top: 0;
}

/* milho — desenho: x=0 y=419 225×496
   No desenho transbordava 195px para a secção seguinte. Como o hero e as
   estatísticas são ambos rosa, essa travessia não se via — e com o hero à
   altura do ecrã ficava demasiado em baixo. Subido para dentro do hero. */
.lg-hero .lg-d--milho {
	aspect-ratio: 225 / 496;
	width: clamp(112px, 15.625vw, 225px);
	background-image: url( "../img/decor-milho.svg" );
	left: 0;
	bottom: clamp(48px, 6.667vw, 96px);
}

/* brocolos-alho — desenho: x=1209 y=490 231×389 (idem: subido) */
.lg-hero .lg-d--brocolos-alho {
	aspect-ratio: 231 / 389;
	width: clamp(116px, 16.042vw, 231px);
	background-image: url( "../img/decor-brocolos-alho.svg" );
	right: 0;
	bottom: clamp(48px, 6.667vw, 96px);
}

/* nabos — desenho: x=1201 y=1220 235×373
   Subidos: no desenho metade deles caía na secção verde. Mantêm a travessia
   (as raízes entram no verde) mas o peso da ilustração fica no rosa. */
.lg-stats .lg-d--nabos {
	aspect-ratio: 235 / 373;
	width: clamp(118px, 16.319vw, 235px);
	background-image: url( "../img/decor-nabos.svg" );
	right: 0.28%;
	/* O valor que o Jean pôs (36px) fica, mas o `clamp` estava degenerado:
	   `clamp(36px, -4.167vw, -30px)` tem mínimo maior que o máximo, portanto
	   devolve sempre 36px e a escala com a largura da janela morria. */
	bottom: clamp(18px, 2.5vw, 36px);
}

/* cenoura — desenho: x=27 y=1225 104×779 */
.lg-sobre .lg-d--cenoura {
	aspect-ratio: 104 / 779;
	width: clamp(52px, 7.222vw, 104px);
	background-image: url( "../img/decor-cenoura.svg" );
	left: 1.88%;
	top: clamp(-215px, -14.931vw, -108px);
}

/* batata-doce — desenho: x=1159 y=1800 260×551 */
.lg-sobre .lg-d--batata-doce {
	aspect-ratio: 260 / 551;
	width: clamp(130px, 18.056vw, 260px);
	background-image: url( "../img/decor-batata-doce.svg" );
	right: 1.46%;
	bottom: clamp(-191px, -13.264vw, -96px);
}

/* cebola — desenho: x=0 y=2102 137×266 */
.lg-edicoes .lg-d--cebola {
	aspect-ratio: 137 / 266;
	width: clamp(68px, 9.514vw, 137px);
	background-image: url( "../img/decor-cebola.svg" );
	left: 0;
	top: clamp(-58px, -4.028vw, -29px);
}

/* rucula — desenho: x=109 y=2669 211×207 */
.lg-edicoes .lg-d--rucula {
	aspect-ratio: 211 / 207;
	width: clamp(106px, 14.653vw, 211px);
	background-image: url( "../img/decor-rucula.svg" );
	left: 7.57%;
	top: 21.31%;
}

/* malagueta-azul — desenho: x=1297 y=2814 138×371 */
.lg-edicoes .lg-d--malagueta-azul {
	aspect-ratio: 138 / 371;
	width: clamp(69px, 9.583vw, 138px);
	background-image: url( "../img/decor-malagueta-azul.svg" );
	right: 0.35%;
	top: 27.38%;
}

/* malagueta-verde — desenho: x=0 y=3176 138×355 */
.lg-edicoes .lg-d--malagueta-verde {
	aspect-ratio: 138 / 355;
	width: clamp(69px, 9.583vw, 138px);
	background-image: url( "../img/decor-malagueta-verde.svg" );
	left: 0;
	top: 42.53%;
}

/* cogumelo — desenho: x=1143 y=3748 124×143 */
.lg-edicoes .lg-d--cogumelo {
	aspect-ratio: 124 / 143;
	width: clamp(62px, 8.611vw, 124px);
	background-image: url( "../img/decor-cogumelo.svg" );
	right: 12.01%;
	top: 66.47%;
}

/* tomate — desenho: x=0 y=4138 224×345 */
.lg-edicoes .lg-d--tomate {
	aspect-ratio: 224 / 345;
	width: clamp(112px, 15.556vw, 224px);
	background-image: url( "../img/decor-tomate.svg" );
	left: 0;
	bottom: clamp(33px, 4.583vw, 66px);
}

/* pimento-amarelo — desenho: x=1205 y=4289 235×302 */
.lg-edicoes .lg-d--pimento-amarelo {
	aspect-ratio: 235 / 302;
	width: clamp(118px, 16.319vw, 235px);
	background-image: url( "../img/decor-pimento-amarelo.svg" );
	right: 0;
	bottom: clamp(-42px, -2.917vw, -21px);
}

/* ==========================================================================
   PÁGINA DE CONTACTO
   Faixa rosa única, a compor com a abóbora que desce do cabeçalho. Os quatro
   legumes ficam nas margens, fora da coluna do formulário. Tamanhos iguais aos
   da home, para a página não parecer de outro sítio.
   ========================================================================== */

/* cebola — 137×266 no desenho */
.lg-contacto .lg-d--cebola {
	aspect-ratio: 137 / 266;
	width: clamp(68px, 9.514vw, 137px);
	background-image: url( "../img/decor-cebola.svg" );
	left: 0;
	top: 4%;
}

/* malagueta-azul — 138×371 no desenho */
.lg-contacto .lg-d--malagueta-azul {
	aspect-ratio: 138 / 371;
	width: clamp(69px, 9.583vw, 138px);
	background-image: url( "../img/decor-malagueta-azul.svg" );
	right: 0.35%;
	top: 34%;
}

/* tomate — 224×345 no desenho */
.lg-contacto .lg-d--tomate {
	aspect-ratio: 224 / 345;
	width: clamp(112px, 15.556vw, 224px);
	background-image: url( "../img/decor-tomate.svg" );
	left: 0;
	bottom: 0;
}

/* rucula — 211×207 no desenho */
.lg-contacto .lg-d--rucula {
	aspect-ratio: 211 / 207;
	width: clamp(106px, 14.653vw, 211px);
	background-image: url( "../img/decor-rucula.svg" );
	right: 3%;
	bottom: 6%;
}

/* ==========================================================================
   ECRÃS INTERMÉDIOS (782–1199px)

   O desenho tem 1440px e conta com margens largas: a coluna de conteúdo tem
   975px e sobram ~230px de cada lado para os legumes. Entre 782 e 1200px essas
   margens desaparecem — a coluna passa a ser quase toda a janela — e os legumes
   entram por cima do texto.

   Duas medidas complementares:
     1. a coluna de conteúdo estreita 12rem, devolvendo a goteira lateral
     2. os legumes das bordas transbordam 30% da sua própria largura
   ========================================================================== */
@media (min-width: 782px) and (max-width: 1199px) {
	.lg-section > :not( .lg-decor ) {
		max-width: calc( 100% - 12rem );
	}

	.lg-decor .lg-d--milho,
	.lg-decor .lg-d--cenoura,
	.lg-decor .lg-d--cebola,
	.lg-decor .lg-d--malagueta-verde,
	.lg-decor .lg-d--tomate {
		transform: translateX( -30% );
	}

	.lg-decor .lg-d--abobora,
	.lg-decor .lg-d--brocolos-alho,
	.lg-decor .lg-d--nabos,
	.lg-decor .lg-d--batata-doce,
	.lg-decor .lg-d--malagueta-azul,
	.lg-decor .lg-d--pimento-amarelo {
		transform: translateX( 30% );
	}
}

@media (max-width: 781px) {
	/* ==========================================================================
	   DECORAÇÃO NO TELEMÓVEL

	   No desenho (1440px) os legumes vivem nas margens, fora da coluna de texto.
	   Num ecrã de 400px não há margem: a coluna de texto ocupa quase tudo.
	   Empurrá-los só para o lado não resolve — ou passam por baixo do texto, ou
	   ficam cortados a ponto de não se reconhecerem.

	   Aqui vão para os cantos de cada faixa, onde está o `padding` da secção e
	   não há texto nenhum: em cima ou em baixo, à esquerda ou à direita. Ficam
	   mais pequenos (44% do tamanho de desenho) e transbordam apenas ~30% da
	   sua própria largura — o suficiente para se lerem como ilustração e não
	   como recorte. Os quatro que no desenho ficam a meio da altura, em cima do
	   texto, desaparecem.

	   O deslocamento é feito com `translateX`, cuja percentagem é relativa ao
	   próprio legume — ao contrário de `left`/`right` em %, que se referem à
	   largura da secção e por isso cortavam demasiado os legumes largos e de
	   menos os estreitos.

	   `.lg-decor` no seletor para igualar a especificidade das regras base:
	   uma media query não acrescenta especificidade nenhuma.
	   ========================================================================== */

	/* abobora — 150px, canto top-right */
	.lg-decor .lg-d--abobora {
		width: 150px;
		top: 0;
		right: 0;
		left: auto;
		bottom: auto;
		transform: translateX(40%);
	}

	/* milho — 99px, canto bottom-left */
	.lg-decor .lg-d--milho {
		width: 99px;
		bottom: 0;
		left: 0;
		right: auto;
		top: auto;
		transform: translateX(-30%);
	}

	/* brocolos-alho — 102px, canto bottom-right */
	.lg-decor .lg-d--brocolos-alho {
		width: 102px;
		bottom: 0;
		right: 0;
		left: auto;
		top: auto;
		transform: translateX(30%);
	}

	/* nabos — 103px, canto bottom-right */
	.lg-decor .lg-d--nabos {
		width: 103px;
		bottom: 0;
		right: 0;
		left: auto;
		top: auto;
		transform: translateX(25%);
	}

	/* cenoura — 46px, canto top-left */
	.lg-decor .lg-d--cenoura {
		width: 46px;
		top: 0;
		left: 0;
		right: auto;
		bottom: auto;
		transform: translateX(-45%);
	}

	/* batata-doce — fora no telemóvel.
	   A secção verde é só título + um parágrafo longo: não sobra faixa livre em
	   canto nenhum, e a batata-doce é larga. Fica a cenoura, que é estreita e
	   passa rente à borda sem tocar no texto. */
	.lg-decor .lg-d--batata-doce {
		display: none;
	}

	/* cebola — 60px, canto top-left */
	.lg-decor .lg-d--cebola {
		width: 60px;
		top: 0;
		left: 0;
		right: auto;
		bottom: auto;
		transform: translateX(-55%);
	}

	/* tomate — 99px, canto bottom-left */
	.lg-decor .lg-d--tomate {
		width: 99px;
		bottom: 0;
		left: 0;
		right: auto;
		top: auto;
		transform: translateX(-30%);
	}

	/* pimento-amarelo — 103px, canto bottom-right */
	.lg-decor .lg-d--pimento-amarelo {
		width: 103px;
		bottom: 0;
		right: 0;
		left: auto;
		top: auto;
		transform: translateX(30%);
	}

	/* Na página de contacto a faixa é mais curta e a nota do RGPD chega quase ao
	   fundo: o tomate encolhe para caber na faixa livre do padding. */
	.lg-contacto .lg-d--tomate {
		width: 60px;
	}

	/* Ficam a meio da altura, por cima do texto: fora no telemóvel. */
	.lg-decor .lg-d--rucula,
	.lg-decor .lg-d--cogumelo,
	.lg-decor .lg-d--malagueta-azul,
	.lg-decor .lg-d--malagueta-verde {
		display: none;
	}

	/* Na página de contacto a malagueta volta a aparecer: é estreita, fica na
	   borda direita a meia altura e ali não há texto. Sem ela e sem a cebola,
	   o telemóvel ficava com um único legume em toda a página. */
	.lg-contacto .lg-d--malagueta-azul {
		display: block;
		width: 64px;
		top: 26%;
		right: 0;
		left: auto;
		bottom: auto;
		transform: translateX( 32% );
	}
}

/* Impressão: sem decoração. */
@media print {
	.lg-decor {
		display: none;
	}
}