/* ==========================================================================
   free-guide theme — "Free Things to Do in {city}" evergreen guide.
   Daylight Buffalo look: the site's photos, Playfair Display + Manrope,
   BuffaloVibe orange/blue/magenta, grain-silo section tiles, ticket stubs.
   Section accents arrive per section as --sec / --sec-tint.
   ========================================================================== */

:root {
  --fg-bg:      #f7f8fa;
  --fg-card:    #ffffff;
  --fg-sky:     #eaf4fb;
  --fg-ink:     #1c2f42;
  --fg-body:    #3a4a5a;
  --fg-muted:   #5f6b76;
  --fg-line:    #e2e8f0;
  --fg-line-2:  #eef0f3;
  --fg-dash:    #d7dde5;
  --fg-blue:    #0f4d88;
  --fg-orange:  #dd4814;
  --fg-orange-2:#f6a03c;
  --fg-cta:     #c03800;
  --fg-magenta: #e0137d;
  --fg-cyan:    #2a95cf;
  --fg-max:     1160px;
  --fg-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --fg-sans:    Manrope, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --fg-shadow:  0 8px 24px rgba(28, 47, 66, 0.06);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.fg-pop-open { overflow: hidden; }

body {
  margin: 0;
  background: var(--fg-bg);
  color: var(--fg-ink);
  font-family: var(--fg-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--fg-blue); }
a:hover { color: var(--fg-ink); }
:focus-visible { outline: 3px solid var(--fg-orange-2); outline-offset: 2px; }

.fg-skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--fg-ink); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.fg-skip:focus { top: 12px; color: #fff; }

.fg-h2 { margin: 0; font-family: var(--fg-serif); font-size: clamp(30px, 4vw, 44px); font-weight: 900; line-height: 1.08; letter-spacing: -0.01em; color: var(--fg-ink); }
.fg-rule { width: 88px; height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--fg-orange), var(--fg-orange-2)); }

.fg-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px;
  border: 0; border-radius: 999px; background: var(--fg-cta); color: #fff;
  font-family: var(--fg-sans); font-size: 15px; font-weight: 800; text-decoration: none; cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.fg-btn:hover { background: #9e2e00; color: #fff; transform: translateY(-1px); }
.fg-btn-soft { background: var(--fg-sky); color: var(--fg-blue); }
.fg-btn-soft:hover { background: #d6e9f6; color: var(--fg-ink); }

/* ── Top bar ── */
.fg-top { background: #fff; border-bottom: 1px solid var(--fg-line); }
.fg-top-inner { max-width: var(--fg-max); margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.fg-brand { display: inline-flex; align-items: center; font-size: 24px; font-weight: 800; line-height: 1; color: var(--fg-ink); text-decoration: none; }
.fg-brand img { display: block; height: 44px; width: auto; }
.fg-crumbs { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--fg-muted); }
.fg-crumbs a { color: var(--fg-muted); text-decoration: none; }
.fg-crumbs a:hover { color: var(--fg-blue); }
.fg-crumbs b { color: var(--fg-ink); }
.fg-back { font-size: 14px; font-weight: 700; text-decoration: none; }

/* ── Sticky section bar ── */
.fg-jump-bar { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--fg-line); }
.fg-jump { max-width: var(--fg-max); margin: 0 auto; padding: 0 20px; display: flex; overflow-x: auto; scrollbar-width: none; }
.fg-jump::-webkit-scrollbar { display: none; }
.fg-jump a {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap;
  padding: 13px 14px 10px; border-bottom: 3px solid transparent;
  font-size: 14px; font-weight: 700; color: var(--fg-muted); text-decoration: none;
}
.fg-jump a:hover { color: var(--fg-ink); }
.fg-jump a.is-on { color: var(--fg-ink); border-bottom-color: var(--fg-orange); }
.fg-dot { width: 9px; height: 9px; border-radius: 50%; }
.fg-dot-map { background: var(--fg-cyan); }
.fg-dot-faq { background: var(--fg-orange-2); }

/* ── Hero ── */
.fg-hero { background: var(--fg-sky); }
.fg-hero-inner { max-width: var(--fg-max); margin: 0 auto; padding: 56px 32px 72px; display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }
.fg-hero-copy { flex: 1 1 460px; min-width: 0; }
.fg-kicker { font-size: 13px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-cta); margin-bottom: 14px; }
.fg-h1 { margin: 0 0 20px; font-family: var(--fg-serif); font-size: clamp(40px, 6vw, 64px); font-weight: 900; line-height: 1.02; letter-spacing: -0.02em; color: var(--fg-ink); }
.fg-h1 em { color: var(--fg-blue); }
.fg-dek { margin: 22px 0; max-width: 560px; font-family: var(--fg-serif); font-style: italic; font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; line-height: 1.45; color: var(--fg-body); }
.fg-byline { margin: 0; font-size: 14px; font-weight: 600; color: var(--fg-muted); }
.fg-hero-photo { flex: 1 1 440px; min-width: 0; position: relative; }
.fg-hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; box-shadow: 0 20px 48px rgba(15, 77, 136, 0.18); }
.fg-hero-badge {
  position: absolute; left: -20px; bottom: 28px; display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 14px; padding: 14px 18px; box-shadow: 0 10px 28px rgba(28, 47, 66, 0.16);
}
.fg-hero-badge-big { font-family: var(--fg-serif); font-size: 40px; font-weight: 900; line-height: 1; color: var(--fg-cta); }
.fg-hero-badge-text { font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--fg-ink); }
.fg-hero-badge-text small { display: block; font-size: 13px; font-weight: 600; color: var(--fg-muted); }

