/* Fotografski uvodnici: jedna precizna linija spaja čist prostor i uređenu površinu. */
.hero--immersive,
.page-hero--photographic {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: var(--deep);
}

.hero-media,
.hero-media > img {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-media > img {
    object-fit: cover;
}

/* Početna */
.hero--immersive {
    display: grid;
    grid-template-rows: minmax(620px, 1fr) auto;
    min-height: min(820px, calc(100svh - 42px));
    padding: 0;
    border-bottom: 1px solid var(--line);
    background-image: none;
}

.hero-scene,
.hero__shade,
.hero__geometry {
    position: absolute;
    inset: 0;
}

.hero-scene {
    z-index: -1;
    background: #10110f;
}

.home-hero__media {
    position: absolute;
    inset: 0;
}

.home-hero__media--interior > img {
    object-position: 58% center;
}

.home-hero__media--paving {
    left: 61%;
    width: 39%;
    clip-path: polygon(29% 0, 100% 0, 100% 100%, 0 100%, 17% 52%);
}

.home-hero__media--paving > img {
    object-position: center 57%;
}

.hero__shade {
    z-index: 1;
    background:
        linear-gradient(90deg, #10110f 0%, rgba(16, 17, 15, .96) 18%, rgba(16, 17, 15, .79) 44%, rgba(16, 17, 15, .18) 64%, rgba(16, 17, 15, 0) 82%),
        linear-gradient(0deg, rgba(16, 17, 15, .76) 0%, rgba(16, 17, 15, 0) 39%);
    pointer-events: none;
}

.hero__geometry {
    z-index: 2;
    pointer-events: none;
}

.hero__geometry > span {
    position: absolute;
    display: block;
    background: rgba(210, 175, 107, .72);
    transform-origin: left center;
}

.hero__geometry > span:nth-child(1) {
    top: 16%;
    left: 48%;
    width: 22%;
    height: 1px;
    transform: rotate(-23deg);
}

.hero__geometry > span:nth-child(2) {
    top: 16%;
    left: 48%;
    width: 1px;
    height: 50%;
    opacity: .46;
}

.hero__geometry > span:nth-child(3) {
    right: 5.5%;
    bottom: 23%;
    width: 13%;
    height: 1px;
    opacity: .52;
}

.hero-grid--immersive {
    position: relative;
    z-index: 2;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: 620px;
    padding-block: clamp(62px, 8vh, 102px) 76px;
}

.hero--immersive .hero-copy {
    width: min(770px, 100%);
    padding: 0;
}

.hero--immersive .hero-kicker {
    margin-bottom: 26px;
    color: #dedacf;
}

.hero--immersive h1 {
    max-width: 880px;
    font-size: clamp(3.35rem, 5.45vw, 6rem);
    line-height: 1.035;
    letter-spacing: -.04em;
    text-shadow: 0 3px 24px rgba(16, 17, 15, .34);
}

.hero--immersive .hero-copy > p {
    max-width: 52ch;
    margin: 29px 0 32px;
    color: #ddd9ce;
    font-size: clamp(1rem, 1.18vw, 1.16rem);
    line-height: 1.75;
}

.hero--immersive .button--outline {
    border-color: rgba(245, 241, 231, .5);
    background: rgba(16, 17, 15, .35);
}

.hero--immersive .hero-foot {
    width: min(630px, 100%);
    margin-top: 42px;
    border-color: rgba(210, 175, 107, .48);
}

.hero--immersive .hero-foot small {
    display: block;
    margin-top: 6px;
    color: var(--gold-light);
    font-size: 10px;
    font-weight: 500;
}

.hero-service-rail {
    position: relative;
    z-index: 3;
    grid-row: 2;
    border-top: 1px solid rgba(210, 175, 107, .44);
    background: rgba(16, 17, 15, .92);
}

.hero-service-rail > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 82px;
}

.hero-service-rail a {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    min-height: 118px;
    padding: 22px clamp(18px, 2.6vw, 42px);
    border-right: 1px solid rgba(210, 175, 107, .27);
    transition: background-color .32s var(--ease), color .32s var(--ease);
}

.hero-service-rail a:first-child {
    padding-left: 0;
}

.hero-service-rail a:hover,
.hero-service-rail a:focus-visible {
    background: rgba(181, 138, 58, .11);
}

.hero-service-rail__mark {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border: 1px solid var(--gold-light);
    transform: rotate(45deg);
}

.hero-service-rail a > span:nth-child(2) {
    min-width: 0;
}

.hero-service-rail strong,
.hero-service-rail small {
    display: block;
}

.hero-service-rail strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
}

