/* ===============================================================
   IMAGAS — PROJETOS / CONTEÚDO EDITÁVEL
   Arquivo: /projetos-conteudo.css
   Não altera player, ASCII ou demais páginas.
   EDITE OS VALORES DESTE BLOCO PARA PERSONALIZAR A PÁGINA.
   =============================================================== */
body.page-projetos {
    /* FONTE E CORES */
    --projects-font: "Courier New", monospace;
    --projects-color: var(--page-ui-color, #4b5d8a);
    --projects-text-size: 14px;
    --projects-title-size: 35px;
    --projects-heading-size: 23px;
    --projects-card-title-size: 18px;
    --projects-label-size: 12px;
    --projects-line-height: 1.65;
    --projects-text-align: center;

    /* TAMANHO DO CONTEÚDO E ESPAÇAMENTOS */
    --projects-content-width: 880px;
    --projects-content-x: 0px;
    --projects-section-gap: 58px;
    --projects-image-gap: 23px;
    --projects-row-gap: 26px;
    --projects-card-text-gap: 9px;
    --projects-bottom-padding: 150px;

    /* NÚMERO DE COLUNAS — DESKTOP */
    --projects-band-columns: 2;
    --projects-poster-columns: 2;
    --projects-other-columns: 2;

    /* FORMATOS DAS IMAGENS */
    --projects-band-fit: contain;     /* contain: não recorta a arte */
    --projects-poster-fit: contain;   /* cartazes sem cortes */
    --projects-other-fit: contain;
    --projects-image-radius: 0px;
}

/* Permite rolar até o último texto, mesmo com o ASCII fixo ao fundo. */
html:has(body.page-projetos), body.page-projetos {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Remove o quadrado reservado ao painel de exemplo, sem mexer no header. */
body.page-projetos .projects-main {
    display: block;
    position: relative;
    z-index: 10;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 24px 12px var(--projects-bottom-padding);
    pointer-events: auto;
}
body.page-projetos .projects-stage {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
    padding: 0;
}
body.page-projetos .projects-stage > .subpage-mesh { display: none; }

body.page-projetos .projects-page-content {
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    width: min(var(--projects-content-width), calc(100vw - 32px));
    margin: 0 auto;
    transform: translateX(var(--projects-content-x));
    padding: 0;
    color: var(--projects-color);
    font-family: var(--projects-font);
    font-size: var(--projects-text-size);
    line-height: var(--projects-line-height);
    text-align: var(--projects-text-align);
    overflow-wrap: anywhere;
}
body.page-projetos .projects-page-content * { box-sizing: border-box; }
body.page-projetos .projects-page-content p,
body.page-projetos .projects-page-content figure { margin: 0; }
body.page-projetos .projects-page-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--projects-section-gap);
    text-align: center;
}
body.page-projetos .projects-kicker {
    font-size: var(--projects-label-size);
    letter-spacing: .12em;
    opacity: .82;
}
body.page-projetos .projects-page-heading h1 {
    margin: 0;
    font-size: var(--projects-title-size);
    line-height: 1.2;
}
body.page-projetos .projects-page-heading > p:last-child {
    max-width: 640px;
    margin: 0 auto;
}
body.page-projetos .projects-section + .projects-section { margin-top: var(--projects-section-gap); }
body.page-projetos .projects-section > h2 {
    margin: 0 0 19px;
    font-family: var(--projects-font);
    font-size: var(--projects-heading-size);
    line-height: 1.2;
    letter-spacing: .06em;
    text-align: center;
}
body.page-projetos .projects-section-intro {
    max-width: 640px;
    margin: 0 auto 22px !important;
    text-align: center;
}

/* Grids responsivos: o espaço é reservado pelo fluxo do documento.
   Evita que capas e textos se sobreponham com top/translate individuais. */
body.page-projetos .projects-grid {
    display: grid;
    width: 100%;
    align-items: start;
    justify-items: stretch;
    gap: var(--projects-row-gap) var(--projects-image-gap);
    margin: 0 auto;
}
body.page-projetos .projects-band-grid  { grid-template-columns: repeat(var(--projects-band-columns), minmax(0, 1fr)); }
body.page-projetos .projects-poster-grid { grid-template-columns: repeat(var(--projects-poster-columns), minmax(0, 1fr)); }
body.page-projetos .projects-other-grid  { grid-template-columns: repeat(var(--projects-other-columns), minmax(0, 1fr)); }