/* ── Stat row ── */
.fg-stats-wrap { max-width: var(--fg-max); margin: -30px auto 0; padding: 0 32px; position: relative; }
.fg-stats {
  margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  background: #fff; border: 1px solid var(--fg-line); border-radius: 16px; box-shadow: var(--fg-shadow);
}
.fg-stats > div { padding: 18px 24px; display: flex; flex-direction: column-reverse; gap: 2px; border-left: 1px solid var(--fg-line-2); }
.fg-stats > div:first-child { border-left: 0; }
.fg-stats dd { margin: 0; font-family: var(--fg-serif); font-size: 32px; font-weight: 900; line-height: 1.1; }
.fg-stats dt { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }

/* ── Main ── */
.fg-main { max-width: var(--fg-max); margin: 0 auto; padding: 0 32px 24px; }
.fg-intro { padding: 52px 0 12px; max-width: 820px; }
.fg-intro p { margin: 0 0 16px; font-size: 18px; line-height: 1.85; color: var(--fg-ink); }
.fg-intro a { color: var(--fg-cta); font-weight: 700; }

/* Section index: a row of grain silos */
.fg-silos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: end; padding-top: 28px; border-bottom: 6px solid #cfd8e3; }
.fg-silo {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 64px 24px 24px; border-radius: 999px 999px 0 0; color: #fff; text-decoration: none;
  transition: transform 0.2s, filter 0.2s;
}
.fg-silo:hover { color: #fff; transform: translateY(-4px); filter: brightness(1.06); }
.fg-silo-num { font-family: var(--fg-serif); font-style: italic; font-size: 50px; font-weight: 900; line-height: 0.9; opacity: 0.9; }
.fg-silo-title { font-family: var(--fg-serif); font-size: 24px; font-weight: 800; line-height: 1.15; }
.fg-silo-count { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.fg-silo-caption { margin: 8px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #69727b; }

/* Map */
.fg-map-section { padding-top: 64px; }
.fg-map-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.fg-legend { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.fg-legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--fg-body); }
.fg-legend span { width: 12px; height: 12px; border-radius: 50%; }
.fg-map { position: relative; aspect-ratio: 1000 / 560; background: #fff; border: 1px solid var(--fg-line); border-radius: 20px; overflow: hidden; box-shadow: var(--fg-shadow); }
.fg-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fg-pin {
  position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; padding: 0;
  border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(28, 47, 66, 0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fg-sans); font-size: 12px; font-weight: 800; color: #fff; cursor: pointer;
  transition: transform 0.15s;
}
.fg-pin:hover, .fg-pin:focus-visible { transform: translate(-50%, -50%) scale(1.25); z-index: 2; }
.fg-map-note { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--fg-muted); }

/* Sections */
.fg-section { padding-top: 72px; }
.fg-section-head { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: stretch; background: var(--sec-tint); border-radius: 20px; }
.fg-section-copy { flex: 1 1 460px; min-width: 0; padding: 36px 40px; position: relative; z-index: 1; }
.fg-section-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sec); }
.fg-section-sub { margin: 6px 0 0; font-family: var(--fg-serif); font-style: italic; font-size: 20px; font-weight: 700; color: var(--sec); }
.fg-section-intro { margin: 18px 0 0; max-width: 640px; font-size: 17px; line-height: 1.8; color: var(--fg-body); }
.fg-section-photo { position: relative; flex: 0 1 300px; min-width: 240px; min-height: 260px; max-height: 340px; margin: 0; }
.fg-section-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fg-section-photo figcaption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); }
.fg-section-photo figcaption button {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border: 0; border-radius: 999px;
  background: rgba(28, 47, 66, 0.78); color: #fff; font-family: var(--fg-sans); font-size: 12px; font-weight: 700;
  text-align: left; cursor: pointer;
}
.fg-section-photo figcaption button:hover { background: var(--sec); }
.fg-section-silos { position: absolute; right: 28px; bottom: 0; width: 240px; height: 130px; color: var(--sec); opacity: 0.16; }

