/*
 * Romex — responsive governance layer
 *
 * Governs only the OUTER geometry of institutional heroes.
 * Page-specific visual stages/cards keep their own internal sizing and
 * positioning contracts. This prevents absolute children from collapsing
 * while still removing viewport-height coupling and rigid columns.
 */

/* ----------------------------------------------------------
   Shared tablet contract
   ---------------------------------------------------------- */
@media (min-width:621px) and (max-width:1120px) {
    .rmx-viewport-hero {
        --rmx-hero-inline: clamp(28px, 4.8vw, 58px);
        --rmx-hero-block: clamp(46px, 5.5vw, 68px);
        --rmx-hero-gap: clamp(30px, 4vw, 52px);

        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding-top: var(--rmx-hero-block) !important;
        padding-bottom: var(--rmx-hero-block) !important;
        box-sizing: border-box !important;
    }

    .rmx-viewport-hero > .rmx-shell {
        width: min(var(--rmx-shell), calc(100% - (var(--rmx-hero-inline) * 2))) !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        box-sizing: border-box !important;
    }

    /*
     * Only the grid itself is governed here. We deliberately do NOT reset
     * position/height/inset on its children: several Romex heroes contain
     * absolute visual layers that depend on a stage min-height.
     */
    .rmx-viewport-hero > .rmx-shell[class*="-hero-grid"] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: var(--rmx-hero-gap) !important;
        align-items: center !important;
    }

    .rmx-viewport-hero > .rmx-shell[class*="-hero-grid"] > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .rmx-viewport-hero :where(
        [class*="-hero-copy"],
        [class*="-hero-content"],
        [class*="-hero-text"]
    ) {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* Narrow portrait tablets: stack naturally. Visual stages preserve their
   intrinsic/page-specific min-height, so assets and overlay cards remain. */
@media (min-width:621px) and (max-width:900px) and (orientation:portrait) {
    .rmx-viewport-hero {
        --rmx-hero-inline: clamp(22px, 4.5vw, 38px);
        --rmx-hero-block: clamp(42px, 6vw, 60px);
        --rmx-hero-gap: clamp(30px, 5vw, 44px);
    }

    .rmx-viewport-hero > .rmx-shell[class*="-hero-grid"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .rmx-viewport-hero > .rmx-shell[class*="-hero-grid"] > * {
        width: min(100%, 680px) !important;
        margin-inline: auto !important;
    }
}

/* Large portrait tablets / small notebooks:
   keep two columns, but scale the available column space continuously. */
@media (min-width:901px) and (max-width:1120px) and (orientation:portrait) {
    .rmx-viewport-hero {
        --rmx-hero-inline: clamp(28px, 4vw, 48px);
        --rmx-hero-block: clamp(44px, 5vw, 64px);
        --rmx-hero-gap: clamp(26px, 3.4vw, 44px);
    }

    .rmx-viewport-hero > .rmx-shell[class*="-hero-grid"] {
        grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr) !important;
    }
}

/* ----------------------------------------------------------
   Shared mobile contract
   ---------------------------------------------------------- */
@media (max-width:620px) {
    .rmx-viewport-hero {
        --rmx-hero-inline: 18px;
        --rmx-hero-block: clamp(38px, 11vw, 54px);
        --rmx-hero-gap: 28px;

        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding-top: var(--rmx-hero-block) !important;
        padding-bottom: var(--rmx-hero-block) !important;
        box-sizing: border-box !important;
    }

    .rmx-viewport-hero > .rmx-shell {
        width: calc(100% - (var(--rmx-hero-inline) * 2)) !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        box-sizing: border-box !important;
    }

    .rmx-viewport-hero > .rmx-shell[class*="-hero-grid"] {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--rmx-hero-gap) !important;
        align-items: start !important;
    }

    .rmx-viewport-hero > .rmx-shell[class*="-hero-grid"] > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ----------------------------------------------------------
   HOME — legacy hero adapter
   The Home predates the institutional hero grid and uses a background-art
   composition. It gets a separate fluid contract rather than inheriting
   the generic .rmx-viewport-hero rules.
   ---------------------------------------------------------- */
@media (min-width:901px) and (max-width:1120px) and (orientation:portrait) {
    .rmx-home .rmx-hero-stage {
        min-height: auto !important;
        display: block !important;
    }

    .rmx-home .rmx-hero {
        min-height: clamp(620px, 72vw, 740px) !important;
        height: auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background-size: cover !important;
        background-position: 61% center !important;
        overflow: hidden !important;
    }

    .rmx-home .rmx-hero .rmx-shell {
        width: min(100% - clamp(48px, 6vw, 72px), 980px) !important;
        min-height: 0 !important;
        margin-inline: auto !important;
        padding: clamp(64px, 7vw, 82px) 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .rmx-home .rmx-hero-copy {
        width: clamp(340px, 42%, 430px) !important;
        max-width: 430px !important;
        min-width: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .rmx-home .rmx-hero .rmx-title {
        font-size: clamp(44px, 5vw, 54px) !important;
        line-height: .99 !important;
    }

    .rmx-home .rmx-hero .rmx-copy {
        max-width: 410px !important;
        font-size: clamp(15px, 1.6vw, 17px) !important;
        line-height: 1.5 !important;
    }

    .rmx-home .rmx-hero .rmx-btns {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
}

/* Home at intermediate landscape widths: use the dedicated landscape art
   but size the section by aspect, not by an arbitrary viewport height. */
@media (min-width:901px) and (max-width:1120px) and (orientation:landscape) {
    .rmx-home .rmx-hero-stage {
        min-height: auto !important;
        display: block !important;
    }

    .rmx-home .rmx-hero {
        min-height: clamp(520px, 58vw, 610px) !important;
        height: auto !important;
    }

    .rmx-home .rmx-hero-copy {
        width: min(46%, 460px) !important;
        max-width: 460px !important;
        padding: clamp(150px, 18vw, 210px) 0 48px !important;
    }
}


/* ----------------------------------------------------------
   HOME — large portrait tablets / small notebooks
   Normalize the legacy coordinate-based hero into document flow.
   This intentionally affects only 901–1120px portrait; the already
   homologated 768px tablet and mobile layouts remain untouched.
   ---------------------------------------------------------- */
@media (min-width:901px) and (max-width:1120px) and (orientation:portrait) {
    .rmx-home .rmx-hero {
        min-height: clamp(660px, 72vw, 760px) !important;
        height: auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: stretch !important;
        background-size: cover !important;
        background-position: 61% center !important;
    }

    .rmx-home .rmx-hero .rmx-shell {
        position: relative !important;
        inset: auto !important;
        width: min(100% - clamp(56px, 6vw, 72px), 980px) !important;
        height: auto !important;
        min-height: clamp(660px, 72vw, 760px) !important;
        margin-inline: auto !important;
        padding: clamp(82px, 9vw, 104px) 0 clamp(68px, 7vw, 86px) !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .rmx-home .rmx-hero .rmx-hero-copy {
        position: relative !important;
        inset: auto !important;
        width: clamp(360px, 43%, 440px) !important;
        max-width: 440px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 0 !important;
    }

    .rmx-home .rmx-hero .rmx-eyebrow {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 0 15px !important;
        font-size: clamp(12px, 1.25vw, 14px) !important;
        line-height: 1.25 !important;
        letter-spacing: .14em !important;
        white-space: normal !important;
    }

    .rmx-home .rmx-hero .rmx-title {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 440px !important;
        margin: 0 !important;
        font-size: clamp(46px, 4.9vw, 54px) !important;
        line-height: .98 !important;
        letter-spacing: -.045em !important;
    }

    .rmx-home .rmx-hero .rmx-copy {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 400px !important;
        margin: 24px 0 0 !important;
        font-size: clamp(15px, 1.55vw, 17px) !important;
        line-height: 1.55 !important;
    }

    .rmx-home .rmx-hero .rmx-btns {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 28px 0 0 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 12px !important;
        transform: none !important;
    }

    .rmx-home .rmx-hero .rmx-btns > *,
    .rmx-home .rmx-hero .rmx-btn,
    .rmx-home .rmx-hero .rmx-btn:link,
    .rmx-home .rmx-hero .rmx-btn:visited {
        width: auto !important;
        min-width: 0 !important;
        min-height: 46px !important;
        height: auto !important;
        padding: 12px 18px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        border-radius: 9px !important;
        white-space: nowrap !important;
    }
}


/* ----------------------------------------------------------
   MOBILE — normalize top rhythm for the three legacy tall heroes
   Solutions, E-commerce and Sobre were still accumulating the shared
   viewport padding with page-specific inner padding. On real phones this
   pushed the editorial block too far below the header.
   Keep the page-specific compositions; remove only the duplicated outer
   spacing and establish one fluid top rhythm comparable to the Home.
   ---------------------------------------------------------- */
@media (max-width:620px) and (orientation:portrait) {
    .rmx-sol-hero.rmx-viewport-hero,
    .rmx-ecom-hero.rmx-viewport-hero,
    .rmx-about-hero.rmx-viewport-hero {
        --rmx-hero-block: 0px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .rmx-sol-hero.rmx-viewport-hero > .rmx-sol-hero-grid,
    .rmx-ecom-hero.rmx-viewport-hero > .rmx-ecom-hero-grid,
    .rmx-about-hero.rmx-viewport-hero > .rmx-about-hero-grid {
        padding-top: clamp(28px, 7.5vw, 36px) !important;
    }

    .rmx-sol-hero.rmx-viewport-hero > .rmx-sol-hero-grid {
        padding-bottom: clamp(44px, 10vw, 58px) !important;
        align-content: start !important;
    }

    .rmx-ecom-hero.rmx-viewport-hero > .rmx-ecom-hero-grid {
        padding-bottom: clamp(28px, 7vw, 38px) !important;
        align-content: start !important;
    }

    .rmx-about-hero.rmx-viewport-hero > .rmx-about-hero-grid {
        padding-bottom: 16px !important;
    }
}