/* =============================================================================
   STYLES.CSS  —  the look and feel (wine-country / golden-hour romantic)
   You usually won't need to touch this. Colors live in :root below if you
   ever want to tweak them.
   ============================================================================= */

/* ---- Color palette & design tokens (change these to re-theme everything) ----
   Sophisticated champagne / cream / charcoal — matched to the welcome screen.
   (Variable names kept from the original theme so everything re-skins at once.) */
:root {
  --wine:        #2c2320;   /* espresso-charcoal — primary chrome */
  --wine-deep:   #191411;   /* near-black */
  --blush:       #e4d6bf;   /* champagne — borders */
  --blush-soft:  #f2ead9;   /* light champagne — soft fills */
  --cream:       #f7f2ea;   /* pearl background */
  --cream-deep:  #e9dfcd;   /* deeper champagne */
  --gold:        #a9823f;   /* champagne gold accent */
  --gold-light:  #c8a45e;   /* lighter gold */
  --terracotta:  #9c7a48;   /* muted bronze accent */
  --ink:         #2c2320;   /* charcoal text */
  --ink-soft:    #6f6357;   /* muted body text */

  /* Fonts (loaded in index.html from Google Fonts) */
  --font-display: "Cormorant Garamond", Georgia, serif; /* headings — elegant & refined */
  --font-body:    "Mulish", system-ui, sans-serif;      /* body — clean & readable */
  --font-hand:    "Caveat", cursive;                    /* handwritten story notes */

  /* Sophisticated landing palette */
  --champagne:  #e7d8c0;
  --pearl:      #f7f2ea;
  --charcoal:   #211c19;
  --charcoal-2: #4a423c;

  --shadow-soft: 0 10px 40px -12px rgba(33, 28, 25, 0.28);
  --shadow-card: 0 24px 60px -20px rgba(33, 28, 25, 0.38);
}

/* ---- Base reset ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  overflow: hidden;              /* the map fills the screen; panels scroll */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =============================================================================
   THE MAP
   ============================================================================= */
#map {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--cream-deep);
}

/* Warm "aged parchment" tint applied to the map tiles. This is the trick that
   turns a plain gray map into something that feels like golden hour. */
.leaflet-tile-pane {
  filter: grayscale(0.18) sepia(0.16) saturate(0.78) brightness(1.06) contrast(0.94);
}

/* Soft vignette so the edges of the screen glow warm and focus the eye inward */
.map-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;          /* clicks pass through to the map */
  box-shadow: inset 0 0 170px 40px rgba(33, 28, 25, 0.12);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(231, 216, 192, 0.28), transparent 55%),
    radial-gradient(110% 80% at 50% 115%, rgba(44, 35, 32, 0.10), transparent 55%);
}

/* Leaflet's default popup/controls, restyled to match */
.leaflet-control-attribution {
  background: rgba(251, 243, 232, 0.8) !important;
  font-family: var(--font-body);
  font-size: 10px;
}
.leaflet-bar a {
  background: var(--cream) !important;
  color: var(--wine) !important;
  border-color: var(--blush) !important;
}
.leaflet-bar a:hover { background: var(--blush-soft) !important; }

/* =============================================================================
   CUSTOM MARKERS (stars for favorites, hearts for story places)
   ============================================================================= */
.marker {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.marker svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 6px rgba(58,34,38,0.4)); }
.marker:hover { transform: scale(1.25) translateY(-2px); z-index: 1000; }

/* category pin: a cream circle ringed in the category color, with its icon */
.marker__pin {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cream);
  border: 2.5px solid var(--kc, #c56b4e);
  font-size: 16px; line-height: 1;
  box-shadow: 0 3px 8px rgba(58,34,38,0.35);
}
.marker--active .marker__pin { border-width: 3px; box-shadow: 0 0 0 4px rgba(201,162,39,0.35), 0 3px 8px rgba(58,34,38,0.4); }