.fg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 24px; }

/* Pick card */
.fg-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--fg-card); border: 1px solid var(--fg-line); border-top: 5px solid var(--sec);
  border-radius: 16px; overflow: hidden; box-shadow: 0 4px 14px rgba(28, 47, 66, 0.05);
  cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
}
.fg-card:hover, .fg-card:focus-within { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(28, 47, 66, 0.12); }
.fg-card:target { box-shadow: 0 0 0 3px var(--sec), 0 14px 30px rgba(28, 47, 66, 0.12); }
.fg-card-main { flex: 1; padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 10px; }
.fg-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fg-card-num { font-family: var(--fg-serif); font-style: italic; font-size: 34px; font-weight: 900; line-height: 0.9; color: var(--sec); }
.fg-card-name { margin: 0; font-family: var(--fg-serif); font-size: 23px; font-weight: 800; line-height: 1.2; }
.fg-card-open { all: unset; cursor: pointer; color: var(--fg-ink); }
.fg-card-open:focus-visible { outline: 3px solid var(--fg-orange-2); outline-offset: 3px; border-radius: 4px; }
.fg-card:hover .fg-card-open { color: var(--sec); }
.fg-card-loc { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--fg-muted); }
.fg-card-copy p, .fg-card-copy { margin: 0; font-size: 15px; line-height: 1.7; color: var(--fg-body); }
.fg-card-copy a { position: relative; z-index: 1; }
.fg-card-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: auto; padding-top: 4px; font-size: 14px; font-weight: 700; }
.fg-card-links a { color: var(--sec); text-decoration: underline; text-underline-offset: 3px; }
.fg-card-links a:hover { color: var(--fg-ink); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.fg-snow { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px; background: var(--fg-sky); color: var(--fg-blue); font-size: 12px; font-weight: 800; white-space: nowrap; }

/* Ticket stub */
.fg-stub { position: relative; display: flex; align-items: stretch; background: var(--sec-tint); border-top: 2px dashed var(--fg-dash); }
.fg-stub::before, .fg-stub::after {
  content: ''; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--fg-bg); border: 1px solid var(--fg-line);
}
.fg-stub::before { left: -10px; }
.fg-stub::after { right: -10px; }
.fg-stub-admit { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 10px 14px 10px 22px; border-right: 2px dashed var(--fg-dash); }
.fg-stub-when { flex: 1; min-width: 0; padding: 10px 22px 10px 14px; display: flex; flex-direction: column; justify-content: center; }
.fg-stub span { font-size: 10px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-muted); }
.fg-stub-admit b { font-family: var(--fg-serif); font-size: 20px; font-weight: 900; line-height: 1; color: var(--sec); }
.fg-stub-when b { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--fg-ink); }

