/* =============================================================================
   DAS ALMAS
   Site Oficial

   Arquivo:
   layout.css

   Caminho:
   assets/css/layout.css

   Versão:
   2.0.0

   Descrição:
   Estrutura, containers, grids e organização espacial.

   ============================================================================= */


/* =============================================================================
   CONTAINER PADRÃO
   ========================================================================== */

.container{

    width:min(92%, var(--container-default));

    margin-inline:auto;

}


/* =============================================================================
   CONTAINER DE LEITURA
   ========================================================================== */

.text-content{

    width:min(100%, var(--container-reading));

}


/* =============================================================================
   SEÇÕES
   ========================================================================== */

section{

    padding:

        var(--space-2xl)

        0;

}


/* =============================================================================
   HERO
   ========================================================================== */

#hero{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:100vh;

    overflow:hidden;

}


/* =============================================================================
   IMAGEM HERO
   ========================================================================== */

.hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:1;

}


/* =============================================================================
   OVERLAY HERO
   ========================================================================== */

.hero-overlay{

    position:absolute;

    inset:0;

    background:var(--overlay-dark);

    z-index:2;

}


/* =============================================================================
   CONTEÚDO HERO
   ========================================================================== */

.hero-content{

    position:relative;

    z-index:3;

    width:min(90%,900px);

    text-align:center;

    color:var(--color-white);

}

.hero-content h1{

    margin-bottom:var(--space-sm);

    color:var(--color-white);

}

.hero-content p{

    max-width:none;

    margin:0;

    color:rgba(255,255,255,.85);

    letter-spacing:.25em;

    text-transform:uppercase;

}


/* =============================================================================
   INDICADOR DE SCROLL
   ========================================================================== */

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:48px;

    transform:translateX(-50%);

    z-index:3;

    letter-spacing:.25em;

    font-size:.80rem;

    color:rgba(255,255,255,.75);

}


/* =============================================================================
   HEADER
   ========================================================================== */

#header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:var(--z-header);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:

        28px

        5vw;

}


/* =============================================================================
   LOGO
   ========================================================================== */

.logo{

    letter-spacing:.30em;

    font-size:.90rem;

    font-weight:var(--fw-medium);

}


/* =============================================================================
   BOTÃO SUMÁRIO
   ========================================================================== */

#summary-button{

    letter-spacing:.18em;

    font-size:.82rem;

    text-transform:uppercase;

}


/* =============================================================================
   MENU LATERAL
   ========================================================================== */

#summary{

    position:fixed;

    top:0;

    right:-420px;

    width:400px;

    height:100vh;

    background:var(--color-surface);

    z-index:var(--z-menu);

    overflow-y:auto;

    transition:var(--transition-slow);

    box-shadow:var(--shadow-medium);

}

#summary.active{

    right:0;

}


/* =============================================================================
   CABEÇALHO DO MENU
   ========================================================================== */

.summary-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:

        32px

        40px;

}


/* =============================================================================
   TÍTULO DO MENU
   ========================================================================== */

.summary-title{

    padding:

        0

        40px

        48px;

}


/* =============================================================================
   LISTA DO MENU
   ========================================================================== */

.summary-list{

    display:flex;

    flex-direction:column;

}


/* =============================================================================
   ITEM DO MENU
   ========================================================================== */

.summary-list li{

    border-top:1px solid var(--color-line);

}


/* =============================================================================
   LINKS DO MENU
   ========================================================================== */

.summary-list a{

    display:flex;

    align-items:center;

    gap:20px;

    padding:

        26px

        40px;

}


/* =============================================================================
   NÚMERO DO CAPÍTULO
   ========================================================================== */

.chapter-number{

    min-width:40px;

    color:var(--color-accent);

    letter-spacing:.15em;

}


/* =============================================================================
   CONTEÚDO DAS SEÇÕES
   ========================================================================== */

#manifesto .container,
#maison .container,
#pilares .container,
#experiencia .container,
#contato .container{

    display:flex;

    justify-content:center;

}


/* =============================================================================
   GALERIA
   ========================================================================== */

#galeria{

    background:var(--color-surface);

}


/* =============================================================================
   PEÇAS DA GALERIA
   ========================================================================== */

.gallery-piece{

    width:min(92%,1000px);

    margin:

        var(--space-2xl)

        auto

        0;

}


/* =============================================================================
   IMAGENS DA GALERIA
   ========================================================================== */

.gallery-piece img{

    width:100%;

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-soft);

}


/* =============================================================================
   INTERLÚDIO
   ========================================================================== */

#interlude-artesao{

    padding:

        var(--space-3xl)

        0;

}


/* =============================================================================
   FOTO EDITORIAL
   ========================================================================== */

.editorial-photo{

    width:min(90%,1200px);

    margin:auto;

}

.editorial-photo img{

    width:100%;

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-medium);

}


/* =============================================================================
   FOOTER
   ========================================================================== */

#footer{

    padding:

        var(--space-xl)

        0;

    background:var(--color-surface);

}


/* =============================================================================
   CONTEÚDO FOOTER
   ========================================================================== */

.footer-content{

    width:min(92%,900px);

    margin:auto;

    text-align:center;

}


/* =============================================================================
   LINHA FOOTER
   ========================================================================== */

.footer-line{

    width:80px;

    height:1px;

    margin:

        var(--space-md)

        auto;

    background:var(--color-line);

}