/* Home da loja v3 (kit 4.1): carrossel de destaques e seções de capas. Só tokens --ds-*. */

/* ---- Destaques (carrossel) ----
 * Cores por slide vêm de variáveis no style do próprio slide (--slide-*), definidas em inc/customizer-home.php;
 * sem elas valem os tokens do tema. O reset abaixo impede que um slide herde as variáveis do slide ativo.
 * Altura igual em todos os slides (min-height por faixa de largura) para o carrossel não pular ao trocar.
 * Altura do bloco no desktop: --lm-hero-altura, um pouco acima da altura das capas (as capas mantêm o tamanho).
 * Abaixo de 900px o texto vem sobre a arte e a arte ganha altura pela proporção da largura (--lm-hero-arte),
 * arredondada para pixel inteiro (round) para o que vem abaixo do carrossel não cair em meio pixel. */
.lm-hero{--lm-hero-altura:320px;--lm-hero-arte:1.7;container-type:inline-size;position:relative;overflow:hidden;border-radius:var(--ds-radius-hero);background:var(--slide-bg,var(--ds-color-navy));color:var(--slide-texto,var(--ds-color-on-navy));touch-action:pan-y}
.lm-hero__slide{--slide-bg:initial;--slide-texto:initial;--slide-btn-bg:initial;--slide-btn-texto:initial;--slide-tag-bg:initial;--slide-tag-texto:initial;--slide-bloco:initial;--slide-bloco-2:initial;display:grid;--lm-hero-titulo:var(--ds-text-h1-size);grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:var(--lm-hero-altura);background:var(--slide-bg,var(--ds-color-navy));color:var(--slide-texto,var(--ds-color-on-navy))}
.lm-hero__slide:has(.lm-hero__frase:not([hidden])){--lm-hero-titulo:var(--ds-text-h2-size)}
.lm-hero__texto{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--ds-space-3);padding:var(--ds-space-6) var(--ds-space-10)}
.lm-hero:has(.lm-hero__ctrl) .lm-hero__texto{padding-bottom:calc(var(--ds-target) + var(--ds-space-4) + var(--ds-space-3))}
.lm-hero__titulo{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;color:var(--slide-texto,var(--ds-color-on-navy));font-size:var(--lm-hero-titulo);line-height:1.08}
.lm-hero__frase{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;max-width:460px;font-size:var(--ds-text-body-size);color:var(--slide-texto,var(--ds-color-on-navy-muted))}
.lm-hero__texto .lm-tag{background:var(--slide-tag-bg,var(--ds-color-blue-soft));color:var(--slide-tag-texto,var(--ds-color-navy))}
.lm-hero .lm-btn--branco{background:var(--slide-btn-bg,var(--ds-color-surface));color:var(--slide-btn-texto,var(--ds-color-navy))}
.lm-hero .lm-btn--branco:hover{background:var(--slide-btn-bg,var(--ds-color-blue-soft));color:var(--slide-btn-texto,var(--ds-color-navy));box-shadow:0 0 0 3px color-mix(in srgb,var(--slide-texto,var(--ds-color-on-navy)) 35%,transparent)}
.lm-hero :is(a,button):focus-visible{outline-color:var(--slide-texto,var(--ds-color-on-navy))}
.lm-hero__ctrl{position:absolute;left:var(--ds-space-10);bottom:var(--ds-space-4);display:flex;align-items:center;gap:14px}
.lm-hero .lm-round{border-color:color-mix(in srgb,var(--slide-texto,var(--ds-color-on-navy)) 55%,transparent);color:var(--slide-texto,var(--ds-color-on-navy))}
.lm-hero .lm-round:hover{background:var(--slide-texto,var(--ds-color-surface));color:var(--slide-bg,var(--ds-color-navy))}
.lm-hero__pontos{display:flex;align-items:center;gap:var(--ds-space-2)}
.lm-ponto{position:relative;width:12px;height:12px;padding:0;border:0;border-radius:var(--ds-radius-pill);background:color-mix(in srgb,var(--slide-texto,var(--ds-color-on-navy)) 40%,transparent);cursor:pointer}
.lm-ponto::after{content:"";position:absolute;inset:-16px -6px}
.lm-ponto[aria-current=true]{width:28px;background:var(--slide-texto,var(--ds-color-on-navy))}
.lm-hero__arte{position:relative;min-height:0;overflow:hidden}
.lm-hero__forma{position:absolute}
.lm-hero__forma--a{top:0;right:0;width:58%;height:56%;background:var(--slide-bloco,var(--ds-color-blue-2));border-radius:0 0 0 calc(var(--ds-radius-hero) * 2)}
.lm-hero__forma--b{bottom:0;left:0;width:40%;height:40%;background:var(--slide-bloco-2,var(--ds-color-navy-2));border-radius:0 calc(var(--ds-radius-hero) * 2) 0 0}
.lm-hero__capa{position:absolute;display:block;aspect-ratio:3/4;overflow:hidden;border-radius:8px 14px 14px 8px;box-shadow:inset 8px 0 0 var(--ds-color-cover-spine),0 12px 28px var(--ds-color-shadow-art)}
.lm-hero__capa img{display:block;width:100%;height:100%;object-fit:cover}
.lm-hero__capa--1{left:14%;top:17%;width:30%;transform:rotate(-6deg)}
.lm-hero__capa--2{left:36%;top:6%;width:30%;transform:rotate(3deg)}
.lm-hero__capa--3{left:58%;top:31%;width:26%;transform:rotate(9deg)}
@media (max-width:900px){
	.lm-hero{--lm-hero-texto:208px;--lm-hero-arte:2.1}
	.lm-hero__slide{--lm-hero-titulo:calc(var(--ds-text-h1-size) * .88);grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;min-height:0}
	.lm-hero__texto{gap:var(--ds-space-2);min-height:var(--lm-hero-texto);padding:var(--ds-space-4) var(--ds-space-10)}
	.lm-hero__texto .lm-tag{min-height:28px}
	.lm-hero .lm-btn{min-height:44px}
	.lm-hero__arte{aspect-ratio:var(--lm-hero-arte);height:round(calc(100cqw / var(--lm-hero-arte)),1px)}
	.lm-hero__capa--1{top:8%}
	.lm-hero__capa--2{top:3%}
	.lm-hero__capa--3{top:16%}
	.lm-hero:has(.lm-hero__ctrl) .lm-hero__texto{padding-bottom:var(--ds-space-3)}
	.lm-hero__ctrl{position:static;padding:0 var(--ds-space-6) var(--ds-space-3)}
}
/* Celular: a reserva de altura do texto vale para o pior caso do carrossel. Sem frase em nenhum destaque (sem a classe
 * lm-hero--frase, posta pelo PHP) o pior caso é só título em 2 linhas; com frase, título menor e frase em até 2 linhas.
 * O título fica 12% menor, o botão tem 44 px (toque) e a frase segue em 16 px. As capas mantêm o tamanho e sobem um
 * pouco na arte; só o ar entre o botão e a arte e entre as seções diminui. */
