/* vup_2018_child — css/pages/location-single.css
 * Single Location: clean center card, tidy type, safe with your .vu-grid shell.
 * Uses "About" page styling (cloud/glass) with semantic class names.
 */

/* ===== Tokens (Copied from about.css) ===== */
body.single-location {
  --vu-sun-gold: #ffd900;
  --vu-night: #050713;
  --vu-space: #0f1834;
  --vu-ink: #1f2c57;
  --vu-slate: #141d3b;
  --vu-fog: #f4f6ff;
  --vu-cloud: #fffef7;
  --vu-paper: #ffffff;
  --vu-muted: #8d93b8;
  --vu-highlight: #fff173;
  --vu-pill: #fff8c3;
  --vu-pill-hover: #ffe347;
  --vu-shadow-strong: 0 40px 80px rgba(5, 7, 19, 0.45);
  --vu-shadow-soft: 0 20px 40px rgba(5, 7, 19, 0.18);
  --vu-card-shadow: 0 30px 60px rgba(5, 7, 19, 0.18);
  --vu-border-soft: rgba(255, 255, 255, 0.18);
  --vu-about-glass: rgba(255, 255, 255, 0.82);
  --vu-about-glass-soft: rgba(255, 255, 255, 0.72);
  --vu-about-glass-shadow: 0 20px 45px rgba(5, 7, 19, 0.12);
  --vu-about-glass-border: 1px solid rgba(255, 255, 255, 0.45);
  --vu-about-layer-offset: clamp(10px, 1.5vw, 18px);

  /* Legacy tokens mapped to new palette where appropriate */
  --loc-accent: var(--vu-sun-gold);
  --rule: 1px solid rgba(0, 0, 0, .08);
}

/* ===== Layout: Cloud Background Layer ===== */
.vu-location-layer {
  position: relative;
  padding: clamp(4px, 2vw, 12px) 0 clamp(32px, 5vw, 60px);
  display: grid;
}

.vu-location-layer::before {
  content: "";
  position: absolute;
  inset: clamp(-12px, 1vw, 6px) clamp(10px, 4vw, 18px) clamp(10px, 2vw, 20px);
  width: min(88%, 1050px);
  margin: 10px auto;
  border-radius: 44px;
  background: var(--vu-cloud);
  box-shadow: var(--vu-shadow-strong);
  z-index: 0;
}

.vu-location-card-wrapper {
  border-radius: 30px;
  padding: clamp(0px, 0vw, 0px);
  position: relative;
  z-index: 1;
  margin-bottom: clamp(24px, 3vw, 36px);
}

.vu-location-intro {
  margin-bottom: clamp(24px, 3vw, 36px);
  color: var(--vu-ink);
  font-size: 1.1rem;
  line-height: 1.6;
}

.vu-location-featured-wrapper {
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* ===== Layout: Glass Card ===== */
.vu-location-card {
  position: relative;
  border-radius: 18px;
  padding: clamp(20px, 3vw, 36px);
  background: var(--vu-paper);
  box-shadow: var(--vu-shadow-soft);
  border: 1px solid var(--vu-border-soft);
}

.vu-location-card::before {
  content: "";
  position: absolute;
  inset: calc(var(--vu-about-layer-offset) * -1);
  border-radius: 22px;
  background: var(--vu-about-glass-soft);
  box-shadow: var(--vu-about-glass-shadow);
  border: var(--vu-about-glass-border);
  z-index: 0;
}

.vu-location-card>* {
  position: relative;
  z-index: 1;
}

/* ===== Typography & Inner Content ===== */
body.single-location #primary h1.entry-title {
  margin: 0 0 clamp(14px, 2vw, 24px);
  line-height: 1.1;
  letter-spacing: .01em;
  border-bottom: var(--rule);
  padding-bottom: clamp(10px, 1.6vw, 16px);
}

body.single-location #primary .cms-content h2,
body.single-location #primary .cms-content h3 {
  margin: 1.2em 0 .5em;
  line-height: 1.2;
}

body.single-location #primary .cms-content p {
  margin: .85em 0;
  line-height: 1.65;
}

body.single-location #primary .cms-content a {
  color: inherit;
  text-decoration-thickness: .1em;
  text-underline-offset: .18em;
}

body.single-location #primary .cms-content a:hover {
  background: rgba(0, 0, 0, .04);
}

/* Lists */
body.single-location #primary .cms-content ul,
body.single-location #primary .cms-content ol {
  margin: .8em 0 .8em 1.2em;
}

body.single-location #primary .cms-content li {
  margin: .25em 0;
}

/* Horizontal rules */
body.single-location #primary hr {
  border: none;
  border-top: var(--rule);
  margin: 1.5rem 0;
}

/* ===== Media / Gallery ===== */
body.single-location #primary .wp-block-image,
body.single-location #primary figure {
  margin: 1rem 0;
}

body.single-location #primary img {
  border-radius: 10px;
  display: block;
  height: auto;
  max-width: 100%;
}

/* Core gallery and classic .gallery */
body.single-location #primary .wp-block-gallery,
body.single-location #primary .gallery {
  margin: 1rem 0;
  gap: 10px;
}

body.single-location #primary .wp-block-gallery .wp-block-image img {
  border-radius: 10px;
}

/* ===== Map block (your template uses .mapping) ===== */
body.single-location #primary .mapping {
  width: 100%;
  min-height: 320px;
  border-radius: 10px;
  border: 2px solid var(--loc-accent);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
  overflow: hidden;
  margin: 1rem 0;
}

/* ===== Fun Facts ===== */
.location-funfacts {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--vu-fog);
  border-radius: 12px;
  border: 1px solid rgba(4, 25, 78, 0.08);
}

.location-funfacts h2 {
  margin-top: 0 !important;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vu-slate);
}

.location-funfacts ol {
  margin: 0 0 0 1.2rem;
  padding: 0;
}

.location-funfacts li {
  margin-bottom: 0.5rem;
}

/* ===== Sidebar niceties (left/right) ===== */
#left-sidebar .vu-widget.vu-contact,
#right-sidebar .vu-widget.vu-contact {
  position: sticky;
  top: calc(var(--vu-hdr-h, 128px) + 16px);
}

/* Ensure galleries/widgets do not cap width */
#primary .wp-block-gallery,
#primary .gallery {
  max-width: none;
}