/* preguntas-frecuentes.html: ilustrações autorais sem caixa de fundo (SVG transparente). */

.page-hero__art--free {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
}

.page-hero__art--free img {
    width: 100%;
    max-width: 40rem;
    max-height: none;
    height: auto;
}

.ill {
    margin: 0;
}

.ill img {
    display: block;
    width: 100%;
    height: auto;
}

/* Faixa larga entre a introdução e o conteúdo da secção. */
.ill--wide {
    max-width: 62rem;
    margin: 0 auto clamp(2rem, 4vw, 3.5rem);
}

/* Texto + figura lado a lado; o bloco extra fica sob o texto. */
.art-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: "copy art" "extra art";
    column-gap: clamp(2rem, 6vw, 5rem);
    row-gap: var(--space-8);
    align-items: start;
}

.art-split > .art-copy { grid-area: copy; }
.art-split > .art-extra { grid-area: extra; }
.art-split > .ill {
    grid-area: art;
    align-self: center;
    max-width: 34rem;
    justify-self: center;
}

.art-split--rev {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "art copy" "art extra";
}

@media (max-width: 768px) {
    .page-hero__art--free img {
        width: min(100%, 22rem);
        max-height: none;
    }

    .art-split,
    .art-split--rev {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "art" "copy" "extra";
    }

    .art-split > .ill {
        max-width: 20rem;
    }
}

.art-split > .page-section__intro { grid-area: copy; margin-bottom: 0; }
.art-split > .faq-items { grid-area: extra; }

/* FAQ nativo (L2, docs/design/FX.md): <details>/<summary>, sem JS; abre/fecha por grid-template-rows
   (exceção documentada). Sem ::details-content, @starting-style anima só a abertura. Busca na página abre o item. */
.faq-items--details .faq-question { list-style: none; }
.faq-items--details .faq-question::-webkit-details-marker { display: none; }
.faq-items--details .faq-question:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.faq-items--details details[open] > .faq-question .faq-icon { transform: rotate(180deg); }
.faq-items--details .faq-answer { display: block; }
.faq-panel { display: grid; grid-template-rows: 1fr; min-height: 0; overflow: hidden; }
.faq-panel > div { min-height: 0; overflow: hidden; }
@supports selector(::details-content) {
    .faq-items--details details::details-content {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .32s var(--ease-motion), content-visibility .32s allow-discrete;
    }
    .faq-items--details details[open]::details-content { grid-template-rows: 1fr; }
}
@supports not selector(::details-content) {
    .faq-items--details details[open] .faq-panel { transition: grid-template-rows .32s var(--ease-motion); }
    @starting-style { .faq-items--details details[open] .faq-panel { grid-template-rows: 0fr; } }
}
@media (prefers-reduced-motion: reduce) {
    .faq-items--details details::details-content,
    .faq-items--details details[open] .faq-panel { transition: none; }
}

/* A figura preenche a coluna da arte (antes encolhia ao tamanho intrínseco de 300px). */
.art-split > .ill {
    width: 100%;
}

/* Hero FAQ: canvas FULL-BLEED atras do texto, so mascara LINEAR (docs/design/PADRAO-HERO-3D.md).
   Sem WebGL/JS/reduced-motion: fica o SVG estatico com a mesma composicao. */
.page-hero--faq {
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: min(52rem, calc(100svh - var(--nav-height, 4.5rem)));
}
.page-hero--faq .page-hero__grid { grid-template-columns: minmax(0, 1fr); width: 100%; }
.page-hero--faq .page-hero__copy { max-width: 34rem; }
[data-faq-hero] {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: auto;
    margin: 0;
    pointer-events: none;
}
.page-hero__art--free[data-faq-hero] img { position: absolute; inset: 0; display: block; width: 100%; max-width: none; height: 100%; max-height: none; object-fit: cover; object-position: center; transform: none; transition: opacity .55s ease; }
.faq-hero-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .55s cubic-bezier(.22, 1, .36, 1);
    -webkit-mask-image:
        linear-gradient(90deg, rgb(0 0 0 / .1) 0%, rgb(0 0 0 / .2) 22%, rgb(0 0 0 / .62) 42%, #000 60%),
        linear-gradient(180deg, #000 0, #000 calc(100% - 150px), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, rgb(0 0 0 / .1) 0%, rgb(0 0 0 / .2) 22%, rgb(0 0 0 / .62) 42%, #000 60%),
        linear-gradient(180deg, #000 0, #000 calc(100% - 150px), transparent 100%);
    mask-composite: intersect;
}
.faq-webgl-ready .faq-hero-canvas { opacity: 1; }
.faq-webgl-ready img { opacity: 0; }
@media (max-width: 768px) {
    [data-faq-hero] { z-index: 0; }
    .faq-hero-canvas { z-index: 1; }
    .page-hero--faq .page-hero__copy { position: relative; z-index: 2; }
    .page-hero--faq .page-hero__copy::before {
        content: ''; position: absolute; inset: -1rem -1rem; z-index: -1; pointer-events: none;
        background: linear-gradient(180deg, transparent 0%, transparent 38%, rgb(16 13 9 / .55) 62%, var(--night) 100%);
    }
    .faq-hero-canvas {
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
        -webkit-mask-composite: source-over;
        mask-composite: add;
    }
    .page-hero__art--free[data-faq-hero] img { object-position: center; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .faq-webgl-ready img { opacity: 1; }
    .faq-hero-canvas { display: none; }
}