/* ==========================================================================
   section-origem.css - Seção 6: A Casa · A Origem
   Design System Fiel ao Figma · 100% Mobile-First com clamp()
   Fundo Papel Nobre: #F6F1E8 · Layout: 1280px Fill × 810.84px Hug
   ========================================================================== */

.section-origem {
    position: relative;
    width: 100%;
    background-color: var(--color-base-papel, #F6F1E8);
    isolation: isolate;
    overflow: hidden;
    padding-top: clamp(64px, 8vw, 112px);
    padding-bottom: clamp(64px, 8vw, 112px);
    padding-left: clamp(20px, 5vw, 64px);
    padding-right: clamp(20px, 5vw, 64px);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --------------------------------------------------------------------------
   Background: Marca d'água & Fade Radial
   -------------------------------------------------------------------------- */
.section-origem__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.section-origem__pattern {
    position: absolute;
    inset: 0;
    background-image: url('../images/pattern-casanova.svg');
    background-repeat: repeat;
    background-size: 80px 80px;
    opacity: 0.15;
}

.section-origem__fade {
    position: absolute;
    inset: 0;
    background: radial-gradient(50% 50% at 50% 50%, rgba(246, 241, 232, 0) 0%, rgba(246, 241, 232, 0.3) 60%, #F6F1E8 100%);
}

/* Glows do Figma estruturados com display: none */
.section-origem__glow-soft,
.section-origem__glow-strong {
    display: none;
}

/* --------------------------------------------------------------------------
   Container de Conteúdo (1152px max)
   -------------------------------------------------------------------------- */
.section-origem__container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1152px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(40px, 5.5vw, 64px);
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .section-origem__container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 64px;
    }
}

/* --------------------------------------------------------------------------
   Coluna de Texto (Largura máxima 553.17px no Figma)
   -------------------------------------------------------------------------- */
.section-origem__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 553.17px;
    flex: 1 1 auto;
    box-sizing: border-box;
}

/* Eyebrow / Sobretítulo: Source Sans 3 · SemiBold (600) · 14px · line-height 20px */
.section-origem__eyebrow {
    font-family: var(--font-sans, 'Source Sans 3', sans-serif);
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-neutral-900, #111111);
    margin: 0;
}

/* Título: Source Serif Pro / 4 · SemiBold (600) · 44px · line-height 106% */
.section-origem__title {
    font-family: var(--font-serif, 'Source Serif Pro', 'Source Serif 4', Georgia, serif);
    font-style: normal;
    font-weight: 600;
    font-size: clamp(30px, 3.8vw, 44px);
    line-height: 1.06;
    letter-spacing: -0.015em;
    color: var(--color-neutral-800, #3A3733);
    margin: 0;
}

.section-origem__title p {
    margin: 0;
    font: inherit;
    color: inherit;
    line-height: inherit;
    display: inline;
}

.section-origem__title em,
.section-origem__title i {
    font-style: italic;
    font-family: inherit;
}

.section-origem__title strong,
.section-origem__title b {
    font-weight: 700;
}

.section-origem__title a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.2s ease;
}

.section-origem__title a:hover {
    opacity: 0.85;
}

/* Descrição Editorial: Source Sans 3 · Regular (400) · 18px · line-height 150% */
.section-origem__description {
    font-family: var(--font-sans, 'Source Sans 3', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.5;
    color: var(--color-neutral-800, #3A3733);
    margin: 0;
}

.section-origem__description p {
    margin: 0 0 16px 0;
}

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

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

.section-origem__description a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.section-origem__description a:hover {
    color: var(--color-neutral-900, #111111);
}

/* --------------------------------------------------------------------------
   Coluna da Fotografia (520px × 573.42px com transform: rotate(1.5deg))
   -------------------------------------------------------------------------- */
.section-origem__visual {
    width: 100%;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.section-origem__photo-frame {
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 520 / 573.42;
    transform: rotate(1.5deg);
    transform-origin: center center;
    overflow: hidden;
    box-shadow: 0px 2px 6px rgba(28, 26, 24, 0.05), 0px 10px 28px rgba(28, 26, 24, 0.10);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    background-color: var(--color-neutral-300, #E8E2D6);
}

@media (hover: hover) {
    .section-origem__photo-frame:hover {
        transform: rotate(0deg) scale(1.02);
        box-shadow: 0px 4px 12px rgba(28, 26, 24, 0.08), 0px 16px 36px rgba(28, 26, 24, 0.14);
    }
}

.section-origem__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --------------------------------------------------------------------------
   Skeleton Placeholder (Zero Imagens Fictícias / Efeito Shimmer)
   -------------------------------------------------------------------------- */
.section-origem__skeleton {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(232, 226, 214, 0.6) 0%, rgba(246, 241, 232, 0.9) 50%, rgba(232, 226, 214, 0.6) 100%);
    background-size: 200% 200%;
    animation: origemShimmer 2.5s infinite ease-in-out;
    color: var(--color-neutral-600, #8E887E);
    font-family: var(--font-sans, 'Source Sans 3', sans-serif);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    user-select: none;
}

.section-origem__skeleton svg {
    width: 44px;
    height: 44px;
    stroke: var(--color-neutral-500, #B5AFA4);
}

@keyframes origemShimmer {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* --------------------------------------------------------------------------
   Mobile Adjustments (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .section-origem__photo-frame {
        max-width: 92%;
        margin-left: auto;
        margin-right: auto;
    }
}