:root {
    --mz-arch-gold: #c79a3b;
    --mz-arch-dark: #111111;
    --mz-arch-ink: #1a1815;
    --mz-arch-muted: #6e675e;
    --mz-arch-cream: #faf7f0;
}

.mz-arch-page {
    overflow: hidden;
    background: #ffffff;
    color: var(--mz-arch-ink);
}

.mz-arch-container {
    width: min(1380px, calc(100% - 100px));
    margin-inline: auto;
}

.mz-arch-hero {
    position: relative;
    min-height: 610px;
    display: flex;
    align-items: center;
    isolation: isolate;

    background:
        var(--mz-arch-hero),
        linear-gradient(135deg, #343029, #111111);

    background-size: cover;
    background-position: center;
}

.mz-arch-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.84) 0%,
            rgba(0,0,0,.62) 38%,
            rgba(0,0,0,.28) 75%,
            rgba(0,0,0,.2) 100%
        );
}

.mz-arch-hero-inner {
    padding-block: 110px;
}

.mz-arch-kicker {
    display: block;

    color: var(--mz-arch-gold);

    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .2em;
}

.mz-arch-kicker.dark {
    color: var(--mz-arch-gold);
}

.mz-arch-gold-line {
    display: block;

    width: 52px;
    height: 2px;

    margin: 22px 0 28px;

    background: var(--mz-arch-gold);
}

.mz-arch-hero h1,
.mz-arch-intro h2,
.mz-arch-section-heading h2,
.mz-arch-numismatic h2,
.mz-arch-gallery-heading h2 {
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-style: normal;
    font-weight: 600;
    letter-spacing: -.03em;
}

.mz-arch-hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(64px, 8vw, 108px);
    line-height: .95;
}

.mz-arch-hero p {
    max-width: 610px;

    margin-top: 28px;

    color: rgba(255,255,255,.94);

    font-family: Arial, sans-serif;
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.65;
}

.mz-arch-intro {
    padding-block: 110px;
}

.mz-arch-intro-grid {
    display: grid;
    grid-template-columns: .88fr 1.12fr;

    gap: clamp(65px, 7vw, 120px);
    align-items: center;
}

.mz-arch-intro-copy h2 {
    margin: 14px 0 0;

    font-size: clamp(54px, 5vw, 78px);
    line-height: .98;
}

.mz-arch-intro-copy p {
    color: #403b35;

    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.85;
}

.mz-arch-main-image,
.mz-arch-intro-image .mz-arch-placeholder {
    display: flex;

    width: 100%;
    min-height: 590px;

    object-fit: cover;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #cdbb9d,
            #695d4d
        );

    box-shadow:
        0 28px 70px rgba(0,0,0,.15);

    align-items: center;
    justify-content: center;

    color: #ffffff;
}

.mz-arch-quote {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 30px;
    align-items: center;

    margin-top: 85px;
    padding: 44px 55px;

    border-left:
        6px solid var(--mz-arch-gold);

    border-radius: 9px;

    background:
        linear-gradient(
            105deg,
            #fffaf0,
            #f8e6ad
        );

    box-shadow:
        0 20px 45px rgba(128,95,34,.1);
}

.mz-arch-quote-icon svg {
    width: 70px;
    height: 70px;

    fill: none;
    stroke: var(--mz-arch-gold);
    stroke-width: 2;
}

.mz-arch-quote p {
    margin: 0;

    color: #4e473d;

    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1.7;
}

.mz-arch-quote .mz-arch-gold-line {
    grid-column: 2;
    margin: 0;
}

.mz-arch-stats {
    padding-block: 82px;

    background:
        linear-gradient(
            100deg,
            #fffdf8,
            #f8f0e1
        );
}

.mz-arch-stats-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.mz-arch-stats-grid article {
    min-width: 0;

    padding: 30px 35px;

    text-align: center;

    border-right:
        1px solid rgba(0,0,0,.1);
}

.mz-arch-stats-grid article:last-child {
    border-right: 0;
}

.mz-arch-stat-icon svg {
    width: 48px;
    height: 48px;

    fill: none;
    stroke: var(--mz-arch-gold);
    stroke-width: 1.7;
}

