/* ==========================================================================
   AIRDROP · Country page (October 2026)

   pages/country.php wears the new event page (event-v2.css + the immersive
   hero in event-immersive*.css): the destination's photo runs under the
   header, a round medallion sits in the open space and the copy + orb button
   sit at the bottom. What makes it a country index and not an event:

   - the medallion is a passport stamp - a slowly turning ring of text and the
     country code - and the upcoming events (not artists) pop out of it;
   - "the destination at a glance" is the event pass laid out as a boarding
     strip (next event / how many / where), horizontal on desktop;
   - events are grouped by month, with poster cards that carry a date tile;
   - city circles, the about copy, more destinations and the FAQ follow.

   Scope: body.ctry (set in pages/country.php).
   ========================================================================== */

body.ctry .ev2-layout { grid-template-columns: minmax(0, 1fr); }
body.ctry .ev2-section-head { align-items: center; }
body.ctry .ev2-section-head h2 { text-wrap: balance; }

/* ── Hero: passport stamp instead of a poster ── */
body.ctry .ctry-stamp { cursor: default; }
body.ctry .ctry-stamp:hover, body.ctry .ctry-stamp:active { transform: none; }
body.ctry .ctry-stamp__ring {
  position: absolute; inset: -30px; z-index: -1; width: calc(100% + 60px); height: calc(100% + 60px);
  overflow: visible; pointer-events: none;
  animation: ctry-ring 48s linear infinite;
}
body.ctry .ctry-stamp__ring text {
  fill: rgba(255, 255, 255, .72); font: 700 10.5px/1 "Google Sans", Arial, sans-serif; letter-spacing: .14em;
  direction: ltr; unicode-bidi: plaintext;
}
@keyframes ctry-ring { to { transform: rotate(360deg); } }
body.ctry .ctry-stamp__globe {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4b3fb0, #1b1640 70%); color: rgba(255, 255, 255, .85);
}
body.ctry .ctry-stamp__globe svg { width: 44%; height: 44%; }
/* country code: a white passport-stamp chip where the event page has its zoom key */
body.ctry .ctry-stamp__code {
  position: absolute; z-index: 1; inset: auto auto 4px 0;
  min-width: 42px; padding: 6px 9px; border-radius: 999px;
  background: #fff; color: #15131c; box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  font: 800 13px/1 "Google Sans", Arial, sans-serif; letter-spacing: .08em; text-align: center; direction: ltr;
}

/* CTA: the event page's orb button, pointing down to the list, with a count */
body.ctry .ctry-cta .ev2-buy__label svg { width: 19px; height: 19px; }
body.ctry .ctry-cta__count {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .22); color: #fff; font-size: 14px; font-weight: 800;
}

@media (max-width: 900px) {
  body.ctry .ctry-stamp__ring { inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); }
  body.ctry .ctry-stamp__code { font-size: 12px; min-width: 38px; padding: 5px 8px; }
  body.ctry .ev2-hero__top { padding-left: 0; }
  body.ctry.sp-event .sp-main { padding-bottom: 96px; }
  /* the count beside a long title pushed it to two lines: it moves under the title */
  body.ctry .ev2-section-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  body.ctry .ctry-more .ev2-section-head { flex-direction: row; align-items: center; }
}
@media (min-width: 901px) {
  body.ctry .ctry-stamp:hover { transform: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .55), 0 0 40px 6px rgba(0, 0, 0, .16), 0 16px 34px rgba(0, 0, 0, .28); }
  body.ctry .ctry-stamp__code { inset: auto auto 10px 4px; font-size: 14px; padding: 7px 11px; }
}
@media (prefers-reduced-motion: reduce) { body.ctry .ctry-stamp__ring { animation: none; } }

/* ── At a glance: the event pass as a boarding strip ── */
body.ctry .ctry-passport-wrap { padding: 6px 0 10px; }
body.ctry .ctry-passport-wrap + .ev2-section { border-top: 0; }
body.ctry .ctry-pass { margin-top: 0; }
body.ctry .ctry-pass__next { color: inherit; text-decoration: none; transition: background .2s ease; }
body.ctry .ctry-pass__next:hover { background: rgba(255, 255, 255, .04); }
body.ctry .ctry-pass .ev2-pass__txt strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 901px) {
  body.ctry .ctry-pass { display: flex; align-items: stretch; }
  body.ctry .ctry-pass .ev2-pass__row { flex: 1 1 0; min-width: 0; padding: 22px 22px; }
  body.ctry .ctry-pass .ctry-pass__next { flex-grow: 1.35; }
  /* the tear line turns vertical, the notches move to the top and bottom edges */
  body.ctry .ctry-pass .ev2-pass__tear { flex: none; width: 0; height: auto; margin: 20px 0; border-top: 0; border-inline-start: 1.5px dashed rgba(255, 255, 255, .32); }
  body.ctry .ctry-pass .ev2-pass__tear::before, body.ctry .ctry-pass .ev2-pass__tear::after { left: -10.75px; right: auto; }
  body.ctry .ctry-pass .ev2-pass__tear::before { top: -31px; }
  body.ctry .ctry-pass .ev2-pass__tear::after { top: auto; bottom: -31px; }
}

/* ── Events, grouped by month ── */
body.ctry .ctry-month + .ctry-month { margin-top: 34px; }
body.ctry .ctry-month__head {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
  color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -.01em;
}
body.ctry .ctry-month__head i {
  font-style: normal; min-width: 24px; height: 24px; padding: 0 7px; display: inline-grid; place-items: center;
  border-radius: 999px; background: rgba(201, 140, 255, .16); color: #e2c6ff; font-size: 12px; font-weight: 700;
}
body.ctry .ctry-month__head::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .09); }

