/* ==========================================================
   ARMENIA CRYSTAL — GLOBAL SPACING / RHYTHM CLEANUP
   Keeps the premium cinematic look while removing excessive
   empty vertical space across internal pages.
========================================================== */

:root {
    --section-space-xl: 104px;
    --section-space-lg: 88px;
    --section-space-md: 76px;
    --section-space-sm: 60px;
}

/* Story page */
.story-intro,
.story-origins,
.story-culture,
.story-landscapes,
.story-craftsmanship,
.story-finale {
    padding-top: var(--section-space-xl) !important;
    padding-bottom: var(--section-space-xl) !important;
}

/* Discover / landmarks page */
.landmarks-intro,
.landmarks-collection,
.landmarks-section,
.landmarks-featured,
.landmarks-cta {
    padding-top: var(--section-space-lg) !important;
    padding-bottom: var(--section-space-lg) !important;
}

/* Generic dynamic landmark detail */
.landmark-intro,
.landmark-story,
.landmark-highlights,
.landmark-gallery,
.landmark-timeline,
.landmark-location,
.landmark-products,
.landmark-related {
    padding-top: var(--section-space-lg) !important;
    padding-bottom: var(--section-space-lg) !important;
}

/* Product page */
.product-story,
.product-details,
.product-features,
.product-gallery,
.product-related {
    padding-top: var(--section-space-lg) !important;
    padding-bottom: var(--section-space-lg) !important;
}

/* Garni editorial page
   IMPORTANT: Garni has its own cinematic layout in garni.css.
   Do not apply global section padding here; it breaks full-bleed
   landscape sections and overrides page-specific spacing. */

/* Comfortable readable copy throughout editorial pages */
.story-page p,
.landmark-page p,
.landmark-detail-page p,
.product-page p {
    font-size: max(16px, 1rem);
    line-height: 1.7;
}

@media (max-width: 1024px) {
    :root {
        --section-space-xl: 88px;
        --section-space-lg: 78px;
        --section-space-md: 68px;
    }
}

@media (max-width: 767px) {
    :root {
        --section-space-xl: 68px;
        --section-space-lg: 62px;
        --section-space-md: 56px;
    }
}


/* =========================================================
   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;
}

/* ==========================================================
   STEP 6 — DESKTOP / MOBILE LAYOUT AUDIT
   2026-08-23
========================================================== */

/* Prevent decorative/media elements from creating horizontal scroll. */
html, body { max-width: 100%; overflow-x: clip; }
img, video, svg, canvas { max-width: 100%; }

/* Story page: original cinematic values were visually too tall on
   standard laptop/desktop viewports. Keep the composition, reduce air. */
.story-hero,
.story-hero-inner { min-height: clamp(620px, 72vh, 760px) !important; }
.story-hero-copy { padding-top: 105px !important; padding-bottom: 64px !important; }
.story-idea,
.story-philosophy,
.story-vision { padding-top: 104px !important; padding-bottom: 112px !important; }
.story-love,
.story-love-inner { min-height: clamp(560px, 66vh, 680px) !important; }
.story-cta { min-height: 0 !important; padding-top: 104px !important; padding-bottom: 112px !important; }

/* Contact: keep the final compact version aligned with the rest of site. */
.contact-cta { padding-top: 88px !important; padding-bottom: 88px !important; }

@media (max-width: 1024px) {
    .story-hero,
    .story-hero-inner { min-height: 650px !important; }
    .story-hero-copy { padding-top: 96px !important; padding-bottom: 58px !important; }
    .story-idea,
    .story-philosophy,
    .story-vision { padding-top: 88px !important; padding-bottom: 94px !important; }
    .story-love,
    .story-love-inner { min-height: 580px !important; }
    .story-cta { padding-top: 88px !important; padding-bottom: 94px !important; }
}

@media (max-width: 767px) {
    /* Never let fixed desktop heights create empty phone screens. */
    .story-hero,
    .story-hero-inner,
    .story-love,
    .story-love-inner,
    .story-cta { min-height: auto !important; }
    .story-hero-copy { width: 100% !important; padding-top: 112px !important; padding-bottom: 62px !important; }
    .story-idea,
    .story-philosophy,
    .story-vision,
    .story-love,
    .story-cta { padding-top: 68px !important; padding-bottom: 72px !important; }
    .contact-cta { padding-top: 68px !important; padding-bottom: 68px !important; }

    /* Long labels/emails must wrap instead of widening the viewport. */
    .contact-detail a,
    .footer-email,
    .landmark-page a { overflow-wrap: anywhere; }
}