/*
 * city-card.njk — Gangwon-do's "Cities in this region" cards (region.njk), design reference
 * 5b/5d. White bordered card: name + Korean name + vibe tags, blurb, a grey "Where to work"
 * panel (named venues with text links + a 4-cell study-café battery), then a "Getting around"
 * line. No accordion — every card is fully expanded.
 */
/* Two-column grid from 900px up. Below that .city-card-list becomes the scroll track of the
   .city-carousel (a horizontal scroll-snap row + dot indicators) — the dense card content can't
   shrink into two columns narrower than ~420px without its no-wrap rows overflowing, so a swipe
   row is the honest small-screen answer, never a one-per-row vertical list. */
.city-card-list {
  display: grid;
  gap: 14px;
}

.city-card-list__item {
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  .city-card-list {
    grid-template-columns: 1fr 1fr;
    /* No align-items:start — let each row's two cards match height (grid default `stretch`). */
  }
}

.city-card {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.city-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 20px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* Dot indicators under the phone carousel (hidden on desktop). Same 5px/20px pill treatment as
   the homepage region carousel; region-card.js adds .city-carousel--synced and toggles
   .is-active as the track scrolls. Without JS the first dot stays lit. */
.city-carousel__dots {
  display: none;
}

.city-carousel__dots li {
  width: 5px;
  height: 5px;
  border-radius: 3px;
  background: var(--color-border);
}

.city-carousel__dots li:first-child {
  width: 20px;
  background: var(--color-primary);
}

.city-carousel--synced .city-carousel__dots li:first-child {
  width: 5px;
  background: var(--color-border);
}

.city-carousel--synced .city-carousel__dots li.is-active {
  width: 20px;
  background: var(--color-primary);
}

/* Below the two-column grid (900px) the card runs as a swipe carousel and is too narrow to hold
   the name and its tags on one row — let the head stack. The study-café row still never wraps
   (DESIGN.md § "Study cafés"); its Naver link shortens instead (see .study-cafes__search-word). */
@media (max-width: 899.98px) {
  /* Carousel: break out of the page padding so cards can scroll to the screen edge. */
  .city-carousel {
    margin: 0 calc(var(--space-4) * -1);
  }

  /* ul.* — base.css's `ul[class] { padding: 0 }` reset would otherwise zero the side padding,
     so the first/last card would touch the screen edge instead of the page gutter. */
  ul.city-card-list {
    display: flex;
    gap: 12px;
    padding-inline: var(--space-4);
    /* First / last card snap flush with the page gutter, not the screen edge. */
    scroll-padding-inline: var(--space-4);
    overflow-x: auto;
    overflow-y: hidden;
    /* Without this the row's scroll overflow leaks into the document's own scroll width (a
       Chromium quirk for an `auto`/`hidden` scroller inside a negative-margin breakout parent),
       so a 412px phone renders the whole page zoomed out. `contain: paint` isolates it while
       keeping the horizontal swipe. */
    contain: paint;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .city-card-list::-webkit-scrollbar {
    display: none;
  }

  .city-card-list__item {
    flex: 0 0 86%;
    max-width: 340px;
    /* min-width:auto default lets unbreakable content override flex-shrink:0 and grow the card
       past 86%/340px — zeroing it keeps card width content-independent. */
    min-width: 0;
    scroll-snap-align: start;
  }

  /* Equal card heights so the layout doesn't shift between slides. */
  .city-card {
    width: 100%;
    height: 100%;
    padding: 16px;
  }

  /* ol.* — `ol[class] { margin: 0 }` (base.css) would otherwise zero this and the dots would
     sit flush against the cards. */
  ol.city-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
  }

  .city-card__head {
    flex-direction: column;
  }

  .city-card__tags {
    justify-content: flex-start;
  }

  .work-venue__name {
    flex-wrap: wrap;
  }

  /* Mangrove's "coworking · coliving · community" broke the desktop 3-col grid on mobile —
     drop to 2 cols (name, site), kind wraps on its own row below. */
  .work-venue-chains {
    grid-template-columns: auto auto;
    /* Wider row-gap = the "between chains" gap; kind's negative margin-top below pulls it back
       up to its own name, so that pair reads tighter than the gap to the next chain. */
    row-gap: 16px;
  }

  .work-venue-chains .work-venue__kind {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
    white-space: normal;
    margin-top: -10px;
  }
}

.city-card__name {
  margin: 0;
  /* DESIGN.md Type scale caps card titles at 18px — this was 19px, close enough to the "Cities"
     section H2 above it (20px/600, region-page.css) to read as competing rather than nested. */
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  /* Mixes an English city name with its Korean name (.city-card__ko, inherits these) — keep-all
     stops a Korean word splitting mid-character. (text-wrap: pretty was tried here for the
     English name's own hyphen-free wrapping, e.g. "Seogwipo-si", but it moved whole trailing
     words to the next line even when they fit — e.g. "Gongjicheon Recreation" / "Area" with
     visible slack left on line one — so it's not used.) */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Population line: fixed 13px (not the fluid --font-size-sm) so it reads as the section subline
   pattern one step smaller, sitting right under the name at every width. */
.city-card__population {
  margin: 3px 0 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-muted);
}

.city-card__ko {
  font-family: var(--font-family-ko);
  font-weight: 400;
  font-size: 13px;
  color: var(--color-text-muted);
}

.city-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin: 0;
  list-style: none;
  padding: 0;
}

