/* =========================================================================
   Home (issue #18, parent #1). Só entra em is_front_page() — ver functions.php.
   Tokens de wp-content/themes/casapri/assets/css/theme.css (nenhuma cor/fonte
   nova aqui). Tudo dentro de .casapri-site (max-width:1140px, padding lateral
   1.25rem já garantido pelo header/footer) — sem 100vw nem margin negativa de
   full-bleed, que é a forma mais fácil de estourar 320px sem browser pra
   flagrar (ver nota no PR).
   ========================================================================= */

.casapri-home__titulo {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.4rem;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 1.25rem;
}
.casapri-home__titulo::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    background: var(--champagne);
    margin-top: .9rem;
}

/* ---- hero (carrossel, preset `hero` do spec: fade + autoplay pausando no
   hover — ver assets/js/home-hero.js) ----
   Bem wide e full-bleed em QUALQUER largura de tela (antes só entrava a
   partir de 1024px; Pedro pediu pra tirar o respiro lateral no mobile
   também). Truque de full-bleed: width:100vw + margin negativa calculada a
   partir do centro, não 100vw sozinho (que conta a largura da barra de
   rolagem do Windows/Chrome e estoura ~15px pra direita) — overflow-x:hidden
   aqui contém qualquer resíduo de subpixel dessa conta. */
.casapri-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* .casapri-site (theme.css) tem padding-top: 2.5rem — sem anular isso
       aqui, o hero fica colado nas bordas laterais mas ainda flutuando 40px
       abaixo do header, o que lê como desalinhado em vez de "full-bleed de
       verdade". Puxa o hero pra cima desse padding só nele, sem mexer no
       wrapper (que toda página usa). */
    margin-top: -2.5rem;
    margin-bottom: 2.5rem;
    overflow-x: hidden;
}
.casapri-hero__swiper { overflow: hidden; }
.casapri-hero__slide {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
    overflow: hidden;

    /* Sem foto (ainda não existe nenhuma), o slide usa o mesmo tratamento
       "blueprint" do banner B2B (grade fina em champagne sobre ink) em vez
       de um retângulo --surface liso — numa faixa desse tamanho, um bloco
       cinza-claro vazio lê como erro/placeholder, não como hero de marca. */
    background-color: var(--ink);
    background-image:
        linear-gradient(rgba(209, 188, 146, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(209, 188, 146, .18) 1px, transparent 1px),
        radial-gradient(circle at 30% 40%, rgba(209, 188, 146, .3), transparent 55%);
    background-size: 32px 32px, 32px 32px, 100% 100%;
}
/* Sem foto (blueprint): não há imagem pra ditar a altura pelo próprio
   tamanho, então mantém uma proporção/altura fixa como antes. */
.casapri-hero__slide:not(.casapri-hero__slide--com-foto) {
    aspect-ratio: 21 / 9;
    min-height: 220px;
    max-height: 460px;
}
.casapri-hero__slide--com-foto { border: 0; }

/* Setas discretas nas pontas — pill translúcida escura sempre presente (não
   só nos slides com foto): sem isso, uma seta clara fica invisível sobre o
   fundo --surface dos slides sem imagem, mesmo problema de contraste que os
   dots já tinham. */
.casapri-hero__nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(41, 41, 41, .35);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    color: var(--white);
    cursor: pointer;
    opacity: .7;
    transition: opacity .15s ease, background .15s ease;
}
.casapri-hero__nav::before {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}
.casapri-hero__nav--prev { left: 16px; }
.casapri-hero__nav--prev::before { transform: rotate(-135deg); margin-right: -2px; }
.casapri-hero__nav--next { right: 16px; }
.casapri-hero__nav--next::before { transform: rotate(45deg); margin-left: -2px; }
.casapri-hero__nav:hover { opacity: 1; background: rgba(41, 41, 41, .55); }
@media (min-width: 1024px) {
    .casapri-hero__nav--prev { left: 28px; }
    .casapri-hero__nav--next { right: 28px; }
}