/* Winter callout */
.fg-winter { margin-top: 80px; display: flex; flex-wrap: wrap; background: #fff; border: 1px solid var(--fg-line); border-radius: 20px; overflow: hidden; box-shadow: var(--fg-shadow); }
.fg-winter img { flex: 1 1 380px; min-width: 0; min-height: 300px; max-height: 420px; object-fit: cover; display: block; }
.fg-winter-copy { flex: 1 1 420px; min-width: 0; padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 14px; background: var(--fg-sky); }
.fg-winter-copy p { margin: 0; font-size: 17px; line-height: 1.75; color: var(--fg-body); }
.fg-winter-kicker { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-blue); }
.fg-winter .fg-h2 { font-size: clamp(26px, 3vw, 36px); }
.fg-winter-copy .fg-winter-note { font-size: 14px; font-weight: 700; color: var(--fg-muted); }

/* FAQ */
.fg-faq { padding-top: 80px; }
.fg-faq .fg-rule { margin: 10px 0 16px; width: 72px; height: 4px; }
.fg-faq-list { background: #fff; border: 1px solid var(--fg-line); border-radius: 16px; padding: 4px 28px; }
.fg-faq details { border-bottom: 1px solid var(--fg-line-2); padding: 20px 0; }
.fg-faq details:last-child { border-bottom: 0; }
.fg-faq summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; cursor: pointer; list-style: none; font-family: var(--fg-serif); font-size: 21px; font-weight: 800; line-height: 1.3; color: var(--fg-ink); }
.fg-faq summary::-webkit-details-marker { display: none; }
.fg-faq-plus { flex: 0 0 32px; height: 32px; border-radius: 50%; background: #fbeee8; color: var(--fg-cta); display: flex; align-items: center; justify-content: center; font-family: var(--fg-sans); font-size: 20px; font-weight: 800; transition: transform 0.2s; }
.fg-faq details[open] .fg-faq-plus { transform: rotate(45deg); }
.fg-faq details p { margin: 10px 0 0; max-width: 820px; font-size: 16px; line-height: 1.75; color: var(--fg-body); }

/* Events CTA over the Canalside photo */
.fg-cta { position: relative; margin-top: 64px; min-height: 300px; display: flex; align-items: flex-end; border-radius: 20px; overflow: hidden; background: var(--fg-sky); }
.fg-cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fg-cta-card { position: relative; margin: 24px; max-width: 760px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; background: #fff; border-radius: 16px; padding: 24px 28px; box-shadow: 0 10px 28px rgba(28, 47, 66, 0.18); }
.fg-cta-card > div:first-child { flex: 1 1 240px; min-width: 0; }
.fg-cta-title { margin: 0; font-family: var(--fg-serif); font-size: 26px; font-weight: 900; line-height: 1.2; color: var(--fg-ink); }
.fg-cta-card p { margin: 0; font-size: 15px; color: var(--fg-body); }
.fg-cta-links { display: flex; gap: 10px; flex-wrap: wrap; }

/* Newsletter */
.fg-news { margin-top: 20px; display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #fff6ec; border: 1px solid #f6d7b5; border-radius: 20px; padding: 32px 36px; }
.fg-news > div { flex: 1 1 360px; min-width: 0; }
.fg-news-title { margin: 0 0 6px; font-family: var(--fg-serif); font-size: 30px; font-weight: 900; line-height: 1.2; color: var(--fg-ink); }
.fg-news p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--fg-body); }
.fg-news-form { flex: 1 1 340px; display: flex; flex-direction: column; gap: 4px; }
.fg-news-form label { font-size: 13px; font-weight: 700; color: var(--fg-body); }
.fg-news-row { display: flex; gap: 10px; flex-wrap: wrap; }
.fg-news-row input { flex: 1 1 210px; height: 48px; border: 1px solid #ced4da; border-radius: 12px; padding: 0 16px; font-family: var(--fg-sans); font-size: 16px; color: var(--fg-ink); background: #fff; }
.fg-news-row .fg-btn { min-height: 48px; padding: 0 26px; }
.fg-news-form .fg-news-msg { font-size: 14px; font-weight: 700; color: var(--fg-cta); }

/* "More local guides" strip (shared themes/_more_guides markup) */
.more-guides { max-width: var(--fg-max); margin: 0 auto; padding: 56px 32px 72px; }
.more-guides-weekend-line { margin: 0 0 22px; font-size: 15px; color: var(--fg-body); }
.more-guides-weekend-line a { font-weight: 700; }
.more-guides-label { margin-bottom: 14px; font-family: var(--fg-serif); font-size: 28px; font-weight: 900; color: var(--fg-ink); }
.more-guides-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.more-guide-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--fg-line); border-radius: 16px; text-decoration: none; color: var(--fg-ink); transition: transform 0.2s, box-shadow 0.2s; }
.more-guide-card:hover { transform: translateY(-2px); box-shadow: var(--fg-shadow); color: var(--fg-ink); }
.more-guide-icon { flex: 0 0 44px; height: 44px; border-radius: 12px; background: var(--fg-sky); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.more-guide-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.more-guide-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-cta); }
.more-guide-title { font-family: var(--fg-serif); font-size: 18px; font-weight: 800; line-height: 1.25; }
.more-guide-arrow { color: var(--fg-blue); font-weight: 800; }