/* Story (heart) markers get a gentle glowing pulse to draw the eye */
.marker--story svg { animation: heart-pulse 2.4s ease-in-out infinite; }
@keyframes heart-pulse {
  0%, 100% { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(176,48,82,0.0)) drop-shadow(0 4px 6px rgba(58,34,38,0.4)); }
  50%      { transform: scale(1.12); filter: drop-shadow(0 0 12px rgba(176,48,82,0.6)) drop-shadow(0 4px 6px rgba(58,34,38,0.4)); }
}

/* Small emoji badge that sits on the story hearts (💍 💒 💕) */
.marker__badge {
  position: absolute;
  top: -6px; right: -6px;
  font-size: 13px;
  background: var(--cream);
  border-radius: 50%;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  box-shadow: 0 2px 5px rgba(58,34,38,0.35);
}

/* A place that is currently "active" (selected) gets a ring */
.marker--active { transform: scale(1.3) translateY(-2px); z-index: 1001; }

/* =============================================================================
   WELCOME OVERLAY (the opening "step into our world" screen)
   ============================================================================= */
#welcome {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: block;
  overflow-y: auto;             /* scroll if the note is taller than the screen */
  -webkit-overflow-scrolling: touch;
  text-align: center;
  color: var(--charcoal);
  background:
    radial-gradient(135% 95% at 50% 0%, #fdfbf7 0%, var(--pearl) 44%, var(--champagne) 100%);
  transition: opacity 0.9s ease, visibility 0.9s ease;
}
#welcome.hidden { opacity: 0; visibility: hidden; }

/* thin hairline frame for a quiet, editorial feel */
#welcome::after {
  content: "";
  position: absolute; inset: 16px;
  pointer-events: none;
  border: 1px solid rgba(33, 28, 25, 0.16);
}

.welcome__inner {
  min-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 52px 30px;
  position: relative;
  z-index: 1;
}

/* Couple photo — a quietly matted circular portrait */
.welcome__photo {
  width: clamp(102px, 25vw, 138px);
  height: clamp(102px, 25vw, 138px);
  object-fit: cover;
  image-orientation: from-image;      /* honor phone EXIF rotation */
  border-radius: 50%;
  border: 1px solid rgba(33, 28, 25, 0.28);
  padding: 5px;
  box-shadow: 0 16px 40px -18px rgba(33, 28, 25, 0.55);
  margin-bottom: 26px;
  opacity: 0;
  animation: rise 0.9s ease 0.05s forwards;
}

.welcome__eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 3.4vw, 1.55rem);
  color: var(--charcoal-2);
  opacity: 0;
  animation: rise 0.8s ease 0.2s forwards;
}
.welcome__names {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.9rem, 10vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  margin: 0.1em 0 0.32em;
  color: var(--charcoal);
  opacity: 0;
  animation: rise 0.9s ease 0.4s forwards;
}
/* the artistic ampersand — an elegant italic gold flourish */
.welcome__names .amp {
  font-style: italic;
  font-weight: 500;
  font-size: 1.12em;
  color: #a9823f;
  padding: 0 0.03em;
}
/* delicate rule under the names */
.welcome__names::after {
  content: "";
  display: block;
  width: 56px; height: 1px;
  background: rgba(33, 28, 25, 0.4);
  margin: 0.5em auto 0;
}
.welcome__date {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-weight: 700;
  font-size: clamp(0.64rem, 1.9vw, 0.78rem);
  color: var(--charcoal-2);
  margin-bottom: 1.9em;
  opacity: 0;
  animation: rise 0.9s ease 0.6s forwards;
}
.welcome__intro {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.9vw, 1.42rem);
  line-height: 1.62;
  color: var(--charcoal-2);
  margin-bottom: 2.4em;
  opacity: 0;
  animation: rise 0.9s ease 0.8s forwards;
}
.welcome__btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--pearl);
  background: var(--charcoal);
  border: none;
  border-radius: 2px;
  padding: 16px 38px;
  cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(33, 28, 25, 0.6);
  transition: transform 0.2s ease, background 0.2s ease;
  opacity: 0;
  animation: rise 0.9s ease 1s forwards;
}
.welcome__btn:hover { transform: translateY(-2px); background: #000; }
.welcome__btn:active { transform: translateY(0); }

/* Secondary link under the Explore button → wedding website */
.welcome__link {
  display: inline-block;
  margin-top: 42px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--charcoal-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(33, 28, 25, 0.35);
  padding-bottom: 3px;
  opacity: 0;
  animation: rise 0.9s ease 1.15s forwards;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.welcome__link:hover { color: var(--charcoal); border-color: var(--charcoal); }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   TOP BAR  —  title + region filters
   ============================================================================= */
#topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  padding: 14px 16px 22px;
  background: linear-gradient(180deg, rgba(247,242,234,0.97) 0%, rgba(247,242,234,0.86) 66%, transparent 100%);
  backdrop-filter: blur(4px);
  pointer-events: none;                 /* let map show through gaps */
}
#topbar > * { pointer-events: auto; }

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.brand__text { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* Small heart button that opens the "Our Story" panel */
.story-btn {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pearl);
  background: var(--charcoal);
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(33, 28, 25, 0.6);
  transition: transform 0.2s ease;
}
.story-btn:hover { transform: translateY(-1px); }
.brand__names {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 4vw, 1.6rem);
  color: var(--wine);
}
.brand__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 3.5vw, 1.28rem);
  color: var(--charcoal-2);
}
/* artistic ampersand in the header name, matching the welcome screen */
.brand__names .amp { font-style: italic; color: var(--gold); padding: 0 0.02em; }