.city-card__tags li {
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-primary-dark);
  background: var(--color-vibe-tag-bg);
  border: 1px solid var(--color-primary-tint-border);
  border-radius: 22px;
  white-space: nowrap;
}

.city-card__blurb {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-soft);
}

/* Regions where a city carries only name + blurb (the five mock regions): the blurb is the last
   thing in the card, so drop its trailing gap. */
.city-card__blurb:last-child {
  margin-bottom: 0;
}

/* Grey "Where to work" panel. */
.city-work {
  padding: 16px 18px;
  background: var(--color-surface);
  border-radius: 10px;
}

.city-work__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
}

.city-work__tick {
  flex-shrink: 0;
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--color-primary);
}

.work-venue {
  margin-bottom: 12px;
}

.work-venue__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  /* DESIGN.md's City card rule allows 16-17px here; using the low end keeps a real gap under
     .city-card__name (18px) now that both sit at the same weight/letter-spacing — at 17px the
     two read as competing titles rather than a nested one. */
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  /* Some venue names are Korean-only (kor-only listings) — keep-all as above (.city-card__name). */
  word-break: keep-all;
  overflow-wrap: break-word;
}

.work-venue__kind {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.work-venue__micro {
  margin: -4px 0 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.work-venue__addr {
  margin: 3px 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
  word-break: keep-all;
  overflow-wrap: break-word;
  /* Hanging indent (pin 12px + 4px gap): wrapped lines start under the address text, not the pin. */
  padding-left: 16px;
  text-indent: -16px;
}

/* Hyphenated words in addresses (see the keepHyphenated filter) never break at the hyphen. */
.work-venue__addr .nowrap {
  white-space: nowrap;
}

/* Same glyph/sizing as the attraction card's pin (region-page.css .attraction-card__pin) —
   fill: currentColor inherits the muted address colour automatically. */
.work-venue__pin {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  margin-right: 4px;
}

.work-venue__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  font-size: 13px;
}

/* Multi-branch venue: name + site links once; each branch is one address line
   ending in its Naver Map link. */
/* Collapses with the previous line's 8px bottom margin to a 4px gap between branches. */
.work-venue__branch + .work-venue__branch {
  margin-top: -4px;
}

/* The gap lives on the address text's trailing edge, not on the link: a link that wraps onto its
   own line then starts flush with the address (a leading space or margin-left would indent it).
   inline-block gives the link a break opportunity; text-indent reset so the hanging indent
   doesn't shift it back. */
.work-venue__branch-addr {
  margin-right: 6px;
}

.work-venue__branch-map {
  display: inline-block;
  text-indent: 0;
  color: var(--color-accent);
  font-size: 13px;
  text-decoration: underline;
  white-space: nowrap;
}

/* "Five Spot · Songdo Central": brand stays ink, the branch drops to the chain-name grey. */
.work-venue__name-branch {
  font-weight: 500;
  color: var(--color-text-soft);
}

/* Phones <=360px: the branch drops under the venue name so the kind label keeps the first line. */
@media (max-width: 360px) {
  .work-venue__name-branch {
    display: block;
    margin-top: -6px;
  }

  .work-venue__name-dot {
    display: none;
  }
}

/* Website / Instagram / Naver Map — outbound links, so orange with the ↗ (DESIGN.md palette). */
.work-venue__links a {
  color: var(--color-accent);
  text-decoration: underline;
  white-space: nowrap;
}

/* Chains (DESIGN.md § "Chains") get their own subtitle below the solo venues, above study
   cafés — 13px/600 muted, quieter than .city-work__title (15px/600 ink + tick) since it's a
   subdivision of "Where to work", not a heading of its own weight. No hairline (unlike
   .study-cafes below it) — a wider top margin is enough separation from the solo venues above. */
.work-venue-chains__title {
  margin: 24px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Three-column grid shared across every chain row (name / link / kind), so the "Website ↗" link
   lines up in one column instead of trailing each name at a different x-position ("ladder"
   look) — name/link/kind columns auto-size to the widest cell in that column across ALL rows,
   which per-row flex/inline-flex can't do since each row would size independently. Each chain
   in the Nunjucks loop emits its 3 children directly into this grid (no per-row wrapper), so
   grid auto-placement lays them out three-per-row. */
.work-venue-chains {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 6px;
  margin-bottom: 16px;
}

/* A chain's name stays plain ink, not a link — every other outbound link on the site is orange,
   and making the name itself orange read as visually loud repeated across 3-5 chain rows in a
   row. A small same-row "Website ↗" carries the one link instead (DESIGN.md § "Chains": no
   separate address/domain row, since a search/locations page can't honestly point at one site).
   Smaller/lighter than a solo venue's name (14px/500 vs 16px/600) — a chain row carries less
   information (no address/links block), so it should read as a lighter list item, not a peer
   title. */
.work-venue__chain-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-soft);
  white-space: nowrap;
}