/*
 * Imagem em fluxo normal (não mais position:absolute cobrindo o slide): é
 * ela quem dita a altura do slide, pela proporção real do arquivo — igual em
 * qualquer largura, mais baixo em tela estreita, mais alto em monitor largo
 * (pedido do Pedro). max-height no CONTAINER (não na <img>, que ficaria só
 * com height:auto sem limite) é o teto: abaixo dele nada corta; acima dele,
 * a foto centralizada (flex) é cortada em cima/baixo em partes iguais — só
 * entra em ação em monitor bem largo (a partir de ~1320px, faz a conta:
 * max-height ÷ proporção da foto). Antes disso a gente tinha deixado sem
 * teto nenhum; Pedro achou que ficava alto demais em monitor grande.
 */
.casapri-hero__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 520px;
    overflow: hidden;
}
.casapri-hero__imagem {
    display: block;
    width: 100%;
    height: auto;
    flex-shrink: 0;
}
/* Legibilidade do texto sobre foto (só usado quando o slide NÃO vem com
   texto embutido na imagem — o modo com .casapri-hero__conteudo--oculto de
   baixo já não mostra nada aqui, então o gradiente também fica invisível,
   sem custo visual): gradiente escuro à esquerda (onde o conteúdo fica),
   sem escurecer o lado direito da imagem inteiro. */
.casapri-hero__slide--com-foto .casapri-hero__conteudo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(41, 41, 41, .92) 0%, rgba(41, 41, 41, .78) 38%, rgba(41, 41, 41, .3) 62%, rgba(41, 41, 41, 0) 100%);
}

/*
 * Conteúdo (eyebrow/título/subtítulo/CTA) sempre um overlay absoluto sobre
 * o slide inteiro (inset:0), com flex cuidando da centralização — nunca
 * mais um item de flex disputando espaço de linha com a imagem (que agora
 * está em fluxo normal, não mais absolute). Funciona igual pro slide sem
 * foto (blueprint) e pro slide com foto (com ou sem texto sobreposto).
 */
.casapri-hero__conteudo {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.5rem;
}
.casapri-hero__slide--com-foto .casapri-hero__conteudo {
    align-items: flex-start;
    text-align: left;
    max-width: none;
    padding: 2rem 2.5rem;
}
/* Texto sobreposto (só quando NÃO vem embutido na foto): alinhado com a
   borda esquerda do container normal (var(--container), 1140px), mesmo em
   telas bem largas onde o banner sangra até a ponta da tela. */
@media (min-width: 1024px) {
    .casapri-hero__slide--com-foto .casapri-hero__conteudo {
        padding-left: max(2.5rem, calc((100vw - var(--container)) / 2 + 2.5rem));
    }
}
/*
 * Slide com texto já embutido na própria foto (Pedro: prefere assim a
 * texto HTML sobreposto — imagem gerada por IA já entrega título/subtítulo
 * legíveis). O <span> com eyebrow/título/subtítulo/CTA continua no DOM
 * (nome acessível do link, sem duplicar texto visível por cima da foto) —
 * só fica clipado a 1x1px, mesma técnica de .screen-reader-text
 * (theme.css), mas como classe própria: aplicar .screen-reader-text direto
 * aqui perderia a briga de cascata com a regra acima (mesma especificidade,
 * home.css carrega depois de theme.css) e o position:relative daqui
 * venceria o position:absolute de lá, quebrando o clip. Duas classes juntas
 * aqui garantem a especificidade maior.
 */
.casapri-hero__conteudo.casapri-hero__conteudo--oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

/*
 * Cor branca/champagne por padrão (não condicional a --com-foto): TODO
 * slide do hero tem fundo escuro agora — foto com gradiente, ou o
 * "blueprint" ink/champagne quando não há foto. Antes desta simplificação
 * havia um par de regras idênticas duplicado por slide com/sem foto; unificado
 * porque as duas situações pedem exatamente a mesma cor.
 */
