/* Cities hub and City template. Prefix ct-. Builds on base.css, home.css, pricing.css (calculator), cases.css (cp-*) and hubs.css (hb-*). */

/* hub: country groups, each a numbered list of big city names */
.ct-all { padding-top: clamp(8px, 2vw, 32px); }
.ct-group + .ct-group { margin-top: clamp(48px, 6vw, 96px); }
.ct-country { font-family: var(--cs-font-label); font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--cs-green); padding-bottom: 16px; border-bottom: 2px solid var(--cs-green-bright); }
.ct-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 6vw, 112px); }
.ct-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 34px; align-items: baseline; gap: 12px; padding: clamp(16px, 1.8vw, 26px) 0; border-bottom: 1px solid var(--cs-border-strong); text-decoration: none; color: var(--cs-text); transition: color .2s, padding .2s; }
.ct-row-n { font-family: var(--cs-font-mono, 'Fira Code', monospace); font-size: 13px; color: var(--cs-text-faint); }
.ct-row-name { font-weight: 800; font-size: clamp(28px, 3.4vw, 54px); line-height: 1; letter-spacing: -0.03em; }
.ct-row-geo { font-family: var(--cs-font-mono, 'Fira Code', monospace); font-size: 13px; color: var(--cs-text-faint); white-space: nowrap; }
.ct-row-go { align-self: center; justify-self: end; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--cs-dark4); color: var(--cs-pale); transition: background .2s, color .2s, border-color .2s, transform .2s; }
.ct-row:hover, .ct-row:focus-visible { color: var(--cs-green-bright); padding-left: 10px; }
.ct-row:hover .ct-row-go, .ct-row:focus-visible .ct-row-go { background: var(--cs-green-bright); border-color: var(--cs-green-bright); color: var(--cs-dark1); transform: translateX(4px); }
.ct-rows--compact .ct-row-name { font-size: clamp(24px, 2.4vw, 36px); }
.ct-rows--compact { margin-top: clamp(20px, 2.4vw, 32px); }
@media (max-width: 991px) { .ct-rows { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .ct-row { grid-template-columns: 30px minmax(0, 1fr) 34px; } .ct-row-geo { display: none; } }

/* template header */
.ct-hero .cs-display { max-width: 12ch; }
.ct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: clamp(24px, 3vw, 40px); }
.ct-coords { font-family: var(--cs-font-mono, 'Fira Code', monospace); font-size: 14px; letter-spacing: .04em; color: var(--cs-text-faint); }

/* header: copy left, departures board right */
.ct-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.ct-hero .cs-display { max-width: 12ch; font-size: clamp(48px, 7vw, 120px); line-height: .98; }
.ct-hero .cs-lead { max-width: 30ch; margin-top: clamp(20px, 2.4vw, 32px); font-size: clamp(19px, 1.7vw, 26px); }
.ct-board[hidden] { display: none; }
.ct-board { padding: clamp(18px, 2vw, 28px) clamp(18px, 2.4vw, 32px); border-radius: 22px; border: 1.5px solid var(--cs-dark4); background: #03141a; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); font-family: var(--cs-font-mono, 'Fira Code', monospace); }
.ct-board-head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1.5px dashed var(--cs-dark4); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cs-text-faint); }
.ct-board li { border-bottom: 1px dashed rgba(255, 255, 255, .1); }
.ct-board li:last-child { border-bottom: 0; }
.ct-board a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; text-decoration: none; }
.ct-board-name { font-weight: 700; font-size: clamp(16px, 1.5vw, 22px); letter-spacing: .02em; text-transform: uppercase; color: #ffd84a; }
.ct-board-status { flex: none; padding: 4px 10px; border-radius: 6px; background: rgba(37, 242, 26, .14); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-green-bright); }
.ct-board a:hover .ct-board-name { color: #fff; }
@media (max-width: 991px) { .ct-hero { grid-template-columns: 1fr; } }
.ct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: clamp(24px, 3vw, 40px); }
.ct-coords { font-family: var(--cs-font-mono, 'Fira Code', monospace); font-size: 14px; letter-spacing: .04em; color: var(--cs-text-faint); }