.hero-service-rail small {
    margin-top: 5px;
    overflow: hidden;
    color: #aaa99f;
    font-size: 11px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-service-rail .icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    margin-left: auto;
    color: var(--gold-light);
    transition: transform .32s var(--ease);
}

.hero-service-rail a:hover .icon {
    transform: translate(3px, -3px);
}

.hero-service-rail .hero-scroll {
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    padding: 14px;
    border-right: 0;
    color: #b8b6ad;
    font-size: 10px;
}

.hero-service-rail .hero-scroll .icon {
    margin: 0;
    transform: rotate(90deg);
}

.hero-service-rail .hero-scroll:hover .icon {
    transform: translateY(4px) rotate(90deg);
}

/* Fotografije u izboru dve glavne usluge. */
.service-column__media {
    position: relative;
    display: block;
    height: clamp(235px, 22vw, 330px);
    margin-bottom: 40px;
    overflow: hidden;
    background: #292b22;
}

.service-column__picture {
    position: absolute;
    inset: 0;
}

.service-column__picture > img {
    object-position: center;
    transition: transform .75s var(--ease), filter .4s ease;
}

.service-column__media::after {
    content: "";
    position: absolute;
    inset: 30% 0 0;
    background: linear-gradient(0deg, rgba(16, 17, 15, .88), rgba(16, 17, 15, 0));
    pointer-events: none;
}

.service-column__media > span {
    position: absolute;
    z-index: 1;
    right: 22px;
    bottom: 20px;
    left: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #f5f1e7;
    font-size: 13px;
    font-weight: 600;
}

.service-column__media > span .icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
}

.service-column__media:hover .service-column__picture > img {
    transform: scale(1.035);
    filter: saturate(1.04);
}

/* Sve unutrašnje strane dobijaju sopstvenu fotografsku scenu. */
.page-hero--photographic {
    display: flex;
    align-items: center;
    min-height: clamp(570px, 48vw, 690px);
    padding: 0;
    border-bottom: 1px solid rgba(210, 175, 107, .35);
}

.page-hero__scene,
.page-hero__shade,
.page-hero__trace {
    position: absolute;
    inset: 0;
}

.page-hero__scene {
    z-index: -1;
}

.page-hero__media {
    position: absolute;
    inset: 0;
}

.page-hero__media > img {
    object-position: center;
}

.page-hero--interior .page-hero__media > img,
.page-hero--office .page-hero__media > img,
.page-hero--detail .page-hero__media > img {
    object-position: 61% center;
}

.page-hero--paving .page-hero__media > img,
.page-hero--stone .page-hero__media > img,
.page-hero--edging .page-hero__media > img,
.page-hero--pattern .page-hero__media > img {
    object-position: center 54%;
}

.page-hero__shade {
    z-index: 1;
    background:
        linear-gradient(90deg, #10110f 0%, rgba(16, 17, 15, .98) 23%, rgba(16, 17, 15, .8) 48%, rgba(16, 17, 15, .2) 70%, rgba(16, 17, 15, .03) 100%),
        linear-gradient(0deg, rgba(16, 17, 15, .68) 0%, transparent 36%);
    pointer-events: none;
}

.page-hero__trace {
    z-index: 2;
    pointer-events: none;
}

.page-hero__trace::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 61%;
    width: 1px;
    background: linear-gradient(0deg, transparent, rgba(210, 175, 107, .68) 29%, rgba(210, 175, 107, .2) 74%, transparent);
}

.page-hero__trace > span {
    position: absolute;
    display: block;
    height: 1px;
    background: rgba(210, 175, 107, .58);
    transform-origin: left center;
}

.page-hero__trace > span:first-child {
    top: 23%;
    left: 51%;
    width: 22%;
    transform: rotate(-19deg);
}

.page-hero__trace > span:last-child {
    right: 4.5%;
    bottom: 16%;
    width: 18%;
}

