/*
 * sections/product.css — section "O Produto" (#produto).
 *
 * Estrutura:
 *   .product-section
 *     .product-header               eyebrow + h2 + descrição (centralizados)
 *     .product-features             blocos empilhados, um por linha
 *       .product-feature[--modifier]
 *         .product-feature-content  h3 + descrição (primeiro no DOM)
 *         .product-feature-media    painel tingido com recuo
 *           .product-feature-screen janela de recorte (sangra à direita e embaixo)
 *
 * Layout:
 *   < 960px  1 coluna; todos os blocos na mesma ordem: título → descrição → screenshot.
 *   ≥ 960px  visual 58% / texto 42%, lados alternados por :nth-child —
 *            ímpares: imagem à esquerda; pares: imagem à direita.
 *            Inserir um bloco novo mantém a alternância automaticamente.
 *
 * RECORTE DOS SCREENSHOTS (janela de recorte)
 * Cada modifier define, em PIXELS DA IMAGEM ORIGINAL, o retângulo exibido:
 *   --img-w / --img-h   dimensões naturais do arquivo (iguais a width/height do HTML)
 *   --crop-x / --crop-y canto superior esquerdo do recorte
 *   --crop-w            largura do recorte (a escala deriva dela)
 *   --media-ratio       proporção da janela (largura / altura)
 * A altura visível do recorte é --crop-w / --media-ratio. Para não sobrar
 * fundo vazio, garanta:
 *   crop-x + crop-w             ≤ img-w
 *   crop-y + crop-w / ratio     ≤ img-h
 *
 * Animação: estado inicial aplicado pelo Anime.js (sections/product.js).
 * Nenhum CSS aqui esconde conteúdo — sem JS tudo permanece visível.
 */

.product-section {
    padding-block: clamp(var(--space-xl), 4rem + 3vw, 8rem);
    background: var(--color-surface-muted);
    color: var(--color-brand-navy);
}

/* Cabeçalho */

.product-header {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}

.product-eyebrow {
    color: var(--color-brand-orange-dark);
    font-size: 0.875rem;
    font-weight: var(--font-weight-subheading);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-title {
    margin-top: var(--space-sm);
    font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
    font-weight: var(--font-weight-heading);
    letter-spacing: -0.02em;
}

.product-description {
    max-width: 36rem;
    margin-top: var(--space-md);
    margin-inline: auto;
    color: var(--color-text-on-light-muted);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
}

/*
 * Lista de blocos — EMPILHAMENTO
 * Cada bloco sobe --product-stack-overlap sobre o anterior (margem negativa).
 * Pela ordem do DOM (todos position: relative, sem z-index), o bloco seguinte
 * é pintado por cima. A sombra superior marca a borda que cobre o anterior.
 * O empilhamento é o layout final: sem JS ou com reduced motion ele é estático;
 * com JS, o bloco desliza até essa posição (sections/product.js).
 */

.product-features {
    --product-stack-overlap: 56px;

    display: flex;
    flex-direction: column;
    margin-top: clamp(var(--space-xl), 3rem + 2vw, 5rem);
}

/* Bloco */

.product-feature {
    position: relative;
    display: grid;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.product-feature + .product-feature {
    margin-top: calc(var(--product-stack-overlap) * -1);
    box-shadow: var(--shadow-stack), var(--shadow-card);
}

.product-feature-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-lg) var(--space-lg) var(--space-md);
}

.product-feature-title {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    font-weight: var(--font-weight-heading);
    letter-spacing: -0.02em;
}

.product-feature-description {
    max-width: 26rem;
    margin-top: var(--space-sm);
    color: var(--color-text-on-light-muted);
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
}

/* Painel visual: recuo nas bordas do bloco, como uma moldura interna. */
.product-feature-media {
    overflow: hidden;
    margin: 0 var(--space-sm) var(--space-sm);
    padding: var(--space-lg) 0 0 var(--space-lg);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, #e8edf6 0%, #f3f5f9 100%);
}

.product-feature-screen {
    position: relative;
    aspect-ratio: var(--media-ratio);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-right: 0;
    border-bottom: 0;
    border-top-left-radius: var(--radius-md);
    background: var(--color-surface-muted);
    box-shadow: var(--shadow-screen);
}