.work-venue__chain-site {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-accent);
  text-decoration: underline;
  white-space: nowrap;
}

/* Kind chip flush to the card's right edge — desktop only, mobile moves it to its own row. */
@media (min-width: 900px) {
  .work-venue-chains .work-venue__kind {
    justify-self: end;
  }
}

/* 4-cell study-café battery + count label + Naver Map search link, one non-wrapping row on a
   hairline (DESIGN.md § "Study cafés"). */
.study-cafes {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
}

.study-cafes:first-child {
  padding-top: 0;
  border-top: 0;
}

.study-cafes__label {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.study-cafes__battery {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.study-cafes__battery[hidden] {
  display: none;
}

.study-cafes__cell {
  width: 15px;
  height: 9px;
  border-radius: 2px;
  background: #dce3df;
}

.study-cafes__cell--on {
  background: var(--color-primary);
}

.study-cafes__count {
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

/* No rating yet: a muted empty-state label, not the bold green count (DESIGN.md § Empty & fallback states). */
.study-cafes__count--unrated {
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Outbound Naver Map link — orange with the ↗, per the DESIGN.md palette. */
.study-cafes__search {
  margin-left: auto;
  font-size: 12px;
  color: var(--color-accent);
  text-decoration: underline;
  white-space: nowrap;
}

.city-card__around {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 18px;
  margin: 12px 0 0;
  font-size: 13px;
}

.city-card__around-label {
  color: var(--color-text-muted);
}

.city-card__leg {
  white-space: nowrap;
  color: var(--color-text-soft);
}

.city-card__leg strong {
  font-weight: 600;
  color: var(--color-text);
}

.city-card__mode {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Narrow phones can't fit "Naver Map search ↗" on the no-wrap study-café row — drop "search",
   tighten the row's gaps and take the battery cells to the low end of their 12–15px range
   (DESIGN.md § "Study cafés"), and give the carousel card a little more width. Placed after the
   base .study-cafes rules so these win at equal specificity. */
@media (max-width: 420px) {
  .study-cafes__search-word {
    display: none;
  }

  .study-cafes {
    gap: 5px;
  }

  .study-cafes__battery {
    gap: 2px;
  }

  .study-cafes__cell {
    width: 12px;
  }

  .city-card-list__item {
    /* 99%: 92% left Seoul Startup Hub's row a few px short of fitting on one line at 360px. */
    flex-basis: 99%;
  }
}