.page-hero__content {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    align-items: center;
    gap: 70px;
    min-height: inherit;
    padding-block: clamp(64px, 7vw, 96px);
}

.page-hero__copy {
    width: min(900px, 73vw);
}

.page-hero--photographic .breadcrumbs {
    max-width: 76ch;
    margin-bottom: 32px;
    color: #cfcdc3;
}

.page-hero--photographic .breadcrumbs > span:last-child {
    color: #f5f1e7;
}

.page-hero--photographic h1 {
    max-width: 900px;
    font-size: clamp(3rem, 5.05vw, 5.7rem);
    line-height: 1.04;
    letter-spacing: -.04em;
    text-shadow: 0 4px 26px rgba(16, 17, 15, .46);
}

.page-hero--photographic p {
    max-width: 54ch;
    margin-top: 28px;
    color: #ddd9ce;
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    line-height: 1.75;
}

.page-hero--photographic .actions {
    margin-top: 32px;
}

.page-hero--photographic .button--outline {
    border-color: rgba(245, 241, 231, .5);
    background: rgba(16, 17, 15, .32);
}

.page-hero__seal {
    align-self: end;
    justify-self: end;
    display: grid;
    width: 118px;
    height: 118px;
    margin-bottom: 12px;
    place-items: center;
    border: 1px solid rgba(210, 175, 107, .64);
    border-radius: 50%;
    box-shadow: inset 0 0 0 8px rgba(16, 17, 15, .18);
}

.page-hero__seal > span {
    color: #e1c084;
    font-size: 9px;
    letter-spacing: .16em;
    transform: rotate(-12deg);
}

.page-hero__media--secondary {
    inset: 11% 5.5% 11% auto;
    width: 25%;
    overflow: hidden;
    border: 1px solid rgba(210, 175, 107, .74);
    clip-path: polygon(12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%);
}

.page-hero__media--secondary > img {
    object-position: 66% center;
}