/* Janela de recorte — ver cabeçalho do arquivo. */
.product-feature-screen img {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--img-w) / var(--crop-w) * 100%);
    max-width: none;
    height: auto;
    translate:
        calc(var(--crop-x) / var(--img-w) * -100%)
        calc(var(--crop-y) / var(--img-h) * -100%);
}

/*
 * Recortes por screenshot (desktop / tablet).
 *   Painel       próximas reservas + indicadores (sem sidebar)
 *   Reservas     navegação, calendário dom–qui, reservas coloridas
 *   Lançamentos  lista completa com valores positivos e negativos
 *   Comandas     barra superior, busca e cards das comandas
 */

.product-feature--dashboard {
    --img-w: 1899;
    --img-h: 954;
    --crop-x: 276;
    --crop-y: 76;
    --crop-w: 1300;
    --media-ratio: 1.48;
}

.product-feature--bookings {
    --img-w: 1916;
    --img-h: 957;
    --crop-x: 296;
    --crop-y: 180;
    --crop-w: 1000;
    --media-ratio: 1.45;
}

/* Proporção mais larga: valores (até x≈1814) e títulos precisam caber juntos. */
.product-feature--finance {
    --img-w: 1901;
    --img-h: 956;
    --crop-x: 280;
    --crop-y: 70;
    --crop-w: 1545;
    --media-ratio: 1.75;
}

/* O terceiro card sangra à direita, sugerindo continuidade da lista. */
.product-feature--orders {
    --img-w: 1916;
    --img-h: 957;
    --crop-x: 280;
    --crop-y: 84;
    --crop-w: 900;
    --media-ratio: 1.75;
}

/* Desktop: composição horizontal alternada. */
@media (min-width: 960px) {
    /* ≈ 20% da altura do bloco, como na referência (~105px em blocos de ~465px). */
    .product-features {
        --product-stack-overlap: 96px;
    }

    /*
     * Blocos que serão cobertos: o texto (centralizado na linha) sobe metade
     * da sobreposição, ficando no centro da área que permanece visível.
     * `translate` não altera o layout — a altura do bloco não muda.
     */
    .product-feature:not(:last-child) .product-feature-content {
        translate: 0 calc(var(--product-stack-overlap) / -2);
    }

    .product-feature {
        grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
        align-items: center;
    }

    /* Ímpares: imagem à esquerda (o texto vem primeiro no DOM). */
    .product-feature-media {
        order: -1;
        margin: var(--space-sm);
        margin-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        align-self: end;
    }

    .product-feature-content {
        padding: var(--space-xl) var(--space-xl) var(--space-xl) var(--space-lg);
    }

    /* Pares: texto à esquerda, imagem à direita. */
    .product-feature:nth-child(even) {
        grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    }

    .product-feature:nth-child(even) .product-feature-media {
        order: 0;
    }

    .product-feature:nth-child(even) .product-feature-content {
        padding: var(--space-xl) var(--space-lg) var(--space-xl) var(--space-xl);
    }
}

/* Mobile: recortes mais fechados para manter o screenshot legível. */
@media (max-width: 639px) {
    .product-feature {
        border-radius: var(--radius-lg);
    }

    .product-feature-content {
        padding: var(--space-md) var(--space-md) var(--space-sm);
    }

    .product-feature-media {
        margin: 0 0.75rem 0.75rem;
        padding: var(--space-md) 0 0 var(--space-md);
        border-radius: var(--radius-md);
    }

    .product-feature--dashboard {
        --crop-x: 290;
        --crop-y: 180;
        --crop-w: 900;
        --media-ratio: 1.3;
    }

    .product-feature--bookings {
        --crop-y: 240;
        --crop-w: 720;
        --media-ratio: 1.25;
    }

    .product-feature--finance {
        --crop-x: 288;
        --crop-y: 250;
        --crop-w: 900;
        --media-ratio: 1.3;
    }

    .product-feature--orders {
        --crop-w: 820;
        --media-ratio: 1.4;
    }
}