.mz-arch-stats-grid strong {
    display: block;

    margin-top: 16px;

    color: var(--mz-arch-gold);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(52px, 4vw, 70px);
    font-weight: 500;
    line-height: 1;
}

.mz-arch-stats-grid article > span:last-child {
    display: block;

    max-width: 220px;
    margin: 13px auto 0;

    color: var(--mz-arch-muted);

    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.mz-arch-collections {
    padding-block: 110px;

    background: var(--mz-arch-dark);
}

.mz-arch-section-heading {
    text-align: center;
}

.mz-arch-section-heading h2 {
    margin: 12px 0 0;

    color: #ffffff;

    font-size: clamp(50px, 5vw, 72px);
    line-height: 1;
}

.mz-arch-section-heading .mz-arch-gold-line {
    margin: 24px auto 60px;
}

.mz-arch-collection-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 28px;
}

.mz-arch-collection-grid article {
    padding: 50px 42px;

    border:
        1px solid rgba(199,154,59,.45);

    background:
        rgba(255,255,255,.015);
}

.mz-arch-collection-kicker {
    display: block;

    color: var(--mz-arch-gold);

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .17em;
}

.mz-arch-collection-grid h3 {
    margin: 36px 0 20px;

    color: var(--mz-arch-gold);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 34px;
    font-weight: 500;
    line-height: 1.1;
}

.mz-arch-collection-grid p {
    margin: 0;

    color: #dbc179;

    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.75;
}

.mz-arch-numismatic {
    padding-block: 120px;
}

.mz-arch-numismatic-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;

    gap: 90px;
}

.mz-arch-numismatic h2 {
    margin: 0;

    font-size: clamp(50px, 5vw, 74px);
    line-height: 1;
}

.mz-arch-numismatic p {
    margin: 0;

    color: #302c27;

    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1.9;
}

.mz-arch-gallery {
    padding-block: 110px;
}

.mz-arch-gallery-heading {
    max-width: 900px;
    margin: 0 auto 65px;

    text-align: center;
}

.mz-arch-gallery-heading h2 {
    margin: 14px 0 20px;

    font-size: clamp(52px, 5vw, 76px);
    line-height: 1;
}

.mz-arch-gallery-heading p {
    color: var(--mz-arch-muted);

    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
}

.mz-arch-gallery-heading .mz-arch-gold-line {
    margin: 25px auto 0;
}

.mz-arch-gallery-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 26px;
}

.mz-arch-card {
    overflow: hidden;

    border: 1px solid rgba(0,0,0,.07);
    border-radius: 10px;

    background: var(--mz-arch-cream);

    box-shadow:
        0 18px 45px rgba(0,0,0,.08);
}

.mz-arch-card-image {
    position: relative;

    display: block;

    width: 100%;
    height: 340px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 0;

    background: #ddd;

    cursor: zoom-in;
}

.mz-arch-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .45s ease;
}

.mz-arch-card:hover
.mz-arch-card-image img {
    transform: scale(1.045);
}

.mz-arch-card-content {
    padding: 30px 32px 34px;
}

.mz-arch-card-number {
    color: var(--mz-arch-gold);

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
}

.mz-arch-card h3 {
    margin: 18px 0 10px;

    color: var(--mz-arch-ink);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 31px;
    font-weight: 600;
    line-height: 1.1;
}

.mz-arch-card-content div {
    color: #4a453e;

    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.65;
}

.mz-arch-card-content p {
    margin: 0;
}

.mz-arch-gallery-empty {
    grid-column: 1 / -1;

    padding: 65px;

    text-align: center;

    border: 1px dashed #c8baa0;
    border-radius: 10px;

    background: #faf7f1;
}

.mz-arch-pagination {
    margin-top: 65px;
}