/* Footer */
.fg-foot { background: var(--fg-ink); color: #c8d3de; }
.fg-foot-skyline { display: block; width: 100%; height: 60px; background: var(--fg-bg); color: var(--fg-ink); }
.fg-foot-inner { max-width: var(--fg-max); margin: 0 auto; padding: 24px 32px 32px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }

.fg-top-btn { position: fixed; right: 20px; bottom: 20px; z-index: 120; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--fg-ink); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 20px rgba(28, 47, 66, 0.25); }

/* ── Pick popover ── */
.fg-pop { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; }
.fg-pop-backdrop { position: absolute; inset: 0; background: rgba(28, 47, 66, 0.55); backdrop-filter: blur(3px); }
.fg-pop-dialog {
  --sec: var(--fg-blue); --sec-tint: var(--fg-sky);
  position: relative; width: min(980px, 100%); max-height: min(640px, calc(100vh - 40px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 22px; border-top: 5px solid var(--sec);
  box-shadow: 0 30px 70px rgba(28, 47, 66, 0.35);
  animation: fgPopIn 0.22s ease-out;
}
.fg-pop-dialog:focus { outline: none; }
@keyframes fgPopIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fg-pop-dialog { animation: none; } }

.fg-pop-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--fg-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(28, 47, 66, 0.18); }
.fg-pop-close:hover { background: var(--fg-sky); }

/* Two columns: photo + map on the left, details on the right. */
.fg-pop-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 400px minmax(0, 1fr); }
.fg-pop-side { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--sec-tint); overflow-y: auto; }