body.ctry .ctry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 26px 18px; }
body.ctry .ctry-ev { display: flex; flex-direction: column; gap: 11px; min-width: 0; color: #fff; text-decoration: none; }
body.ctry .ctry-ev__art {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: #222;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}
body.ctry .ctry-ev__art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
body.ctry .ctry-ev:hover .ctry-ev__art img { transform: scale(1.045); }
/* date tile - the pass's calendar, small */
body.ctry .ctry-ev__date {
  position: absolute; top: 10px; inset-inline-start: 10px; width: 44px; overflow: hidden; border-radius: 11px; text-align: center;
  background: #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
}
body.ctry .ctry-ev__date b { display: block; padding: 5px 0 1px; color: #17151f; font-size: 19px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
body.ctry .ctry-ev__date small { display: block; padding: 0 0 5px; color: #8e3ef4; font-size: 10.5px; font-weight: 700; line-height: 1.2; }
body.ctry .ctry-ev__soon {
  position: absolute; bottom: 10px; inset-inline-start: 10px; max-width: calc(100% - 20px);
  padding: 4px 10px; border-radius: 999px; background: rgba(14, 14, 20, .58); color: #fff;
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.ctry .ctry-ev__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-inline: 2px; }
body.ctry .ctry-ev__when { color: #c9a3f2; font-size: 12.5px; font-weight: 700; }
body.ctry .ctry-ev__title {
  font-size: 15.5px; line-height: 1.3; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.ctry .ctry-ev__place { color: #9d9d9d; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ctry .ctry-ev__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; min-width: 0; }
body.ctry .ctry-ev__tag {
  min-width: 0; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #d6d6d6;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.ctry .ctry-ev__price { flex: none; margin-inline-start: auto; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }

@media (max-width: 600px) {
  body.ctry .ctry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  body.ctry .ctry-ev__art { border-radius: 12px; }
  body.ctry .ctry-ev__date { top: 8px; inset-inline-start: 8px; width: 40px; border-radius: 10px; }
  body.ctry .ctry-ev__date b { font-size: 17px; }
  body.ctry .ctry-ev__soon { bottom: 8px; inset-inline-start: 8px; font-size: 11px; padding: 3px 8px; }
  body.ctry .ctry-ev__title { font-size: 14.5px; }
  body.ctry .ctry-ev__place { font-size: 12px; }
  body.ctry .ctry-ev__foot { flex-wrap: wrap; }
  body.ctry .ctry-ev__price { margin-inline-start: 0; font-size: 12.5px; }
}

/* ── Cities: the lineup circles, with how many events each ── */
body.ctry .ctry-city { text-decoration: none; }
body.ctry .ctry-city .ev2-artist__image i { display: grid; place-items: center; color: #b3b3b3; }
body.ctry .ctry-city .ev2-artist__image i svg { width: 30px; height: 30px; }
body.ctry .ctry-city small { display: block; margin-top: 2px; color: #9a9a9a; font-size: 11.5px; }
body.ctry .ctry-city:hover .ev2-artist__image { box-shadow: 0 0 0 2px #be43d5, 0 0 0 4px #141414; }

/* ── More destinations: shortcut tiles ── */
body.ctry .ctry-more__all { display: inline-flex; align-items: center; gap: 6px; color: #bdbdbd; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
body.ctry .ctry-more__all:hover { color: #fff; }
body.ctry .ctry-more__all svg { width: 16px; height: 16px; }
body.ctry .ctry-dest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
body.ctry .ctry-dest {
  display: flex; align-items: center; gap: 14px; min-width: 0; overflow: hidden;
  border-radius: 12px; background: #1e1e20; color: #fff; text-decoration: none;
  transition: background .2s ease;
}
body.ctry .ctry-dest:hover { background: #2a2a2d; }
body.ctry .ctry-dest__art { flex: none; width: 64px; height: 64px; background: radial-gradient(circle at 35% 30%, #4b3fb0, #1b1640 70%); }
body.ctry .ctry-dest__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.ctry .ctry-dest__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-inline-end: 12px; }
body.ctry .ctry-dest__txt b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ctry .ctry-dest__txt small { color: #9d9d9d; font-size: 12.5px; }
@media (max-width: 600px) {
  body.ctry .ctry-dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.ctry .ctry-dest { gap: 10px; border-radius: 10px; }
  body.ctry .ctry-dest__art { width: 52px; height: 52px; }
  body.ctry .ctry-dest__txt b { font-size: 13.5px; }
  body.ctry .ctry-dest__txt small { font-size: 11.5px; }
}

/* ── No events yet ── */
body.ctry .ctry-empty {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 22px; border-radius: 22px; background: #1e1e20;
}
body.ctry .ctry-empty__ic { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .07); color: #d9a8f0; }
body.ctry .ctry-empty__ic svg { width: 26px; height: 26px; }
body.ctry .ctry-empty > div { flex: 1 1 260px; min-width: 0; }
body.ctry .ctry-empty h2 { margin: 0 0 4px; font-size: 19px; }
body.ctry .ctry-empty p { margin: 0; color: #a9a9a9; font-size: 14px; line-height: 1.5; }
body.ctry .ctry-empty__btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none;
}
body.ctry .ctry-empty__btn:hover { background: rgba(255, 255, 255, .16); }
body.ctry .ctry-empty__btn svg { width: 16px; height: 16px; }