/* Horizontally scrollable filter chips (nice on mobile) */
.filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;                /* hide scrollbar, still scrolls */
}
.filters::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--wine);
  background: rgba(255,255,255,0.75);
  border: 1.5px solid var(--blush);
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  display: flex; align-items: center; gap: 6px;
}
.chip:hover { border-color: var(--gold); }
.chip.is-active {
  background: var(--wine);
  color: var(--cream);
  border-color: var(--wine);
  box-shadow: 0 6px 16px -6px rgba(33,28,25,0.55);
}
.chip__dot { width: 9px; height: 9px; border-radius: 50%; }
/* the special "Our Story" chip */
.chip--story.is-active { background: var(--terracotta); border-color: var(--terracotta); }

/* second filter row: category chips (slightly smaller, lighter) */
.filters--kinds { margin-top: 7px; }
.chip--kind {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 13px;
  background: rgba(255,255,255,0.6);
  border-color: var(--cream-deep);
  color: var(--ink-soft);
}
.chip--kind.is-active {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 6px 16px -6px rgba(169,130,63,0.6);
}

/* map-key legend under the filters */
.legend-bar {
  display: flex;
  gap: 13px;
  overflow-x: auto;
  margin-top: 9px;
  padding-bottom: 2px;
  scrollbar-width: none;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.legend-bar::-webkit-scrollbar { display: none; }
.legend__item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.legend__ico {
  width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px;
  background: var(--cream);
  border: 1.5px solid var(--kc, #c56b4e);
}
.legend__ico--heart { border: none; background: none; color: #b03052; font-size: 14px; }

/* empty-state message in the list panel */
.list-empty {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 40px 20px;
}

/* =============================================================================
   LIST TOGGLE BUTTON (bottom-left floating)
   ============================================================================= */
.list-toggle {
  position: absolute;
  left: 16px; bottom: 22px;
  z-index: 20;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--cream);
  background: var(--wine);
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  display: flex; align-items: center; gap: 8px;
  transition: transform 0.2s ease;
}
.list-toggle:hover { transform: translateY(-2px); }

/* "Good to know" tips button — bottom-right on mobile */
.tips-toggle {
  position: absolute;
  right: 16px; bottom: 22px;
  z-index: 20;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--wine);
  background: var(--cream);
  border: 1.5px solid var(--blush);
  border-radius: 999px;
  padding: 12px 18px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  display: flex; align-items: center; gap: 8px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.tips-toggle:hover { transform: translateY(-2px); border-color: var(--gold); }

/* =============================================================================
   PLACE CARD  —  bottom sheet on mobile, side panel on desktop
   ============================================================================= */
.sheet {
  position: absolute;
  z-index: 40;
  background: var(--cream);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 0.45s cubic-bezier(.16,1,.3,1);
}

/* Mobile: slides up from the bottom */
#card {
  left: 0; right: 0; bottom: 0;
  max-height: 82vh;
  border-radius: 24px 24px 0 0;
  transform: translateY(110%);          /* hidden below screen */
  overflow: hidden;
}
#card.is-open { transform: translateY(0); }

.card__grabber {
  width: 44px; height: 5px;
  background: var(--blush);
  border-radius: 999px;
  margin: 10px auto 4px;
  flex: 0 0 auto;
}
.card__scroll { overflow-y: auto; padding: 0 0 28px; }

/* Photo (or graceful placeholder) at the top of the card */
.card__media {
  position: relative;
  width: 100%;
  height: 220px;
  background: linear-gradient(135deg, var(--blush) 0%, var(--terracotta) 60%, var(--wine) 100%);
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; image-orientation: from-image; }
.card__media.is-placeholder { display: grid; place-items: center; text-align: center; color: var(--cream); }
.card__placeholder-txt { font-family: var(--font-hand); font-size: 1.4rem; opacity: 0.95; padding: 20px; line-height: 1.3; }
.card__placeholder-hint {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  opacity: 0.85;
  background: rgba(0, 0, 0, 0.18);
  padding: 4px 10px;
  border-radius: 8px;
}

/* photo dots when there are multiple photos */
.card__dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; z-index: 3; }
.card__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,0.6); cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: transform 0.15s ease, background 0.15s ease;
}
.card__dot:hover { transform: scale(1.2); }
.card__dot.is-active { background: #fff; transform: scale(1.25); }

/* prev / next arrows for flipping between photos */
.card__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: none; cursor: pointer; z-index: 3;
  background: rgba(58,34,38,0.5); color: #fff;
  font-size: 1.7rem; line-height: 1; font-family: var(--font-body);
  display: grid; place-items: center;
  backdrop-filter: blur(3px);
  transition: background 0.15s ease, transform 0.15s ease;
}
.card__nav:hover { background: rgba(58,34,38,0.78); }
.card__nav:active { transform: translateY(-50%) scale(0.92); }
.card__nav--prev { left: 10px; padding-right: 3px; }
.card__nav--next { right: 10px; padding-left: 3px; }

