/* City page (/:country/:destination), Figma "Destinations / city" 26:4378. Decisions D1-D8 in docs/redesign/destinations.md.
   The hero, sand background, card grid, "more" link, rating badge and FAQ reuse country.css (no in-page nav here: not in Figma). */

/* Bootstrap's .row/.col-* grid isn't loaded on v2 pages, so this intro needs its own two-up layout.
   Figma's own ratio (26:4378): text 807px, map 443px, vertically centered against each other, not
   top-aligned or grown to fill the container - the map stays this size regardless of viewport width,
   same as the text's own 807px cap; extra container width is just margin, as elsewhere on this page. */
.city-intro-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-30); }
.city-intro { flex: 1 1 480px; max-width: 807px; }
.city-intro p { margin: 0 0 var(--space-15); }
.city-intro > :last-child { margin-bottom: 0; }
/* 35px above and below: Figma 25:3976 sits 35px under the text and 34px over the next.
   .city-intro p (0 0 15px) used to win and left no space above the quote. */
.city-intro .city-quote, .city-quote { margin: 35px 0; padding-left: var(--space-20); border-left: 3px solid var(--color-coral); font-style: italic; }
/* .city-map takes the row's leftover width and centers the fixed-size box within it, rather than
   the box sitting flush against the text. */
.city-map { flex: 1 1 320px; display: flex; justify-content: center; }
.city-map__box { width: 100%; max-width: 443px; }
.city-map__box img { width: 100%; height: auto; }
/* printLocsOnGoogleMaps (g-map.pug) renders a screen copy and a Bootstrap "d-print-only" copy for
   printing; without Bootstrap's CSS to hide the latter on screen, both would show here. */
.city-map .d-print-only { display: none; }

/* Things to do / Where to stay: plain photo + caption, no card border (Figma 26:4584 / 26:4631) */
.simple-card { display: block; color: var(--color-black); text-decoration: none; }
.simple-card__img { width: 100%; aspect-ratio: 482 / 550; object-fit: cover; }
.simple-card__caption { display: block; margin-top: 13px; }

.stay-card__img { width: 100%; aspect-ratio: 482 / 320; object-fit: cover; }
.stay-card__title { margin: 13px 0 6px; font-weight: 700; }
.stay-card__stars { display: flex; gap: 2px; margin-bottom: 10px; color: #ffd601; }
.stay-card__stars .icon { width: 16px; height: 16px; }
.stay-card__text { margin: 0; }

/* What we love: bordered quote cards (Figma 26:4680) */
.love-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.love-card { padding: var(--space-30); border: 1px solid var(--color-line); }
.love-card__text { margin: 0 0 24px; }
.love-card__staff { display: flex; align-items: center; gap: var(--space-15); }
/* +printStaffPhoto (mixins/staff.pug) renders Bootstrap's .rounded-circle, which has no effect
   without Bootstrap's CSS; style its own img class instead of adding an unused one here. */
.love-card__staff .team-profile-pic { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; margin: 0; box-shadow: none; }
.love-card__name { font-weight: 700; letter-spacing: .8px; text-transform: uppercase; font-size: 14px; }
.love-card__job { margin: 0; color: var(--color-ink-muted); font-size: 14px; }

/* Where can you go from: single-select pills, then plain cards (Figma 26:4740) */
.go-filters { display: flex; flex-wrap: wrap; gap: 11px; margin: 20px 0 30px; }
.go-filters button {
  padding: 10px 24px; border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  background: var(--color-white); color: var(--color-ink); font-weight: 600; cursor: pointer;
}
.go-filters button[aria-pressed="true"] { border-color: var(--color-coral); background: var(--color-coral); color: var(--color-white); }
.go-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 11px; }
.go-card { display: block; color: var(--color-black); text-decoration: none; }
.go-card__img { width: 100%; aspect-ratio: 358 / 201; object-fit: cover; }
.go-card__name { display: block; margin-top: 13px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.go-card__methods { margin: 2px 0 0; color: var(--color-ink-muted); font-size: 14px; }

/* Videos (Figma 26:4242): Figma's tiles (478x542) hold portrait placeholder photos, but our real
   thumbnails are YouTube's 16:9 maxresdefault.jpg; a portrait crop would cut most of the image away,
   so this keeps a 16:9 box instead of matching Figma's box literally. */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.video-grid + .video-grid { margin-top: 11px; }
.video-grid .video-play { width: 100%; }
.video-grid__thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video-grid--shorts { grid-template-columns: repeat(4, 1fr); max-width: none; }
.video-grid--shorts .video-grid__thumb { aspect-ratio: 9 / 16; }

/* The city page's FAQ (26:4258) is near full-width (1463 of its 1513 frame), unlike the country
   page's own, narrower FAQ (4:1826, 1200 of 1513) that .country-faq__inner's max-width matches. */
.country-faq__inner { max-width: none; }

@media (max-width: 991.98px) {
  .love-grid { grid-template-columns: repeat(2, 1fr); }
  .go-grid { grid-template-columns: repeat(2, 1fr); }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .love-grid { grid-template-columns: 1fr; }
  .go-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr; }
}