@media (max-width:760px){
	.lm-hero{--lm-hero-texto:188px;--lm-hero-arte:2.05}
	.lm-hero--frase{--lm-hero-texto:240px}
	.lm-hero__frase{-webkit-line-clamp:2}
	.lm-hero__texto{padding:var(--ds-space-4) var(--ds-space-5)}
	.lm-hero:has(.lm-hero__ctrl) .lm-hero__texto{padding-bottom:var(--ds-space-3)}
	.lm-hero__ctrl{padding:0 var(--ds-space-5) var(--ds-space-3)}
	.lm-home__main{gap:min(var(--lm-secao-gap,var(--ds-space-16)),var(--ds-space-6))}
	.lm-home__main .lm-sec-cab{margin-bottom:var(--ds-space-3)}
}
@media (min-width:640px) and (max-width:760px){
	.lm-hero{--lm-hero-texto:208px}
	.lm-hero--frase{--lm-hero-texto:208px}
}

/* Desktop: espaço de 40 px entre as seções da home (no máximo; o Personalizar pode deixar menor). */
@media (min-width:901px){
	.lm-home__main{gap:min(var(--lm-secao-gap,var(--ds-space-16)),calc(var(--ds-space-8) + var(--ds-space-2)))}
}

/* ---- Seções de capas: 5 por linha ---- */
.lm-grid.columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1000px){.lm-grid.columns-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.lm-grid.columns-5{grid-template-columns:repeat(2,minmax(0,1fr))}}