/*
  Location page styles (/satellite-imagery/:country/:city) + the location
  index page (/satellite-imagery). Loaded only on those routes.
  Namespaced under .xrt-location- so nothing here can leak into, or be
  affected by, questionnaire-v6.html, Leaflet, or the header/footer.
  Colors/fonts/radii reuse the --xrt-* custom properties defined on .xrt-scope
  in layout.css (same palette as the header/footer/blog/hero) — no new tokens.
*/

.xrt-location-page {
  font-family: var(--xrt-font-b);
  color: var(--xrt-ink);
}

.xrt-location-page,
.xrt-location-page * {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------- */
/* Hero (scoped override — hero.css itself stays shared 1:1 with the       */
/* homepage; location-page copy runs longer than the homepage's, and the   */
/* shared component overlays __content absolutely on top of a fixed-height */
/* __media box, so long copy overflows the box both upward (eyebrow rides  */
/* into the breadcrumb above) and downward (buttons spill past the hero    */
/* into the next section). Fix: flip which element is absolutely           */
/* positioned — __media fills the hero as a full-bleed background, and     */
/* __content goes back into normal flow so its own natural height (with a  */
/* min-height floor for short copy) is what sizes the hero section.        */
/* ---------------------------------------------------------------------- */

.xrt-location-page .xrt-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  min-height: 0;
}

.xrt-location-page .xrt-hero__content {
  position: relative;
  inset: auto;
  /* Floor only — actual height still grows past this for longer copy
     (that's what the media/content flip above is for). Sized off vh, not a
     flat px value, so it reads as a full, immersive mobile hero like the
     homepage's and Dubai's, not a cramped strip. */
  min-height: clamp(520px, 85vh, 760px);
  padding: 28px 20px 32px;
  gap: 2px;
  justify-content: flex-end;
}

.xrt-location-page .xrt-hero__desc {
  margin-top: 14px;
}

.xrt-location-page .xrt-hero__actions {
  margin-top: 24px;
  margin-bottom: 4px;
}

@media (min-width: 480px) {
  .xrt-location-page .xrt-hero__content {
    min-height: clamp(480px, 75vh, 700px);
  }
}

@media (min-width: 768px) {
  .xrt-location-page .xrt-hero__content {
    position: relative;
    inset: auto;
    justify-content: center;
    min-height: 480px;
    padding: clamp(36px, 5vw, 64px) clamp(32px, 5vw, 56px);
    width: min(52%, 660px);
  }

  .xrt-location-page .xrt-hero__desc {
    margin-top: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .xrt-location-page .xrt-hero__content {
    width: min(58%, 560px);
  }
}

/* ---------------------------------------------------------------------- */
/* Breadcrumb                                                              */
/* ---------------------------------------------------------------------- */

.xrt-location-breadcrumb {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 24px 0;
  font-size: 13px;
  color: #5b6b63;
}

.xrt-location-breadcrumb a {
  color: #5b6b63;
  text-decoration: none;
}

.xrt-location-breadcrumb a:hover {
  color: var(--xrt-teal);
  text-decoration: underline;
}

.xrt-location-breadcrumb__current {
  color: var(--xrt-ink);
  font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Map/portal mount                                                        */
/* ---------------------------------------------------------------------- */

/* No fixed height here — unlike the old <iframe>, this mount now holds the
   portal's real markup inline, and its height comes from that markup's own
   natural layout (sticky map card beside a variably-tall form/results
   panel), not a guessed viewport box. */
#xrt-location-portal {
  display: block;
  border-bottom: 1px solid var(--xrt-border);
}

/* Shown in raw source before XRTPortalLoader.injectPortal() replaces it —
   the map/form workspace itself only exists after that JS runs. */
.xrt-portal-loading {
  display: grid;
  place-items: center;
  min-height: 60vh;
  background: #0b1713;
  color: #dff7ee;
  font-family: var(--xrt-font-b);
  font-size: 14px;
}

/* ---------------------------------------------------------------------- */
/* Numbered steps ("How to Download...") — same type/spacing/width as the   */
/* other .xrt-location-section content, not the portal's own styling.      */
/* ---------------------------------------------------------------------- */

.xrt-location-steps {
  list-style: none;
  counter-reset: xrt-step;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.xrt-location-steps li {
  counter-increment: xrt-step;
  display: flex;
  gap: 14px;
  font-size: 15.5px;
  line-height: 1.7;
  color: #33413c;
}

.xrt-location-steps li::before {
  content: counter(xrt-step);
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--xrt-lime);
  color: var(--xrt-ink);
  font-family: var(--xrt-font-h);
  font-weight: 800;
  font-size: 13px;
  display: grid;
  place-items: center;
}

/* ---------------------------------------------------------------------- */
/* Content sections                                                        */
/* ---------------------------------------------------------------------- */

.xrt-location-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px;
}

