/* Presentation-only layer for the existing Makkah and Madinah guide routes. */
.guide-city {
  min-height: 100vh;
  padding-top: clamp(3.5rem, 8vw, 6.5rem) !important;
}

.guide-city::before {
  inset: 0 -5vw auto !important;
  height: 35rem !important;
  opacity: .31 !important;
  mask-image: linear-gradient(to bottom, #000 0%, #000b 49%, transparent 100%) !important;
}

.guide-city .eyebrow {
  color: #f0cf7b;
  text-shadow: 0 2px 16px #000d;
}

.guide-city h1 {
  color: #fff0bf;
  text-shadow: 0 2px 26px #000d;
}

.guide-city .lead { max-width: 780px; color: #e0d6c8; }

.guide-city section {
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid #dfbf6b53;
  background: linear-gradient(135deg, #101a1fe8, #131813df);
  box-shadow: 0 18px 42px #00000029, inset 0 1px #ffffff0b;
  backdrop-filter: blur(5px);
}

.guide-city section.status {
  border-left: 3px solid #f0c96c;
  border-color: #e3c3747d;
  background: linear-gradient(110deg, #263127eb, #232016e4);
}

.guide-city .grid > a {
  border-color: #dfbf6b4d !important;
  box-shadow: inset 0 1px #ffffff0a;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.guide-city .grid > a::before {
  background: linear-gradient(145deg, #07101759, #090b0ff0 82%) !important;
}

.guide-city .grid > a strong { color: #ffdfa0; }
.guide-city .grid > a small { color: #ded7ca; }

@media (hover: hover) {
  .guide-city .grid > a:hover {
    transform: translateY(-4px);
    border-color: #f7d984 !important;
    box-shadow: 0 17px 32px #0008, inset 0 1px #ffffff15;
  }
}

@media (max-width: 700px) {
  .guide-city { padding-top: 3rem !important; }
  .guide-city::before { height: 29rem !important; opacity: .25 !important; }
  .guide-city section { padding: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-city .grid > a { transition: none; }
}