.page-hero--contact .page-hero__shade,
.page-hero--about .page-hero__shade {
    background:
        linear-gradient(90deg, #10110f 0%, rgba(16, 17, 15, .97) 25%, rgba(16, 17, 15, .72) 50%, rgba(16, 17, 15, .23) 72%, rgba(16, 17, 15, .08) 100%),
        linear-gradient(0deg, rgba(16, 17, 15, .7) 0%, transparent 38%);
}

.page-hero--contact .page-hero__media:not(.page-hero__media--secondary),
.page-hero--about .page-hero__media:not(.page-hero__media--secondary) {
    right: 22%;
}

.page-hero--contact .section-label {
    margin-bottom: 18px;
    color: #e1c084;
}

.page-hero--privacy {
    min-height: 430px;
}

.page-hero--privacy .page-hero__content {
    padding-block: 58px;
}

.page-hero--privacy .page-hero__media {
    opacity: .62;
}

.page-hero--privacy .page-hero__shade {
    background: linear-gradient(90deg, #10110f 0%, rgba(16, 17, 15, .95) 42%, rgba(16, 17, 15, .52) 78%, rgba(16, 17, 15, .36));
}

.page-hero--privacy h1 {
    font-size: clamp(2.8rem, 4.5vw, 4.8rem);
}

/* Jednokratna koreografija pri otvaranju. Sadržaj je čitljiv i pre animacije. */
@media (prefers-reduced-motion: no-preference) {
    .hero--immersive .home-hero__media--interior,
    .page-hero--photographic .page-hero__media:not(.page-hero__media--secondary) {
        animation: hero-photo-unveil 1.05s var(--ease) both;
    }

    .hero--immersive .home-hero__media--paving,
    .page-hero__media--secondary {
        animation: hero-portal-unveil 1.05s var(--ease) .16s both;
    }

    .hero__geometry > span,
    .page-hero__trace > span {
        animation: hero-line-draw .9s var(--ease) .42s both;
    }

    .page-hero__seal {
        animation: hero-detail-arrive .78s var(--ease) .48s both;
    }

    @keyframes hero-photo-unveil {
        from { opacity: .72; clip-path: inset(0 5% 0 0); }
        to { opacity: 1; clip-path: inset(0); }
    }

    @keyframes hero-portal-unveil {
        from { opacity: .45; clip-path: polygon(34% 0, 100% 0, 100% 100%, 21% 100%, 34% 54%); }
        to { opacity: 1; }
    }

    @keyframes hero-line-draw {
        from { clip-path: inset(0 100% 0 0); opacity: .2; }
        to { clip-path: inset(0); opacity: 1; }
    }

    @keyframes hero-detail-arrive {
        from { opacity: .35; transform: translateY(14px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

@media (min-width: 1600px) {
    .hero--immersive {
        grid-template-rows: minmax(680px, 1fr) auto;
    }

    .hero-grid--immersive {
        min-height: 680px;
    }
}

@media (max-width: 1100px) {
    .hero--immersive {
        grid-template-rows: minmax(590px, 1fr) auto;
    }

    .hero-grid--immersive {
        grid-template-columns: minmax(0, 1fr);
        min-height: 590px;
    }

    .hero--immersive h1 {
        font-size: clamp(3.2rem, 7vw, 5.35rem);
    }

    .home-hero__media--paving {
        left: 66%;
        width: 34%;
    }

    .hero__shade {
        background:
            linear-gradient(90deg, #10110f 0%, rgba(16, 17, 15, .94) 28%, rgba(16, 17, 15, .73) 54%, rgba(16, 17, 15, .12) 78%),
            linear-gradient(0deg, rgba(16, 17, 15, .75) 0%, transparent 39%);
    }

    .hero-service-rail > .wrap {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 72px;
    }

    .hero-service-rail a {
        min-height: 106px;
        padding-inline: 22px;
    }

    .hero-service-rail a:first-child {
        padding-left: 0;
    }

    .page-hero__content {
        grid-template-columns: minmax(0, 1fr) 108px;
        gap: 38px;
    }

    .page-hero__copy {
        width: min(820px, 78vw);
    }

    .page-hero__seal {
        width: 98px;
        height: 98px;
    }
}

@media (max-width: 900px) {
    .hero--immersive {
        min-height: auto;
    }

    .hero-grid--immersive {
        grid-template-columns: minmax(0, 1fr);
        padding-block: 66px 74px;
    }

    .hero--immersive .hero-copy {
        max-width: 700px;
    }

    .hero-service-rail strong {
        font-size: 13px;
    }

    .hero-service-rail small {
        font-size: 10px;
    }

    .page-hero--photographic {
        min-height: 610px;
    }

    .page-hero__copy {
        width: min(720px, 82vw);
    }

    .page-hero--photographic h1 {
        font-size: clamp(2.8rem, 6.2vw, 4.3rem);
    }

    .page-hero__media--secondary {
        left: auto;
        width: 29%;
    }
}

@media (max-width: 767px) {
    .hero--immersive {
        display: block;
        min-height: 0;
    }

    .hero-grid--immersive {
        display: block;
        min-height: 600px;
        padding-block: 58px 72px;
    }

    .home-hero__media--interior > img {
        object-position: 59% center;
    }

    .home-hero__media--paving {
        top: auto;
        bottom: 0;
        left: 59%;
        width: 41%;
        height: 56%;
        opacity: .9;
        clip-path: polygon(31% 0, 100% 0, 100% 100%, 0 100%, 15% 45%);
    }

    .hero__shade {
        background:
            linear-gradient(90deg, #10110f 0%, rgba(16, 17, 15, .94) 44%, rgba(16, 17, 15, .54) 72%, rgba(16, 17, 15, .25)),
            linear-gradient(0deg, rgba(16, 17, 15, .82) 0%, rgba(16, 17, 15, .18) 54%, rgba(16, 17, 15, .36) 100%);
    }

    .hero__geometry > span:nth-child(1) {
        top: 18%;
        left: 65%;
        width: 27%;
    }

    .hero__geometry > span:nth-child(2) {
        left: 72%;
        height: 58%;
    }

    .hero--immersive h1 {
        max-width: 11ch;
        font-size: clamp(2.7rem, 12vw, 4rem);
        line-height: 1.07;
    }

    .hero--immersive .hero-copy > p {
        max-width: 35ch;
        margin-block: 24px 28px;
        font-size: 15px;
    }

    .hero--immersive .actions {
        width: min(100%, 390px);
    }

    .hero--immersive .actions .button {
        flex: 1 1 150px;
    }

    .hero--immersive .hero-foot {
        width: min(100%, 390px);
        margin-top: 32px;
    }

    .hero-service-rail {
        position: relative;
    }

    .hero-service-rail > .wrap {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .hero-service-rail a,
    .hero-service-rail a:first-child {
        min-height: 84px;
        padding: 16px 20px;
        border-right: 0;
        border-bottom: 1px solid rgba(210, 175, 107, .24);
    }

    .hero-service-rail a:last-child {
        border-bottom: 0;
    }

    .hero-service-rail .hero-scroll {
        display: none;
    }

    .hero-service-rail small {
        white-space: normal;
    }

    .service-column__media {
        height: 250px;
        margin-bottom: 32px;
    }

    .page-hero--photographic {
        min-height: 590px;
    }

    .page-hero__media {
        inset: 0;
    }

    .page-hero__media > img {
        object-position: 63% center;
    }

    .page-hero--paving .page-hero__media > img,
    .page-hero--stone .page-hero__media > img,
    .page-hero--edging .page-hero__media > img,
    .page-hero--pattern .page-hero__media > img {
        object-position: center 48%;
    }

    .page-hero__shade {
        background:
            linear-gradient(90deg, rgba(16, 17, 15, .94) 0%, rgba(16, 17, 15, .74) 62%, rgba(16, 17, 15, .3) 100%),
            linear-gradient(0deg, rgba(16, 17, 15, .84) 0%, rgba(16, 17, 15, .18) 62%, rgba(16, 17, 15, .55) 100%);
    }

    .page-hero__trace::before {
        left: 82%;
    }

    .page-hero__trace > span:first-child {
        top: 18%;
        left: 69%;
        width: 24%;
    }

    .page-hero__trace > span:last-child {
        bottom: 11%;
        width: 31%;
    }

    .page-hero__content {
        display: block;
        min-height: inherit;
        padding-block: 48px 58px;
    }

    .page-hero__copy {
        width: 100%;
    }

    .page-hero--photographic .breadcrumbs {
        margin-bottom: 25px;
    }

    .page-hero--photographic h1 {
        max-width: 12ch;
        font-size: clamp(2.45rem, 10.5vw, 3.65rem);
        line-height: 1.07;
    }

    .page-hero--photographic p {
        max-width: 37ch;
        margin-top: 24px;
        font-size: 15px;
    }

    .page-hero--photographic .actions {
        width: min(100%, 390px);
    }

    .page-hero--photographic .actions .button {
        flex: 1 1 150px;
    }

    .page-hero__seal {
        display: none;
    }

    .page-hero__media--secondary {
        inset: auto 12px 18px auto;
        width: 34%;
        height: 31%;
        opacity: .78;
    }

    .page-hero--contact .page-hero__media:not(.page-hero__media--secondary),
    .page-hero--about .page-hero__media:not(.page-hero__media--secondary) {
        right: 0;
    }

    .page-hero--privacy {
        min-height: 390px;
    }

    .page-hero--privacy .page-hero__content {
        padding-block: 46px;
    }
}

@media (max-width: 390px) {
    .hero-grid--immersive {
        min-height: 620px;
    }

    .hero--immersive h1 {
        font-size: 2.72rem;
    }

    .hero--immersive .actions .button,
    .page-hero--photographic .actions .button {
        min-width: 0;
        padding-inline: 13px;
        font-size: 12px;
    }

    .page-hero--photographic h1 {
        font-size: 2.42rem;
        overflow-wrap: anywhere;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero--immersive .hero-media,
    .page-hero--photographic .hero-media,
    .hero__geometry > span,
    .page-hero__trace > span,
    .page-hero__seal,
    .service-column__picture > img {
        animation: none !important;
        transition: none !important;
    }
}

@media print {
    .hero--immersive,
    .page-hero--photographic {
        min-height: 0;
        background: #fff;
        color: #111;
    }

    .hero-scene,
    .page-hero__scene,
    .hero-service-rail,
    .page-hero__seal {
        display: none !important;
    }

    .hero-grid--immersive,
    .page-hero__content {
        min-height: 0;
        padding-block: 25px;
    }

    .hero--immersive p,
    .page-hero--photographic p,
    .page-hero--photographic .breadcrumbs {
        color: #333;
    }
}