/* =====================================================
   ARMENIA CRYSTAL
   DISCOVER ARMENIA / LANDMARKS PAGE
===================================================== */


/* =====================================================
   PAGE BASE
===================================================== */

body {
    background: #050505;
    color: #ffffff;
}

main {
    background: #050505;
}

.landmarks-hero,
.landmarks-intro,
.landmarks-collection,
.landmarks-cta {
    position: relative;
}

.landmarks-container {
    position: relative;
    z-index: 2;

    width: min(100% - 100px, 1440px);
    margin: 0 auto;
}


/* =====================================================
   COMMON TYPOGRAPHY
===================================================== */

.landmarks-kicker {
    display: block;

    margin-bottom: 24px;

    color: #d4af37;

    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.32em;
    text-transform: uppercase;
}


/* =====================================================
   HERO
===================================================== */

.landmarks-hero {
    min-height: 820px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(212, 175, 55, 0.10),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #050505 0%,
            #080704 55%,
            #050505 100%
        );
}


/* ambient glow */

.landmarks-hero::before {
    content: "";

    position: absolute;

    width: 900px;
    height: 900px;

    right: -300px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212, 175, 55, 0.08),
            transparent 67%
        );

    pointer-events: none;
}


/* bottom fade */

.landmarks-hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 220px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #050505
        );

    pointer-events: none;
}


.landmarks-hero-content {
    max-width: 980px;

    padding: 150px 0 120px;
}


.landmarks-hero h1 {
    max-width: 980px;

    margin: 0 0 38px;

    color: #ffffff;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(76px, 8vw, 124px);
    font-weight: 400;

    line-height: 0.88;

    letter-spacing: -0.045em;
}


.landmarks-hero-content p {
    max-width: 720px;

    margin: 0;

    color: rgba(255, 255, 255, 0.63);

    font-family: "Inter", sans-serif;

    font-size: 16px;
    font-weight: 300;

    line-height: 1.9;
}


/* =====================================================
   HERO SCROLL INDICATOR
===================================================== */

.landmarks-scroll {
    position: absolute;

    right: 0;
    bottom: 85px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 18px;
}


.landmarks-scroll span {
    color: rgba(255, 255, 255, 0.36);

    font-family: "Inter", sans-serif;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.28em;

    writing-mode: vertical-rl;

    transform: rotate(180deg);
}


.landmarks-scroll-line {
    width: 1px;
    height: 70px;

    background:
        linear-gradient(
            to bottom,
            #d4af37,
            transparent
        );
}


/* =====================================================
   INTRO
===================================================== */

.landmarks-intro {
    padding: 150px 0 165px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 45%,
            rgba(212, 175, 55, 0.055),
            transparent 30%
        ),
        #070707;

    border-top: 1px solid rgba(212, 175, 55, 0.08);
}


.landmarks-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, 0.75fr);

    gap: 130px;

    align-items: start;
}


.landmarks-intro-heading h2 {
    max-width: 760px;

    margin: 0;

    color: #ffffff;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(60px, 6vw, 96px);
    font-weight: 400;

    line-height: 0.92;

    letter-spacing: -0.04em;
}


.landmarks-intro-content {
    max-width: 620px;

    padding-top: 45px;
}


.landmarks-gold-line {
    width: 70px;
    height: 1px;

    margin-bottom: 36px;

    background: #d4af37;
}


.landmarks-intro-content p {
    margin: 0 0 26px;

    color: rgba(255, 255, 255, 0.56);

    font-family: "Inter", sans-serif;

    font-size: 15px;
    font-weight: 300;

    line-height: 1.9;
}


.landmarks-intro-content .landmarks-intro-lead {
    margin-bottom: 34px;

    color: rgba(255, 255, 255, 0.90);

    font-family: "Cormorant Garamond", serif;

    font-size: 30px;
    font-weight: 400;

    line-height: 1.42;
}


/* =====================================================
   LANDMARK COLLECTION
===================================================== */

.landmarks-collection {
    padding: 160px 0 175px;

    overflow: hidden;

    background: #050505;
}