/* "1 / 3" photo counter */
.card__count {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: rgba(58,34,38,0.55); color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 0.75rem;
  padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(3px);
}

.card__close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(58,34,38,0.55); color: #fff; border: none;
  font-size: 1.2rem; cursor: pointer; display: grid; place-items: center;
  backdrop-filter: blur(3px);
}

.card__body { padding: 20px 22px 0; }

.card__region {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 6px;
}
.card__region .chip__dot { width: 8px; height: 8px; }

.card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--wine);
  margin-bottom: 4px;
}
.card__category { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 16px; }

.card__blurb { font-size: 1.02rem; line-height: 1.65; color: var(--ink); margin-bottom: 18px; }

/* The handwritten "our story" note — looks like a little love letter */
.card__story {
  position: relative;
  background: var(--blush-soft);
  border-left: 3px solid var(--terracotta);
  border-radius: 0 14px 14px 0;
  padding: 16px 18px 16px 20px;
  margin-bottom: 18px;
}
.card__story-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--terracotta); margin-bottom: 6px;
}
.card__story-text {
  font-family: var(--font-hand);
  font-size: 1.45rem;
  line-height: 1.35;
  color: var(--wine-deep);
}

.card__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.92rem;
  color: var(--cream); background: var(--wine);
  text-decoration: none; border-radius: 999px;
  padding: 12px 22px; margin: 0 22px;
  transition: transform 0.2s ease;
}
.card__link:hover { transform: translateY(-2px); }

/* =============================================================================
   LIST PANEL  —  a scrollable list of all places (synced with the map)
   ============================================================================= */
#list, #tips, #story {
  top: 0; bottom: 0; right: 0;
  width: min(92vw, 380px);
  transform: translateX(105%);          /* hidden to the right */
  border-radius: 24px 0 0 24px;
}
#list.is-open, #tips.is-open, #story.is-open { transform: translateX(0); }

