/* =====================================================================
   City cards on network.html, 23 Oct 2026 (like manna.aero "Where we fly"):
   a public photo per city with its name on top; a tap opens #pop-city with
   the planned area map, the numbers and the waitlist. Needs main.css + pop.css.
   ===================================================================== */
/* the band right under the hero (23 Oct: replaces the "Your city" band) */
/* pure black, no edges: the hero fades into it and the next section fades out of it (Henry 23 Oct: flow, not sections) */
.cities-band { background: #000; padding: 12px 0 0; }
.cities-band__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; padding: 0 var(--gutter); }
/* same pattern as the other sections: red eyebrow, display heading, body line (sizes from .section h2 / .net-split__body) */
.cities-band__text .eyebrow { margin-bottom: 14px; }
.cities-band__h { margin: 0 0 14px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(32px, 3.9vw, 62px); line-height: 1.02; letter-spacing: -0.02em; color: var(--text-pure); }
.cities-band__lead { margin: 0; max-width: 760px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: var(--text-dark); opacity: 0.86; }
.cities-band__guess { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-dark); opacity: 0.5; }
.cities-band__guess a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* one row of big cards that you swipe or scroll sideways; the next card peeks in.
   Without JS the clip is a plain sideways scroller. With JS (js/cards.js) the row is moved with a
   transform, so it glides on whole and half pixels alike; scroll positions round to whole pixels and
   made the slow slide step on phones. The finger moves it sideways, up and down stays the page's. */