/* subtle top line */

.landmarks-collection::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: min(1200px, 90%);
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212, 175, 55, 0.28),
            transparent
        );
}


/* =====================================================
   COLLECTION HEADER
===================================================== */

.landmarks-section-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.55fr);

    gap: 100px;

    align-items: end;

    margin-bottom: 85px;
}


.landmarks-section-header h2 {
    margin: 0;

    color: #ffffff;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(62px, 6vw, 96px);
    font-weight: 400;

    line-height: 0.94;

    letter-spacing: -0.04em;
}


.landmarks-section-header > p {
    max-width: 500px;

    margin: 0 0 8px;

    color: rgba(255, 255, 255, 0.55);

    font-family: "Inter", sans-serif;

    font-size: 15px;
    font-weight: 300;

    line-height: 1.9;
}


/* =====================================================
   LANDMARKS GRID
===================================================== */

.landmarks-grid {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    gap: 24px;
}


/* =====================================================
   LANDMARK CARD
===================================================== */

.landmark-card {
    position: relative;

    min-height: 560px;

    grid-column: span 4;

    overflow: hidden;

    border: 1px solid rgba(212, 175, 55, 0.13);
    border-radius: 24px;

    background: #0b0b0b;

    isolation: isolate;

    transition:
        transform 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}


/* optional feature card */

.landmark-card.featured {
    grid-column: span 8;
    min-height: 640px;
}


/* =====================================================
   CARD LINK
===================================================== */

.landmark-card > a {
    position: absolute;
    inset: 0;

    z-index: 4;

    display: block;

    color: inherit;
    text-decoration: none;
}


/* =====================================================
   CARD IMAGE
===================================================== */

.landmark-card-image {
    position: absolute;
    inset: 0;

    z-index: 0;
}


.landmark-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    filter:
        brightness(0.67)
        saturate(0.80)
        contrast(1.03);

    transition:
        transform 0.85s ease,
        filter 0.65s ease;
}


/* =====================================================
   CARD OVERLAY
===================================================== */

.landmark-card-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.06) 0%,
            rgba(0, 0, 0, 0.13) 35%,
            rgba(0, 0, 0, 0.88) 100%
        );

    pointer-events: none;
}


/* =====================================================
   CARD NUMBER
===================================================== */

.landmark-card-number {
    position: absolute;

    z-index: 3;

    top: 34px;
    right: 34px;

    color: rgba(255, 255, 255, 0.20);

    font-family: "Cormorant Garamond", serif;

    font-size: 52px;
    font-weight: 400;

    line-height: 1;
}


/* =====================================================
   CARD CONTENT
===================================================== */

.landmark-card-content {
    position: absolute;

    z-index: 3;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 38px;
}


.landmark-card-location {
    display: block;

    margin-bottom: 13px;

    color: #d4af37;

    font-family: "Inter", sans-serif;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.26em;

    text-transform: uppercase;
}


.landmark-card-title {
    max-width: 450px;

    margin: 0 0 14px;

    color: #ffffff;

    font-family: "Cormorant Garamond", serif;

    font-size: 42px;
    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.025em;
}


.landmark-card.featured .landmark-card-title {
    font-size: clamp(52px, 5vw, 76px);
}


.landmark-card-subtitle {
    max-width: 420px;

    margin: 0 0 26px;

    color: rgba(255, 255, 255, 0.58);

    font-family: "Inter", sans-serif;

    font-size: 13px;
    font-weight: 300;

    line-height: 1.75;
}


/* =====================================================
   DISCOVER LINK
===================================================== */

.landmark-card-action {
    display: inline-flex;
    align-items: center;

    gap: 13px;

    color: rgba(255, 255, 255, 0.82);

    font-family: "Inter", sans-serif;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.landmark-card-action::after {
    content: "→";

    color: #d4af37;

    font-size: 16px;

    letter-spacing: 0;

    transition: transform 0.3s ease;
}


/* =====================================================
   CARD HOVER
===================================================== */

.landmark-card:hover {
    transform: translateY(-7px);

    border-color: rgba(212, 175, 55, 0.36);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.45);
}


