/* About hero: clean layout aligned with the 1465px header/footer container.
   Loaded after main.css / about.css / about-mobile.css. Animations (wow, masks) are untouched. */

/* ---------- Desktop (1024px and up) ---------- */
@media (min-width: 1024px) {
    #about #header-about {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        height: auto !important;
        min-height: 100vh;
        padding: 150px 0 110px;
        overflow: visible;
    }

    #about #header-about .container {
        box-sizing: border-box;
        width: calc(100% - 120px);
        max-width: 1465px;
        height: auto;
        margin: 0 auto;
        padding: 0;
    }

    #about #header-about .table {
        display: block;
        width: 100%;
        height: auto;
    }

    #about #header-about .table__vAlign {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        column-gap: 6%;
        align-items: end;
        height: auto;
        margin: 0;
    }

    #about #header-about .title-destaque {
        width: auto;
        float: none;
        margin: 0;
    }

    #about #header-about .corpo-texto {
        position: relative;
        width: auto;
        max-width: 470px;
        float: none;
        justify-self: end;
        margin: 0;
    }

    /* Decorative shapes: fixed spots that never cover the text or the logo. */
    #about #header-about .table__vAlign > .elem,
    #about #header-about .corpo-texto > .elem {
        margin: 0 !important;
        right: auto;
        bottom: auto;
    }

    /* purple bar, top-left above the title */
    #about #header-about .elem.--retangulo-cinza.--um {
        top: -95px !important;
        left: 0 !important;
    }

    /* big teal triangle, resting on the purple bar */
    #about #header-about .table__vAlign > .elem.--triangulo-branco {
        top: -83px !important;
        left: 112px !important;
    }

    /* small dot + teal block, top of the right column */
    #about #header-about .elem.--dot-branco.--um {
        top: -95px !important;
        left: auto !important;
        right: 112px !important;
    }

    #about #header-about .elem.--retangulo-cinza.--tres {
        top: -80px !important;
        left: auto !important;
        right: 0 !important;
    }

    /* small play triangle, just above the paragraph */
    #about #header-about .corpo-texto > .elem.--triangulo-branco.--small {
        top: -58px !important;
        left: 0 !important;
    }
}

/* ---------- Tablet (768px – 1023px): stacked, like mobile ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
    #about #header-about {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        height: auto !important;
        min-height: 100vh;
        margin-bottom: 0 !important;
        padding: 150px 0 90px;
    }

    #about #header-about .container {
        box-sizing: border-box;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0 40px;
    }

    #about #header-about .table,
    #about #header-about .table__vAlign {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
    }

    #about #header-about .title-destaque {
        width: 100%;
        float: none;
        margin: 0 0 40px;
    }

    #about #header-about .corpo-texto {
        width: 100%;
        max-width: 560px;
        float: none;
        margin: 0;
    }

    #about #header-about .table__vAlign > .elem,
    #about #header-about .corpo-texto > .elem {
        display: none !important;
    }
}

/* main.css sets html,body{height:100%;overflow-x:hidden}, which makes <body> the scroll
   container. Let the window scroll instead: about's scroll animations (main.js) listen on
   window, and the fixed background video no longer shows through beside body's scrollbar. */
html {
    height: auto !important;
    overflow: visible !important;
}

body {
    height: auto !important;
    overflow-x: hidden !important;
}

/* Background Vimeo videos are decorative: don't let the iframe swallow the mouse wheel. */
#video-full iframe,
#what-we-do .reel iframe {
    pointer-events: none;
}