/* ============ ticket-stub trivia (carousel treatment: one bright object on a dark page) ============ */
.bp-ticket { --stub: 132px; position: relative; display: grid; grid-template-columns: var(--stub) minmax(0, 1fr); transform: rotate(-1.2deg); border-radius: 18px; background: linear-gradient(135deg, var(--cs-pale), #b9f7b2); color: var(--cs-dark1); box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 0 70px rgba(37, 242, 26, .16); -webkit-mask: radial-gradient(circle 14px at var(--stub) 0, #0000 97%, #000), radial-gradient(circle 14px at var(--stub) 100%, #0000 97%, #000); -webkit-mask-composite: source-in; mask: radial-gradient(circle 14px at var(--stub) 0, #0000 97%, #000), radial-gradient(circle 14px at var(--stub) 100%, #0000 97%, #000); mask-composite: intersect; }
.bp-ticket-stub { display: grid; place-items: center; padding: 20px 10px; border-right: 2px dashed rgba(0, 26, 35, .35); }
.bp-ticket .bp-evidence-k { display: block; padding: 0; background: none; box-shadow: none; transform: none; color: var(--cs-dark1); font-size: 15px; line-height: 1.15; text-align: center; letter-spacing: .1em; }
.bp-ticket .bp-evidence-list { margin: 0; padding: clamp(18px, 2vw, 28px) clamp(22px, 2.6vw, 40px); }
.bp-ticket .bp-ev { padding: 8px 0; }
.bp-ticket .bp-ev + .bp-ev { border-top: 1.5px dashed rgba(0, 26, 35, .25); margin-top: 8px; padding-top: 16px; }
.bp-ticket .bp-ev-line { color: var(--cs-dark1); font-weight: 600; max-width: none; }
.bp-ticket .bp-ev-line b { color: var(--cs-dark1); text-shadow: none; }
.bp-why-top .bp-evidence { padding-bottom: 0; }
.bp-why-top .bp-evidence-n { margin-top: 18px; }
@media (max-width: 599px) {
  .bp-ticket { --stub: 52px; grid-template-columns: 1fr; grid-template-rows: var(--stub) auto; -webkit-mask: radial-gradient(circle 12px at 0 var(--stub), #0000 97%, #000), radial-gradient(circle 12px at 100% var(--stub), #0000 97%, #000); mask: radial-gradient(circle 12px at 0 var(--stub), #0000 97%, #000), radial-gradient(circle 12px at 100% var(--stub), #0000 97%, #000); -webkit-mask-composite: source-in; mask-composite: intersect; }
  .bp-ticket-stub { border-right: 0; border-bottom: 2px dashed rgba(0, 26, 35, .35); padding: 0; }
}

/* why this city / where to look: board-page pattern */
.ct-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); align-items: end; }
.ct-top--map { align-items: center; }
.ct-h2 { margin-top: 14px; font-size: clamp(38px, 5vw, 84px); line-height: .98; letter-spacing: -0.035em; }
.ct-ticket .bp-ticket { margin: 0; }
.ct-ticket-text { padding: clamp(18px, 2vw, 28px) clamp(22px, 2.6vw, 40px); font-weight: 700; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.22; letter-spacing: -0.012em; color: var(--cs-dark1); align-self: center; }
.ct-ticket .bp-ticket { grid-template-columns: var(--stub) minmax(0, 1fr); }
.ct-intro { margin-top: clamp(16px, 2vw, 24px); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.35; color: #b3cacf; max-width: 40ch; }
.ct-p { margin-top: 18px; font-size: 18px; line-height: 1.65; color: #b3cacf; max-width: 62ch; }
.ct-p--first { margin-top: 0; font-size: clamp(19px, 1.6vw, 21px); line-height: 1.65; color: var(--cs-text); }
.ct-p--lead { margin-top: 0; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.45; color: var(--cs-text); }
.ct-p a { color: var(--cs-green-bright); }
.ct-p a:hover, .ct-p a:focus-visible { color: #fff; }
.ct-p + .ct-p { margin-top: 1.1em; }
.ct-p b { color: var(--cs-text); font-weight: 700; }
.ct-subhead { margin: 28px 16px 0; font-family: var(--cs-font-label); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-green); }
.ct-points { display: grid; gap: 8px; margin: 16px 16px 0; }
.ct-points li { position: relative; padding-left: 24px; font-size: 18px; color: #b3cacf; }
.ct-points li::before { content: ''; position: absolute; left: 2px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--cs-green-bright); }
.ct-map { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; border: 1.5px solid var(--cs-dark4); background: #03141a; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.ct-map:hover, .ct-map:focus-visible { border-color: var(--cs-green-bright); box-shadow: var(--cs-shadow-glow); }
.ct-map-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.ct-map-coords { position: absolute; left: 16px; bottom: 14px; font-family: var(--cs-font-mono, 'Fira Code', monospace); font-size: 13px; letter-spacing: .04em; color: var(--cs-text-soft); }
.ct-map-go { position: absolute; right: 14px; bottom: 12px; padding: 7px 14px; border-radius: 999px; background: var(--cs-green-bright); color: var(--cs-dark1); font-weight: 800; font-size: 13px; }
@media (max-width: 991px) { .ct-top { grid-template-columns: 1fr; align-items: start; } }
/* featured boards */
.ct-feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(24px, 3vw, 40px); }
.ct-feat-media { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--cs-dark3); border: 1.5px solid var(--cs-dark4); }
.ct-feat-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-feat-name { margin-top: 12px; font-weight: 800; font-size: 17px; line-height: 1.25; color: var(--cs-text); }
.ct-ticket .bp-evidence-k { display: block; padding: 0; background: none; box-shadow: none; transform: none; border-radius: 0; font-family: var(--cs-font-label); font-weight: 800; font-size: 15px; line-height: 1.15; text-align: center; letter-spacing: .1em; text-transform: uppercase; color: var(--cs-dark1); }

/* About: title left, reading column right (ticket only when the CMS subtitle is filled) */
.ct-about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.ct-about-grid > * { min-width: 0; }
.ct-ticket:not(:empty) { margin-bottom: clamp(28px, 3vw, 44px); }
.ct-prose .ct-subhead { margin: 28px 0 0; }
.ct-prose .ct-points { margin-left: 0; max-width: 62ch; }
@media (max-width: 991px) { .ct-about-grid { grid-template-columns: 1fr; } }

/* Where to look: one departures-board row per group (label left, place chips right) */
.ct-grps { margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--cs-border-strong); }
.ct-grp { display: grid; grid-template-columns: minmax(180px, .35fr) minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 72px); align-items: center; padding: clamp(20px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--cs-border-strong); }
.ct-grp-label { font-family: var(--cs-font-mono, 'Fira Code', monospace); font-weight: 700; font-size: clamp(15px, 1.3vw, 18px); letter-spacing: .06em; text-transform: uppercase; color: #ffd84a; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ct-chips li { padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--cs-dark4); background: rgba(255, 255, 255, .03); font-weight: 700; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.2; color: var(--cs-text); }
.ct-grp--solo { grid-template-columns: 1fr; }
.ct-prose--more { margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 767px) { .ct-grp { grid-template-columns: 1fr; gap: 12px; } }

/* hero rhythm: a tall board (8 rows) needs the same air above and below it */
.cp-hero--wide:has(.ct-hero) { padding-bottom: clamp(48px, 5vw, 88px); }
.cp-hero--wide:has(.ct-hero) .cp-crumbs { margin-bottom: clamp(32px, 3.4vw, 52px); }
.ct-board a { padding: 11px 0; }

/* Reuse the shared disclosure; city ownership is limited to spacing and anchor clearance. */
.ct-faq-wrap { max-width: 960px; }
.ct-faq-list { display: grid; gap: 12px; margin-top: 28px; }
.ct-faq-item { scroll-margin-top: 110px; }
.ct-faq-item:target { border-color: var(--cs-green); }