.landmark-card:hover .landmark-card-image img {
    transform: scale(1.05);

    filter:
        brightness(0.78)
        saturate(0.94)
        contrast(1.03);
}


.landmark-card:hover .landmark-card-action::after {
    transform: translateX(5px);
}


/* =====================================================
   OPTIONAL ALTERNATING LAYOUT
===================================================== */

.landmark-card:nth-child(1) {
    grid-column: span 8;
    min-height: 650px;
}

.landmark-card:nth-child(2) {
    grid-column: span 4;
    min-height: 650px;
}

.landmark-card:nth-child(3),
.landmark-card:nth-child(4),
.landmark-card:nth-child(5) {
    grid-column: span 4;
}

.landmark-card:nth-child(6) {
    grid-column: span 5;
}

.landmark-card:nth-child(7) {
    grid-column: span 7;
}


/* =====================================================
   FINAL CTA
===================================================== */

.landmarks-cta {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;

    padding: 150px 0;

    overflow: hidden;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(212, 175, 55, 0.08),
            transparent 38%
        ),
        #050505;

    border-top: 1px solid rgba(212, 175, 55, 0.10);
}


/* atmospheric glow */

.landmarks-cta::before {
    content: "";

    position: absolute;

    width: 900px;
    height: 900px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212, 175, 55, 0.06),
            transparent 65%
        );

    pointer-events: none;
}


/* vertical line */

.landmarks-cta::after {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 1px;
    height: 90px;

    background:
        linear-gradient(
            to bottom,
            rgba(212, 175, 55, 0.45),
            transparent
        );
}


/* =====================================================
   CTA CONTENT
===================================================== */

.landmarks-cta-inner {
    position: relative;
    z-index: 2;

    max-width: 1000px;

    margin: 0 auto;
}


.landmarks-cta-inner h2 {
    margin: 0;

    color: #ffffff;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(68px, 7vw, 110px);
    font-weight: 400;

    line-height: 0.92;

    letter-spacing: -0.045em;
}


.landmarks-cta-inner p {
    max-width: 620px;

    margin: 42px auto 0;

    color: rgba(255, 255, 255, 0.57);

    font-family: "Inter", sans-serif;

    font-size: 15px;
    font-weight: 300;

    line-height: 1.9;
}


/* =====================================================
   CTA BUTTON
===================================================== */

.landmarks-cta-button {
    width: fit-content;

    margin: 48px auto 0;

    padding: 19px 24px 19px 30px;

    display: inline-flex;
    align-items: center;

    gap: 28px;

    color: #d4af37;

    border: 1px solid rgba(212, 175, 55, 0.55);

    border-radius: 999px;

    text-decoration: none;

    font-family: "Inter", sans-serif;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.18em;

    transition:
        color 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease;
}


.landmarks-cta-arrow {
    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    color: #050505;

    background: #d4af37;

    font-size: 18px;

    letter-spacing: 0;

    transition:
        transform 0.35s ease,
        color 0.35s ease,
        background 0.35s ease;
}


.landmarks-cta-button:hover {
    color: #050505;

    background: #d4af37;

    border-color: #d4af37;

    transform: translateY(-3px);
}