.fg-pop-head { position: relative; flex: 0 0 auto; height: 130px; overflow: hidden; border-radius: 14px; background: color-mix(in srgb, var(--sec) 12%, #fff); }
.fg-pop-head.has-photo { height: auto; aspect-ratio: 4 / 3; background: var(--fg-line); }
.fg-pop-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fg-pop-head.has-photo .fg-pop-silos { display: none; }
.fg-pop-silos { position: absolute; right: 12px; bottom: 0; width: 300px; height: 112px; color: var(--sec); opacity: 0.28; }

.fg-pop-map { position: relative; flex: 0 0 auto; aspect-ratio: 1000 / 560; background: #fff; border: 1px solid var(--fg-line); border-radius: 14px; overflow: hidden; }
.fg-pop-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fg-pop-map-pin {
  position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%;
  background: var(--sec); border: 3px solid #fff; color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--sec) 25%, transparent);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
}

.fg-pop-body { min-width: 0; overflow-y: auto; padding: 24px 30px 20px; display: flex; flex-direction: column; gap: 14px; }
.fg-pop-kicker { display: flex; align-items: baseline; gap: 12px; padding-right: 48px; }
.fg-pop-num { font-family: var(--fg-serif); font-style: italic; font-size: 40px; font-weight: 900; line-height: 0.9; color: var(--sec); }
.fg-pop-section { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sec); }
.fg-pop-title { margin: 0; font-family: var(--fg-serif); font-size: 28px; font-weight: 900; line-height: 1.15; color: var(--fg-ink); }
.fg-pop-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fg-pop-loc { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--fg-muted); }
.fg-pop-stub { border: 1px solid var(--fg-line); border-top: 2px dashed var(--fg-dash); border-radius: 12px; }
.fg-pop-stub::before, .fg-pop-stub::after { background: #fff; top: 50%; transform: translateY(-50%); }
.fg-pop-copy, .fg-pop-copy p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--fg-body); }
.fg-pop-hours summary { cursor: pointer; font-size: 14px; font-weight: 800; color: var(--fg-blue); }
.fg-pop-hours ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.6; color: var(--fg-body); }
.fg-pop-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.fg-pop-profile { font-size: 14px; font-weight: 800; text-decoration: none; }

.fg-pop-nav { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--fg-line); }
.fg-pop-step { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--fg-sky); color: var(--fg-blue); font-family: var(--fg-sans); font-size: 14px; font-weight: 800; cursor: pointer; }
.fg-pop-step:hover { background: #d6e9f6; }
.fg-pop-count { font-size: 13px; font-weight: 700; color: var(--fg-muted); }

/* ── Phones ── */
@media (max-width: 720px) {
  .fg-top-inner, .fg-hero-inner, .fg-stats-wrap, .fg-main, .more-guides, .fg-foot-inner { padding-left: 16px; padding-right: 16px; }
  .fg-crumbs { display: none; }
  .fg-hero-inner { padding-top: 36px; padding-bottom: 56px; gap: 28px; }
  .fg-hero-badge { left: 12px; bottom: 12px; padding: 10px 14px; }
  .fg-hero-badge-big { font-size: 30px; }
  .fg-stats > div { border-left: 0; border-top: 1px solid var(--fg-line-2); }
  .fg-stats > div:first-child { border-top: 0; }
  .fg-silos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fg-silo { min-height: 200px !important; padding: 48px 16px 18px; }
  .fg-silo-num { font-size: 36px; }
  .fg-silo-title { font-size: 19px; }
  .fg-section-copy { padding: 26px 22px; }
  .fg-section-silos { width: 160px; height: 86px; right: 12px; }
  .fg-section-photo { flex-basis: 100%; min-width: 0; min-height: 200px; }
  .fg-grid { grid-template-columns: minmax(0, 1fr); }
  .fg-winter-copy, .fg-news { padding: 26px 22px; }
  .fg-faq-list { padding: 4px 18px; }
  .fg-faq summary { font-size: 18px; }
  .fg-cta-card { margin: 12px; padding: 20px; }
  .fg-pin { width: 24px; height: 24px; font-size: 10px; } /* WCAG 2.2 minimum target */
  .fg-pop { padding: 0; align-items: flex-end; }
  .fg-pop-dialog { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; }
  /* Stack: photo, details, then the map. */
  .fg-pop-grid { display: flex; flex-direction: column; overflow-y: auto; }
  .fg-pop-side { display: contents; }
  .fg-pop-head { order: 0; margin: 14px 14px 0; height: 96px; }
  .fg-pop-head.has-photo { aspect-ratio: 16 / 9; }
  .fg-pop-body { order: 1; overflow: visible; padding: 18px 18px 8px; }
  .fg-pop-map { order: 2; margin: 4px 18px 18px; }
  .fg-pop-title { font-size: 24px; }
  .fg-pop-step-label { display: none; }
}