body.page-projetos .projects-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--projects-card-text-gap);
    text-align: center;
}
body.page-projetos .projects-image-link,
body.page-projetos .projects-poster-card {
    display: block;
    width: 100%;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
body.page-projetos .projects-image-link img,
body.page-projetos .projects-extra-image img,
body.page-projetos .projects-poster-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--projects-image-radius);
    image-rendering: auto;
    transition: opacity .17s ease;
}
body.page-projetos .projects-image-link img,
body.page-projetos .projects-extra-image img {
    aspect-ratio: 1 / 1;
    object-fit: var(--projects-band-fit);
}
body.page-projetos .projects-extra-image img { object-fit: var(--projects-other-fit); }
body.page-projetos .projects-poster-card img {
    aspect-ratio: 3 / 4;
    object-fit: var(--projects-poster-fit);
}
body.page-projetos .projects-poster-card span {
    display: block;
    margin-top: 9px;
    font-size: var(--projects-label-size);
}
body.page-projetos .projects-card h3 {
    margin: 1px 0 0;
    font-size: var(--projects-card-title-size);
    line-height: 1.3;
}
body.page-projetos .projects-card p { max-width: 32em; }
body.page-projetos .projects-text-link {
    display: inline-block;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: var(--projects-label-size);
}
body.page-projetos .projects-image-link:hover img,
body.page-projetos .projects-poster-card:hover img { opacity: .75; }
body.page-projetos .projects-image-link:focus-visible,
body.page-projetos .projects-poster-card:focus-visible,
body.page-projetos .projects-text-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
body.page-projetos .projects-final-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 680px;
    margin: 22px auto 0;
    text-align: center;
}

/* SOMENTE MOBILE: respeita o corredor central entre as faixas ASCII.
   A largura e o número de colunas podem ser mudados independentemente. */
html[data-imagas-layout="mobile"] body.page-projetos {
    --projects-content-width: 58vw;
    --projects-content-x: 0px;
    --projects-text-size: 11px;
    --projects-title-size: 21px;
    --projects-heading-size: 15px;
    --projects-card-title-size: 14px;
    --projects-label-size: 10px;
    --projects-section-gap: 32px;
    --projects-image-gap: 10px;
    --projects-row-gap: 16px;
    --projects-card-text-gap: 7px;
    --projects-band-columns: 1;
    --projects-poster-columns: 1;
    --projects-other-columns: 1;
    --projects-bottom-padding: 150px;
}
html[data-imagas-layout="mobile"] body.page-projetos .projects-main {
    padding: 18px 6px var(--projects-bottom-padding);
}
/* Anula a largura fixa !important da .subpage-stage no CSS geral.
   Sem isto, o conteúdo ficaria encostado à esquerda no corredor. */
html[data-imagas-layout="mobile"] body.page-projetos .projects-stage {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}
html[data-imagas-layout="mobile"] body.page-projetos .projects-page-content {
    width: min(var(--projects-content-width), calc(100vw - 12px));
}
html[data-imagas-layout="mobile"] body.page-projetos .projects-page-heading { gap: 6px; }
html[data-imagas-layout="mobile"] body.page-projetos .projects-section > h2 { margin-bottom: 13px; }
html[data-imagas-layout="mobile"] body.page-projetos .projects-section-intro { margin-bottom: 14px !important; }

@media (prefers-reduced-motion: reduce) {
    body.page-projetos .projects-image-link img,
    body.page-projetos .projects-poster-card img { transition: none; }
}


/* ===============================================================
   IMAGAS — 3 CAIXAS DE TEXTO ABAIXO DAS SEÇÕES (BANDAS, IMPULSOS,
   OUTROS PROJETOS). Altere estas variáveis para personalizar todas.
   As caixas seguem o fluxo normal, sem cobrir as imagens.
   =============================================================== */
body.page-projetos {
    --projects-textbox-width: 700px;        /* largura máxima das caixas */
    --projects-textbox-margin-top: 22px;    /* distância desde as imagens */
    --projects-textbox-padding-x: 20px;     /* espaço lateral interno */
    --projects-textbox-padding-y: 16px;     /* espaço vertical interno */
    --projects-textbox-font-size: 14px;     /* tamanho do texto */
    --projects-textbox-line-height: 1.65;   /* distância entre linhas */
    --projects-textbox-border-width: 1px;   /* 0px para tirar a borda */
    --projects-textbox-border-color: var(--projects-color);
    --projects-textbox-background: rgba(75, 93, 138, 0.05);
    --projects-textbox-radius: 0px;
}

body.page-projetos .projects-section-text-box,
body.page-projetos .projects-final-text.projects-section-text-box {
    display: block;
    box-sizing: border-box;
    width: min(100%, var(--projects-textbox-width));
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: var(--projects-textbox-margin-top) auto 0;
    padding: var(--projects-textbox-padding-y) var(--projects-textbox-padding-x);
    border: var(--projects-textbox-border-width) solid var(--projects-textbox-border-color);
    border-radius: var(--projects-textbox-radius);
    background: var(--projects-textbox-background);
    color: var(--projects-color);
    font-family: var(--projects-font);
    font-size: var(--projects-textbox-font-size);
    line-height: var(--projects-textbox-line-height);
    text-align: center;
    overflow-wrap: anywhere;
}

body.page-projetos .projects-section-text-box p + p { margin-top: 12px; }

/* INDEPENDENTE — MOBILE / CORREDOR CENTRAL */
html[data-imagas-layout="mobile"] body.page-projetos {
    --projects-textbox-width: 100%;
    --projects-textbox-margin-top: 13px;
    --projects-textbox-padding-x: 7px;
    --projects-textbox-padding-y: 10px;
    --projects-textbox-font-size: 11px;
    --projects-textbox-line-height: 1.5;
}
/* PROJETOS — DESCER O CABEÇALHO 5PX */

body.page-projetos .projects-page-content {
    position: relative;
    top: 115px;
}