/* Gate Finder: base, layout and components ("Essenziale" design system, docs/04). Mobile first. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--gf-surface); color: var(--gf-ink); font: 400 1rem/1.55 var(--gf-font-body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gf-blue); }
a:hover { color: var(--gf-orange-text-sm); }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid var(--gf-blue); outline-offset: 2px; border-radius: .25rem; }
[hidden] { display: none !important; }
.container { max-width: var(--gf-container); margin: 0 auto; padding: 0 var(--gf-gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--gf-ink); color: #fff; padding: .75rem 1rem; z-index: 30; }
.skip-link:focus { left: .5rem; top: .5rem; }
.gf-blue { color: var(--gf-blue); }
.gf-orange { color: var(--gf-orange); }
.accent { color: var(--gf-orange-text); }
.lead { font-size: 1.125rem; color: var(--gf-muted); margin-top: .375rem; }
.empty, .count { color: var(--gf-muted); }

/* Typography */
h1 { font: 700 clamp(1.75rem, 3.6vw, 2.75rem)/1.1 var(--gf-font-display); letter-spacing: -.02em; margin: 1.75rem 0 .75rem; }
h2 { font: 700 1.375rem/1.2 var(--gf-font-display); letter-spacing: -.01em; }
h3 { font: 700 1.125rem/1.2 var(--gf-font-display); margin-bottom: .75rem; }
@media (min-width: 900px) { h2 { font-size: 1.625rem; } h1 { margin-top: 2.5rem; } }
/* title above a list of events: smaller than a section title, wraps (and breaks a very long word) on a long city name */
.list-title { margin: 2rem 0 1rem; font-size: 1.125rem; line-height: 1.25; overflow-wrap: anywhere; text-wrap: balance; }
@media (min-width: 900px) { .list-title { font-size: 1.375rem; margin-top: 2.5rem; } }
main { flex: 1 0 auto; width: 100%; padding-bottom: 1.5rem; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.375rem; border: 1px solid transparent; border-radius: var(--gf-radius-pill); font: 600 1rem var(--gf-font-body); text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s; }
.btn-primary { background: var(--gf-blue); color: #fff; }
.btn-primary:hover { background: #164077; color: #fff; }
/* the purchase button of the event page: green, to stand out from the blue of the rest of the layout (white text 5.0:1) */
.btn-buy { background: #18803A; color: #fff; }
.btn-buy:hover { background: #136A31; color: #fff; }
.btn-secondary { background: #fff; color: var(--gf-ink); border-color: var(--gf-border); }
.btn-secondary:hover { background: var(--gf-surface-alt); color: var(--gf-ink); }
.btn-accent { background: var(--gf-orange); color: var(--gf-ink); font-weight: 700; min-height: 3.25rem; padding: 0 1.75rem; }
.btn-accent:hover { background: #f0a04a; color: var(--gf-ink); }
.btn-ghost { display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem; padding: 0 .75rem; border: 0; border-radius: var(--gf-radius); background: transparent; color: var(--gf-ink); font: 600 1rem var(--gf-font-body); cursor: pointer; }
.btn-ghost:hover { background: var(--gf-surface-alt); }
.btn-ghost svg:first-child { color: var(--gf-blue); }
.link-btn { border: 0; background: none; padding: .5rem 0; min-height: 2.75rem; font: 600 1rem var(--gf-font-body); color: var(--gf-blue); text-decoration: underline; cursor: pointer; }
.round-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid var(--gf-border); background: #fff; color: var(--gf-ink); cursor: pointer; }
.round-btn:hover { background: var(--gf-surface-alt); color: var(--gf-ink); }
.round-btn { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* no blue flash when a round button is tapped on a phone */
.round-btn:focus:not(:focus-visible) { outline: none; }
.round-btn-light { border: 0; box-shadow: 0 1px .25rem rgba(19, 37, 63, .25); }
.round-btn-dark { background: transparent; border-color: #3A5170; color: #fff; }
.round-btn-dark:hover { background: #1d3558; color: #fff; }

/* Fluid scale: the whole layout is in rem. Fixed 16px base from 1366px up (container 1330px); between 900px and 1365px the base font
   follows the viewport (16 / 1366 * 100vw) so the layout keeps the same proportions, with a 12px floor for legibility. */
@media (min-width: 900px) and (max-width: 1365px) { html { font-size: max(12px, 1.17130vw); } }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--gf-surface); border-bottom: 1px solid var(--gf-line); }
.header-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding-top: .875rem; padding-bottom: .875rem; }
.logo { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; text-decoration: none; }
.logo img { display: block; height: 2.75rem; width: auto; }
@media (min-width: 760px) { .logo img { height: 3.5rem; } .header-row { gap: .5rem 1rem; padding-top: 1rem; padding-bottom: 1rem; } }
/* desktop: destinations menu + search box are one bar (grey, rounded, a thin divider after the menu); on a phone the wrapper is transparent to the layout */
.header-search { display: contents; }
.search { flex: 1 1 100%; order: 5; position: relative; }
.search label { display: flex; width: 100%; align-items: center; gap: .625rem; min-height: 2.875rem; padding: 0 3.25rem 0 1.25rem; border-radius: var(--gf-radius); background: var(--gf-surface-alt); color: var(--gf-muted); }
.search input, .search-big input { flex: 1; min-width: 0; border: 0; background: transparent; font: 1rem var(--gf-font-body); color: var(--gf-ink); outline: none; }
/* form fields: no blue ring (owner's choice, 2026-10-27); a neutral grey border keeps the focused field visible */
.search label:focus-within { box-shadow: inset 0 0 0 1px var(--gf-muted); }
.search-big input:focus-visible { box-shadow: 0 0 0 1px var(--gf-muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--gf-muted); }
.search-submit { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--gf-blue); cursor: pointer; }
.search-submit:hover { background: var(--gf-selected); }
@media (min-width: 760px) {
  .header-search { display: flex; align-items: center; flex: 1 1 17.5rem; min-width: 0; margin-left: 2rem; border-radius: var(--gf-radius); background: var(--gf-surface-alt); }
  .header-search:has(input:focus-visible) { box-shadow: inset 0 0 0 1px var(--gf-muted); }
  .header-search .place { flex: none; margin-left: 0; }
  .header-search .place > summary { min-height: 2.875rem; padding: 0 1rem 0 1.125rem; background: transparent; }
  .header-search .place::after { content: ""; position: absolute; right: 0; top: 24%; bottom: 24%; width: 1px; background: var(--gf-border); }
  .header-search .search { flex: 1 1 auto; order: 0; min-width: 0; }
  .header-search .search label { background: transparent; box-shadow: none; }
}
/* Phone header: logo left, hamburger right, search on its own row; the menu lists destinations and languages already open */
.menu { margin-left: auto; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-right: -.375rem; color: var(--gf-ink); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.menu-panel { position: absolute; z-index: 25; left: 0; right: 0; top: 100%; max-height: calc(100vh - 8rem); overflow: auto; padding: 1rem var(--gf-gutter) 1.25rem; background: #fff; border-bottom: 1px solid var(--gf-line); box-shadow: 0 .75rem 1.5rem rgba(19, 37, 63, .12); }
.menu-sub + .menu-sub { margin-top: .75rem; }
.menu-sub > summary { display: flex; align-items: center; gap: .75rem; min-height: 3rem; padding: 0 1rem; border: 1px solid var(--gf-border); border-radius: var(--gf-radius); font: 700 1rem var(--gf-font-display); color: var(--gf-ink); cursor: pointer; list-style: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.menu-sub > summary::-webkit-details-marker { display: none; }
.menu-sub[open] > summary { background: var(--gf-surface-alt); }
.menu-chev { display: inline-flex; margin-left: auto; transition: transform .15s; }
.menu-sub[open] .menu-chev { transform: rotate(180deg); }
.menu-sub > .place-list { margin: .375rem 0 0; }
.menu-panel .place-list button { gap: .625rem; }
@media (max-width: 759px) { .place, .translate { display: none; } }
@media (min-width: 760px) { .menu { display: none; } }
.place { position: relative; }
.place > summary { list-style: none; cursor: pointer; }
.place > summary::-webkit-details-marker { display: none; }
.place-panel, .translate-menu { position: absolute; z-index: 25; left: 0; top: calc(100% + .375rem); min-width: 15rem; max-width: 90vw; max-height: 70vh; overflow: auto; padding: .75rem; background: #fff; border: 1px solid var(--gf-border); border-radius: var(--gf-radius); box-shadow: 0 .5rem 1.75rem rgba(19, 37, 63, .16); }
.place-title { font: 600 .8125rem var(--gf-font-body); color: var(--gf-muted); margin: .5rem .5rem .25rem; text-transform: uppercase; letter-spacing: .04em; }
.place-list a, .place-list button { display: flex; align-items: center; gap: .625rem; width: 100%; min-height: 2.75rem; padding: 0 .625rem; border: 0; border-radius: var(--gf-radius); background: none; color: var(--gf-ink); font: 500 1rem var(--gf-font-body); text-align: left; text-decoration: none; cursor: pointer; }
.place-list a:hover, .place-list button:hover { background: var(--gf-surface-alt); }
.place-list [aria-current] { background: var(--gf-selected); font-weight: 600; }
.translate { position: relative; margin-left: auto; }
.translate .btn-ghost { gap: .5rem; }
.flag { display: block; width: 1.5rem; height: 1.125rem; border-radius: 3px; box-shadow: 0 0 0 1px rgba(19, 37, 63, .18); flex: none; }
.translate-menu .place-list button { gap: .625rem; }
.translate-menu { left: auto; right: 0; }
.translate-error { margin: .5rem; color: var(--gf-orange-text-sm); font-size: .875rem; }
#google_translate_element, .skiptranslate { display: none !important; }
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-ZVi9od-aZ2wEe-OiiCO, .goog-te-spinner-pos { display: none !important; } /* the round Google logo the widget shows at the top left while it translates */
body { top: 0 !important; }
.chips { max-width: var(--gf-container); margin: 0 auto; padding: 0 var(--gf-gutter) .75rem; display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips a { flex: none; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--gf-radius); text-decoration: none; font: 500 .9375rem var(--gf-font-body); color: var(--gf-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--gf-border); }
.chips a:hover { background: var(--gf-surface-alt); color: var(--gf-ink); }
.chips a.active { background: var(--gf-ink); color: #fff; box-shadow: none; }

/* Placeholders and images: colour classes (inline styles are blocked by the CSP) */
.ph { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--gf-radius-card); background: #566573; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph-empty { background: #E4E8ED; }
.ph-music { background: #5B3FA6; } .ph-shows { background: #B23A48; } .ph-art { background: #2F6F8F; } .ph-tours { background: #1F5FBF; } .ph-food { background: #C8621B; }
.ph-outdoor { background: #2E7D4F; } .ph-family { background: #D18F00; } .ph-nightlife { background: #2B2D6E; } .ph-workshops { background: #7A5C3E; } .ph-other { background: #566573; }

/* Intro, blocks */
.intro { padding-bottom: .5rem; }
.block { padding-top: 2.75rem; }
.block > h2 { margin-bottom: 1rem; }
.prose p { margin: 0 0 .75rem; color: #3A4A60; line-height: 1.6; }
.prose h2 { margin: 1.25rem 0 .5rem; }
.prose ul { list-style: disc; margin: 0 0 .75rem; padding-left: 1.375rem; color: #3A4A60; line-height: 1.6; }
.prose li { margin-bottom: .375rem; }
.page { padding: .5rem 0 2rem; } /* static pages (privacy, terms...) use the whole width of the container */
.page p, .page li { font-size: 1.125rem; } /* body text 18px; titles and subtitles keep their size */

/* Hero */
.hero { margin-top: 1.5rem; border-radius: var(--gf-radius-panel); overflow: hidden; background: var(--gf-ink); color: #fff; }
.hero-slide { display: grid; grid-template-columns: 1fr; }
.hero-media { position: relative; max-height: 32.5rem; }
.hero-media .ph { border-radius: 0; max-height: 32.5rem; }
.hero-badge { position: absolute; top: 1rem; left: 1rem; padding: .375rem .75rem; border-radius: var(--gf-radius); background: #fff; color: var(--gf-ink); font: 600 .8125rem var(--gf-font-body); }
.hero-body { padding: 1.5rem 1.25rem 1.75rem; display: flex; flex-direction: column; justify-content: center; gap: .875rem; }
.hero-kicker { font: 600 .9375rem var(--gf-font-body); color: var(--gf-orange-on-dark); }
.hero-body h2 { font-size: 1.75rem; line-height: 1.12; }
.hero-text { color: var(--gf-on-dark-muted); font-size: 1.0625rem; }
.hero-meta { display: flex; align-items: center; gap: .5rem; color: var(--gf-on-dark-muted); font-size: .9375rem; }
.hero-cta { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: .25rem; }
.hero-price { font: 600 1.125rem var(--gf-font-body); }
.hero-controls { display: flex; align-items: center; gap: .625rem; margin-top: .5rem; }
.hero-dots { display: flex; gap: .375rem; margin-left: .5rem; }
.dot { width: .375rem; height: .375rem; border-radius: 3px; background: #3A5170; }
.dot.on { width: 1.375rem; background: var(--gf-orange); }
@media (min-width: 900px) { .hero-slide { grid-template-columns: minmax(0, 32.5rem) 1fr; } .hero-body { padding: 2.5rem; } .hero-body h2 { font-size: 2.375rem; } }

/* Rows and cards */
.row { padding-top: 2.75rem; }
.row-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.row-actions { display: flex; align-items: center; gap: .5rem; }
.row-all { font: 600 .9375rem var(--gf-font-body); margin-right: .5rem; display: inline-flex; align-items: center; min-height: 2.75rem; }
.row-actions .round-btn { width: 2.5rem; height: 2.5rem; }
.row-scroll { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .375rem; scrollbar-width: none; }
.row-scroll::-webkit-scrollbar { display: none; }
.row-scroll > li { flex: 0 0 44vw; max-width: 14.25rem; scroll-snap-align: start; }
@media (min-width: 900px) { .row-scroll { gap: 1.25rem; } .row-scroll > li { flex-basis: 14.25rem; } }
.card { display: flex; flex-direction: column; gap: .25rem; color: var(--gf-ink); text-decoration: none; }
.card:hover { color: var(--gf-ink); }
.card:hover .card-title { text-decoration: underline; }
.card .ph img { transition: transform .2s; }
.card:hover .ph img { transform: scale(1.03); }
.card .ph { margin-bottom: .375rem; }
.card-when { font: 600 .875rem var(--gf-font-body); color: var(--gf-blue); }
.card-title { font: 600 1rem/1.3 var(--gf-font-display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-venue { font-size: .875rem; color: var(--gf-muted); }
.card-price { font: 600 .9375rem var(--gf-font-body); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; margin-top: 1rem; }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1.25rem; } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Most searched destinations: square image like an event card, white pill badge with flag and country top left, name on a dark veil */
.popular { margin-top: 3rem; }
.dest-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 600px) { .dest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .dest-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; } }
.dest { position: relative; display: block; isolation: isolate; border-radius: var(--gf-radius-card); overflow: hidden; color: #fff; text-decoration: none; }
.dest:hover { color: #fff; }
.dest .ph img { transition: transform .5s cubic-bezier(.22, .61, .36, 1); will-change: transform; transform: translateZ(0); }
.dest:hover .ph img, .dest:focus-visible .ph img { transform: scale(1.05) translateZ(0); }
@media (prefers-reduced-motion: reduce) { .dest .ph img { transition: none; } }
.dest-badge { position: absolute; top: .75rem; left: .75rem; display: inline-flex; align-items: center; gap: .375rem; padding: .3125rem .625rem; border-radius: var(--gf-radius); background: #fff; color: var(--gf-ink); font: 600 .8125rem var(--gf-font-body); }
.dest-badge .flag { border-radius: 2px; }
.dest-label { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 4.5rem .875rem .875rem; background: linear-gradient(rgba(19, 37, 63, 0), rgba(19, 37, 63, .7) 40%, rgba(19, 37, 63, .96)); }
.dest-name { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.dest-name { font: 700 1.125rem/1.2 var(--gf-font-display); }
.dest-meta { font-size: .8125rem; opacity: .9; }

/* Featured events: the most clicked ones with a date in the next 15 days; one per row on a phone, four on a desktop */
.featured { margin-top: 3.5rem; }
@media (min-width: 900px) { .featured { margin-top: 5rem; } .country-head + .featured { margin-top: 3rem; } }
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem 1.25rem; margin-top: 1.5rem; }
@media (min-width: 600px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Alphabetical list of every destination: text badges with the flag on the left */
.catalog { margin-top: 3.5rem; padding-bottom: .5rem; }
@media (min-width: 900px) { .popular { margin-top: 4rem; } .catalog { margin-top: 5rem; padding-bottom: 2rem; } }
/* country page: city dropdown beside the title (right-aligned on desktop), city badges at the bottom */
.country-head { display: flex; flex-direction: column; gap: .5rem; }
.city-menu { position: relative; }
.city-menu > summary { white-space: nowrap; display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.75rem; padding: 0 .875rem; border: 1px solid var(--gf-border); border-radius: var(--gf-radius); background: #fff; font: 600 .9375rem var(--gf-font-body); cursor: pointer; list-style: none; }
.city-menu > summary::-webkit-details-marker { display: none; }
.city-menu[open] > summary svg { transform: rotate(180deg); }
.city-pick-btn { white-space: nowrap; display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.75rem; padding: 0 .875rem; border: 1px solid var(--gf-border); border-radius: var(--gf-radius); background: #fff; color: var(--gf-ink); text-decoration: none; font: 600 .9375rem var(--gf-font-body); cursor: pointer; }
.city-dialog { width: min(60rem, calc(100vw - 1.5rem)); max-height: 85vh; padding: 0; border: 0; border-radius: var(--gf-radius); background: #fff; color: var(--gf-ink); overflow: hidden; }
.city-dialog[open] { display: flex; flex-direction: column; }
.city-dialog::backdrop { background: rgba(19, 37, 63, .55); }
.city-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1rem 1rem 1.25rem; border-bottom: 1px solid var(--gf-border); }
.city-dialog-head h2 { margin: 0; font-size: 1.25rem; text-align: left; }
.city-dialog-head button { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--gf-ink); cursor: pointer; }
.city-dialog-head button:hover { background: var(--gf-surface-alt); }
.city-dialog-list { list-style: none; margin: 0; padding: .75rem 1rem 1rem; overflow-y: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: .5rem; }
.city-dialog-list a { display: flex; align-items: center; min-height: 2.75rem; padding: 0 .5rem; color: var(--gf-ink); text-decoration: none; font: 600 .9375rem var(--gf-font-body); overflow-wrap: break-word; hyphens: auto; }
.city-dialog-list a:hover { background: var(--gf-surface-alt); }
@media (max-width: 599px) { .city-dialog-list a { font-size: .6875rem; padding: 0 .125rem; line-height: 1.2; } .city-dialog-head h2 { font-size: 1.0625rem; } .city-dialog-list { padding: .5rem; column-gap: .25rem; } }
.city-menu-panel { margin-top: .375rem; max-height: 60vh; overflow: auto; padding: .5rem; background: #fff; border: 1px solid var(--gf-border); border-radius: var(--gf-radius); }
.city-menu-panel a { display: flex; align-items: center; min-height: 2.75rem; padding: 0 .5rem; color: var(--gf-ink); text-decoration: none; font: 600 .9375rem var(--gf-font-body); }
.city-menu-panel a:hover { background: var(--gf-surface-alt); }
.cities-title { display: none; }
@media (min-width: 900px) {
  .country-head { position: relative; }
  .country-head h1 { padding-right: 19rem; } /* the title wraps before the dropdown; the lead below uses the full width */
  .city-menu { position: absolute; right: 0; top: calc(2.5rem + (clamp(1.75rem, 3.6vw, 2.75rem) * 1.1 - 2.75rem) / 2); min-width: 13rem; width: max-content; max-width: 18rem; } /* centred on the first line of the h1 */
  .city-menu-panel { position: absolute; z-index: 25; right: 0; top: 100%; min-width: 100%; width: max-content; max-width: 90vw; box-shadow: 0 .5rem 1.75rem rgba(19, 37, 63, .16); }
  .cities-title { display: block; }
  .city-menu-panel { column-gap: .5rem; }
  .city-menu-panel li { break-inside: avoid; }
  .city-menu-cols-2 { columns: 2; width: 26rem; }
  .city-menu-cols-3 { columns: 3; width: 38rem; }
  .city-menu-cols-4 { columns: 4; width: 50rem; }
}
/* country page: city names only; a dropdown on mobile (the list is open without JS, closed by the script on mobile) */
.city-picker { margin-top: 1.5rem; }
.city-picker > summary { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; padding: 0 .875rem; border: 1px solid var(--gf-border); border-radius: var(--gf-radius); background: #fff; font: 600 .9375rem var(--gf-font-body); cursor: pointer; list-style: none; }
.city-picker > summary::-webkit-details-marker { display: none; }
.city-picker[open] > summary svg { transform: rotate(180deg); }
.city-picker .city-badges { margin-top: .5rem; }
@media (min-width: 900px) { .city-picker > summary { display: none; } .city-picker .city-badges { margin-top: 0; } }
.catalog + .catalog { margin-top: 2rem; }
.catalog:has(+ .catalog) { padding-bottom: 0; }
.city-badges { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-top: 1.5rem; }
@media (min-width: 600px) { .city-badges { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .city-badges { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .city-badges { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.city-badge { display: flex; align-items: center; gap: .375rem; width: 100%; min-height: 2.75rem; padding: 0 .5rem 0 .625rem; border-radius: var(--gf-radius); border: 1px solid var(--gf-border); background: #fff; color: var(--gf-ink); text-decoration: none; font: 600 .875rem var(--gf-font-body); }
.city-badge span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.city-badge:hover { background: var(--gf-surface-alt); color: var(--gf-ink); }
.city-badge .flag { border-radius: 2px; flex: none; }

/* Category tiles, pills */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr)); gap: 1rem; }
.tile { position: relative; display: block; border-radius: var(--gf-radius-card); overflow: hidden; text-decoration: none; }
.tile-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem .875rem .875rem; background: linear-gradient(transparent, rgba(19, 37, 63, .85)); color: #fff; font: 700 1rem var(--gf-font-display); }
.pill-list, .country-list { display: flex; flex-wrap: wrap; gap: .625rem; }
.pill, .country-list a { display: inline-flex; align-items: center; gap: .625rem; min-height: 3.25rem; padding: 0 1.125rem 0 .375rem; border-radius: var(--gf-radius); border: 1px solid var(--gf-border); text-decoration: none; color: var(--gf-ink); font: 600 .9375rem var(--gf-font-body); }
.pill:hover, .country-list a:hover { background: var(--gf-surface-alt); color: var(--gf-ink); }
.pill-dot { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--gf-selected); color: var(--gf-blue); font: 700 1rem var(--gf-font-display); }
.pill-count { color: var(--gf-muted); font-weight: 400; font-size: .875rem; }
.country-meta { color: var(--gf-muted); font-weight: 400; font-size: 1rem; }
/* destinations: full width of the container; stacked on a phone, two per row on a tablet, four on a desktop */
.country-list { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-top: 2rem; }
@media (min-width: 600px) { .country-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 900px) { .country-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.country-list a { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: var(--gf-radius); min-height: 0; height: 100%; }
.country-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--gf-selected); }
.country-body { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .875rem 1.125rem 1rem; min-height: 4.5rem; }
.country-text { display: flex; flex-direction: column; min-width: 0; }
.country-flag { width: 2.25rem; height: 1.6875rem; border-radius: 4px; }
.country-name { font-weight: 600; font-size: 1.25rem; }

/* Home search results: a plain list, three lines per event */
.hit-list { margin-top: 1rem; border-top: 1px solid var(--gf-line); }
.hit-list li { border-bottom: 1px solid var(--gf-line); }
.hit { display: flex; align-items: center; gap: 1rem; min-height: 2.75rem; padding: .875rem .25rem; color: var(--gf-ink); text-decoration: none; }
.hit:hover, .hit:focus-visible { background: var(--gf-surface-alt); }
.hit-img { flex: none; width: 7rem; }
.hit-img .ph { display: block; aspect-ratio: 1 / 1; border-radius: var(--gf-radius); overflow: hidden; }
.hit-img img { width: 100%; height: 100%; object-fit: cover; }
.hit-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.hit-title { font: 600 1.25rem/1.3 var(--gf-font-body); }
.hit-when { color: var(--gf-muted); font-size: 1.0625rem; }
.hit-place { display: flex; align-items: center; gap: .5rem; color: var(--gf-muted); font-size: 1.0625rem; }
@media (max-width: 599px) { .hit-img { display: none; } .hit-title { font-size: 1.1875rem; } .hit-when, .hit-place { font-size: 1rem; } }

/* Breadcrumb, toolbar, pagination */
.breadcrumb { padding-top: 1rem; font-size: .875rem; color: var(--gf-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .25rem; }
.breadcrumb li + li::before { content: "›"; margin-right: .25rem; }
.breadcrumb a { color: var(--gf-muted); display: inline-block; min-height: 1.5rem; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .5rem; }
.sort { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sort select, .search-big input { min-height: 2.75rem; padding: 0 .875rem; border: 1px solid var(--gf-border); border-radius: var(--gf-radius); background: #fff; font: 1rem var(--gf-font-body); color: var(--gf-ink); }
.search-big { display: flex; gap: .5rem; margin: 1rem 0; max-width: 40rem; }
.search-big input { flex: 1; border-radius: var(--gf-radius); padding: 0 1.25rem; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; color: var(--gf-muted); }
.pg-btn { width: 11.5rem; padding: 0 1rem; gap: .375rem; white-space: nowrap; } /* the same width for both buttons and every language */
.pg-btn svg { flex: none; }
.pg-btn:disabled { background: var(--gf-surface-alt); border-color: var(--gf-line); color: var(--gf-muted); cursor: not-allowed; }
.pg-status { text-align: center; }
/* phone: arrows only, square buttons; the word is the accessible name (aria-label) */
@media (max-width: 599px) { .pagination { gap: .75rem; } .pg-btn { width: 2.75rem; padding: 0; } .pg-text { display: none; } }

/* Calendar */
.day-strip { margin-top: .75rem; overflow-x: auto; scrollbar-width: none; }
.day-strip ul { display: flex; gap: .5rem; }
.day-strip a { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 4rem; padding: .625rem 0; border-radius: var(--gf-radius); border: 1.5px solid var(--gf-border); color: var(--gf-ink); text-decoration: none; }
.day-strip a.active { border-color: var(--gf-blue); background: var(--gf-selected); }
.day-wd, .day-m { font-size: .75rem; text-transform: capitalize; }
.day-n { font: 700 1.125rem var(--gf-font-display); }
.calendar-day { margin-top: 1.75rem; text-transform: capitalize; }

/* Event page. Phone: title and facts, photo, text, place; the purchase button is fixed at the bottom of the screen.
   Desktop: a left column of fixed width (button, photo, calendar) beside the text; the two buttons are in the page. */
.event { display: grid; gap: 0; }
.event-side, .event-main { display: contents; }
.event-head { order: 1; }
.event-media { order: 2; position: relative; margin-top: .5rem; }
.event-body { order: 3; }
.event-buy-top, .event-buy-bottom, .event-calendar { display: none; }
.event-media .ph { border-radius: var(--gf-radius-panel); }
.event-tools { position: absolute; top: .75rem; right: .75rem; display: flex; gap: .5rem; }
.event-head .event-crumbs { margin-top: 1rem; flex-wrap: wrap; gap: .5rem .375rem; } /* a badge that does not fit goes to the next line, with space above it */
.event-crumbs .city-badge { display: block; flex: 0 1 auto; min-width: 0; max-width: 100%; min-height: 2.25rem; padding: 0 .75rem; font-size: .8125rem; line-height: 2.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-head h1 { font-size: 1.625rem; margin: 1.75rem 0 .75rem; }
.event-head .event-crumbs + h1 { margin-top: 1.75rem; } /* beats .badge-row + h1 (.75rem): 1 rem more between the badges and the title */
.info { display: flex; flex-direction: column; gap: .75rem; padding: .25rem 0 .75rem; font-size: .9375rem; }
.info li { display: flex; gap: .75rem; align-items: flex-start; }
.info svg { color: var(--gf-blue); flex: none; margin-top: 1px; }
.notice { margin: .5rem 0 .75rem; padding: .875rem 1rem; border-radius: var(--gf-radius); background: var(--gf-selected); }
.event-section { padding-top: 1.5rem; border-top: 1px solid var(--gf-line); margin-top: 1.25rem; }
.event-section > h2 { margin-bottom: .75rem; font-size: 1.25rem; }
.event-description { margin-top: 1rem; padding-top: 0; border-top: 0; }
.event-description .prose { font-size: 1.125rem; }
.empty-note { display: flex; align-items: center; justify-content: center; min-height: 9rem; padding: 1.5rem; border-radius: var(--gf-radius); background: var(--gf-surface-alt); color: var(--gf-muted); text-align: center; line-height: 1.5; }
.venue-box { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; border-radius: var(--gf-radius); background: #E8EEF5; }
.venue-map { position: relative; display: block; height: 15rem; overflow: hidden; border-radius: var(--gf-radius); background: #DCE5EF; }
.venue-map img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
/* the space of the map is reserved and shows a spinner until the picture (made on the first visit, a couple of seconds) paints over it */
.venue-map::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; border: 3px solid rgba(30, 70, 120, .2); border-top-color: var(--gf-blue); border-radius: 50%; animation: gf-spin .8s linear infinite; }
.venue-map.is-failed::before { display: none; }
@keyframes gf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .venue-map::before { animation: none; } }
.venue-address { line-height: 1.5; }
.venue-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.venue-links .btn { min-height: 2.25rem; padding: 0 .875rem; font-size: .8125rem; }
.event-calendar { padding: 1rem; border: 1px solid var(--gf-line); border-radius: var(--gf-radius-panel); background: #fff; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.75rem; margin-bottom: .375rem; }
.cal-title { flex: 1; margin: 0; text-align: center; font: 700 1.0625rem var(--gf-font-display); }
.cal-nav { width: 2.5rem; height: 2.5rem; border: 1px solid var(--gf-border); }
.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; }
.cal-grid th { padding: .25rem 0 .5rem; font: 600 .75rem var(--gf-font-body); color: var(--gf-muted); }
.cal-grid abbr { text-decoration: none; }
.cal-grid td { padding: 2px; }
.cal-day { display: flex; align-items: center; justify-content: center; height: 2.75rem; border-radius: var(--gf-radius); font: 500 .9375rem var(--gf-font-body); color: #8A97AA; }
a.cal-day.is-open { text-decoration: none; background: var(--gf-selected); color: var(--gf-blue); font-weight: 700; border: 1.5px solid #BBD2F0; }
a.cal-day.is-open:hover { background: var(--gf-blue); border-color: var(--gf-blue); color: #fff; }
.event-calendar.is-paged .cal-month:not(.is-current) { display: none; }
.related { margin: 2.5rem 0 5rem; padding-top: 2rem; border-top: 1px solid var(--gf-line); }
.related > h2 { margin: 0; }
.grid.grid-related { grid-template-columns: 1fr; gap: 1.75rem; margin-top: 1.25rem; } /* eight recommended events: one per row on a phone, two on a tablet, four on a desktop */
@media (min-width: 600px) { .grid.grid-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid.grid-related { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem 1.25rem; } }
.cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: #fff; box-shadow: 0 -4px 20px rgba(19, 37, 63, .28); padding: .625rem 0 max(.625rem, env(safe-area-inset-bottom)); }
.btn-wide { min-height: 3.25rem; width: 100%; }
/* the bar fixed at the bottom of a phone: the button is half as tall again and its label a little larger, on one line in every language */
.cta-bar .btn-wide { min-height: 4.875rem; font-size: 1.1875rem; white-space: nowrap; }
@media (min-width: 900px) {
  .event { grid-template-columns: 25rem minmax(0, 1fr); gap: 2.5rem; margin-top: 1.5rem; align-items: start; }
  .event-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
  .event-main { display: block; min-width: 0; }
  .event-buy-top, .event-calendar { display: block; }
  .event-buy-bottom { display: block; margin-top: 1.75rem; }
  .event-buy-top .btn { min-height: 2.75rem; }
  .event-buy-bottom .btn { min-height: 3.5rem; font-size: 1.25rem; }
  .venue-map { height: 18.125rem; }
  .event-head, .event-media, .event-body { order: 0; }
  .event-media { margin-top: 0; }
  .event-head .event-crumbs { margin-top: 0; flex-wrap: wrap; gap: .5rem; }
  .event-crumbs .city-badge { display: inline-flex; min-height: 2.35rem; padding: 0 .925rem; font-size: 1.125rem; line-height: normal; overflow: visible; }
  .event-head h1 { font-size: 2.25rem; }
  .event-description { margin-top: 1.25rem; padding-top: 1.5rem; border-top: 1px solid var(--gf-line); }
  .event-section { margin-top: 1.25rem; }
  .cta-bar { display: none; }
}

/* Footer */
.site-footer { background: var(--gf-surface-footer); border-top: 1px solid var(--gf-line); margin-top: 3rem; padding: 2.5rem 0 2rem; color: var(--gf-muted); font-size: .9375rem; }
.site-footer a, .site-footer .link-btn { text-decoration: none; }
/* neutral grey for every footer text and the logo (the old logo grey, black at 35 %, has only 2.4:1 on the footer; this one has 5:1) */
.site-footer, .footer-links a, .footer-links .link-btn, .footer-credit { color: #6B6B6B; }
.site-footer a:hover, .site-footer .link-btn:hover { text-decoration: underline; }

/* The root: the six languages as flags (links). Desktop: top right, in the row of the logo (the logo is 2.625rem high); phone: first, centred above the logo */
.footer-langs ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .25rem; margin: 0 0 .25rem; padding: 0; list-style: none; }
.footer-langs a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; border-radius: 8px; }
.footer-langs a:hover .flag, .footer-langs a:focus-visible .flag { box-shadow: 0 0 0 2px var(--gf-blue); }
@media (max-width: 759px) { .footer-langs a { min-width: 2rem; } }
@media (min-width: 760px) { .footer-langs { position: absolute; top: 0; right: 0; height: 2.625rem; display: flex; align-items: center; } .footer-langs ul { margin: 0; justify-content: flex-end; flex-wrap: nowrap; } .footer-langs a { min-height: 2.625rem; margin-left: .7rem; } }

/* Footer bottom bar: brand and producer on the left, legal links on the right */
.footer-bottom { position: relative; display: flex; flex-direction: column; gap: 1.25rem; border-top: 1px solid var(--gf-line); }
.footer-brand { display: flex; flex-direction: column; gap: .75rem; }
.footer-logo { align-self: flex-start; height: 2.625rem; width: auto; opacity: .563; } /* black at 56 % on the footer's #F5F7FA is #6B6C6D: the grey of the texts */
.footer-legal { font-size: .875rem; line-height: 1.6; }
.footer-links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.footer-links a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--gf-muted); }
.footer-links .link-btn { display: inline-flex; align-items: center; gap: .5rem; padding: 0; color: var(--gf-muted); font-weight: 400; font-size: inherit; text-decoration: none; }
.footer-links svg { flex: none; }
.footer-side { display: flex; flex-direction: column; gap: .25rem; }
.footer-credit { font-size: .75rem; line-height: 1.4; color: var(--gf-muted); }
.footer-credit a { color: inherit; text-decoration: none; }
.footer-credit a:hover { text-decoration: underline; }
@media (min-width: 760px) { .footer-bottom { flex-direction: row; align-items: flex-end; justify-content: space-between; border-top: 0; } .footer-links { justify-content: flex-end; } .footer-side { align-items: flex-end; margin-bottom: -.675rem; } .footer-credit { order: -1; text-align: right; } }
/* Phone: every footer text centred, the three legal links one per row */
@media (max-width: 759px) {
  .site-footer { text-align: center; }
  .footer-brand { align-items: center; }
  .footer-logo { align-self: center; }
  .footer-links { flex-direction: column; align-items: center; gap: 0; }
  .footer-links a, .footer-links .link-btn { min-height: 2.25rem; } /* the legal links are closer together on a phone */
  .footer-credit { margin-top: .875rem; } /* and the OpenStreetMap credit stands apart from them */
  .footer-side { align-items: center; }
}

/* Privacy notice: information with a single OK (pale yellow); it also goes away when the page is scrolled. Centred on a desktop */
.consent { position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: .625rem 1rem; padding: .875rem 1rem; background: #FFF4CC; border: 1px solid #EBD487; border-radius: var(--gf-radius); box-shadow: 0 .5rem 2rem rgba(19, 37, 63, .22); font-size: .9375rem; line-height: 1.45; }
.consent[hidden] { display: none; }
.consent p { flex: 1 1 16rem; }
.consent .btn { flex: 0 0 auto; min-width: 5rem; padding: 0 1.25rem; }
body:has(.cta-bar) .consent { bottom: 7.5rem; }
@media (min-width: 760px) { .consent { left: 50%; right: auto; width: min(44rem, calc(100% - 2.5rem)); transform: translateX(-50%); } }
@media (min-width: 900px) { body:has(.cta-bar) .consent { bottom: .75rem; } }
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(19, 37, 63, .55); }
.modal[hidden] { display: none; }
.modal-box { width: 100%; max-width: 28rem; padding: 1.5rem; background: #fff; border-radius: var(--gf-radius); box-shadow: 0 .5rem 1.75rem rgba(19, 37, 63, .3); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } .card:hover .ph img { transform: none; } }
.round-btn.saved, .round-btn.saved:hover { color: #D92D20; } /* a saved event: red heart, filled, on the same white button */
.round-btn.saved svg { fill: currentColor; }
body:has(.cta-bar) .site-footer { padding-bottom: 8rem; }
@media (min-width: 900px) { body:has(.cta-bar) .site-footer { padding-bottom: 2rem; } }

/* FAQ, highlights, landing intro */
.faq details { border-bottom: 1px solid var(--gf-line); }
.faq summary { cursor: pointer; padding: .875rem 0; min-height: 2.75rem; font: 600 1rem var(--gf-font-body); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.375rem; color: var(--gf-blue); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 1rem; color: #3A4A60; }
.checks { display: flex; flex-direction: column; gap: .625rem; color: #3A4A60; }
.checks li { display: flex; gap: .625rem; align-items: flex-start; }
.checks svg { color: var(--gf-success); flex: none; margin-top: 3px; }
.intro-text { max-width: 47.5rem; margin-bottom: .5rem; }

.preview-banner { position: sticky; top: 0; z-index: 50; background: var(--gf-orange); color: var(--gf-ink); padding: .5rem 1rem; font-weight: 700; text-align: center; margin: 0 calc(var(--gf-gutter) * -1); }

/* category page: city badge above the title, empty state */
.city-badge-inline { display: inline-flex; justify-content: center; width: auto; min-height: 2.75rem; padding: 0 1.125rem; border-color: #D6E4F7; border-radius: 999px; background: #D6E4F7; color: var(--gf-blue); font-size: 1.125rem; font-weight: 700; }
.badge-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.city-badge-inline:hover { background: #C4D8F2; color: var(--gf-blue); }
.badge-row + h1 { margin-top: .75rem; }
/* desktop refinements of the event page: badges with the radius of the header search field, a taller "check availability" button, a larger text everywhere */
@media (min-width: 900px) {
  .city-badge.city-badge-inline, .event-crumbs .city-badge.city-badge-inline { border-radius: var(--gf-radius); }
  .event-buy-top .btn { min-height: 3.575rem; font-size: 1.2rem; }
  .event-head h1 { margin-bottom: 1.75rem; }
  .info { font-size: 1.0375rem; }
  .info svg { width: calc(20px + .1rem); height: calc(20px + .1rem); }
  .event-description .prose { font-size: 1.225rem; }
  .venue-address { font-size: 1.2rem; }
  .venue-links .btn { min-height: 2.45rem; font-size: 1.0125rem; }
}
/* phone refinements: the blue badges are the same on every page (event, category, city), with the radius of the header search field */
@media (max-width: 899px) {
  .city-badge.city-badge-inline, .event-crumbs .city-badge.city-badge-inline { display: inline-block; width: auto; max-width: 100%; min-height: 2.65rem; padding: 0 1.025rem; border-radius: var(--gf-radius); font-size: 1.125rem; font-weight: 700; line-height: 2.65rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .info { font-size: 1.0375rem; }
  .info svg { width: calc(20px + .1rem); height: calc(20px + .1rem); }
  .event-description .prose { font-size: 1.225rem; }
  .cta-bar .btn-wide { min-height: 4.575rem; }
  .venue-address { font-size: 1.1rem; }
  .venue-links { flex-direction: column; }
  .venue-links .btn { width: 100%; min-height: 2.45rem; font-size: 1.1125rem; }
  .cta-bar .btn-wide { font-size: 1.3875rem; }
  .event-tools .round-btn { width: 3.1rem; height: 3.1rem; }
  .event-tools [data-share] svg { width: 1.3rem; height: 1.3rem; }
  .event-tools [data-save] svg { width: 1.5rem; height: 1.5rem; }
  /* the event boxes (home, related events, lists): every text a little larger */
  .card-when { font-size: .975rem; }
  .card-title { font-size: 1.1rem; }
  .card-venue { font-size: .975rem; }
  .card-price { font-size: 1.0375rem; }
  /* the header gets the shadow of the bar at the bottom (mirrored) once the page is scrolled (app.js adds the class) */
  .site-header.is-scrolled { box-shadow: 0 4px 20px rgba(19, 37, 63, .28); }
  /* second round: the boxes' texts once more 0.1 rem larger, the title 0.2 rem */
  .card-when { font-size: 1.075rem; }
  .card-title { font-size: 1.3rem; }
  .card-venue { font-size: 1.075rem; }
  .card-price { font-size: 1.1375rem; }
  /* footer: 0.1 rem larger */
  .site-footer { font-size: 1.0375rem; }
  .footer-legal { font-size: .975rem; }
  .footer-credit { font-size: .85rem; }
}
.site-header { transition: box-shadow .2s; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 40rem; margin: 2.5rem auto; padding: 2.5rem 1.5rem; border: 1px solid var(--gf-border); border-radius: calc(var(--gf-radius) * 2); background: var(--gf-surface-alt); color: var(--gf-muted); text-align: center; }
.empty-state svg { color: var(--gf-blue); }
.empty-state p { font: 600 1.0625rem/1.5 var(--gf-font-body); color: var(--gf-ink); }
@media (min-width: 900px) { .has-badge .city-menu { transform: translateY(2.25rem); } } /* the city badge pushes the title down: the dropdown follows it */
/* sort dropdown in the toolbar of the category page: same look as the category dropdown, but in the flow */
.toolbar .sort-menu { position: relative; top: auto; right: auto; transform: none; width: auto; min-width: 12rem; max-width: none; margin: 0; }
.toolbar .sort-menu .city-menu-panel { right: 0; width: max-content; min-width: 100%; columns: 1; }
.city-menu-panel [aria-current] { background: var(--gf-selected); color: var(--gf-blue); }
@media (min-width: 900px) { .search-count + .grid { margin-top: 2rem; } } /* search page: 2 rem between the summary and the results */
/* language menu (plain links): at the right end of the header row, its panel opens to the left */
.lang-menu { margin-left: 0; }
@media (min-width: 760px) { .lang-menu { margin-left: auto; } .lang-menu .place-panel { left: auto; right: 0; min-width: 12rem; } }
.lang-menu .place-list a[aria-current="true"] { font-weight: 700; background: var(--gf-selected); }
/* the body is a flex column: the wrapper must ask for the whole width */
.lang-bar-wrap { width: 100%; }
/* language bar: as wide as the container, under the header, offers the page in the language of the browser */
.lang-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 1.5rem 0; padding: 1rem; background: #fff6d6; border: 1px solid #f0dfa0; border-radius: var(--gf-radius); }
.lang-bar p { margin: 0; font-weight: 500; }
.lang-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.lang-bar-stay { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .5rem; color: var(--gf-ink); }
/* language bar on phones: the whole width of the screen, glued to the header, centred, a pixel smaller, square corners */
@media (max-width: 759px) {
  .lang-bar-wrap { padding-left: 0; padding-right: 0; }
  .lang-bar { flex-direction: column; justify-content: center; gap: .25rem; margin: 0 0 1.5rem; border-width: 0 0 1px; border-radius: 0; font-size: 15px; text-align: center; }
  .lang-bar p { font-size: 15px; }
  .lang-bar .btn, .lang-bar-stay { font-size: 15px; }
  .lang-bar-actions { flex-direction: column; justify-content: center; gap: .25rem; }
}

/* the home shows the cities with most events, six to a row; a phone only the first twelve; the button leads to the page with every city */
@media (min-width: 900px) { .city-badges-top { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 599px) { .city-badges-top li:not(.is-top) { display: none; } }
.catalog-more { display: flex; justify-content: center; margin-top: 1.5rem; }
.city-menu-more a { font-weight: 600; }
.catalog h2 { display: flex; align-items: center; gap: .5em; }
.catalog h2 .flag { height: 1em; width: auto; aspect-ratio: 4 / 3; }
.catalog h2 a { text-decoration: none; color: inherit; }
.catalog h2 a:hover { text-decoration: underline; }
.cities-page .catalog:first-of-type { margin-top: 2.5rem; }
.cities-page .catalog + .catalog { margin-top: 3rem; }
@media (min-width: 900px) { .cities-page .catalog:first-of-type { margin-top: 4rem; } .cities-page .city-badges { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.city-events .pagination { margin-top: 3.5rem; }
.city-events-rule { margin: 1.5rem 0; border: 0; border-top: 1px solid var(--gf-line); }
.city-events + .catalog { margin-top: 0; }
.city-events + .block { padding-top: 0; }

/* City page: text and FAQ side by side with a vertical rule, then the map of the city and the cities near it */
@media (min-width: 900px) {
  .city-info.is-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; }
  .city-info.is-split > .faq { border-left: 1px solid var(--gf-line); padding-left: 3rem; }
}
.city-map { position: relative; border-radius: var(--gf-radius); overflow: hidden; border: 1px solid var(--gf-border); background: #dce5ef; }
.city-map-stage { position: relative; width: 100%; aspect-ratio: 1200 / 420; }
.city-map-link, .city-map-link img { display: block; width: 100%; height: 100%; }
.city-map-link img { object-fit: cover; }
.city-map-marks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; }
.city-map-dot { cursor: pointer; }
.city-map-dot .hit { fill: transparent; }
.city-map-dot .dot { fill: var(--gf-blue); stroke: #fff; stroke-width: 3; }
.city-map-marks text { font: 600 19px var(--gf-font-body); fill: var(--gf-ink); stroke: #fff; stroke-width: 5px; paint-order: stroke; stroke-linejoin: round; }
.city-map-dot:hover text, .city-map-dot:focus-visible text { text-decoration: underline; }
.city-map-here { pointer-events: none; }
.city-map-here .pin { fill: #d63031; stroke: #fff; stroke-width: 3; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.city-map-here text { font-size: 25px; font-weight: 700; }
@media (max-width: 899px) {
  .city-map-stage { width: 760px; left: 50%; transform: translateX(-50%); } /* a phone shows the middle of the picture: the far cities are left out there */
  .city-map { height: 266px; }
  .city-map-dot.is-far { display: none; }
}
.city-info .prose > h2 { margin-top: 0; }
@media (min-width: 900px) {
  .city-events .pagination { margin-bottom: 1rem; }
  .city-info .faq summary { font-size: 1.1875rem; }
}
@media (min-width: 900px) {
  .city-events-rule { margin: 2.2rem 0; margin-bottom: 0; }
  .city-info.is-split { border-bottom: 1px solid var(--gf-line); }
  .city-info .block, .city-map-block { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}

/* Country page: the six cities with most events are highlighted (yellowish, a darker yellow on hover) */
.city-badge.is-hot { background: #FFF3C4; border-color: #F2DB84; }
.city-badge.is-hot:hover { background: #FFE58F; }
/* "Select a city": the name on the left (never over the number: ellipsis), the number of events on the right in grey */
.cities-page .city-badge { justify-content: space-between; font-size: .975rem; }
.cities-page .city-badge > span:first-child { flex: 1 1 auto; }
.city-count { flex: none; margin-left: auto; padding-left: .5rem; color: var(--gf-muted); font-weight: 400; font-size: .875rem; }
.city-badge .city-count { overflow: visible; text-overflow: clip; }