.xrt-location-section + .xrt-location-section {
  border-top: 1px solid var(--xrt-border-light);
}

.xrt-location-section__title {
  font-family: var(--xrt-font-h);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--xrt-ink);
  margin: 0 0 16px;
}

.xrt-location-section p {
  font-size: 15.5px;
  line-height: 1.7;
  color: #33413c;
  margin: 0 0 14px;
}

.xrt-location-section p:last-child {
  margin-bottom: 0;
}

.xrt-location-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.xrt-location-list li {
  font-size: 15px;
  line-height: 1.65;
  color: #33413c;
  padding-left: 22px;
  position: relative;
}

.xrt-location-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--xrt-lime);
}

.xrt-location-list li strong {
  color: var(--xrt-ink);
  font-weight: 700;
}

/* ---------------------------------------------------------------------- */
/* Gallery                                                                  */
/* ---------------------------------------------------------------------- */

.xrt-location-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 640px) {
  .xrt-location-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

.xrt-location-gallery figure {
  margin: 0;
  background: #fff;
  border: 1px solid var(--xrt-border);
  border-radius: var(--xrt-r-lg);
  overflow: hidden;
  box-shadow: var(--xrt-shadow-sm);
}

.xrt-location-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--xrt-cream);
}

.xrt-location-gallery figcaption {
  padding: 12px 16px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #5b6b63;
}

/* ---------------------------------------------------------------------- */
/* FAQ                                                                      */
/* ---------------------------------------------------------------------- */

.xrt-location-faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.xrt-location-faq details {
  border: 1px solid var(--xrt-border);
  border-radius: var(--xrt-r-md);
  padding: 0;
  background: #fff;
}

.xrt-location-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 44px 16px 18px;
  font-family: var(--xrt-font-h);
  font-weight: 700;
  font-size: 15px;
  color: var(--xrt-ink);
  position: relative;
}

.xrt-location-faq summary::-webkit-details-marker {
  display: none;
}

.xrt-location-faq summary::after {
  content: '+';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: var(--xrt-teal);
}

.xrt-location-faq details[open] summary::after {
  content: '\2212';
}

.xrt-location-faq__answer {
  padding: 0 18px 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #33413c;
}

/* ---------------------------------------------------------------------- */
/* Location index page (/satellite-imagery)                                */
/* ---------------------------------------------------------------------- */

.xrt-location-head {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 8px;
}

.xrt-location-head__eyebrow {
  font-family: var(--xrt-font-h);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--xrt-teal);
  margin: 0 0 10px;
}

.xrt-location-head__title {
  font-family: var(--xrt-font-h);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--xrt-ink);
  margin: 0 0 12px;
}

.xrt-location-head__sub {
  font-size: 15px;
  color: #5b6b63;
  max-width: 620px;
  margin: 0;
  line-height: 1.6;
}

.xrt-location-grid-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 80px;
}

.xrt-location-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

@media (max-width: 1199px) {
  .xrt-location-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .xrt-location-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.xrt-location-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border: 1px solid var(--xrt-border);
  border-radius: var(--xrt-r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--xrt-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .xrt-location-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--xrt-shadow-md);
  }
}

.xrt-location-card:focus-visible {
  outline: 2px solid var(--xrt-teal);
  outline-offset: 2px;
}

.xrt-location-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--xrt-cream);
  overflow: hidden;
  flex-shrink: 0;
}

.xrt-location-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.xrt-location-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 16px 18px 18px;
  gap: 6px;
}

.xrt-location-card__badge {
  align-self: flex-start;
  font-family: var(--xrt-font-h);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b6b63;
  margin: 0 0 2px;
}

.xrt-location-card__title {
  font-family: var(--xrt-font-h);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--xrt-ink);
  margin: 0;
}