/* ==========================================================================
   home-casanova.css - Seção A Que Dá o Nome (Casanova)
   Design System Fiel ao Figma · 100% Mobile-First com clamp()
   Layout Invertido: Polaroid à esquerda e Conteúdo à direita
   ========================================================================== */

.section-casanova {
    /* Brand Tokens: Casanova (Caramelo / Marrom Nobre Fiel ao Figma) */
    --casa-acento-600: var(--color-casanova-600, #8A5B3B);
    --casaacento600: var(--casa-acento-600);
    --casa-acento-700: var(--color-casanova-700, #6D4325);
    --casa-acento-800: var(--color-casanova-800, #4E2C12);
    --casa-acento-900: var(--color-casanova-900, #301604);

    position: relative;
    width: 100%;
    background-color: var(--color-base-papel, #F6F1E8);
    padding: clamp(56px, 7vw, 100px) 0;
    overflow: hidden;
}

/* Container de 1280px alinhado e responsivo */
.section-casanova__container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(20px, 4.5vw, 64px);
    padding-right: clamp(20px, 4.5vw, 64px);
    box-sizing: border-box;

    /* Mobile-First: Empilhamento vertical em 1 coluna */
    display: flex;
    flex-direction: column;
    gap: clamp(44px, 6vw, 64px);
}

/* --------------------------------------------------------------------------
   Coluna Visual: Moldura Polaroid Autêntica à Esquerda (Desktop)
   -------------------------------------------------------------------------- */
.section-casanova__visual {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 2; /* No mobile, exibe após o texto para fluxo de leitura natural */
}

/* Moldura Polaroid com inclinação exata de 1.5deg do Figma */
.casanova-polaroid {
    position: relative;
    margin: 0;
    width: 100%;
    max-width: 340px;
    padding: 14px 14px 48px 14px;
    background-color: var(--color-base-branco, #FEFAFA);
    border-radius: var(--radius-sm, 2px);
    box-shadow: 0px 2px 6px 0px rgba(28, 26, 24, 0.05), 
                0px 10px 28px 0px rgba(28, 26, 24, 0.10);
    
    /* Inclinação de 1.5deg fiel ao Figma */
    transform: rotate(-1.5deg);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease;
    will-change: transform;
    box-sizing: border-box;
}

/* Efeito Hover interativo e refinado */
.casanova-polaroid:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0px 6px 14px rgba(28, 26, 24, 0.08), 0px 16px 36px rgba(28, 26, 24, 0.14);
}

.casanova-polaroid__img {
    display: block;
    width: 100%;
    max-width: 312px;
    height: clamp(260px, 32vw, 334px);
    aspect-ratio: 312 / 334;
    object-fit: cover;
    border-radius: 1px;
    background-color: var(--color-neutral-300, #E8E2D6);
}

/* Skeleton Placeholder para quando a imagem não for cadastrada no ACF */
.casanova-polaroid__skeleton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 312px;
    height: clamp(260px, 32vw, 334px);
    aspect-ratio: 312 / 334;
    background: linear-gradient(135deg, #E8E2D6 25%, #FBFAF7 50%, #E8E2D6 75%);
    background-size: 200% 100%;
    animation: casanovaSkeletonShimmer 2.5s infinite ease-in-out;
    border-radius: 1px;
    overflow: hidden;
}

@keyframes casanovaSkeletonShimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.casanova-polaroid__skeleton-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--color-neutral-600, #8E887E);
    padding: 20px;
    text-align: center;
}

.casanova-polaroid__skeleton-icon {
    stroke: var(--color-neutral-500, #B5AFA4);
    opacity: 0.85;
}

.casanova-polaroid__skeleton-text {
    font-family: var(--font-sans, 'Source Sans 3', sans-serif);
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.01em;
    color: var(--color-neutral-600, #8E887E);
}

/* --------------------------------------------------------------------------
   Coluna Editorial (Textos & Ações) à Direita (Desktop)
   -------------------------------------------------------------------------- */
.section-casanova__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    order: 1; /* No mobile, exibe primeiro */
}

/* Eyebrow: A QUE DÁ O NOME */
.section-casanova__eyebrow {
    display: inline-block;
    font-family: var(--font-sans, 'Source Sans 3', sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.02em; /* 2% */
    text-transform: uppercase;
    color: var(--casa-acento-700, #6D4325);
    margin-bottom: clamp(10px, 1.2vw, 16px);
}

/* Título: CASANOVA */
.section-casanova__title {
    font-family: var(--font-serif, 'Source Serif 4', 'Source Serif Pro', Georgia, serif);
    font-weight: 600;
    font-size: clamp(32px, 3.8vw, 44px);
    line-height: 1.06; /* 106% */
    letter-spacing: -0.015em; /* -1.5% */
    color: var(--casa-acento-900, #301604);
    margin: 0 0 clamp(18px, 2.2vw, 26px) 0;
}

/* Parágrafo Descritivo (Rich Text) */
.section-casanova__description {
    font-family: var(--font-sans, 'Source Sans 3', sans-serif);
    font-weight: 400;
    font-size: clamp(16px, 1.7vw, 22px);
    line-height: 1.5; /* 150% */
    letter-spacing: 0;
    color: var(--color-neutral-800, #3A3733);
    margin: 0 0 clamp(24px, 3vw, 36px) 0;
}

.section-casanova__description p {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0 0 clamp(14px, 1.8vw, 20px) 0;
}

.section-casanova__description p:last-child {
    margin-bottom: 0;
}

.section-casanova__description strong,
.section-casanova__description b {
    font-weight: 600;
    color: var(--color-neutral-900, #111111);
}

.section-casanova__description em,
.section-casanova__description i {
    font-style: italic;
}

.section-casanova__description a {
    color: var(--casa-acento-700, #6D4325);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.2s ease;
}

.section-casanova__description a:hover {
    opacity: 0.8;
}

/* Botão de Ação */
.section-casanova__action {
    display: flex;
    align-items: center;
    margin-top: 0;
}

.section-casanova__action .btn {
    width: auto;
    min-width: 146px;
    height: 46px;
    padding: 16px 32px;
}

/* --------------------------------------------------------------------------
   Media Queries Progressivas (Mobile-First)
   -------------------------------------------------------------------------- */

/* Telas Médias e Desktops (min-width: 1024px) */
@media (min-width: 1024px) {
    .section-casanova__container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: clamp(48px, 6vw, 96px);
    }

    /* Inversão: Visual à Esquerda (ordem 1), Conteúdo à Direita (ordem 2) */
    .section-casanova__visual {
        order: 1;
        flex: 1 1 45%;
        max-width: 480px;
        justify-content: flex-start;
    }

    .section-casanova__content {
        order: 2;
        flex: 1 1 55%;
        max-width: 620px;
    }

    .section-casanova__title {
        font-size: 44px;
        line-height: 1.06;
        letter-spacing: -0.015em;
    }

    .section-casanova__description {
        font-size: 22px;
        line-height: 1.5;
        letter-spacing: 0;
    }

    .casanova-polaroid {
        transform: rotate(-1.5deg); /* Exatamente 1.5 deg do Figma */
    }

    .casanova-polaroid__img,
    .casanova-polaroid__skeleton {
        height: 334px; /* Exatos 334px do Figma no Desktop */
    }
}