/* Mobile stability patch — loaded last; desktop layout intentionally untouched. */
@media (max-width: 768px) {
  html, body { max-width:100%; overflow-x:hidden; }
  img, video, svg, canvas { max-width:100%; }

  /* Header: keep brand and actions inside narrow screens. */
  .header-container { width:100%; max-width:100%; box-sizing:border-box; gap:10px; }
  .logo, .brand, .header-logo { min-width:0; }
  .logo-text, .brand-text { min-width:0; }
  .logo-title { white-space:nowrap; font-size:clamp(13px,4vw,16px); }
  .logo-subtitle { white-space:nowrap; font-size:clamp(8px,2.5vw,10px); letter-spacing:.12em; }
  .header-actions { flex:0 0 auto; gap:8px; }
  .lang-btn { width:38px; height:38px; flex:0 0 38px; }

  /* Global content: long text/links must never force horizontal scroll. */
  p, h1, h2, h3, a, span { overflow-wrap:break-word; }
  .container, .container-sm, .container-lg { max-width:100%; box-sizing:border-box; }

  /* Landmark/location pages: stack text and map and remove desktop offsets. */
  .location-container,
  .landmark-location-grid,
  .ld-location-grid {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:42px !important;
    align-items:start !important;
  }
  .location-info,
  .landmark-location-copy,
  .google-map-link,
  .garni-map-link { width:100% !important; max-width:100% !important; min-width:0 !important; }
  .garni-location .location-details { transform:none !important; }
  .google-map-link { align-self:stretch !important; margin:0 !important; }
  .google-map-link > .garni-map,
  .garni-map,
  .landmark-map-placeholder { width:100% !important; max-width:100% !important; }
  .coordinates, .landmark-coordinates { width:100%; }

  /* Decorative map labels stay inside the map on phones. */
  .marker-label { max-width:calc(100vw - 100px); white-space:normal; }
  .map-country { max-width:90%; overflow:hidden; }
  .map-region, .map-scale, .map-number { max-width:80%; }

  /* Story: neutralise oversized desktop decorative layers. */
  .story-page img { height:auto; }
  .story-hero-content, .story-copy, .story-text { max-width:100%; }
  .story-hero h1 { overflow-wrap:normal; }

  /* Product/gallery cards: preserve aspect ratio and avoid fixed-width overflow. */
  .product-page img, .product-gallery img, #galleryGrid img { width:100%; height:100%; object-fit:cover; }
  .product-container, .product-grid, .product-info, .product-visual { min-width:0; max-width:100%; }
}

@media (max-width: 520px) {
  .header-container { padding-left:14px !important; padding-right:14px !important; }
  .logo img { width:46px !important; height:46px !important; }
  .header-actions { gap:5px; }
  .lang-btn { width:36px; height:36px; flex-basis:36px; }

  .location-container { width:calc(100% - 32px) !important; }
  .location-info h2, .landmark-location-copy h2 { font-size:clamp(42px,13vw,54px) !important; }
  .garni-map, .landmark-map-placeholder { height:clamp(340px,105vw,430px) !important; min-height:0 !important; }
  .marker-label { left:18px !important; min-width:0 !important; max-width:135px !important; }
  .map-country { font-size:clamp(34px,13vw,52px) !important; letter-spacing:.08em !important; }

  .story-hero h1 { font-size:clamp(50px,15vw,72px) !important; line-height:.94 !important; }
  .story-hero { min-height:580px !important; }

  #galleryGrid .gallery-item { min-height:260px !important; }
}

@media (max-width: 380px) {
  .logo-title { font-size:13px !important; }
  .logo-subtitle { font-size:8px !important; letter-spacing:.08em !important; }
  .location-container { width:calc(100% - 24px) !important; }
  .garni-map, .landmark-map-placeholder { height:350px !important; }
  .map-scale { left:14px !important; bottom:14px !important; }
  .map-number { right:14px !important; bottom:14px !important; }
}

/* 2026-08-14 narrow-phone hardening */
@media (max-width: 768px) {
  /* The real catalogue control is .catalogue-btn (not .contact-btn). */
  .site-header .catalogue-btn { display:none !important; }
  .site-header .header-container { justify-content:space-between !important; }
  .site-header .logo { flex:1 1 auto; max-width:calc(100% - 48px); gap:10px !important; }
  .site-header .logo-text { overflow:hidden; }
  .site-header .header-actions { margin-left:auto; }

  /* Give hero copy a reliable safe area on every phone width. */
  .hero .hero-container {
    width:100% !important;
    max-width:100% !important;
    padding:112px 20px 64px !important;
    box-sizing:border-box !important;
  }
  .hero .hero-content { width:100%; max-width:560px; min-width:0; }
  .hero .hero-title { font-size:clamp(48px,14vw,64px) !important; line-height:.94; }
  .hero .hero-subtitle { font-size:clamp(26px,8vw,30px) !important; }
  .hero .hero-description { width:100%; max-width:520px; margin-left:auto; margin-right:auto; font-size:16px; line-height:1.65; }
  .hero .hero-buttons { width:100%; gap:14px; }
  .hero .btn { max-width:100%; box-sizing:border-box; }
}

@media (max-width: 430px) {
  .site-header .header-container { padding:12px 14px !important; }
  .site-header.scrolled .header-container { padding:10px 14px !important; }
  .site-header .logo img { width:42px !important; height:42px !important; }
  .site-header .logo-title { font-size:12px !important; letter-spacing:1.15px !important; }
  .site-header .logo-subtitle { font-size:7px !important; letter-spacing:1.05px !important; margin-top:2px; }
  .site-header .lang-btn { width:34px !important; height:34px !important; flex-basis:34px !important; font-size:11px; }
  .hero .hero-container { padding-left:18px !important; padding-right:18px !important; }
}