/* Our Story paragraphs */
.story__para {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink);
  padding: 0 10px;
  margin-bottom: 16px;
}
.story__para:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 3.1rem;
  font-weight: 600;
  float: left;
  line-height: 0.8;
  padding: 6px 10px 0 0;
  color: var(--wine);
}

/* Tip cards inside the "Good to know" panel */
.tip {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px; margin: 4px 0;
  background: var(--blush-soft);
  border-radius: 16px;
}
.tip__icon { flex: 0 0 auto; font-size: 1.5rem; line-height: 1.2; }
.tip__title { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--wine); margin-bottom: 4px; }
.tip__text { font-size: 0.95rem; line-height: 1.55; color: var(--ink); }

.list__head {
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--cream-deep);
  display: flex; align-items: center; justify-content: space-between;
}
.list__title { font-family: var(--font-display); font-size: 1.5rem; color: var(--wine); }
.list__items { overflow-y: auto; padding: 8px 12px 24px; }

.list-item {
  display: flex; gap: 12px; align-items: center;
  padding: 12px; border-radius: 14px; cursor: pointer;
  transition: background 0.15s ease;
}
.list-item:hover { background: var(--blush-soft); }
.list-item__icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.2rem; color: #fff;
}
.list-item__name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); line-height: 1.15; }
.list-item__meta { font-size: 0.8rem; color: var(--ink-soft); margin-top: 2px; }
.list-item__tag { font-size: 0.9rem; }

/* Shared close button for panels */
.panel-close {
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--cream-deep); color: var(--wine);
  font-size: 1.2rem; cursor: pointer; display: grid; place-items: center;
}

/* Legend line at the bottom of the list */
.legend { padding: 14px 22px; border-top: 1px solid var(--cream-deep); font-size: 0.82rem; color: var(--ink-soft); }
.legend div { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

/* =============================================================================
   DESKTOP LAYOUT  —  card becomes a left side panel; list stays right
   ============================================================================= */
@media (min-width: 780px) {
  #card {
    left: 24px; bottom: 24px; top: 96px; right: auto;
    width: 400px;
    max-height: none;
    border-radius: 22px;
    transform: translateX(calc(-100% - 40px));   /* slide in from left */
  }
  #card.is-open { transform: translateX(0); }
  .card__grabber { display: none; }
  .card__media { height: 240px; }

  /* Card is on the left on desktop, so stack both buttons on the right */
  .list-toggle { left: auto; right: 16px; bottom: 24px; }
  .tips-toggle { right: 16px; bottom: 76px; }
  .leaflet-control-zoom { margin-bottom: 134px !important; } /* clear the stacked buttons */
}

/* Keep the map zoom buttons clear of the floating pills */
.leaflet-control-zoom { margin-bottom: 78px !important; }

/* =============================================================================
   MOBILE FINE-TUNING  (phones are the priority — keep the header tidy & tappable)
   ============================================================================= */
@media (max-width: 480px) {
  #topbar { padding: 11px 12px 14px; }
  .brand { margin-bottom: 9px; }
  .brand__names { font-size: 1.3rem; }
  .brand__sub { display: none; }            /* declutter next to the Welcome button */
  .story-btn { font-size: 0.8rem; padding: 8px 14px; }
  .filters { gap: 7px; }
  .chip { font-size: 0.8rem; padding: 7px 13px; }
  .chip--kind { font-size: 0.74rem; padding: 5px 11px; }
  .legend-bar { font-size: 0.63rem; gap: 10px; margin-top: 7px; }
  .list-toggle, .tips-toggle { font-size: 0.8rem; padding: 11px 15px; }
  .list-toggle { left: 12px; bottom: 14px; }
  .tips-toggle { right: 12px; bottom: 14px; }
  .leaflet-control-zoom { margin-bottom: 70px !important; }
  #welcome::after { display: none; }        /* drop the frame on phones (content scrolls) */
  #card { max-height: 88vh; }
  #list, #tips, #story { width: 100vw; border-radius: 0; } /* full-width drawers on phones */
}

/* Tiny helper */
.hide { display: none !important; }