.casapri-hero .casapri-eyebrow { color: var(--champagne); }
.casapri-hero__titulo {
    display: block;
    max-width: 42rem;
    margin: .5rem 0 1rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 4vw, 2.35rem);
    line-height: 1.2;
    color: var(--white);
}
.casapri-hero__subtitulo {
    display: block;
    max-width: 34rem;
    margin: 0 0 1.5rem;
    color: rgba(255, 255, 255, .85);
}

/* Champagne sobre ink (não branco sobre ink): o fundo do hero é sempre
   escuro agora (foto com gradiente, ou o blueprint sem foto) — um botão
   ink-sobre-ink desapareceria contra o próprio fundo até o hover. */
.casapri-hero__cta {
    display: inline-block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-size: .8rem;
    color: var(--ink);
    background: var(--champagne);
    padding: .85rem 1.75rem;
    border-radius: 2px;
    transition: background .15s ease;
}
.casapri-hero__slide:hover .casapri-hero__cta { background: var(--champagne-2); }

/* Dots: navegação mínima, sem seta — o slide inteiro já é clicável, setas
   de avançar por cima disputariam clique com o link. Pill de fundo escuro
   sempre presente (não só nos slides com foto): sem isso, um dot claro fica
   invisível sobre o fundo --surface dos slides sem imagem. */
.casapri-hero__dots {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: .4rem;
    padding: .4rem .6rem;
    background: rgba(41, 41, 41, .45);
    border-radius: 999px;
}
/* especificidade extra de propósito: swiper-bundle.min.css define
   .swiper-pagination-bullets.swiper-pagination-horizontal{left:0;width:100%;
   bottom:8px} com 2 classes — empata ou vence a regra de cima (1 classe só) e
   a pill de fundo vira uma barra esticada por cima do hero inteiro em vez do
   pill pequeno centralizado. Precisa igualar/vencer essa especificidade. */
.casapri-hero__dots.swiper-pagination-bullets.swiper-pagination-horizontal {
    left: 50%;
    width: auto;
    bottom: 1rem;
    top: auto;
}
.casapri-hero__dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    opacity: 1;
    cursor: pointer;
}
.casapri-hero__dots .swiper-pagination-bullet-active { background: var(--champagne); }

/* ---- faixa de confiança, acima da dobra (critério de aceite) ----
   Sem card (pedido do Pedro): nada de fundo/borda por trás, os 4 itens
   soltos na página, só mais espaçados entre si e com ícone maior pra
   compensar a falta da moldura — sem o card, o respiro entre os itens é o
   que dá organização, não a caixa. Cada item ganha um ícone (SVG inline em
   trust-bar.php, currentColor) — mais escaneável que texto sozinho, sem
   introduzir cor nova. */
.casapri-trust-bar {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem 3.5rem;
    margin: 0 0 2.75rem;
    padding: 1.25rem;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .8px;
    font-size: .75rem;
    color: var(--ink);
}
.casapri-trust-bar li {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.casapri-trust-bar__icone {
    display: inline-flex;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    color: var(--champagne);
}
.casapri-trust-bar__icone svg { width: 100%; height: 100%; }

/* ---- coleções em destaque ----
   Banners grandes (foto full-bleed do card + nome/descrição/CTA em overlay),
   não mais grade de thumbnail pequeno — é o bloco que responde à user story
   #31 do spec ("entrar por ambiente/coleção, não por peça"), então precisa
   ser o mais forte visualmente da página depois do hero. Sem Swiper: degrada
   bem sozinho em qualquer contagem — 0 itens não desenha a <section>
   (front-page.php), 1-2 itens não deixam buraco de carrossel vazio atrás
   deles; a própria grade CSS reflui de 1 a 3 colunas conforme a largura. */
.casapri-colecoes { margin: 0 0 3rem; }
.casapri-colecoes__grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
}
.casapri-colecoes__item { max-width: 100%; }
.casapri-colecoes__link {
    position: relative;
    display: block;
    color: inherit;
    border-radius: 4px;
    overflow: hidden;
}
.casapri-colecoes__media {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--surface);
}
.casapri-colecoes__imagem {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.casapri-colecoes__link:hover .casapri-colecoes__imagem,
.casapri-colecoes__link:focus-visible .casapri-colecoes__imagem { transform: scale(1.04); }

/* Overlay: gradiente escuro só na metade inferior, pra foto respirar em cima
   e o texto ter contraste garantido embaixo sem depender da foto em si. */
.casapri-colecoes__overlay {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    padding: 3.5rem 1.25rem 1.25rem;
    background: linear-gradient(to top, rgba(41, 41, 41, .88) 0%, rgba(41, 41, 41, .55) 55%, rgba(41, 41, 41, 0) 100%);
}
.casapri-colecoes__nome {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--white);
}
.casapri-colecoes__descricao {
    font-family: var(--font-body);
    font-size: .85rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .85);
    max-width: 32ch;
}
.casapri-colecoes__cta {
    margin-top: .4rem;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: .72rem;
    color: var(--champagne);
}
.casapri-colecoes__cta::after { content: " →"; }