.landmarks-cta-button:hover .landmarks-cta-arrow {
    color: #d4af37;
    background: #050505;

    transform: translateX(4px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {

    .landmarks-container {
        width: min(100% - 60px, 1440px);
    }


    .landmarks-hero {
        min-height: 740px;
    }


    .landmarks-intro-grid {
        grid-template-columns: 1fr;
        gap: 65px;
    }


    .landmarks-intro-content {
        max-width: 760px;
        padding-top: 0;
    }


    .landmarks-section-header {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    .landmarks-section-header > p {
        max-width: 700px;
    }


    .landmark-card,
    .landmark-card:nth-child(1),
    .landmark-card:nth-child(2),
    .landmark-card:nth-child(3),
    .landmark-card:nth-child(4),
    .landmark-card:nth-child(5),
    .landmark-card:nth-child(6),
    .landmark-card:nth-child(7) {
        grid-column: span 6;
        min-height: 540px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .landmarks-container {
        width: min(100% - 36px, 1440px);
    }


    /* HERO */

    .landmarks-hero {
        min-height: 680px;
    }

    .landmarks-hero-content {
        padding: 130px 0 100px;
    }

    .landmarks-hero h1 {
        font-size: clamp(58px, 16vw, 82px);
    }

    .landmarks-hero-content p {
        font-size: 14px;
    }

    .landmarks-scroll {
        display: none;
    }


    /* INTRO */

    .landmarks-intro {
        padding: 100px 0 110px;
    }

    .landmarks-intro-heading h2 {
        font-size: 52px;
    }

    .landmarks-intro-content .landmarks-intro-lead {
        font-size: 26px;
    }


    /* COLLECTION */

    .landmarks-collection {
        padding: 105px 0 120px;
    }

    .landmarks-section-header {
        margin-bottom: 55px;
    }

    .landmarks-section-header h2 {
        font-size: 54px;
    }


    .landmarks-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }


    .landmark-card,
    .landmark-card.featured,
    .landmark-card:nth-child(1),
    .landmark-card:nth-child(2),
    .landmark-card:nth-child(3),
    .landmark-card:nth-child(4),
    .landmark-card:nth-child(5),
    .landmark-card:nth-child(6),
    .landmark-card:nth-child(7) {
        grid-column: auto;

        min-height: 520px;
    }


    .landmark-card-content {
        padding: 30px;
    }


    .landmark-card-title,
    .landmark-card.featured .landmark-card-title {
        font-size: 44px;
    }


    .landmark-card-number {
        top: 28px;
        right: 28px;

        font-size: 44px;
    }


    /* CTA */

    .landmarks-cta {
        min-height: 620px;

        padding: 110px 0;
    }

    .landmarks-cta-inner h2 {
        font-size: 54px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 480px) {

    .landmarks-kicker {
        font-size: 10px;
        letter-spacing: 0.26em;
    }


    .landmarks-hero {
        min-height: 620px;
    }


    .landmarks-intro-heading h2,
    .landmarks-section-header h2 {
        font-size: 48px;
    }


    .landmark-card,
    .landmark-card.featured {
        min-height: 470px;
    }


    .landmark-card-title,
    .landmark-card.featured .landmark-card-title {
        font-size: 40px;
    }


    .landmarks-cta-inner h2 {
        font-size: 48px;
    }


    .landmarks-cta-button {
        gap: 18px;

        padding: 16px 19px 16px 23px;

        font-size: 9px;
    }


    .landmarks-cta-arrow {
        width: 34px;
        height: 34px;
    }

}

/* =========================================================
   CLICKABLE GOOGLE MAPS
========================================================= */
.google-map-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.google-map-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.open-google-map {
    display: inline-block;
    margin-top: 18px;
    color: #d4af37;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: .16em;
}

/* =====================================================
   LANDMARK CATEGORY FILTERS
===================================================== */
.landmarks-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 8px 0 52px;
    border-top: 1px solid rgba(212,175,55,.22);
    border-bottom: 1px solid rgba(212,175,55,.22);
}
.landmark-filter {
    appearance: none;
    border: 0;
    border-right: 1px solid rgba(212,175,55,.16);
    background: transparent;
    color: rgba(255,255,255,.48);
    padding: 19px 25px;
    font: 500 10px/1 "Inter", sans-serif;
    letter-spacing: .22em;
    cursor: pointer;
    transition: color .25s ease, background .25s ease;
}
.landmark-filter:first-child { padding-left: 0; padding-right: 28px; }
.landmark-filter:hover,
.landmark-filter.is-active { color: #d4af37; }
.landmark-filter.is-active { background: linear-gradient(180deg, transparent, rgba(212,175,55,.035)); }
.landmark-card.is-filter-hidden { display: none !important; }
@media (max-width: 760px) {
    /* Mobile: filters stay visible in exactly two rows instead of horizontal scrolling */
    .landmarks-filters {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(2, auto);
        margin-bottom: 34px;
        overflow: visible;
        border-left: 1px solid rgba(212,175,55,.16);
    }
    .landmark-filter,
    .landmark-filter:first-child {
        min-width: 0;
        width: 100%;
        padding: 15px 6px;
        border-right: 1px solid rgba(212,175,55,.16);
        border-bottom: 1px solid rgba(212,175,55,.12);
        text-align: center;
        font-size: 9px;
        letter-spacing: .12em;
        white-space: nowrap;
    }
}


/* =====================================================
   VISUAL MASTERPIECE CATEGORY MOSAIC
===================================================== */
.landmark-category-mosaic{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-rows:repeat(2,310px);grid-auto-rows:310px;gap:22px;margin:44px 0 34px}
.landmark-category-card{position:relative;min-height:310px;overflow:hidden;border:1px solid rgba(212,175,55,.14);border-radius:22px;background:#0a0a0a;cursor:pointer;isolation:isolate;transition:transform .4s ease,border-color .4s ease,box-shadow .4s ease}
.landmark-category-card-large{grid-row:1/3}.landmark-category-card-wide{grid-column:1/3;height:300px}
.landmark-category-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.78);transition:transform .7s ease,filter .7s ease}
.landmark-category-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.16) 35%,rgba(0,0,0,.9));z-index:1}
.landmark-category-content{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:36px}.landmark-category-card-large .landmark-category-content{padding:48px}
.landmark-category-kicker{display:block;margin-bottom:13px;color:#d4af37;font:600 10px/1.2 Inter,sans-serif;letter-spacing:.27em}
.landmark-category-content h3{margin:0 0 12px;color:#fff;font:500 42px/.95 "Cormorant Garamond",serif}.landmark-category-card-large h3{font-size:clamp(52px,5vw,72px)}
.landmark-category-content p{max-width:430px;margin:0;color:rgba(255,255,255,.68);font:300 13px/1.7 Inter,sans-serif}
.landmark-category-number{position:absolute;right:30px;bottom:26px;z-index:2;color:rgba(255,255,255,.17);font:400 64px/1 "Cormorant Garamond",serif}.landmark-category-card-large .landmark-category-number{font-size:92px}
.landmark-category-card:hover,.landmark-category-card:focus{transform:translateY(-5px);border-color:rgba(212,175,55,.42);box-shadow:0 26px 70px rgba(0,0,0,.42);outline:none}.landmark-category-card:hover img,.landmark-category-card:focus img{transform:scale(1.04);filter:brightness(.72) saturate(.9)}
.landmark-category-card.is-selected{border-color:rgba(212,175,55,.75);box-shadow:0 0 0 1px rgba(212,175,55,.18),0 25px 70px rgba(0,0,0,.4)}
.landmark-category-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 44px;padding-bottom:18px;border-bottom:1px solid rgba(212,175,55,.16)}
.landmark-view-all{appearance:none;border:1px solid rgba(212,175,55,.35);background:transparent;color:#d4af37;padding:13px 18px;cursor:pointer;font:600 10px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase}.landmark-view-all:hover,.landmark-view-all.is-active{background:#d4af37;color:#080808}
#activeCategoryLabel{color:rgba(255,255,255,.5);font:400 12px/1.4 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.landmark-card.is-filter-hidden{display:none!important}
@media(max-width:900px){.landmark-category-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto}.landmark-category-card,.landmark-category-card-large,.landmark-category-card-wide{grid-column:auto;grid-row:auto;height:360px}.landmark-category-card-large,.landmark-category-card-wide{grid-column:1/3}.landmark-category-card-large{height:500px}}
@media(max-width:620px){.landmark-category-mosaic{grid-template-columns:1fr;gap:16px}.landmark-category-card,.landmark-category-card-large,.landmark-category-card-wide{grid-column:auto;height:330px}.landmark-category-card-large{height:430px}.landmark-category-content,.landmark-category-card-large .landmark-category-content{padding:26px}.landmark-category-content h3,.landmark-category-card-large h3{font-size:44px}.landmark-category-toolbar{align-items:flex-start;flex-direction:column}.landmark-view-all{width:100%}}


/* Discover Armenia hero image — text left / visual right */
.landmarks-hero-visual {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    width: 52%;
    height: 100%;
    background-image:
        linear-gradient(to right, #050505 0%, rgba(5,5,5,.92) 10%, rgba(5,5,5,.48) 31%, rgba(5,5,5,.10) 58%, rgba(5,5,5,.02) 100%),
        linear-gradient(to bottom, rgba(5,5,5,.18) 0%, transparent 24%, transparent 72%, #050505 100%),
        url("../images/hero/discover-armenia-hero.webp");
    background-size: cover;
    background-position: 56% center;
    background-repeat: no-repeat;
    opacity: .94;
    pointer-events: none;
}

.landmarks-hero-content {
    position: relative;
    z-index: 3;
    width: 52%;
    max-width: 760px;
}

.landmarks-hero h1 {
    max-width: 760px;
    font-size: clamp(70px, 6.4vw, 108px);
}

.landmarks-hero-content p {
    max-width: 690px;
}

.landmarks-scroll {
    z-index: 4;
}

@media (max-width: 900px) {
    .landmarks-hero-visual {
        width: 100%;
        opacity: .42;
        background-image:
            linear-gradient(to right, rgba(5,5,5,.96), rgba(5,5,5,.56)),
            linear-gradient(to bottom, rgba(5,5,5,.2), #050505 100%),
            url("../images/hero/discover-armenia-hero.webp");
        background-position: 58% center;
    }
    .landmarks-hero-content {
        width: 100%;
        max-width: 720px;
    }
}

/* Balanced landmark grid: prevents large empty column gaps, including filtered views */
@media (min-width: 901px){
  .landmarks-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;}
  .landmark-card,
  .landmark-card.featured,
  .landmark-card:nth-child(1),.landmark-card:nth-child(2),.landmark-card:nth-child(3),
  .landmark-card:nth-child(4),.landmark-card:nth-child(5),.landmark-card:nth-child(6),
  .landmark-card:nth-child(7){grid-column:span 1;min-height:560px;}
}


/* =====================================================
   FORTRESS / ECHOES OF KINGDOMS — FULL WIDTH
===================================================== */
@media (min-width: 901px) {
    .landmarks-grid .landmark-card[data-category~="fortress"],
    .landmarks-grid .landmark-card.fortress-card {
        grid-column: 1 / -1 !important;
        min-height: 560px;
    }
}


/* =====================================================
   MOBILE CATEGORY CARD SPACING — FIX
===================================================== */
@media (max-width: 620px) {
    .landmark-category-mosaic {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 18px !important;
        column-gap: 0 !important;
    }

    .landmark-category-card,
    .landmark-category-card-large,
    .landmark-category-card-wide {
        grid-column: auto;
        grid-row: auto;
        margin: 0 !important;
    }
}


/* =====================================================
   MOBILE FINAL OVERRIDE — FILTERS + CARD SEPARATION
===================================================== */
@media (max-width: 700px) {
    .landmarks-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-rows: auto !important;
        gap: 28px !important;
        row-gap: 28px !important;
    }

    .landmarks-grid > .landmark-card,
    .landmarks-grid > .landmark-card.featured,
    .landmarks-grid > .landmark-card:nth-child(n) {
        position: relative !important;
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100% !important;
        min-height: 470px !important;
        margin: 0 !important;
        transform: none;
    }

    .landmark-category-mosaic {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: none !important;
        grid-auto-rows: auto !important;
        gap: 28px !important;
        row-gap: 28px !important;
    }

    .landmark-category-mosaic > .landmark-category-card,
    .landmark-category-mosaic > .landmark-category-card-large,
    .landmark-category-mosaic > .landmark-category-card-wide {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100% !important;
        height: 360px !important;
        min-height: 360px !important;
        margin: 0 !important;
    }
}

/* Cards stay hidden until a category or View All is clicked. */
.landmarks-grid.is-collapsed { display:none !important; }
@media (max-width:700px){.landmarks-grid.is-collapsed{display:none !important;}}