/*
 * sections/about.css — section "Sobre / Posicionamento" (#sobre).
 *
 * LAYOUT
 *   < 960px  : uma coluna — texto, depois a composição de mockups (largura limitada).
 *   ≥ 960px  : duas colunas, texto 45fr | visual 55fr, centralizadas na vertical.
 *
 * COMPOSIÇÃO DOS MOCKUPS (.about-visual)
 *   Container com aspect-ratio fixo; os mockups são posicionados em % da largura,
 *   então a composição escala inteira sem recalcular nada.
 *   As imagens (405 × 821, PNG transparente com moldura) têm altura = 2.027 × largura.
 *
 *     primary   (mockup_01, Minhas reservas)  left 6%,  top 0,    width 48%  → frente (z 2)
 *     secondary (mockup_02, seleção horário)  left 52%, top 14%,  width 44%  → atrás, menor, mais baixo
 *
 *   Sobreposição horizontal: 52% → 54% = 2% da largura — só a moldura do primary
 *   sobre a moldura do secondary; nenhum conteúdo de tela fica coberto. Altura total ≈ 14% + 44% × 2.027 ≈ 103% → aspect-ratio 1 / 1.04.
 *
 *   Profundidade: z-index, diferença de escala (48% × 44%), deslocamento vertical,
 *   drop-shadow (segue o contorno do PNG) e uma forma suave ao fundo (::before).
 *
 * CAMADAS (não juntar):
 *   .about-mockup        → entrada controlada pelo scroll (JS)
 *   .about-mockup-float  → flutuação contínua (JS), com will-change
 *
 * Nenhum CSS esconde conteúdo aguardando animação (ver main.css).
 */

.about-section {
    padding-block: clamp(var(--space-xl), 4rem + 3vw, 8rem);
    background: var(--color-surface);
    color: var(--color-brand-navy);
    /* A flutuação desloca alguns px: nunca gerar scroll horizontal. */
    overflow-x: clip;
}

.about-container {
    display: grid;
    gap: var(--space-xl);
}

/* ---------- Texto ---------- */

.about-copy {
    max-width: 34rem;
}

.about-title {
    font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
    letter-spacing: -0.02em;
}

.about-text {
    margin-top: var(--space-md);
    color: var(--color-text-on-light-muted);
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
}

.about-tagline {
    display: flex;
    gap: var(--space-sm);
    align-items: baseline;
    margin-top: var(--space-lg);
    font-size: 1rem;
    font-weight: var(--font-weight-subheading);
}

.about-tagline::before {
    content: "";
    flex: none;
    width: 2.25rem;
    height: 2px;
    background: var(--color-brand-orange);
    /* Alinha o traço ao meio da primeira linha. */
    transform: translateY(-0.3em);
}

/* ---------- Composição visual ---------- */

.about-visual {
    position: relative;
    width: min(100%, 26rem);
    margin-inline: auto;
    aspect-ratio: 1 / 1.04;
}

/* Forma suave ao fundo: ancora a composição sem competir com as telas. */
.about-visual::before {
    content: "";
    position: absolute;
    inset: 12% 4% 8%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--color-surface-muted) 0%, var(--color-surface-muted) 60%, transparent 100%);
}

.about-mockup {
    position: absolute;
    margin: 0;
}

.about-mockup-primary {
    top: 0;
    left: 6%;
    z-index: 2;
    width: 48%;
}

.about-mockup-secondary {
    top: 14%;
    left: 52%;
    z-index: 1;
    width: 44%;
}

.about-mockup-float {
    will-change: transform;
}

.about-mockup img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 28px rgba(3, 13, 28, 0.16)) drop-shadow(0 2px 6px rgba(3, 13, 28, 0.08));
}

.about-mockup-secondary img {
    filter: drop-shadow(0 12px 22px rgba(3, 13, 28, 0.12)) drop-shadow(0 2px 4px rgba(3, 13, 28, 0.06));
}

/* ---------- Desktop: duas colunas ---------- */

@media (min-width: 960px) {
    .about-container {
        grid-template-columns: 45fr 55fr;
        align-items: center;
        gap: var(--space-xl);
    }

    .about-visual {
        width: min(100%, 36rem);
    }
}