/*
 * PTIn environments / Spotlight Bento — phases 1–7
 * Owns only the dynamic environment mosaic; generic galleries stay in the
 * component design system.
 */
@layer site-overrides {
    .site-mosaic.site-mosaic--spotlight {
        --site-spotlight-card: #092632;
        --site-spotlight-border: rgb(255 255 255 / .14);
        --site-spotlight-shadow: 0 1.1rem 2.8rem rgb(0 0 0 / .24);
        container-type: inline-size;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
        grid-auto-rows: clamp(13rem, 68vw, 18rem);
        width: 100%;
        min-height: 0;
        gap: clamp(.55rem, 1.2vw, .85rem);
    }

    .site-mosaic--spotlight .site-mosaic__item:nth-child(n) {
        position: relative;
        display: block;
        grid-column: auto;
        grid-row: auto;
        order: initial;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        border: 1px solid var(--site-spotlight-border);
        border-radius: clamp(.75rem, 1.2vw, 1.15rem);
        background: var(--site-spotlight-card);
        box-shadow: 0 .35rem 1.1rem rgb(0 0 0 / .14);
        color: #fff;
        text-decoration: none;
        transform: none;
        isolation: isolate;
        will-change: transform;
    }

    .site-mosaic--spotlight .site-mosaic__item::after {
        position: absolute;
        z-index: 1;
        inset: 0;
        background: linear-gradient(180deg, transparent 14%, rgb(1 15 23 / .12) 42%, rgb(1 15 23 / .92) 100%);
        content: "";
        opacity: 1;
        transition: opacity 300ms ease;
    }

    .site-mosaic--spotlight .site-mosaic__item > :where(img, picture, video),
    .site-mosaic--spotlight .site-mosaic__item picture > img {
        position: absolute;
        z-index: 0;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        scale: 1.01;
        transition: scale 520ms cubic-bezier(.2, .8, .2, 1), filter 300ms ease;
    }

    .site-mosaic--spotlight .site-mosaic__caption {
        position: absolute;
        z-index: 2;
        inset: auto clamp(.9rem, 2.2vw, 1.45rem) clamp(.9rem, 2.2vw, 1.4rem);
        display: grid;
        gap: .35rem;
        color: #fff;
        opacity: 1;
        text-shadow: 0 2px 12px rgb(0 0 0 / .55);
        transform: none;
        transition: transform 320ms cubic-bezier(.2, .8, .2, 1);
    }

    .site-mosaic--spotlight .site-mosaic__caption strong {
        color: #fff;
        font-size: clamp(1.05rem, 2vw, 1.55rem);
        font-weight: 720;
        letter-spacing: -.02em;
        line-height: 1.12;
    }

    .site-mosaic--spotlight .site-mosaic__caption span {
        display: -webkit-box;
        overflow: hidden;
        max-height: 0;
        color: rgb(255 255 255 / .88);
        font-size: clamp(.76rem, 1.05vw, .88rem);
        line-height: 1.4;
        opacity: 0;
        visibility: hidden;
        transform: translateY(.55rem);
        transition:
            max-height 360ms cubic-bezier(.2, .8, .2, 1),
            opacity 220ms ease,
            transform 320ms cubic-bezier(.2, .8, .2, 1),
            visibility 0s linear 360ms;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
    }

    .site-mosaic--spotlight .site-mosaic__item:is(:hover, :focus-visible, .is-spotlight-active) .site-mosaic__caption span {
        max-height: 5.2rem;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }

    .site-mosaic--spotlight .site-mosaic__item:hover,
    .site-mosaic--spotlight .site-mosaic__item:focus-visible,
    .site-mosaic--spotlight .site-mosaic__item.is-spotlight-active {
        z-index: 2;
        box-shadow: var(--site-spotlight-shadow);
        transform: none;
    }

    .site-mosaic--spotlight .site-mosaic__item:focus-visible {
        box-shadow: var(--site-focus-ring), var(--site-spotlight-shadow);
    }

    .site-section--dark:has(.site-mosaic--spotlight) {
        color: var(--section-foreground, var(--site-ink));
    }

    .site-section--dark:has(.site-mosaic--spotlight) .site-section__heading h2,
    .site-section--brand:has(.site-mosaic--spotlight) .site-section__heading h2 {
        color: var(--section-foreground, var(--site-ink-strong));
    }

    .site-section--dark:has(.site-mosaic--spotlight) .site-section__heading > p,
    .site-section--brand:has(.site-mosaic--spotlight) .site-section__heading > p {
        color: color-mix(in srgb, var(--section-foreground, var(--site-ink)) 72%, transparent);
    }

    html[data-site-theme="dark"] .site-section--dark:has(.site-mosaic--spotlight) {
        background:
            radial-gradient(circle at 88% 8%, rgb(0 166 118 / .14), transparent 28rem),
            var(--site-canvas);
        color: var(--site-ink);
    }

    html[data-site-theme="dark"] .site-section--dark:has(.site-mosaic--spotlight) .site-section__heading h2 {
        color: var(--site-ink-strong);
    }

    html[data-site-theme="dark"] .site-section--dark:has(.site-mosaic--spotlight) .site-section__heading > p {
        color: var(--site-ink-muted);
    }

    @media (min-width: 26.875rem) and (max-width: 61.99rem) {
        .site-mosaic.site-mosaic--spotlight {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-auto-rows: clamp(12rem, 38vw, 15rem);
        }

        .site-mosaic--spotlight .site-mosaic__item:nth-child(n) {
            grid-column: auto;
        }
    }

    @media (min-width: 62rem) {
        .site-mosaic.site-mosaic--spotlight {
            grid-template-columns: repeat(6, minmax(0, 1fr));
            grid-auto-rows: clamp(14rem, 18vw, 17.5rem);
        }

        .site-mosaic--spotlight .site-mosaic__item:nth-child(4n + 1),
        .site-mosaic--spotlight .site-mosaic__item:nth-child(4n + 4) {
            grid-column: span 2;
        }

        .site-mosaic--spotlight .site-mosaic__item:nth-child(4n + 2),
        .site-mosaic--spotlight .site-mosaic__item:nth-child(4n + 3) {
            grid-column: span 4;
        }

        .site-mosaic--spotlight.is-spotlight-active .site-mosaic__item:nth-child(n) {
            grid-column: span var(--site-spotlight-span, 2);
        }

        .site-mosaic--spotlight.is-spotlight-active .site-mosaic__item.is-spotlight-active {
            grid-column: 1 / -1;
        }
    }

    @media (min-width: 62rem) and (hover: hover) and (pointer: fine) {
        .site-js .site-mosaic--spotlight[data-site-spotlight-ready="true"] .site-mosaic__item:hover > :where(img, picture, video),
        .site-js .site-mosaic--spotlight[data-site-spotlight-ready="true"] .site-mosaic__item:focus-visible > :where(img, picture, video),
        .site-js .site-mosaic--spotlight[data-site-spotlight-ready="true"] .site-mosaic__item.is-spotlight-active > :where(img, picture, video) {
            scale: 1.035;
        }

        .site-js .site-mosaic--spotlight[data-site-spotlight-ready="true"].is-spotlight-active
            .site-mosaic__item:not(.is-spotlight-active) {
            box-shadow: 0 .25rem .8rem rgb(0 0 0 / .12);
        }
    }

    @media (max-width: 61.99rem), (hover: none), (pointer: coarse) {
        .site-mosaic--spotlight .site-mosaic__item:nth-child(n),
        .site-mosaic--spotlight .site-mosaic__item:hover,
        .site-mosaic--spotlight .site-mosaic__item:focus-visible {
            transform: none;
        }

        .site-mosaic--spotlight .site-mosaic__caption {
            opacity: 1;
            visibility: visible;
        }

        .site-mosaic--spotlight .site-mosaic__caption span {
            display: none;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .site-mosaic--spotlight .site-mosaic__item,
        .site-mosaic--spotlight .site-mosaic__item::after,
        .site-mosaic--spotlight .site-mosaic__item > :where(img, picture, video) {
            transition-duration: .01ms;
        }
    }

    html.site-a11y-reduce-motion .site-mosaic--spotlight .site-mosaic__item,
    html.site-a11y-reduce-motion .site-mosaic--spotlight .site-mosaic__item::after,
    html.site-a11y-reduce-motion .site-mosaic--spotlight .site-mosaic__item > :where(img, picture, video) {
        transition-duration: .01ms;
    }

    @media (forced-colors: active) {
        .site-mosaic--spotlight .site-mosaic__item {
            border: 2px solid CanvasText;
        }

        .site-mosaic--spotlight .site-mosaic__item::after {
            background: Canvas;
            opacity: .72;
        }

        .site-mosaic--spotlight .site-mosaic__caption,
        .site-mosaic--spotlight .site-mosaic__caption :is(strong, span) {
            color: CanvasText;
            opacity: 1;
        }
    }

    @media print {
        .site-mosaic.site-mosaic--spotlight {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-auto-rows: 12rem;
        }

        .site-mosaic--spotlight .site-mosaic__item:nth-child(n) {
            grid-column: auto;
        }
    }

    /* Catálogo completo: mosaico editorial estático e independente do bento da home. */
    .site-environment-catalog {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-flow: row dense;
        grid-auto-rows: clamp(16rem, 20vw, 18rem);
        width: 100%;
        gap: clamp(.55rem, 1vw, .8rem);
    }

    .site-section:has(.site-environment-catalog) {
        background:
            radial-gradient(circle at 8% 10%, rgb(var(--site-rgb-primary) / .1), transparent 28rem),
            linear-gradient(150deg, var(--site-surface-2), var(--site-canvas));
        color: var(--site-ink);
    }

    .site-section:has(.site-environment-catalog) .site-section__heading :where(h2, h3),
    .site-body .site-section--dark:has(.site-environment-catalog) .site-section__heading :where(h2, h3) {
        color: var(--site-ink-strong);
    }

    .site-section:has(.site-environment-catalog) .site-section__heading > p,
    .site-body .site-section--dark:has(.site-environment-catalog) .site-section__heading > p {
        color: var(--site-ink-muted);
    }

    html[data-site-theme="dark"] .site-section:has(.site-environment-catalog) {
        background:
            radial-gradient(circle at 88% 8%, rgb(0 166 118 / .14), transparent 28rem),
            var(--site-canvas);
    }

    .site-environment-tile {
        --site-environment-peek: 5.6rem;
        position: relative;
        display: block;
        grid-column: span 6;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--site-primary) 18%, var(--site-line));
        border-radius: clamp(.8rem, 1.3vw, 1.15rem);
        background: #082938;
        box-shadow: 0 .5rem 1.4rem rgb(5 38 54 / .13);
        color: #fff;
        text-decoration: none;
        isolation: isolate;
        transition: border-color 220ms ease, box-shadow 280ms ease;
    }

    .site-environment-tile:nth-child(4n + 1),
    .site-environment-tile:nth-child(4n + 4) {
        grid-column: span 7;
    }

    .site-environment-tile:nth-child(4n + 2),
    .site-environment-tile:nth-child(4n + 3) {
        grid-column: span 5;
    }

    .site-environment-tile:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .site-environment-tile__media,
    .site-environment-tile__media::after,
    .site-environment-tile__media > img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
    }

    .site-environment-tile__media::after {
        background: linear-gradient(180deg, transparent 42%, rgb(2 21 32 / .78) 100%);
        content: "";
        transition: background 320ms ease;
    }

    .site-environment-tile__media > img {
        object-fit: cover;
        object-position: center;
        scale: 1.005;
        transition: filter 360ms ease, scale 620ms cubic-bezier(.2, .8, .2, 1);
    }

    .site-environment-tile__placeholder {
        position: absolute;
        inset: 0;
        display: grid;
        padding: 2rem;
        place-items: center;
        background:
            linear-gradient(145deg, rgb(var(--site-rgb-primary) / .72), rgb(4 39 55 / .96)),
            var(--site-secondary);
        color: rgb(255 255 255 / .34);
        font-family: var(--site-font-display);
        font-size: clamp(1.8rem, 4vw, 4rem);
        font-weight: 800;
        line-height: 1;
        text-align: center;
    }

    .site-environment-tile__details {
        position: absolute;
        z-index: 2;
        inset: auto 0 0;
        display: flex;
        min-height: min(78%, 16rem);
        padding: clamp(.82rem, 1.5vw, 1.15rem) clamp(1rem, 1.8vw, 1.3rem);
        border-top: 1px solid rgb(255 255 255 / .18);
        flex-direction: column;
        gap: .42rem;
        background:
            linear-gradient(145deg, rgb(5 43 59 / .96), rgb(3 29 42 / .99));
        color: #fff;
        box-shadow: 0 -1.25rem 3rem rgb(0 12 20 / .22);
        transform: translateY(calc(100% - var(--site-environment-peek)));
        transition: transform 440ms cubic-bezier(.2, .8, .2, 1);
    }

    .site-environment-tile__details small {
        color: #6fe1f1;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .12em;
        line-height: 1.3;
        text-transform: uppercase;
    }

    .site-environment-tile__details > strong {
        display: -webkit-box;
        overflow: hidden;
        color: #fff;
        font-family: var(--site-font-display);
        font-size: clamp(1.15rem, 2vw, 1.65rem);
        font-weight: 750;
        letter-spacing: -.025em;
        line-height: 1.08;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .site-environment-tile__description {
        display: -webkit-box;
        overflow: hidden;
        margin-top: .25rem;
        color: rgb(255 255 255 / .8);
        font-size: clamp(.8rem, 1.05vw, .92rem);
        line-height: 1.5;
        opacity: 0;
        visibility: hidden;
        translate: 0 .4rem;
        transition:
            opacity 180ms ease,
            translate 280ms cubic-bezier(.2, .8, .2, 1),
            visibility 0s linear 280ms;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .site-environment-tile__link {
        display: inline-flex;
        width: fit-content;
        margin-top: auto;
        align-items: center;
        gap: .5rem;
        color: #fff;
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .02em;
        opacity: 0;
        visibility: hidden;
        translate: 0 .4rem;
        transition:
            opacity 180ms ease,
            translate 280ms cubic-bezier(.2, .8, .2, 1),
            visibility 0s linear 280ms;
    }

    .site-environment-tile__link > span {
        color: #6fe1f1;
        font-size: 1rem;
        transition: translate 180ms ease;
    }

    .site-environment-tile:is(:hover, :focus-visible) {
        border-color: rgb(111 225 241 / .7);
        box-shadow: 0 1.25rem 3.2rem rgb(4 35 50 / .24);
    }

    .site-environment-tile:is(:hover, :focus-visible) .site-environment-tile__media > img {
        filter: saturate(1.06) brightness(.76);
        scale: 1.045;
    }

    .site-environment-tile:is(:hover, :focus-visible) .site-environment-tile__media::after {
        background: linear-gradient(180deg, rgb(2 21 32 / .08), rgb(2 21 32 / .48));
    }

    .site-environment-tile:is(:hover, :focus-visible) .site-environment-tile__details {
        transform: translateY(0);
    }

    .site-environment-tile:is(:hover, :focus-visible) :is(.site-environment-tile__description, .site-environment-tile__link) {
        opacity: 1;
        visibility: visible;
        translate: 0;
        transition-delay: 80ms, 80ms, 0s;
    }

    .site-environment-tile:is(:hover, :focus-visible) .site-environment-tile__link > span {
        translate: .2rem 0;
    }

    .site-environment-tile:focus-visible {
        outline: 3px solid var(--site-accent);
        outline-offset: 3px;
    }

    /* Galeria interna: uma composição fechada, sem peças estreitas ou espaços soltos. */
    .site-environment-gallery-section .site-section-heading {
        margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
        align-items: end;
    }

    .site-environment-gallery-section .site-section-heading > p {
        max-width: 29rem;
    }

    .site-environment-gallery {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-flow: row dense;
        grid-auto-rows: clamp(11.5rem, 15vw, 14rem);
        width: 100%;
        gap: clamp(.5rem, .9vw, .75rem);
    }

    .site-environment-gallery__item {
        position: relative;
        display: block;
        grid-column: span 4;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        padding: 0;
        border: 0;
        border-radius: clamp(.7rem, 1.1vw, 1rem);
        background: #092632;
        box-shadow: 0 .45rem 1.3rem rgb(4 35 50 / .13);
        color: #fff;
        cursor: zoom-in;
        isolation: isolate;
    }

    .site-environment-gallery__item:first-child {
        grid-column: span 8;
        grid-row: span 2;
    }

    .site-environment-gallery--count-1 > .site-environment-gallery__item,
    .site-environment-gallery--remainder-1 > .site-environment-gallery__item:last-child {
        grid-column: 1 / -1;
    }

    .site-environment-gallery--count-1 > .site-environment-gallery__item {
        grid-row: span 2;
    }

    .site-environment-gallery--count-2 > .site-environment-gallery__item,
    .site-environment-gallery--remainder-2 > .site-environment-gallery__item:nth-last-child(-n + 2) {
        grid-column: span 6;
    }

    .site-environment-gallery--count-2 > .site-environment-gallery__item {
        grid-row: span 2;
    }

    .site-environment-gallery__item::after {
        position: absolute;
        z-index: 1;
        inset: 0;
        background: linear-gradient(180deg, transparent 58%, rgb(2 19 29 / .7));
        content: "";
        opacity: .5;
        transition: opacity 220ms ease;
    }

    .site-environment-gallery__item > img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        scale: 1.005;
        transition: filter 260ms ease, scale 500ms cubic-bezier(.2, .8, .2, 1);
    }

    .site-environment-gallery__zoom {
        position: absolute;
        z-index: 2;
        right: .75rem;
        bottom: .75rem;
        display: inline-flex;
        padding: .45rem .65rem;
        border: 1px solid rgb(255 255 255 / .24);
        border-radius: 999px;
        align-items: center;
        gap: .4rem;
        background: rgb(3 27 40 / .8);
        color: #fff;
        font-size: .7rem;
        font-weight: 750;
        opacity: 0;
        translate: 0 .35rem;
        backdrop-filter: blur(.5rem);
        transition: opacity 180ms ease, translate 220ms ease;
    }

    .site-environment-gallery__item:is(:hover, :focus-visible)::after {
        opacity: 1;
    }

    .site-environment-gallery__item:is(:hover, :focus-visible) > img {
        filter: saturate(1.06) contrast(1.02);
        scale: 1.035;
    }

    .site-environment-gallery__item:is(:hover, :focus-visible) .site-environment-gallery__zoom {
        opacity: 1;
        translate: 0;
    }

    .site-environment-gallery__item:focus-visible {
        outline: 3px solid var(--site-accent);
        outline-offset: 3px;
    }

    @media (max-width: 61.99rem) {
        .site-environment-catalog {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-auto-rows: clamp(15rem, 34vw, 17rem);
        }

        .site-environment-tile:nth-child(n) {
            grid-column: auto;
        }

        .site-environment-tile:last-child:nth-child(odd) {
            grid-column: 1 / -1;
        }

        .site-environment-gallery {
            grid-auto-rows: clamp(10rem, 22vw, 13rem);
        }
    }

    @media (max-width: 43.74rem) {
        .site-environment-catalog {
            grid-template-columns: 1fr;
            grid-auto-rows: clamp(15rem, 64vw, 18rem);
        }

        .site-environment-tile:nth-child(n),
        .site-environment-tile:last-child:nth-child(odd) {
            --site-environment-peek: 6.1rem;
            grid-column: auto;
        }

        .site-environment-gallery {
            grid-template-columns: 1fr;
            grid-auto-rows: clamp(14rem, 66vw, 19rem);
        }

        .site-environment-gallery .site-environment-gallery__item:nth-child(n) {
            grid-column: auto;
            grid-row: auto;
        }

        .site-environment-gallery-section .site-section-heading {
            align-items: start;
        }
    }

    @media (hover: none), (pointer: coarse) {
        .site-environment-tile__details {
            min-height: min(78%, 16rem);
            transform: translateY(calc(100% - var(--site-environment-peek)));
        }

        .site-environment-tile__description {
            -webkit-line-clamp: 2;
        }

        .site-environment-gallery__zoom {
            opacity: 1;
            translate: 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .site-environment-tile,
        .site-environment-tile *,
        .site-environment-gallery__item,
        .site-environment-gallery__item * {
            transition-duration: .01ms !important;
        }
    }

    html.site-a11y-reduce-motion .site-environment-tile,
    html.site-a11y-reduce-motion .site-environment-tile *,
    html.site-a11y-reduce-motion .site-environment-gallery__item,
    html.site-a11y-reduce-motion .site-environment-gallery__item * {
        transition-duration: .01ms !important;
    }
}