/* ---- rail de produtos (carrossel) — reaproveitado por lançamentos, mais
   vendidos, carros-chefe e promoções (casapri_home_montar_rail() no PHP);
   mesmo desenho de .casapri-related da PDP (product.css). Cada rail usa a
   mesma classe, só o título e a consulta que alimenta os slides mudam. */
.casapri-rail { margin: 0 0 3rem; }
/* Título + "Ver mais" lado a lado — o título mantém o próprio ::after
   (filete champagne, .casapri-home__titulo), então zera a margem que ele
   normalmente carrega sozinho pra não desalinhar do link ao lado. */
.casapri-rail__cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.casapri-rail__cabecalho .casapri-home__titulo { margin-bottom: 0; }
.casapri-rail__ver-mais {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: .82rem;
    color: var(--champagne-texto);
    white-space: nowrap;
}
.casapri-rail__ver-mais:hover { color: var(--ink); }
.casapri-rail__carousel { position: relative; }
.casapri-rail__swiper { padding: 0 0 .25rem; }
.casapri-rail__swiper .swiper-slide { height: auto; }
.casapri-rail__swiper .swiper-slide .casapri-product-card { height: 100%; }

.casapri-rail__nav {
    position: absolute;
    top: 40%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.casapri-rail__nav::before {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}
.casapri-rail__nav--prev { left: -14px; }
.casapri-rail__nav--prev::before { transform: rotate(-135deg); margin-right: -2px; }
.casapri-rail__nav--next { right: -14px; }
.casapri-rail__nav--next::before { transform: rotate(45deg); margin-left: -2px; }
.casapri-rail__nav:hover { border-color: var(--champagne); background: var(--surface); }
.casapri-rail__nav.swiper-button-disabled { opacity: .35; cursor: default; pointer-events: none; }

/* ---- prova social ---- */
.casapri-prova-social { margin: 0 0 3rem; }
.casapri-prova-social__grid {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
}
.casapri-prova-social__item {
    flex: 1 1 220px;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1.25rem;
}
.casapri-prova-social__link { display: block; color: inherit; }
.casapri-prova-social__estrelas { display: block; margin-bottom: .5rem; }
.casapri-prova-social__estrelas .star-rating { color: var(--champagne); }
.casapri-prova-social__produto {
    display: block;
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ink);
    margin-bottom: .25rem;
}
.casapri-prova-social__contagem { display: block; font-size: .85rem; color: var(--body); }

/* ---- porta B2B, com foto (texto já embutido na imagem) ----
   Mesmo padrão do hero (home.css, mais acima): full-bleed, sem carrossel —
   só um banner só, a foto inteira é o link. Imagem em fluxo normal (não
   position:absolute), ela dita a altura pela proporção real do arquivo, com
   o mesmo teto de altura do hero pra não ficar gigante em monitor largo. */
.casapri-b2b-banner {
    display: block;
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 2.75rem;
    overflow-x: hidden;
    transition: opacity .15s ease;
}
.casapri-b2b-banner:hover { opacity: .92; }
.casapri-b2b-banner__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 480px;
    overflow: hidden;
}
.casapri-b2b-banner__imagem {
    display: block;
    width: 100%;
    height: auto;
    flex-shrink: 0;
}

