/* ============================================================
   Layout — contêiner, seção e as três superfícies da identidade
   O feed alterna claro → roxo → foto; o site segue o mesmo ritmo.
   Cada superfície redefine os papéis de cor (--fg, --title-accent…),
   então os componentes dentro dela não precisam saber onde estão.
   ============================================================ */

.container {
    width: 100%;
    max-width: calc(var(--container-max) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    position: relative;
    padding-block: var(--section-py);
    color: var(--fg);
}

/* ── Superfícies ─────────────────────────────────────────── */

.surface-paper  { background: var(--paper); }
.surface-paper2 { background: var(--paper-2); }
.surface-white  { background: var(--white); }

.surface-brand,
.surface-night,
.surface-photo {
    --fg:           #FFFFFF;
    --fg-soft:      rgba(255, 255, 255, 0.86);
    --fg-muted:     rgba(255, 255, 255, 0.72);
    --fg-line:      rgba(255, 255, 255, 0.22);
    --title-accent: var(--lilac-soft);
    --dot:          var(--lilac);
    color: var(--fg);
    isolation: isolate;
    overflow: clip;
}

.surface-brand { background: var(--brand-deep) var(--field-purple); }

.surface-night {
    --title-accent: var(--lilac);
    background: var(--night);
}

/* Foto inteira de fundo, como nos posts: a última linha do título em lilás
   e o rótulo em lilás-claro. A foto e o véu ficam por conta da seção. */
.surface-photo {
    --title-accent: var(--lilac);
    --eyebrow-fg:   var(--lilac-soft);
    background: var(--night);
}

/* ── Logo (partials/brand/logo.php) ──────────────────────── */
/* Cada parte pinta pela sua variável: quem está em cima de foto troca as
   três pra branco, igual ao logo dos posts. */

.logo { display: block; }
.logo path { transition: fill var(--dur-base) var(--ease-apple); }
.logo__word { fill: var(--logo-word, var(--ink)); }
.logo__mark { fill: var(--logo-mark, var(--brand)); }
.logo__dot  { fill: var(--logo-dot, var(--brand)); }

/* ── Camaleão ────────────────────────────────────────────── */
/* O símbolo entra como máscara sobre um degradê. Um SVG inline precisaria
   de <linearGradient> com id, e id repetido na página quebra o degradê de
   todas as cópias depois da primeira. */

.cam-mark,
.cam-shape {
    -webkit-mask: url("../../icons/camaleao.svg") center / contain no-repeat;
    mask: url("../../icons/camaleao.svg") center / contain no-repeat;
    pointer-events: none;
}

/* Marca d'água: sai cortada pelo canto inferior direito, nunca inteira —
   inteira vira logo solto na página; cortada vira textura da marca. Nunca
   em cima de texto (Design System). */
.cam-mark {
    position: absolute;
    right: -6%;
    bottom: -18%;
    z-index: -1;
    width: clamp(260px, 42vw, 620px);
    aspect-ratio: 21.6 / 24;
    background: var(--cam-light);
    opacity: 0.22;
}

/* No roxo: branco de 30% a 6% (cam-watermark sobre o campo roxo). */
.surface-brand .cam-mark {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.06));
    opacity: 1;
}

/* Atrás de um vidro o camaleão aparece inteiro e vira silhueta desfocada:
   é o "algo" que o vidro precisa ter embaixo pra existir. */
.cam-shape {
    aspect-ratio: 21.6 / 24;
    background: var(--cam-light);
}

/* ── Bolinha do camaleão ─────────────────────────────────── */
/* O canto superior direito de todo post. No site abre cada seção. */

.cam-bubble {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cam-bubble);
    box-shadow: var(--shadow-brand);
    color: #FFFFFF;
}
.cam-bubble svg { width: 47%; height: auto; }