/* ================================================================
 * L'Éléphant — About
 * Template editorial independente de WPBakery.
 * ================================================================ */

body.elephant-about-page {
    background: var(--beige, #ede6e2);
}

body.elephant-about-page main,
body.page-id-45 main,
body.page-id-495 main,
body.page-id-1578 main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.elephant-about-page .elephant-header-spacer {
    display: none !important;
}

body.elephant-about-page header.menu-transparente {
    background: transparent !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity .7s ease;
}

body.elephant-about-page.is-about-ui-ready header.menu-transparente {
    opacity: 1;
    pointer-events: auto;
}

body.elephant-about-page #main-menu li a,
body.elephant-about-page #mobile-menu li a {
    color: #000 !important;
}

body.elephant-about-page .site-lelephant img {
    filter: none !important;
}

.elephant-about {
    width: 100%;
    overflow: clip;
    background: var(--beige, #ede6e2);
    color: #000;
    font-family: "Roboto", sans-serif;
}

/* Hero */
.elephant-about__hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 620px;
    overflow: hidden;
    background: #d7d0ca;
}

.elephant-about__hero-image,
.elephant-about__hero-fallback {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Reunião: aparece depois do hero carregar e mantém-se fixa. */
.elephant-about__meeting-float {
    position: fixed;
    z-index: 48;
    right: max(2vw, 24px);
    bottom: 28px;
    min-width: 138px;
    height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #000;
    font: 400 12px/1 "Roboto", sans-serif;
    text-transform: uppercase;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .55s ease .18s, transform .55s ease .18s, background-color .25s ease, color .25s ease;
}

body.elephant-about-page.is-about-ui-ready .elephant-about__meeting-float {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.elephant-about__meeting-float:hover,
.elephant-about__meeting-inline:hover {
    background: #000;
    color: #fff;
}

/* Motor do calendário interno no About: o hero do shortcode fica oculto,
   mas o modal permanece disponível no DOM. */
.elephant-about__booking-engine > .lelephant-featured-hero {
    display: none !important;
}

.elephant-about__booking-engine {
    display: contents;
}

/* Textos */
.elephant-about__statement,
.elephant-about__manifesto,
.elephant-about__spotlight {
    background: var(--beige, #ede6e2);
}

.elephant-about__statement {
    min-height: clamp(390px, 25vw, 480px);
    display: grid;
    place-items: center;
    padding: 96px 6vw;
}

.elephant-about__statement-inner {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.elephant-about__signature,
.elephant-about__body-copy,
.elephant-about__cta-copy {
    max-width: 940px;
    margin: 0 auto;
    text-align: center;
}

.elephant-about__statement p {
    margin: 0;
    font: 400 clamp(18px, 1.08vw, 21px)/1.28 "Roboto", sans-serif;
}

/* Statement do XD: cada linha é um elemento separado.
 * CSS não consegue selecionar arbitrariamente a 2.ª/3.ª linha visual de um <p>;
 * por isso o template converte as quebras editoriais em spans e cada span recebe
 * o seu próprio eixo horizontal. */
.elephant-about__statement-lines {
    width: min(980px, 84vw);
    margin: 0 auto;
    font: 400 clamp(30px, 1vw, 40px)/1.22 "Roboto", sans-serif;
    text-align: center;
}

.elephant-about__statement-line {
    display: block;
    width: max-content;
    max-width: calc(100vw - 48px);
    margin-inline: auto;
    white-space: nowrap;
    text-align: left;
    will-change: transform;
}

/* Eixos medidos visualmente a partir do XD.
 * A própria linha é deslocada; não é apenas o texto dentro de uma caixa centrada. */
.elephant-about__statement-line--1 { transform: translateX(-130px); }
.elephant-about__statement-line--2 { transform: translateX(-6.2vw); }
.elephant-about__statement-line--3 { transform: translateX(6.6vw); }
.elephant-about__statement-line--4 { transform: translateX(-0.8vw); margin-top: 1px; }

.elephant-about__statement-lines em,
.elephant-about__statement-lines i {
    font-size: 1.08em;
}

@media (min-width: 1600px) {
    .elephant-about__statement-line--1 { transform: translateX(-130px); }
    .elephant-about__statement-line--2 { transform: translateX(-108px); }
    .elephant-about__statement-line--3 { transform: translateX(112px); }
    .elephant-about__statement-line--4 { transform: translateX(-14px); }
}

@media (max-width: 780px) {
   .elephant-about__statement-lines {
        width: min(92vw, 560px);
        font-size: 16px;
        line-height: 1.28;
    }

    .elephant-about__statement-line {
        width: auto;
        white-space: normal;
        text-align: center;
        transform: none !important;
    }
}

.elephant-about__signature p,
.elephant-about__body-copy p,
.elephant-about__cta-copy p {
    margin: 0;
    font: 400 clamp(18px, 1.45vw, 28px)/1.38 "Roboto", sans-serif;
}

/* Imagem editorial imediatamente abaixo do primeiro statement (XD). */
.elephant-about__intro-image-section {
    width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #d8d2cd;
}

.elephant-about__intro-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    object-fit: cover;
    object-position: center;
}

.elephant-about em,
.elephant-about i {
    font-family: "LibreBodoni-Italic", "Times New Roman", serif;
    font-weight: 400;
}

/* Galerias horizontais */
.elephant-about__gallery-section,
.elephant-about-project {
    width: 100%;
}

.elephant-about-horizontal {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    cursor: grab;
    outline: none;
}

.elephant-about-horizontal::-webkit-scrollbar {
    display: none;
}

.elephant-about-horizontal.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.elephant-about-horizontal__track {
    display: flex;
    width: max-content;
    min-width: 100%;
}

.elephant-about-horizontal__item {
    flex: 0 0 auto;
    margin: 0;
    overflow: hidden;
    background: #d8d2cd;
}

.elephant-about__gallery-section .elephant-about-horizontal__item {
    width: min(72vw, 1180px);
    height: clamp(420px, 63vh, 760px);
}

.elephant-about__gallery-section .elephant-about-horizontal__item:nth-child(even) {
    width: min(48vw, 790px);
}

.elephant-about-horizontal__item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Manifesto — painel 100vh com entrada em slide + composição editorial do XD */
.elephant-about__manifesto {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 700px;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: clamp(54px, 5vh, 82px) 5vw;
    background: var(--beige, #ede6e2);
    transform: translateY(14vh);
    clip-path: inset(0 0 14vh 0);
    transition:
        transform .92s cubic-bezier(.22,1,.36,1),
        clip-path .92s cubic-bezier(.22,1,.36,1);
    will-change: transform, clip-path;
}

.elephant-about__manifesto.is-manifesto-active {
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
}

.elephant-about__manifesto-inner {
    width: min(1120px, 86vw);
    margin: 0 auto;
    text-align: center;
}

/* A mesma escala-base usada no primeiro statement desalinhado. */
.elephant-about__manifesto-lines {
    width: min(980px, 84vw);
    margin: 0 auto;
    font: 400 clamp(30px, 1vw, 40px)/1.22 "Roboto", sans-serif;
    text-align: center;
}

.elephant-about__manifesto-line {
    display: block;
    width: max-content;
    max-width: calc(100vw - 56px);
    margin-inline: auto;
    white-space: nowrap;
    text-align: left;
    will-change: transform;
}

/* Assinatura: centro -> direita -> esquerda, como no XD. */
.elephant-about__manifesto-lines--signature .elephant-about__manifesto-line--1 { transform: translateX(-46px); }
.elephant-about__manifesto-lines--signature .elephant-about__manifesto-line--2 { transform: translateX(82px); }
.elephant-about__manifesto-lines--signature .elephant-about__manifesto-line--3 { transform: translateX(-118px); }
.elephant-about__manifesto-lines--signature .elephant-about__manifesto-line--4 { transform: translateX(24px); }

/* Texto intermédio do manifesto: no XD é um bloco normal, centrado e com
 * largura controlada. Não há offsets por linha nem white-space: nowrap;
 * deixamos o próprio texto quebrar naturalmente dentro do eixo central. */
.elephant-about__body-copy {
    width: min(1080px, 78vw);
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

.elephant-about__body-copy-inner,
.elephant-about__body-copy-inner p {
    width: 100%;
    margin: 0;
    text-align: center;
}

.elephant-about__body-copy-inner p {
    font: 400 clamp(30px, 1vw, 40px)/1.22 "Roboto", sans-serif;
}

.elephant-about__signature {
    max-width: none;
    margin: 0 auto;
}

.elephant-about__values {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1vw, 18px);
    margin: clamp(48px, 6vh, 76px) auto clamp(44px, 5.2vh, 66px);
    font: 400 clamp(30px, 1vw, 40px)/1 "LibreBodoni-Regular", "Times New Roman", serif;
}

.elephant-about__values i {
    display: block;
    width: clamp(86px, 8vw, 142px);
    height: 1px;
    background: rgba(0,0,0,.55);
}

.elephant-about__values .is-italic {
    font-family: "LibreBodoni-Italic", "Times New Roman", serif;
}


.elephant-about__cta-copy {
    max-width: 940px;
    margin: clamp(40px, 5vh, 64px) auto 0;
    text-align: center;
}

.elephant-about__cta-copy p {
    margin: 0;
    font: 400 clamp(30px, 1vw, 40px)/1.18 "LibreBodoni-Italic", "Times New Roman", serif;
}

.elephant-about__meeting-inline {
    display: block;
    margin: clamp(36px, 4.5vh, 58px) auto 0;
    padding: 10px 13px 10px;
    border: 0;
    background: transparent;
    color: #000;
    font: 400 20px/23px "Roboto", sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .22s ease, color .22s ease;
}

.elephant-about__meeting-inline:hover,
.elephant-about__meeting-inline:focus-visible {
    background: #202020;
    color: #fff;
}

/* Projetos: só ocupam a altura real da galeria + meta.
 * Projetos sem galeria nem sequer são renderizados pelo template. */
.elephant-about__projects {
    background: var(--beige, #ede6e2);
}

.elephant-about-project {
    position: relative;
    min-height: 0;
    border-top: 1px solid rgba(0,0,0,.14);
    opacity: .16;
    transition: opacity .65s ease;
}

.elephant-about-project.is-active,
.elephant-about-project.is-revealed {
    opacity: 1;
}

.elephant-about-project__gallery {
    height: min(76vh, 720px);
}

.elephant-about-project__gallery .elephant-about-horizontal__track,
.elephant-about-project__gallery .elephant-about-horizontal__item,
.elephant-about-project__image-link {
    height: 100%;
}

.elephant-about-project__image {
    width: min(72vw, 1180px);
}

.elephant-about-project__image:nth-child(even) {
    width: min(48vw, 790px);
}

.elephant-about-project__image-link {
    display: block;
}

.elephant-about-project__meta {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    min-height: 86px;
    padding: 18px 2%;
    border-top: 1px solid rgba(0,0,0,.14);
    border-bottom: 1px solid rgba(0,0,0,.14);
    font: 400 14px/20px "Roboto", sans-serif;
}

.elephant-about-project__title {
    color: #000;
}

.elephant-about-project__meta > span:last-child {
    text-align: right;
}

.elephant-about__spotlight-media {
    display: grid;
    grid-template-columns: 38% 62%;
    width: 100%;
    height: min(82vh, 790px);
    min-height: 520px;
    margin: 0;
    gap: 10px;
    padding: 0;
    overflow: hidden;
    background: #ece4dc;
}

.elephant-about__spotlight-media.has-one-image {
    grid-template-columns: 1fr;
}

.elephant-about__spotlight-media-item {
    min-width: 0;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.elephant-about__spotlight-media-item + .elephant-about__spotlight-media-item {
    border-left: 1px solid rgba(237,230,226,.75);
}

.elephant-about__spotlight-media-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Spotlight */
.elephant-about__spotlight {
    padding: 42px 0 56px;
}

.elephant-about__spotlight-inner {
    width: min(74vw, 1420px);
    margin: 0 auto;
}

.elephant-about__spotlight-title {
    margin: 15px 0 34px;
    font: 400 25px/33px "Roboto", sans-serif;
    text-transform: uppercase;
}

.elephant-about__spotlight-list {
    width: 100%;
    border-top: 1px solid rgba(0,0,0,.18);
}
.elephant-about__spotlight-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,.18);
    color: #000;
    font: 400 20px/26px "Roboto", sans-serif;
}

.elephant-about__spotlight-row span:first-child {
    text-align: left;
}

.elephant-about__spotlight-row span:nth-child(2) {
    text-align: center;
}

.elephant-about__spotlight-row span:last-child {
    text-align: right;
}

.elephant-about__projects-link {
    display: table;
    margin: 65px auto 0;
    color: #000;
    font: 400 25px/33px "Roboto", sans-serif;
    text-transform: uppercase;
}



/* Spotlight — cada linha começa realmente colapsada em baixo.
 * Ao entrar, ganha altura e sobe até encostar à linha anterior. */
.elephant-about__spotlight[data-elephant-spotlight] {
    overflow: hidden;
}

.elephant-about__spotlight[data-elephant-spotlight] .elephant-about__spotlight-title {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity .42s cubic-bezier(.22,1,.36,1),
        transform .58s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
}

.elephant-about__spotlight[data-elephant-spotlight] .elephant-about__spotlight-list {
    overflow: hidden;
}

.elephant-about__spotlight[data-elephant-spotlight] .elephant-about__spotlight-row {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-color: transparent;
    opacity: 0;
    overflow: hidden;
    transform: translateY(48px);
    transition:
        max-height .62s cubic-bezier(.16,1,.3,1) var(--elephant-spotlight-out-delay, 0ms),
        padding .62s cubic-bezier(.16,1,.3,1) var(--elephant-spotlight-out-delay, 0ms),
        border-color .36s ease var(--elephant-spotlight-out-delay, 0ms),
        opacity .38s ease var(--elephant-spotlight-out-delay, 0ms),
        transform .72s cubic-bezier(.16,1,.3,1) var(--elephant-spotlight-out-delay, 0ms);
    will-change: max-height, opacity, transform;
}

.elephant-about__spotlight[data-elephant-spotlight].is-spotlight-active .elephant-about__spotlight-title {
    opacity: 1;
    transform: translateY(0);
}

.elephant-about__spotlight[data-elephant-spotlight].is-spotlight-active .elephant-about__spotlight-row {
    max-height: 34px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom-color: rgba(0,0,0,.18);
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--elephant-spotlight-in-delay, 0ms);
}

.elephant-about__spotlight[data-elephant-spotlight] .elephant-about__projects-link {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity .46s cubic-bezier(.22,1,.36,1) var(--elephant-spotlight-link-out-delay, 0ms),
        transform .64s cubic-bezier(.22,1,.36,1) var(--elephant-spotlight-link-out-delay, 0ms);
    will-change: opacity, transform;
}

.elephant-about__spotlight[data-elephant-spotlight].is-spotlight-active .elephant-about__projects-link {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--elephant-spotlight-link-in-delay, 0ms);
}

/* Reveals gerais, reversíveis. */
.elephant-about-reveal {
    opacity: 0;
    transform: translateY(-22px);
    transition:
        opacity .68s cubic-bezier(.22,1,.36,1),
        transform .78s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
}

.elephant-about-reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* O painel entra primeiro. Depois cada linha/frase aparece como unidade,
 * de cima para baixo, mantendo a composição editorial do XD. */
.elephant-about__manifesto .elephant-about-motion {
    opacity: 1;
    transform: none;
}

.elephant-about__phrase {
    opacity: 0;
    transform: translateY(-18px);
    transition:
        opacity .52s cubic-bezier(.22,1,.36,1) var(--elephant-phrase-out-delay, 0ms),
        transform .64s cubic-bezier(.22,1,.36,1) var(--elephant-phrase-out-delay, 0ms);
    will-change: opacity, transform;
}

.elephant-about__manifesto.is-manifesto-active .elephant-about__phrase {
    opacity: 1;
    transition-delay: var(--elephant-phrase-in-delay, 0ms);
}

@media (max-width: 767px) {
    .elephant-about__hero {
        min-height: 520px;
    }

    .elephant-about__statement {
        min-height: 300px;
        padding: 64px 24px;
    }

    .elephant-about__statement-inner {
        max-width: 560px;
    }

    .elephant-about__statement p {
        font-size: 16px;
        line-height: 1.32;
    }

    .elephant-about__signature p {
        font-size: 18px;
    }

    .elephant-about__gallery-section .elephant-about-horizontal__item,
    .elephant-about__gallery-section .elephant-about-horizontal__item:nth-child(even),
    .elephant-about-project__image,
    .elephant-about-project__image:nth-child(even) {
        width: 88vw;
    }

    .elephant-about__gallery-section .elephant-about-horizontal__item {
        height: 58vh;
        min-height: 430px;
    }

    .elephant-about__manifesto {
        min-height: 560px;
        padding: 64px 22px 72px;
    }

    .elephant-about__manifesto-inner {
        width: 100%;
    }

    .elephant-about__signature p {
        font-size: 14px;
        line-height: 1.3;
    }

    .elephant-about__values {
        gap: 8px;
        margin: 38px 0 36px;
        font-size: clamp(25px, 7.8vw, 34px);
    }

    .elephant-about__values i {
        width: 32px;
    }

    .elephant-about-project__gallery {
        height: 60vh;
        min-height: 460px;
    }

    .elephant-about-project__meta,
    .elephant-about__spotlight-row {
        grid-template-columns: 1fr auto;
    }

    .elephant-about-project__meta > span:nth-child(2),
    .elephant-about__spotlight-row span:nth-child(2) {
        display: none;
    }

    .elephant-about__spotlight-media {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
    }

    .elephant-about__spotlight-media-item {
        height: 56vh;
        min-height: 360px;
    }

    .elephant-about__spotlight-media-item + .elephant-about__spotlight-media-item {
        border-left: 0;
        border-top: 1px solid rgba(237,230,226,.75);
    }

    .elephant-about__spotlight {
        padding: 44px 18px 42px;
    }

    .elephant-about__spotlight-inner {
        width: 100%;
    }

    .elephant-about__meeting-float {
        right: 16px;
        bottom: 16px;
        min-width: 128px;
        height: 40px;
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.elephant-about-page header.menu-transparente,
    .elephant-about__meeting-float,
    .elephant-about-reveal,
    .elephant-about-motion,
    .elephant-about__phrase,
    .elephant-about__spotlight-title,
    .elephant-about__spotlight-row,
    .elephant-about__spotlight .elephant-about__projects-link,
    .elephant-about-project {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

@media (max-width: 780px) {
    .elephant-about__manifesto {
        height: auto;
        min-height: 100dvh;
        padding: 82px 24px;
        transform: translateY(9vh);
        clip-path: inset(0 0 9vh 0);
    }

    .elephant-about__manifesto-inner {
        width: 100%;
    }

    .elephant-about__manifesto-lines {
        width: min(92vw, 560px);
        font-size: 16px;
        line-height: 1.28;
    }

    .elephant-about__manifesto-line {
        width: auto;
        max-width: none;
        white-space: normal;
        text-align: center;
        transform: none !important;
    }

    .elephant-about__body-copy {
        width: min(92vw, 560px);
    }

    .elephant-about__body-copy-inner p {
        font-size: 16px;
        line-height: 1.28;
    }

    .elephant-about__values {
        flex-wrap: nowrap;
        gap: 8px;
        margin: 50px auto 46px;
        font-size: clamp(25px, 8vw, 34px);
    }

    .elephant-about__values i {
        width: clamp(34px, 10vw, 52px);
    }

    .elephant-about__cta-copy {
        margin-top: 38px;
    }

    .elephant-about__cta-copy p {
        font-size: clamp(24px, 7vw, 32px);
    }
}