.mz-arch-pagination ul {
    display: flex;
    justify-content: center;
    gap: 9px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.mz-arch-pagination a,
.mz-arch-pagination span {
    display: flex;

    min-width: 46px;
    height: 46px;

    padding-inline: 14px;

    align-items: center;
    justify-content: center;

    border: 1px solid #d8d0c2;
    border-radius: 50%;

    color: #27231e;

    background: #ffffff;

    font-family: Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
}

.mz-arch-pagination .current,
.mz-arch-pagination a:hover {
    border-color: var(--mz-arch-gold);

    color: #ffffff;

    background: var(--mz-arch-gold);
}

.mz-arch-closing {
    display: grid;
    grid-template-columns: 85px 1fr;

    gap: 30px;
    align-items: center;

    max-width: 1050px;

    margin: 85px auto 0;
    padding: 35px 45px;

    border-radius: 9px;

    background:
        linear-gradient(
            105deg,
            #fff8e7,
            #f8e1a4
        );
}

.mz-arch-closing svg {
    width: 65px;
    height: 65px;

    fill: none;
    stroke: var(--mz-arch-gold);
    stroke-width: 2;
}

.mz-arch-closing p {
    margin: 0;

    color: #514a3f;

    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.75;
}

.mz-arch-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999999;

    display: none;

    padding: 35px;

    align-items: center;
    justify-content: center;

    background: rgba(0,0,0,.94);
}

.mz-arch-lightbox.is-open {
    display: flex;
}

.mz-arch-lightbox img {
    max-width: 94vw;
    max-height: 90vh;

    object-fit: contain;
}

.mz-arch-lightbox button {
    position: absolute;
    top: 15px;
    right: 26px;

    border: 0;

    color: #ffffff;
    background: transparent;

    font-size: 50px;
    cursor: pointer;
}

@media (max-width: 1050px) {
    .mz-arch-container {
        width: calc(100% - 56px);
    }

    .mz-arch-intro-grid,
    .mz-arch-numismatic-grid {
        grid-template-columns: 1fr;
    }

    .mz-arch-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mz-arch-collection-grid,
    .mz-arch-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .mz-arch-container {
        width: calc(100% - 36px);
    }

    .mz-arch-hero {
        min-height: 510px;
    }

    .mz-arch-hero-inner {
        padding-block: 75px;
    }

    .mz-arch-intro,
    .mz-arch-numismatic,
    .mz-arch-gallery {
        padding-block: 75px;
    }

    .mz-arch-main-image,
    .mz-arch-intro-image
    .mz-arch-placeholder {
        min-height: 370px;
    }

    .mz-arch-quote {
        grid-template-columns: 1fr;

        padding: 32px;
    }

    .mz-arch-quote .mz-arch-gold-line {
        grid-column: 1;
    }

    .mz-arch-collection-grid,
    .mz-arch-gallery-grid {
        grid-template-columns: 1fr;
    }

    .mz-arch-card-image {
        height: 300px;
    }
}

@media (max-width: 520px) {
    .mz-arch-stats-grid {
        grid-template-columns: 1fr;
    }

    .mz-arch-stats-grid article {
        border-right: 0;
        border-bottom:
            1px solid rgba(0,0,0,.1);
    }

    .mz-arch-closing {
        grid-template-columns: 1fr;

        padding: 30px;
    }
}

/* MZ_ARCH_IMAGE_ONLY_LIGHTBOX_START */

/*
 * Klik na karticu prikazuje samo uvećanu fotografiju.
 */
body.mz-arheologija-premium-active
.mz-arch-lightbox figcaption {
    display: none !important;
}

/*
 * Slika koristi maksimalan raspoloživi prostor,
 * ali ostaje cela vidljiva.
 */
body.mz-arheologija-premium-active
.mz-arch-lightbox figure {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;

    align-items: center !important;
    justify-content: center !important;
}

body.mz-arheologija-premium-active
.mz-arch-lightbox img {
    display: block !important;

    width: auto !important;
    max-width: 94vw !important;

    height: auto !important;
    max-height: 92vh !important;

    margin: 0 auto !important;

    object-fit: contain !important;

    border: 0 !important;
    box-shadow:
        0 28px 90px
        rgba(0, 0, 0, .42) !important;
}

/* MZ_ARCH_IMAGE_ONLY_LIGHTBOX_END */