.cities-clip { overflow-x: auto; scrollbar-width: none; }
.cities-clip::-webkit-scrollbar { display: none; }
.js .cities-clip { overflow: hidden; overflow: clip; touch-action: pan-y; }
.cities {
  position: relative; list-style: none; margin: 28px 0 0; padding: 0 var(--gutter);
  display: grid; grid-auto-flow: column; grid-auto-columns: min(25%, 44vh); gap: 14px;
}
.js .cities { touch-action: pan-y; will-change: transform; }
.cities > li { margin: 0; }
.city-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  width: 100%; aspect-ratio: 3 / 5; padding: 22px; border: 0; overflow: hidden;   /* bigger + taller (Henry 23 Oct); photos are 800x1200, cover crops the sides a little */
  background: #070707; color: var(--text-pure); font: inherit; text-align: left; cursor: pointer;
}
.city-card picture { display: contents; }   /* WebP + 600w wrapper (23 Oct): no box of its own, the photo stays the card's first layer */
.city-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-door, ease); }
.city-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.78) 100%); pointer-events: none; } /* taste-skill-ignore: scrim under the city name */
.city-card__name, .city-card__when, .city-card__more { position: relative; z-index: 1; }
.city-card__name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 2.4vw, 40px); line-height: 0.95; letter-spacing: -0.01em; }
.city-card__when { margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.city-card__more {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.6); border-radius: 50%;
  display: grid; place-items: center; font-size: 20px; line-height: 1; background: rgba(0,0,0,0.35); transition: background 0.2s ease, border-color 0.2s ease;
}
/* the visitor's city (guessed from the connection): a plain black label, no pill */
.city-card__tag { position: absolute; z-index: 1; top: 14px; left: 14px; padding: 5px 8px 4px; background: #000; color: var(--accent); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; }
/* hover only with a real mouse: on phones a tap left the photo zoomed and the + red */
@media (hover: hover) {
  .city-card:hover .city-card__img { transform: scale(1.04); }
  .city-card:hover .city-card__more { background: var(--accent); border-color: var(--accent); }
}
.city-card:focus-visible .city-card__img { transform: scale(1.04); }
.city-card:focus-visible .city-card__more { background: var(--accent); border-color: var(--accent); }
.city-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.city-card--planned .city-card__when { color: var(--text-dark); opacity: 0.8; }   /* planned: grey, 2027 cities stay red */
/* the last card: no photo, a question */
.city-card--you { background: #0b0b0b; border: 1px dashed rgba(255,255,255,0.28); }
.city-card--you::after { content: none; }
.city-card--you .city-card__when { color: var(--text-pure); opacity: 0.7; letter-spacing: 0; text-transform: none; font-family: var(--font-body); font-size: 14px; line-height: 1.4; }

@media (max-width: 1099px) { .cities { grid-auto-columns: min(40%, 46vh); } }
@media (max-width: 800px) {
  .cities { grid-auto-columns: 86%; gap: 12px; }
  .city-card__name { font-size: 40px; }
  .city-card__when { font-size: 12px; }
  .cities-band { padding-bottom: 0; }
}

/* ---------- the popup: one city's planned area ---------- */
.pop--city { width: min(600px, calc(100vw - 32px)); }
.pop--city .pop__x { z-index: 2; }
.pop-city__map { margin: -32px -28px 22px; background: #050505; height: min(52svh, 560px); display: flex; align-items: center; justify-content: center; }
.pop-city__map img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pop-city__when { margin: 0 0 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.pop-city__facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 6px 0 18px; font-size: 16px; line-height: 1.4; }
.pop-city__facts dt { margin: 0; opacity: 0.6; font-size: 14px; padding-top: 1px; }
.pop-city__facts dd { margin: 0; color: var(--text-pure); }
.pop--city .pop__p { margin-bottom: 20px; }
.pop--city .pop__send { display: inline-flex; margin-bottom: 14px; }
@media (max-width: 800px) {
  .pop--city { width: 100vw; max-width: 100vw; }   /* a bottom sheet like the other popups (pop.css) */
  .pop-city__map { margin: -28px -20px 18px; height: min(44svh, 100vw); }
}
@media (prefers-reduced-motion: reduce) { .city-card__img { transition: none; } .city-card:hover .city-card__img { transform: none; } }

/* ---------- the top of the page flows: black fades instead of section edges (Henry 23 Oct) ---------- */
/* hero: its picture fades out into the black of the cards band */
.hero[data-section="hero"] .hero__overlay::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 55%, #000 100%); pointer-events: none; } /* taste-skill-ignore: fade into the next band */
/* the split ("A drone over every ..."): the live layout (text left, the video in its slanted half on the right),
   just without the red slant line (Henry 23 Oct), no bottom border, a very small fade at the top and bottom */
.net-split { border-bottom: 0; }   /* live height again, text centred (Henry 23 Oct: keep the gap, a taller video) */
@media (max-width: 800px) { .net-split { padding-top: 56px; padding-bottom: 8px; } .net-split__text { padding-top: 0; padding-bottom: 0; } }
/* the rolling word: its box cut off just above the capitals, so Ä Ö Ü Õ lost their marks. The box now reaches 0.2em higher
   and the word sits 0.2em down inside it, so it stays exactly where it was and the marks have room */
.net-roll { height: 1.32em; margin-top: -0.2em; }
.net-roll__word { top: 0.2em; }
/* Estonian: Ä Õ Ü stand above the capitals and touched the line above at 0.94 line spacing (DROONIVÕRK under AUTONOOMNE) */
html[lang="et"] .hero h1, html[lang="et"] .net-split__h, html[lang="et"] .section h2, html[lang="et"] .cities-band__h { line-height: 1.08; }
.net-split__edge { display: none; }
.net-split__media { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
/* the specs section (background video): fade in from black at the top; the join section already does */
.section--bgvideo::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 100%); } /* taste-skill-ignore: fade */

/* the specs section starts on the same left edge as everything above it (it was a centred, narrower box) */
.section--bgvideo { padding-left: var(--gutter); padding-right: var(--gutter); padding-top: 72px; }   /* no empty gap after the split */
@media (max-width: 800px) { .section--bgvideo { padding-top: 48px; } }
.section--bgvideo .section__inner { max-width: none; margin: 0; }

/* drag the cards with the mouse or a finger (js/cards.js) */
.cities { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cities.is-dragging { cursor: grabbing; }
.cities img { -webkit-user-drag: none; pointer-events: none; }
/* the Estonian menu words are longer and squeezed the logo to nothing around 1200px wide */
.nav__brand, .nav__brand-mark { flex-shrink: 0; }

/* 23 Oct (sitewide): the menu's top-right corner sits on a bright video sky; a black band
   under the bar (0.65 at the very top, eased out by 240px; lighter on phones) keeps Login / ET / the button readable */
.hero[data-section="hero"] .hero__overlay::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 240px; background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.52) 12%, rgba(0,0,0,0.38) 26%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.07) 70%, rgba(0,0,0,0.025) 85%, rgba(0,0,0,0) 100%); pointer-events: none; } /* taste-skill-ignore: scrim under the menu */
@media (max-width: 800px) { .hero[data-section="hero"] .hero__overlay::before { height: 150px; background: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.22) 30%, rgba(0,0,0,0.10) 60%, rgba(0,0,0,0) 100%); } }   /* phones already have a top scrim (main.css) */

/* 24 Oct: Estonian menu with "Droonivõrk" is too long for 1101-1279 px: the menu button says just "Liitu" there */
.nav .cta-short { display: none; }
@media (min-width: 1101px) and (max-width: 1279px) {
  html[lang="et"] .nav .cta-long { display: none; }
  html[lang="et"] .nav .cta-short { display: inline; }
}