/* ---- avaliações do Google (widget Trustindex, plugin externo) ----
   Só o título e o espaçamento são nossos — o conteúdo do widget em si
   (estrelas, cards, carrossel) é 100% do plugin, sem CSS nosso por cima
   pra não brigar com atualização de versão dele. */
.casapri-avaliacoes {
    margin: 0 0 2.75rem;
    text-align: center;
}
.casapri-avaliacoes .casapri-home__titulo { text-align: center; }
.casapri-avaliacoes .casapri-home__titulo::after { margin-left: auto; margin-right: auto; }

/* ---- porta B2B, sem foto (fallback 100% CSS) ----
   Banner gráfico, não bloco de texto plano: grade "blueprint" decorativa
   (ver .casapri-b2b__grafico) de um lado, conteúdo do outro. Empilha em
   coluna única até 900px; lado a lado acima disso. Só entra em cena
   enquanto casapri_b2b_banner_image_id não estiver configurado. */
.casapri-b2b {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    background: var(--ink);
    color: var(--white);
    border-radius: 4px;
    overflow: hidden;
    margin: 0 0 1rem;
}
@media (min-width: 900px) {
    .casapri-b2b { grid-template-columns: 1fr 1.2fr; }
}

/* Grade "blueprint" nos tokens da marca — linhas finas em champagne sobre o
   ink, evocando planta baixa/projeto sem fingir ser fotografia. Puramente
   decorativo (aria-hidden). */
.casapri-b2b__grafico {
    display: block;
    min-height: 160px;
    background-image:
        linear-gradient(rgba(209, 188, 146, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(209, 188, 146, .18) 1px, transparent 1px),
        radial-gradient(circle at 30% 35%, rgba(209, 188, 146, .35), transparent 55%);
    background-size: 28px 28px, 28px 28px, 100% 100%;
    background-color: var(--ink);
}

.casapri-b2b__conteudo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 2.25rem 1.5rem;
}
.casapri-b2b__titulo {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.3rem;
    color: var(--white);
    margin: 0 0 .75rem;
}
.casapri-b2b__texto {
    max-width: 32rem;
    margin: 0 0 1.5rem;
    color: rgba(255, 255, 255, .8);
}
.casapri-b2b__cta {
    display: inline-block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-size: .8rem;
    color: var(--ink);
    background: var(--champagne);
    padding: .85rem 1.75rem;
    border-radius: 2px;
}
.casapri-b2b__cta:hover { color: var(--ink); background: var(--champagne-2); }

@media (max-width: 767px) {
    /* 21:9 fica baixo demais pra caber título+subtítulo+CTA em telas
       estreitas — mais quadrado no mobile, ainda bem mais largo que alto.
       Só o slide SEM foto (blueprint): o slide com foto agora usa a
       proporção real da imagem em qualquer largura, de propósito (Pedro). */
    .casapri-hero__slide:not(.casapri-hero__slide--com-foto) { aspect-ratio: 4 / 3; min-height: 320px; }
    .casapri-hero__slide--com-foto .casapri-hero__conteudo { padding: 1.5rem; }
    .casapri-trust-bar { gap: .85rem 1.75rem; font-size: .7rem; }
    .casapri-trust-bar__icone { width: 24px; height: 24px; }

    /* Setas continuam visíveis no mobile (pedido do Pedro: drag sozinho não
       basta) — só um pouco menores e mais coladas na borda, pra sobrar mais
       espaço de toque pro conteúdo do card ao lado. -14px cabia com folga
       mesmo em 320px (conferido: botão de 40px fica entre 6px e 46px do
       viewport, dentro do padding de 20px de .casapri-site), mas o botão
       menor deixa a composição menos apertada numa tela pequena. */
    .casapri-rail__nav {
        width: 32px;
        height: 32px;
    }
    .casapri-rail__nav--prev { left: -8px; }
    .casapri-rail__nav--next { right: -8px; }
}