@media (max-width: 350px) {
  .site-header .header-container { padding-left:10px !important; padding-right:10px !important; }
  .site-header .logo { gap:7px !important; }
  .site-header .logo img { width:38px !important; height:38px !important; }
  .site-header .logo-title { font-size:11px !important; letter-spacing:.8px !important; }
  .site-header .logo-subtitle { font-size:6.5px !important; letter-spacing:.7px !important; }
  .hero .hero-container { padding-left:14px !important; padding-right:14px !important; }
  .hero .hero-title { font-size:46px !important; }
  .hero .hero-description { font-size:15px !important; }
}


/* Fixed-header anchor safety (desktop + mobile). */
#collections, #featuredCarouselSection, #story, #contact {
  scroll-margin-top: 120px;
}
@media (max-width: 768px) {
  #collections, #featuredCarouselSection, #story, #contact {
    scroll-margin-top: 88px;
  }
}

/* 2026-08-21 — Crystal Collection mockups: show full artwork on phones */
@media (max-width: 768px) {
  [class$="-mockup-wrap"] {
    width: 94% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 28px auto 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: #050505 !important;
  }

  [class$="-mockup"] {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}


/* 2026-08-23 — site-wide responsive consistency audit */
@media (max-width: 768px) {
  main section { max-width: 100%; overflow-x: clip; }
  .garni-container, .landmarks-container, .story-container, .product-container, .gallery-container {
    width: calc(100% - 36px) !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important;
  }
  .garni-gallery-grid, .gallery-grid, .product-gallery, .landmarks-grid { gap: 18px !important; }
  .garni-gallery-grid img, .gallery-grid img { display:block; width:100%; }
  .location-container { gap: 34px !important; }
  .garni-map-link { display:block !important; overflow:hidden !important; }
  .landmark-category-toolbar { align-items:flex-start; flex-direction:column; gap:14px; }
}
@media (max-width: 430px) {
  .garni-container, .landmarks-container, .story-container, .product-container, .gallery-container { width: calc(100% - 28px) !important; }
  .garni-gallery-grid, .gallery-grid, .product-gallery, .landmarks-grid { gap: 14px !important; }
}

/* 2026-08-23 — Masterpiece section rhythm: reduce excess space before Interesting Facts */
@media (min-width: 1101px) {
  .garni-details.garni-facts,
  .garni-facts {
    padding-top: 48px;
  }
}

@media (min-width: 641px) and (max-width: 1100px) {
  .garni-details.garni-facts,
  .garni-facts {
    padding-top: 44px;
  }
}

@media (max-width: 640px) {
  .garni-details.garni-facts,
  .garni-facts {
    padding-top: 34px;
  }
}

@media (max-width: 380px) {
  .garni-details.garni-facts,
  .garni-facts {
    padding-top: 30px;
  }
}


/* =========================================================
   2026-08-23 — FINAL MOBILE LANDMARK LAYOUT AUDIT
   Loaded last. Typography/fonts and desktop layout untouched.
========================================================= */
@media (max-width: 760px) {
  /* Shared Masterpiece pages: prevent desktop fixed heights from creating
     the large empty bands seen between timeline/facts/location sections. */
  .garni-about,
  .garni-glance,
  .garni-details,
  .garni-history,
  .garni-location,
  .garni-collection,
  .garni-about .container,
  .garni-glance .container,
  .garni-details .container,
  .garni-history .container,
  .garni-location .container,
  .garni-collection .container,
  .history-grid,
  .history-item,
  .facts-grid,
  .fact-item,
  .fact-item-wide,
  .location-container,
  .location-info {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Timeline: keep each entry in normal document flow. */
  .history-grid {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .history-item {
    position: relative !important;
    margin: 0 !important;
    padding: 34px 22px !important;
  }
  .history-item:last-child {
    padding-bottom: 24px !important;
  }
  .history-number,
  .history-year,
  .history-item h3,
  .history-item p {
    position: static !important;
    transform: none !important;
  }

  /* Interesting Facts: number + label must never overlap on narrow phones. */
  .garni-facts .fact-item,
  .garni-facts .fact-item-wide {
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    padding-top: 28px !important;
    padding-bottom: 30px !important;
  }
  .garni-facts .fact-number,
  .garni-facts .fact-label {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
  }
  .garni-facts .fact-number {
    margin: 0 0 10px !important;
  }
  .garni-facts .fact-label {
    margin: 0 0 12px !important;
    line-height: 1.35 !important;
  }

  /* Remove the excessive mobile gap before Location. */
  .garni-history {
    padding-bottom: 46px !important;
  }
  .garni-location {
    margin-top: 0 !important;
    padding-top: 54px !important;
    padding-bottom: 68px !important;
  }

  /* Detail/image cards: avoid inherited desktop offsets and clipping. */
  .garni-details .details-grid,
  .garni-details .detail-grid,
  .garni-details .details-cards {
    max-width: 100% !important;
  }
  .garni-details article,
  .garni-details .detail-card {
    min-width: 0 !important;
  }

  /* Location copy/map should always follow one another naturally. */
  .location-container {
    align-items: start !important;
  }
  .location-info {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

@media (max-width: 430px) {
  .history-item {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .garni-history {
    padding-top: 62px !important;
    padding-bottom: 38px !important;
  }
  .garni-location {
    padding-top: 46px !important;
  }
}