/* ═══════════════════════════════════════════════════════════════════════════
   UNews skin — shared base.

   Everything that makes the site look like UNews rather than like a bare grid:
   brand colours, type, cards, header, footer, player, map, search, calendar.

   This is NOT loaded directly by the app. Each language loads its own file,
   named after that language's theme-template code — unews-template-en.css,
   unews-template-ar.css, and so on — and those import this one, then add what
   differs for their script and direction. So there is one place to change a
   card, and eight places to change a font.

   A different tenant writes their own <theme-template-code>.css and does not
   import this file at all. They still get a working grid, because the grid is
   in app/globals.css and is loaded for everyone.

   Load order on the page:
     app/globals.css                     the grid engine (code)
     /themes/<theme-template-code>.css   this skin, via the language's file
     theme customCss                     per-theme overrides from the admin
     widget customCss                    per-widget overrides from the builder
   ═══════════════════════════════════════════════════════════════════════════ */

/* The webfonts are linked from the document head (see app/layout.tsx), not
   imported here. An @import cannot start downloading until this file has
   arrived, so the font sat behind 600ms of stylesheet before it even began —
   the longest chain on the page. */

:root {
  --navy-950: #061923;
  --navy-900: #0a2432;
  --navy-800: #123747;
  --green-700: #007a55;
  --green-600: #00966a;
  --green-100: #def3eb;
  --gold-500: #d99c2b;
  --ink-950: #0c1b24;
  --ink-800: #233640;
  --ink-600: #5c6e78;
  --ink-500: #788892;
  --canvas: #f5f7f8;
  --surface: #fff;
  --surface-soft: #edf2f4;
  --border: #dce4e8;
  --border-strong: #c8d3d9;
  --danger: #b42318;
  --reading: 820px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 10px rgba(6, 25, 35, .06);
  --shadow: 0 14px 36px rgba(6, 25, 35, .1);
  --font-ui: "Inter", "Segoe UI", sans-serif;
  --font-ar: "Cairo", Tahoma, sans-serif;
}

*::before, *::after {
  box-sizing: border-box;
}

body {
  background: var(--canvas);
  color: var(--ink-950);
  font-family: var(--font-ui);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

[dir="rtl"] .cms-page {
  font-family: var(--font-ar);
}

[dir="rtl"] body {
  font-family: var(--font-ar);
}

::selection {
  background: var(--green-600);
  color: #fff;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

img, video {
  display: block;
  max-width: 100%;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cms-page {
  background: var(--canvas);
}

.container {
  margin-inline: auto;
  max-width: var(--container);
  padding-inline: var(--gutter);
  width: 100%;
}

/* Utility bar */
.language-switcher {
  align-items: center;
  background: var(--navy-950);
  color: #cbd7dc;
  direction: ltr;
  display: flex;
  /* Eight languages do not fit one line on a phone. Without wrapping the row
     overflows, and because it spans the full width that overflow makes the
     WHOLE page scroll sideways — which reads as "the site is not responsive"
     even though every other block behaves. */
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  min-height: 34px;
  padding: 4px max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}

.language-switcher a {
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  padding: 4px 11px;
  transition: background-color 160ms ease, color 160ms ease;
}

.language-switcher a:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}

.language-switcher a.is-active {
  background: var(--gold-500);
  color: var(--navy-950);
}

/* Placed as a widget (Shared/Languages): the same row, with the strip and the
   alignment under the editor's control. */
.language-switcher--start {
  justify-content: flex-start;
}

.language-switcher--center {
  justify-content: center;
}

.language-switcher--plain {
  background: none;
  color: inherit;
  min-height: 0;
  padding: 4px 0;
}

.language-switcher--plain a:hover {
  background: rgba(127, 127, 127, .14);
  color: inherit;
}

.language-switcher__title {
  font-size: 12px;
  font-weight: 700;
  margin-inline-end: 6px;
  opacity: .8;
}

/* Header and navigation */
.site-header {
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 500;
  backdrop-filter: blur(14px);
}

#site-header .widget, #site-footer .widget {
  display: block;
  width: 100%;
}

.site-header__inner, .site-header .container {
  align-items: center;
  display: flex;
  gap: 32px;
  justify-content: space-between;
  margin-inline: auto;
  max-width: var(--container);
  min-height: 72px;
  padding-inline: var(--gutter);
  width: 100%;
}

.site-header__brand {
  flex: 0 0 auto;
}

.site-header__logo, .site-logo {
  color: var(--navy-950);
  display: inline-flex;
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
}

[dir="rtl"] .site-header__logo, [dir="rtl"] .site-logo {
  letter-spacing: 0;
}

.site-header__extra {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

/* Search icon: one tap to /search at every width; direction-neutral. */
.site-header__search {
  align-items: center;
  border-radius: 10px;
  color: inherit;
  display: inline-flex;
  flex: 0 0 auto;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.site-header__search:hover,
.site-header__search:focus-visible {
  background: rgba(127, 127, 127, 0.14);
  outline: none;
}

.search-box__heading {
  color: rgba(127, 127, 127, 0.95);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 2px 8px 6px;
  text-transform: uppercase;
}

.site-header__search-wrap {
  flex: 0 0 auto;
  position: relative;
}

.site-header__search {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

/* The field drops from the icon; direction-neutral, never wider than the
   viewport minus the page gutters. */
.site-header__search-panel {
  background: var(--surface, #fff);
  border: 1px solid rgba(127, 127, 127, 0.18);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  padding: 10px;
  position: absolute;
  width: min(520px, calc(100vw - 32px));
  z-index: 60;
}

/* On a phone the panel is wider than the icon it hangs from, so anchoring it
   to the icon pushed it off the screen — half the field and all of the results
   were outside the viewport. Below this width it spans the header instead,
   with the page's own gutters: the wrap stops being the positioning parent, so
   the sticky header is. */
@media (max-width: 640px) {
  .site-header__search-wrap {
    position: static;
  }

  .site-header__search-panel {
    inset-block-start: calc(100% + 4px);
    inset-inline: 16px;
    width: auto;
  }

  /* The word "Search" beside the field ate most of a phone's width. The icon
     in the field says the same thing, and Enter still resolves the query. */
  .site-header__search-panel .search-box__submit {
    display: none;
  }
}

.site-navigation {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--ink-800);
  position: relative;
  z-index: 30;
}

.site-header .site-navigation {
  background: transparent;
  border: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.site-navigation ul {
  align-items: center;
  display: flex;
  gap: 3px;
}

.site-navigation > ul {
  margin-inline: auto;
  max-width: var(--container);
  padding-inline: var(--gutter);
}

.site-header .site-navigation > ul {
  justify-content: center;
  margin: 0;
  max-width: none;
  padding: 0;
}

.navigation-item {
  position: relative;
}

.site-navigation a, .navigation-label, .site-nav a {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--ink-800);
  display: flex;
  font-size: 14px;
  font-weight: 700;
  gap: 6px;
  line-height: 20px;
  padding: 10px 12px;
  transition: background-color 160ms ease, color 160ms ease;
  white-space: nowrap;
}

.site-navigation a:hover, .site-navigation a[aria-current="page"], .site-nav a:hover, .site-nav a[aria-current="page"] {
  background: var(--green-100);
  color: var(--green-700);
}

/* Current route: filled chip with an underline mark; a parent of the current page is tinted. */
.site-navigation a[aria-current="page"], .site-nav a[aria-current="page"] {
  font-weight: 800;
}

.site-navigation a.is-ancestor, .site-navigation .navigation-label.is-active, .site-nav a.is-ancestor {
  color: var(--green-700);
  font-weight: 800;
}

.nav-drawer__link[aria-current="page"] {
  background: var(--green-100);
  color: var(--green-700);
  font-weight: 800;
}

.nav-drawer__link.is-ancestor {
  color: var(--green-700);
  font-weight: 800;
}

.navigation-item.has-children > a::after, .navigation-item.has-children > .navigation-label::after {
  content: "⌄";
  font-size: 12px;
  opacity: .65;
}

.navigation-item > ul {
  align-items: stretch;
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: none;
  flex-direction: column;
  inset-block-start: calc(100% + 4px);
  inset-inline-start: 0;
  min-width: 220px;
  padding: 6px;
  position: absolute;
}

.navigation-item:hover > ul, .navigation-item:focus-within > ul {
  display: flex;
}

.navigation-item > ul a, .navigation-item > ul .navigation-label {
  width: 100%;
}

.site-navigation--mobile {
  display: none;
}

/* Mobile drawer — hidden on wide screens, replaces the header menu below 760px. */
.nav-drawer, .nav-drawer__backdrop, .nav-drawer__panel {
  display: none;
}

.nav-drawer__toggle {
  align-items: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 40px;
  justify-content: center;
  padding: 0 9px;
  width: 44px;
}

.nav-drawer__toggle span {
  background: var(--navy-950);
  border-radius: 2px;
  display: block;
  height: 2px;
  width: 22px;
}

.nav-drawer__backdrop {
  background: rgba(9, 22, 31, .55);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 200ms ease;
  z-index: 900;
}

.nav-drawer__backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.nav-drawer__panel {
  background: var(--surface);
  box-shadow: 0 0 40px rgba(0,0,0,.25);
  flex-direction: column;
  height: 100dvh;
  inset-block-start: 0;
  inset-inline-end: 0;
  max-width: 360px;
  overflow-y: auto;
  position: fixed;
  transform: translateX(100%);
  transition: transform 240ms ease;
  width: min(84vw, 360px);
  z-index: 901;
}

[dir="rtl"] .nav-drawer__panel {
  transform: translateX(-100%);
}

.nav-drawer__panel.is-open, [dir="rtl"] .nav-drawer__panel.is-open {
  transform: translateX(0);
}

.nav-drawer__head {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
}

.nav-drawer__title {
  color: var(--navy-950);
  font-weight: 800;
}

.nav-drawer__close {
  background: transparent;
  border: 0;
  color: var(--ink-600);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  padding: 4px 8px;
}

.nav-drawer__list {
  display: flex;
  flex-direction: column;
}

.nav-drawer__item {
  border-bottom: 1px solid var(--border);
}

.nav-drawer__item .nav-drawer__list {
  background: var(--surface-soft);
  padding-inline-start: 14px;
}

.nav-drawer__item .nav-drawer__item:last-child {
  border-bottom: 0;
}

.nav-drawer__row {
  align-items: center;
  display: flex;
}

.nav-drawer__link, .nav-drawer__label {
  color: var(--ink-800);
  display: flex;
  flex: 1 1 auto;
  font-weight: 700;
  gap: 10px;
  padding: 14px 16px;
}

.nav-drawer__link:hover, .nav-drawer__link[aria-current="page"] {
  background: var(--green-100);
  color: var(--green-700);
}

.nav-drawer__expand {
  background: transparent;
  border: 0;
  border-inline-start: 1px solid var(--border);
  color: var(--ink-600);
  cursor: pointer;
  font-size: 18px;
  padding: 10px 16px;
  transition: transform 160ms ease;
}

.nav-drawer__item.is-expanded > .nav-drawer__row > .nav-drawer__expand {
  transform: rotate(180deg);
}

.site-header__fallback {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-inline: auto;
  max-width: var(--container);
  padding-inline: var(--gutter);
  position: relative;
  z-index: 500;
}

/* Breadcrumb */
.breadcrumb {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}

.breadcrumb ol {
  align-items: center;
  color: var(--ink-500);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 7px;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--border-strong);
  content: "/";
  margin-inline-end: 7px;
}

.breadcrumb-item a:hover {
  color: var(--green-700);
}

.breadcrumb-item.is-active {
  color: var(--ink-800);
  font-weight: 700;
}

.breadcrumb-item a {
  color: inherit;
  transition: color 150ms ease;
}

/* Minimal: plain inline trail inside the container, no strip. */
.breadcrumb--minimal {
  background: transparent;
  border-bottom: 0;
  margin-inline: auto;
  max-width: var(--container);
  padding: 14px var(--gutter) 0;
}

.breadcrumb--minimal ol {
  font-size: 12.5px;
}

.breadcrumb--minimal .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
}

/* Pills: each crumb is a chip; the current page is the filled one. */
.breadcrumb--pills {
  background: transparent;
  border-bottom: 0;
  margin-inline: auto;
  max-width: var(--container);
  padding: 14px var(--gutter) 0;
}

.breadcrumb--pills ol {
  gap: 6px;
}

.breadcrumb--pills .breadcrumb-item {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 12px;
}

.breadcrumb--pills .breadcrumb-item + .breadcrumb-item::before {
  content: none;
}

.breadcrumb--pills .breadcrumb-item:hover {
  border-color: var(--green-600);
  color: var(--green-700);
}

.breadcrumb--pills .breadcrumb-item.is-active {
  background: var(--navy-950);
  border-color: var(--navy-950);
  color: #fff;
}

/* Dark: navy strip with white text (pairs with the dark map header). */
.breadcrumb--dark {
  background: var(--navy-950);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.breadcrumb--dark ol {
  color: rgba(255,255,255,.7);
}

.breadcrumb--dark .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255,255,255,.3);
}

.breadcrumb--dark .breadcrumb-item a:hover {
  color: #fff;
}

.breadcrumb--dark .breadcrumb-item.is-active {
  color: #fff;
}

/* Route progress line (RouteProgress.tsx): creeps while a page loads, completes on arrival. */
.route-progress {
  background: var(--green-600);
  box-shadow: 0 0 8px var(--green-600);
  height: 3px;
  inset-block-start: 0;
  inset-inline-start: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: width 200ms ease, opacity 300ms ease;
  width: 0;
  z-index: 1000;
}

.route-progress.is-loading {
  opacity: 1;
  transition: width 8s cubic-bezier(.1, .7, .2, 1), opacity 150ms ease;
  width: 80%;
}

.route-progress.is-done {
  opacity: 0;
  transition: width 200ms ease, opacity 400ms ease 200ms;
  width: 100%;
}

.widget-row--bleed .home-map {
  border-inline: 0;
  border-radius: 0;
}

.widget {
  min-width: 0;
  width: 100%;
}

.widget-title {
  align-items: center;
  border-bottom: 1px solid var(--border-strong);
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 11px;
}

.widget-title::before {
  background: var(--green-600);
  border-radius: 2px;
  content: "";
  flex: 0 0 5px;
  height: 28px;
}

.widget-title h2, .widget-tabs__title {
  color: var(--navy-950);
  font-size: clamp(21px, 2.1vw, 28px);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.3;
  margin: 0;
}

[dir="rtl"] .widget-title h2, [dir="rtl"] .widget-tabs__title {
  letter-spacing: 0;
}

/* Cards */
.post-card {
  min-width: 0;
}

/* The cover stretches to the full card height: the link is a stretched grid
   item, the cover box fills it, and the image (absolute, object-fit) fills the box. */
.post-card--horizontal {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(110px, 38%) minmax(0, 1fr);
}

.post-card--horizontal .post-card__cover-link {
  align-self: stretch;
  display: block;
  height: 100%;
  margin: 0;
  min-height: 110px;
}

.post-card--horizontal .post-card__cover {
  height: 100%;
  min-height: 100%;
  padding: 0 !important;
}

.post-card--horizontal .post-card__caption {
  display: none;
}

.post-card--horizontal .post-card__body {
  gap: 6px;
}

.post-card--horizontal .post-card__title {
  display: -webkit-box;
  font-size: clamp(15px, 1.25vw, 18px);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.post-card--horizontal .post-card__excerpt {
  display: -webkit-box;
  font-size: 13px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.post-card__cover-link {
  border-radius: var(--radius);
  display: block;
  margin-bottom: 14px;
  overflow: hidden;
}

.post-card__cover {
  background: var(--surface-soft);
  border-radius: inherit;
  overflow: hidden;
  position: relative;
}

.post-card__cover img, .post-card__cover video {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  transition: transform 300ms ease;
  width: 100%;
}

.post-card:hover .post-card__cover img {
  transform: scale(1.035);
}

.post-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.post-card__date, .post-card__meta, .post-card__taxonomies {
  color: var(--ink-500);
  font-size: 12px;
  line-height: 18px;
}

.post-card__meta, .post-card__terms {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.post-card__meta > * + *::before {
  color: var(--border-strong);
  content: "•";
  margin-inline-end: 12px;
}

.post-card__terms {
  order: -1;
}

.post-card__post-type {
  color: inherit;
}

.post-card__term:hover, .post-card__post-type:hover {
  color: var(--green-700);
  text-decoration: underline;
}

.post-card__term, .post-detail__term, .hero-slide__term {
  color: var(--green-700);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
}

.post-card__title {
  color: var(--ink-950);
  display: -webkit-box;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.38;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.widget-grid .post-card__title {
  font-size: clamp(15px, 6.5cqi, 22px);
}

[dir="rtl"] .post-card__title {
  letter-spacing: 0;
}

.post-card__title a {
  transition: color 160ms ease;
}

.post-card__title a:hover {
  color: var(--green-700);
}

.post-card__excerpt {
  color: var(--ink-600);
  display: -webkit-box;
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.post-card__read-more {
  align-items: center;
  color: var(--green-700);
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 7px;
  margin-top: 5px;
  width: fit-content;
}

.post-card__read-more::after {
  content: "→";
}

[dir="rtl"] .post-card__read-more::after {
  content: "←";
}

.post-card__read-more:hover {
  color: var(--navy-950);
}

.widget-grid[data-cols="4"] .post-card__title {
  font-size: clamp(17px,1.35vw,20px);
}

.widget-list {
  display: flex;
  flex-direction: column;
}

.widget-list > li {
  border-bottom: 1px solid var(--border);
  padding-block: 20px;
}

.widget-list > li:first-child {
  padding-top: 0;
}

.widget-list > li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.widget--list .post-card {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(150px,31%) minmax(0,1fr);
}

.widget--list .post-card__cover-link {
  margin: 0;
}

.widget--list .post-card__cover {
  height: 100%;
  min-height: 118px;
  padding: 0 !important;
}

.widget--list .post-card__body {
  justify-content: center;
}

.widget--list .post-card__title {
  display: -webkit-box;
  font-size: clamp(17px,1.5vw,22px);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.post-card--xl {
  max-width: 620px;
}

.post-card--xl .post-card__title {
  font-size: clamp(28px,3vw,38px);
  line-height: 1.22;
}

.post-card--medium, .post-card--large {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: 110px minmax(0,1fr);
}

.post-card--medium .post-card__cover-link, .post-card--large .post-card__cover-link {
  margin: 0;
}

.post-card--medium .post-card__cover, .post-card--large .post-card__cover {
  height: 100%;
  min-height: 96px;
  padding: 0 !important;
}

.post-card--small .post-card__cover-link {
  display: none;
}

/* Hero */
.widget--main-slider {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero-slider {
  background: var(--navy-950);
  min-height: clamp(430px,48vw,620px);
  overflow: hidden;
  position: relative;
}

.hero-slider__track {
  display: flex;
  min-height: inherit;
  transition: transform 500ms cubic-bezier(.22,1,.36,1);
}

.hero-slide {
  align-items: flex-end;
  background: var(--navy-950);
  display: flex;
  flex: 0 0 100%;
  min-height: inherit;
  overflow: hidden;
  position: relative;
}

.hero-slide__media, .hero-slide__bg {
  inset: 0;
  position: absolute;
}

.hero-slide__bg {
  /* Now an <img> (see MainSlider): it fills the slide the way the background
     did. The <picture> wrapper is a plain inline box, so it is stretched too. */
  background-position: center;
  background-size: cover;
  height: 100%;
  object-fit: cover;
  transition: transform 7s ease;
  width: 100%;
}

.hero-slide__media > picture {
  display: block;
  inset: 0;
  position: absolute;
}

.hero-slide.is-active .hero-slide__bg {
  transform: scale(1.035);
}

.hero-slide::after {
  background: linear-gradient(180deg,rgba(6,25,35,.03) 20%,rgba(6,25,35,.9) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

/* Side padding clears the arrows (16px offset + 42px button) so the headline never runs under them. */
.hero-slide__content {
  color: #fff;
  direction: ltr;
  max-width: 850px;
  padding: clamp(28px,5vw,60px) clamp(74px,7vw,96px) clamp(68px,8vw,92px);
  position: relative;
  z-index: 2;
}

[dir="rtl"] .hero-slide__content {
  direction: rtl;
}

.hero-slide__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.hero-slide__term {
  background: var(--green-600);
  border-radius: 999px;
  color: #fff;
  padding: 4px 10px;
}

.hero-slide__date {
  color: #d5e0e5;
  display: block;
  font-size: 13px;
  margin-bottom: 10px;
}

.hero-slide__title {
  font-size: clamp(30px,4vw,54px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.15;
  margin: 0;
}

[dir="rtl"] .hero-slide__title {
  letter-spacing: 0;
}

.hero-slide__excerpt {
  color: #e3ebef;
  font-size: 16px;
  line-height: 1.7;
  margin: 14px 0 0;
  max-width: 690px;
}

.hero-slide__cta {
  align-items: center;
  background: #fff;
  border-radius: var(--radius-sm);
  color: var(--navy-950);
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  margin-top: 20px;
  padding: 10px 16px;
}

/* Slider arrows: fixed to physical sides, glyphs point outward; the component
   decides which side means "next" from the reading direction. `direction: ltr`
   matters: ‹ and › are bidi-mirrored characters, so inside an RTL page the
   browser would flip them and the left arrow would point right. */
.slider-arrow {
  direction: ltr;
  unicode-bidi: isolate;
  align-items: center;
  background: rgba(6,25,35,.8);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  color: #fff;
  display: flex;
  font-size: 24px;
  height: 42px;
  justify-content: center;
  line-height: 1;
  padding-bottom: 3px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: 160ms ease;
  width: 42px;
  z-index: 4;
}

.slider-arrow--left {
  left: 16px;
}

.slider-arrow--right {
  right: 16px;
}

.slider-arrow:hover {
  background: var(--green-600);
  border-color: var(--green-600);
}

/* Centred by physical left, not inline-start: on RTL pages inline-start is the right edge, and the -50% shift then lands off-centre. */
.slider-dots {
  align-items: center;
  bottom: 24px;
  display: flex;
  gap: 7px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  z-index: 4;
}

.slider-dot {
  background: rgba(255,255,255,.48);
  border: 0;
  border-radius: 999px;
  height: 7px;
  padding: 0;
  transition: 160ms ease;
  width: 7px;
}

.slider-dot.is-active {
  background: #fff;
  width: 22px;
}

/* Horizontal slider */
.slider-container {
  position: relative;
}

.slider-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 2px 2px 14px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.slider-track::-webkit-scrollbar {
  display: none;
}

.slider-item {
  flex: 0 0 min(340px,82vw);
  scroll-snap-align: start;
}

.widget--slider .slider-arrow {
  top: 45%;
}

/* Tabs */
.widget-tabs {
  width: 100%;
}

.widget-tabs__title {
  margin: 0 0 18px;
}

.widget-tabs__nav {
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  overflow-x: auto;
}

.widget-tabs__tab {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--ink-600);
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
  padding: 10px 14px;
}

.widget-tabs__tab:hover, .widget-tabs__tab.is-active {
  border-color: var(--green-600);
  color: var(--green-700);
}

/* Pagination */
.widget-pagination {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}

.widget-pagination button, .widget-load-more {
  background: var(--navy-900);
  border: 1px solid var(--navy-900);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  min-height: 42px;
  padding: 9px 18px;
  transition: 160ms ease;
}

.widget-load-more {
  display: block;
  margin: 30px auto 0;
  min-width: 150px;
}

.widget-pagination button:hover:not(:disabled), .widget-load-more:hover:not(:disabled) {
  background: var(--green-700);
  border-color: var(--green-700);
  transform: translateY(-1px);
}

.widget-pagination button:disabled, .widget-load-more:disabled {
  cursor: wait;
  opacity: .5;
}

.widget-empty, .widget-error {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink-600);
  padding: 28px;
  text-align: center;
}

.widget-error {
  border-color: #f0b4ae;
  color: var(--danger);
}

.widget-scroll-sentinel {
  height: 1px;
}

/* Article */
.widget--detail {
  margin-inline: auto;
  max-width: var(--reading);
}

/* Article: an open reading column — no card, no border, no box shadow. The
   header and body share one measure so the eye tracks straight down. */
.widget--detail {
  margin-inline: auto;
  max-width: var(--reading);
}

.post-detail {
  display: flex;
  flex-direction: column;
}

.post-detail__header {
  margin-bottom: 26px;
  order: 1;
}

.post-detail__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 14px;
}

.post-detail__term {
  color: var(--green-700);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.post-detail__term:hover {
  text-decoration: underline;
}

.post-detail__title {
  color: var(--navy-950);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.22;
  margin: 0 0 16px;
}

[dir="rtl"] .post-detail__title {
  letter-spacing: 0;
  line-height: 1.35;
}

.post-detail__byline, .post-detail__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.post-detail__byline {
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}

/* Share links sit at the far end of the byline; on narrow screens they wrap under it. */
.share-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-inline-start: auto;
}

.share-bar__label {
  color: var(--ink-500);
  font-size: 13px;
  font-weight: 700;
}

.share-bar__list {
  align-items: center;
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.share-bar__link {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-800);
  cursor: pointer;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  padding: 0;
  transition: background .15s, color .15s, border-color .15s;
  width: 34px;
}

.share-bar__link:hover, .share-bar__link:focus-visible {
  background: var(--navy-950);
  border-color: var(--navy-950);
  color: #fff;
  outline: none;
}

.share-bar__link--x:hover {
  background: #000;
  border-color: #000;
}

.share-bar__link--facebook:hover {
  background: #1877f2;
  border-color: #1877f2;
}

.share-bar__link--whatsapp:hover {
  background: #25d366;
  border-color: #25d366;
}

.share-bar__link--telegram:hover {
  background: #229ed9;
  border-color: #229ed9;
}

.share-bar__link--linkedin:hover {
  background: #0a66c2;
  border-color: #0a66c2;
}

.share-bar__link--copy.is-done {
  background: var(--green-600);
  border-color: var(--green-600);
  color: #fff;
}

.share-bar__status {
  color: var(--green-700);
  font-size: 12px;
  font-weight: 700;
  min-height: 1em;
}

.share-bar__status:empty {
  display: none;
}

@media (max-width: 640px) {
  .share-bar {
    margin-inline-start: 0;
    width: 100%;
  }
}

.post-detail__meta, .post-detail__date {
  color: var(--ink-500);
  font-size: 13px;
  font-weight: 600;
}

.post-detail__meta > * + *::before {
  color: var(--border-strong);
  content: "•";
  margin-inline-end: 10px;
}

.post-detail__cover {
  aspect-ratio: 16/9;
  background: var(--surface-soft);
  border-radius: var(--radius-lg);
  margin: 0 0 28px;
  order: 2;
  overflow: hidden;
}

.post-detail__cover img, .post-detail__cover video {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Caption under the cover (the media's Alt text), when the widget shows it. */
.post-detail__cover.has-caption {
  aspect-ratio: auto;
}

.post-detail__cover.has-caption img, .post-detail__cover.has-caption video {
  aspect-ratio: 16/9;
}

.post-detail__caption, .post-card__caption {
  color: var(--ink-500);
  display: block;
  font-size: 13px;
  line-height: 1.6;
  padding: 8px 2px 0;
}

.post-detail__summary {
  color: var(--ink-800);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.75;
  margin: 0 0 22px;
  order: 3;
}

.post-detail__body, .page-detail__body, .legacy-template {
  color: var(--ink-800);
  font-size: 18px;
  line-height: 1.95;
  order: 4;
}

.post-detail__body p, .page-detail__body p {
  margin: 0 0 1.15em;
}

.post-detail__body > *:first-child, .page-detail__body > *:first-child, .legacy-template > *:first-child {
  margin-top: 0;
}

.post-detail__body h2, .page-detail__body h2, .legacy-template h2 {
  color: var(--navy-950);
  font-size: 26px;
  line-height: 1.4;
  margin: 40px 0 14px;
}

.post-detail__body h3, .page-detail__body h3, .legacy-template h3 {
  color: var(--navy-950);
  font-size: 21px;
  margin: 32px 0 12px;
}

.post-detail__body a, .page-detail__body a, .legacy-template a {
  color: var(--green-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-detail__body img, .page-detail__body img, .legacy-template img {
  border-radius: var(--radius);
  display: block;
  height: auto;
  margin-block: 24px;
  max-width: 100%;
}

.post-detail__body iframe, .page-detail__body iframe {
  aspect-ratio: 16/9;
  border: 0;
  border-radius: var(--radius);
  height: auto;
  margin-block: 24px;
  max-width: 100%;
  width: 100%;
}

.post-detail__body ul, .post-detail__body ol, .page-detail__body ul, .page-detail__body ol {
  margin: 0 0 1.15em;
  padding-inline-start: 1.4em;
}

.post-detail__body ul {
  list-style: disc;
}

.post-detail__body ol {
  list-style: decimal;
}

.post-detail__body blockquote, .page-detail__body blockquote, .legacy-template blockquote {
  background: transparent;
  border-inline-start: 4px solid var(--green-600);
  color: var(--ink-950);
  font-size: 20px;
  font-weight: 600;
  margin: 28px 0;
  padding: 4px 22px;
}

/* Anything that slipped through with its own colours renders in the site's. */
.post-detail__body [style], .page-detail__body [style] {
  background: transparent !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
}

.page-detail__body, .legacy-template {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin: var(--section-space) auto;
  max-width: var(--reading);
  padding: clamp(24px,5vw,52px);
}

/* Custom, live, footer */
.widget-content {
  min-width: 0;
}

.widget--live {
  background: var(--navy-900);
  border-radius: var(--radius);
  color: #fff;
  padding: 18px;
}

.widget-live__link {
  align-items: center;
  display: inline-flex;
  font-weight: 800;
  gap: 9px;
}

.widget-live__dot {
  animation: live-pulse 1.5s infinite;
  background: #ef4444;
  border-radius: 50%;
  height: 9px;
  width: 9px;
}

/* Brand: the language's logo; a dark variant swaps in for dark-scheme visitors. */
.site-logo {
  display: block;
  height: 44px;
  width: auto;
}

.site-logo--dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .site-logo--light {
    display: none;
  }
  
  .site-logo--dark {
    display: block;
  }
}

.widget-live__description {
  color: #c9d6dd;
  font-size: 14px;
  line-height: 1.6;
  margin: 8px 0 0;
}

.widget--live-player .widget-live__description {
  margin: -6px 0 12px;
}

.widget--live-player {
  padding: 14px;
}

.widget--live-player .widget-live__link {
  margin-bottom: 12px;
}

.live-player__stage {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

.live-player__stage:fullscreen {
  aspect-ratio: auto;
  border-radius: 0;
  height: 100%;
  width: 100%;
}

.live-player__video {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.live-player__topbar {
  align-items: center;
  display: flex;
  gap: 8px;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  position: absolute;
  z-index: 2;
}

.live-player__badge {
  background: #ef4444;
  border-radius: 4px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 3px 7px;
}

.live-player__status {
  background: rgba(0,0,0,.55);
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
}

.live-player[data-status="live"] .live-player__badge {
  animation: live-pulse 1.5s infinite;
}

.live-player__center-button {
  align-items: center;
  background: rgba(0,0,0,.55);
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 26px;
  height: 68px;
  inset: 50% auto auto 50%;
  justify-content: center;
  padding-inline-start: 5px;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: background 160ms ease, transform 160ms ease;
  width: 68px;
  z-index: 2;
}

.live-player__center-button:hover {
  background: rgba(239,68,68,.85);
  transform: translate(-50%, -50%) scale(1.06);
}

.live-player__controls {
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
  bottom: 0;
  display: flex;
  gap: 6px;
  inset-inline-start: 0;
  opacity: 0;
  padding: 26px 10px 10px;
  position: absolute;
  transition: opacity 200ms ease;
  width: 100%;
  z-index: 2;
}

.live-player__stage:hover .live-player__controls, .live-player__stage:focus-within .live-player__controls, .live-player[data-status="paused"] .live-player__controls, .live-player[data-status="offline"] .live-player__controls {
  opacity: 1;
}

.live-player__controls button {
  align-items: center;
  background: rgba(255,255,255,.12);
  border: 0;
  border-radius: 6px;
  color: #fff;
  display: flex;
  font-size: 15px;
  height: 34px;
  justify-content: center;
  width: 38px;
}

.live-player__controls button:hover {
  background: rgba(255,255,255,.28);
}

.live-player__controls button:last-child {
  margin-inline-start: auto;
}

@keyframes live-pulse { 50% { box-shadow: 0 0 0 6px rgba(239,68,68,.14); } }

.site-footer {
  background: var(--navy-950);
  color: #d7e2e7;
  margin-top: var(--section-space);
}

.site-footer__inner {
  margin-inline: auto;
  max-width: var(--container);
  padding: 44px var(--gutter) 28px;
}

.site-footer .site-navigation {
  background: transparent;
  border: 0;
  color: inherit;
}

.site-footer .site-navigation > ul {
  flex-wrap: wrap;
  justify-content: center;
  max-width: none;
  padding: 0;
}

.site-footer .site-navigation a, .site-footer .navigation-label {
  color: #d7e2e7;
  font-weight: 600;
}

.site-footer .site-navigation a:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}

/* The link to the page you are already on.
   Without this the header's chip applies here too — a pale green background
   from .site-navigation a[aria-current="page"] — while the footer's own
   `color: #d7e2e7` wins on equal specificity and paints the text pale as well.
   Pale on pale is invisible, which is what the footer's Privacy Policy link
   looked like while viewing the privacy policy. Dark needs its own treatment. */
.site-footer .site-navigation a[aria-current="page"],
.site-footer .site-navigation a.is-ancestor,
.site-footer .navigation-label.is-active {
  background: rgba(255,255,255,.12);
  color: #fff;
  font-weight: 700;
}

.site-footer__extra {
  margin-top: 28px;
}

.site-footer__copyright {
  border-top: 1px solid rgba(255,255,255,.12);
  color: #91a6b0;
  font-size: 13px;
  margin: 30px 0 0;
  padding-top: 20px;
  text-align: center;
}

.not-found {
  margin: 12vh auto;
  max-width: 600px;
  padding: 28px;
  text-align: center;
}

.not-found h1 {
  color: var(--navy-950);
  font-size: clamp(36px,8vw,64px);
  margin: 0 0 10px;
}

/* 404 page. The big number is decoration behind the message, not the message:
   the sentence tells the visitor what happened, the number only says which
   kind of error it was. */
.not-found-page__code {
  color: var(--border-strong);
  font-size: clamp(72px, 18vw, 148px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  margin: 0;
}

.not-found-page__title {
  color: var(--ink-950);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 800;
  margin: 8px 0 0;
}

.not-found-page__body {
  color: var(--ink-600);
  font-size: 16px;
  margin: 12px 0 28px;
}

.not-found-page__search {
  margin-bottom: 28px;
}

.not-found-page__home {
  background: var(--green-600);
  border-radius: var(--radius);
  color: #fff;
  font-weight: 600;
  padding: 12px 22px;
  transition: background 150ms ease;
}

.not-found-page__home:hover {
  background: var(--green-700);
}

@media (min-width: 761px) {
  .widget-hide-desktop {
    display: none !important;
  }
}

@media (max-width: 1000px) {
  .site-header__inner, .site-header .container {
    gap: 18px;
  }
  
  /* Submenus open below the strip; clipping it would hide them. */
  .site-header .site-navigation {
    overflow: visible;
  }
  
  .site-header .site-navigation > ul {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .site-header {
    position: static;
  }
  
  /* One row: brand on the start side, hamburger on the end side. */
  .site-header__inner, .site-header .container {
    gap: 12px;
    min-height: 60px;
    padding-block: 8px;
  }
  
  .site-header .site-navigation--header, .site-header__fallback .site-navigation--header {
    display: none;
  }
  
  /* The two controls sit together, at the end of the row beside each other,
     with the logo alone on the other side. The search icon used to float in
     the middle of the bar, nowhere near the button it belongs with. */
  .site-header__search-wrap {
    margin-inline-start: auto;
    order: 2;
  }

  .nav-drawer {
    display: block;
    margin-inline-start: 0;
    order: 3;
  }

  .site-header__brand {
    order: 1;
  }
  
  .nav-drawer__backdrop {
    display: block;
  }
  
  .nav-drawer__panel {
    display: flex;
  }
  
  .site-logo {
    height: 36px;
  }
  
  [class*="layout-col--"], [class*="widget-col--"] {
    flex: 0 0 100%;
    width: 100%;
  }
  
  .m-title-lines .post-card__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--m-title-lines);
  }
  
  .m-excerpt-lines .post-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: var(--m-excerpt-lines);
  }
  
  .m-style-list .post-card__title {
    font-size: 16px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  
  .m-limit-1 .widget-list > :nth-child(n+2) {
    display: none;
  }
  
  .m-limit-2 .widget-list > :nth-child(n+3) {
    display: none;
  }
  
  .m-limit-3 .widget-list > :nth-child(n+4) {
    display: none;
  }
  
  .m-limit-4 .widget-list > :nth-child(n+5) {
    display: none;
  }
  
  .m-limit-5 .widget-list > :nth-child(n+6) {
    display: none;
  }
  
  .m-limit-6 .widget-list > :nth-child(n+7) {
    display: none;
  }
  
  .m-limit-7 .widget-list > :nth-child(n+8) {
    display: none;
  }
  
  .m-limit-8 .widget-list > :nth-child(n+9) {
    display: none;
  }
  
  .m-limit-9 .widget-list > :nth-child(n+10) {
    display: none;
  }
  
  .m-limit-10 .widget-list > :nth-child(n+11) {
    display: none;
  }
  
  .m-limit-11 .widget-list > :nth-child(n+12) {
    display: none;
  }
  
  .m-limit-12 .widget-list > :nth-child(n+13) {
    display: none;
  }
  
  .m-limit-13 .widget-list > :nth-child(n+14) {
    display: none;
  }
  
  .m-limit-14 .widget-list > :nth-child(n+15) {
    display: none;
  }
  
  .m-limit-15 .widget-list > :nth-child(n+16) {
    display: none;
  }
  
  .m-limit-16 .widget-list > :nth-child(n+17) {
    display: none;
  }
  
  .m-limit-17 .widget-list > :nth-child(n+18) {
    display: none;
  }
  
  .m-limit-18 .widget-list > :nth-child(n+19) {
    display: none;
  }
  
  .m-limit-19 .widget-list > :nth-child(n+20) {
    display: none;
  }
  
  .m-limit-20 .widget-list > :nth-child(n+21) {
    display: none;
  }
  
  .m-limit-21 .widget-list > :nth-child(n+22) {
    display: none;
  }
  
  .m-limit-22 .widget-list > :nth-child(n+23) {
    display: none;
  }
  
  .m-limit-23 .widget-list > :nth-child(n+24) {
    display: none;
  }
  
  .m-limit-24 .widget-list > :nth-child(n+25) {
    display: none;
  }
  
  .widget--list .post-card {
    gap: 14px;
    grid-template-columns: 118px minmax(0,1fr);
  }
  
  .widget--list .post-card__cover {
    min-height: 96px;
  }
  
  .widget--list .post-card__excerpt, .widget--list .post-card__read-more {
    display: none;
  }
  
  .hero-slider {
    min-height: 470px;
  }
  
  .hero-slide__content {
    padding: 24px 20px 72px;
  }
  
  .hero-slide__title {
    font-size: clamp(27px,8vw,38px);
  }
  
  .hero-slide__excerpt {
    display: -webkit-box;
    font-size: 14px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  
  /* On a phone the arrows sat in the vertical middle of the slide, on top of
     the headline, the date and the terms. They move down beside the dots,
     where nothing is written. */
  .slider-arrow {
    bottom: 16px;
    height: 36px;
    top: auto;
    transform: none;
    width: 36px;
  }

  .slider-arrow--left {
    left: 12px;
  }

  .slider-arrow--right {
    right: 12px;
  }
  
  .post-detail__title {
    font-size: clamp(26px,8vw,36px);
  }
  
  .post-detail__cover {
    border-radius: var(--radius);
    margin-inline: calc(var(--gutter) * -1);
  }
  
  .post-detail__body, .page-detail__body, .legacy-template {
    font-size: 16px;
  }
  
  .widget-hide-mobile {
    display: none !important;
  }
}

/* On a phone the date leads the slide: the headline wraps to three or four
   lines there, and a date under it fell below the fold. */
@media (max-width: 760px) {
  .hero-slide__content {
    display: flex;
    flex-direction: column;
  }

  .hero-slide__date {
    margin-bottom: 8px;
    order: -1;
  }

  .hero-slide__terms {
    order: 0;
  }
}

@media (max-width: 460px) {
  .language-switcher {
    justify-content: center;
  }
  
  .widget--list .post-card {
    grid-template-columns: 100px minmax(0,1fr);
  }
  
  .widget--list .post-card__title {
    font-size: 16px;
  }
  
  .post-card__meta, .post-card__date {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  
  *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ── Own media player (components/player/MediaPlayer) ─────────────────────── */
.mp {
  --player-accent: var(--green-600);
  background: #000;
  border-radius: var(--radius-sm);
  color: #fff;
  outline: none;
  overflow: hidden;
  position: relative;
  user-select: none;
}

.mp--video {
  aspect-ratio: 16 / 9;
}

.mp--cinema {
  border-radius: 0;
}

.mp:focus-visible {
  box-shadow: 0 0 0 3px var(--player-accent);
}

.mp--fullscreen, .mp:fullscreen {
  aspect-ratio: auto;
  border-radius: 0;
  height: 100%;
  width: 100%;
}

.mp__media {
  background: #000;
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.mp--audio {
  align-items: center;
  aspect-ratio: auto;
  background: var(--navy-950);
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  min-height: 96px;
}

.mp--audio .mp__media {
  height: 0;
  position: absolute;
  width: 0;
}

.mp__artwork {
  align-self: stretch;
  background: var(--navy-900, #0f1b33);
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1;
  height: 100%;
  min-height: 96px;
  overflow: hidden;
}

.mp__artwork img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.mp__artwork-fallback {
  color: rgba(255,255,255,.5);
  font-size: 34px;
}

.mp--audio .mp__chrome {
  grid-column: 2;
  grid-row: 1;
  opacity: 1;
  padding: 12px 14px;
  position: static;
  transform: none;
}

.mp__big-play {
  align-items: center;
  background: rgba(0,0,0,.55);
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  height: 72px;
  inset: 50% auto auto 50%;
  justify-content: center;
  padding-inline-start: 4px;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: background 160ms ease, transform 160ms ease;
  width: 72px;
  z-index: 3;
}

.mp__big-play:hover {
  background: var(--player-accent);
  transform: translate(-50%, -50%) scale(1.06);
}

.mp__spinner {
  animation: mp-spin .8s linear infinite;
  border: 3px solid rgba(255,255,255,.35);
  border-radius: 50%;
  border-top-color: #fff;
  height: 28px;
  width: 28px;
}

@keyframes mp-spin { to { transform: rotate(360deg); } }

.mp__chrome {
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
  bottom: 0;
  left: 0;
  opacity: 0;
  padding: 26px 12px 10px;
  position: absolute;
  right: 0;
  transform: translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 4;
}

.mp--chrome .mp__chrome, .mp[data-status="paused"] .mp__chrome, .mp[data-status="idle"] .mp__chrome, .mp[data-status="ended"] .mp__chrome {
  opacity: 1;
  transform: none;
}

.mp__seek {
  cursor: pointer;
  height: 14px;
  margin-bottom: 6px;
  position: relative;
}

.mp__seek::before {
  background: rgba(255,255,255,.28);
  border-radius: 2px;
  content: "";
  height: 4px;
  inset: 5px 0 auto;
  position: absolute;
}

.mp__seek-buffered, .mp__seek-played {
  border-radius: 2px;
  height: 4px;
  inset-block-start: 5px;
  inset-inline-start: 0;
  position: absolute;
}

.mp__seek-buffered {
  background: rgba(255,255,255,.45);
}

.mp__seek-played {
  background: var(--player-accent);
}

.mp__seek-knob {
  background: #fff;
  border-radius: 50%;
  height: 12px;
  inset-block-start: 1px;
  margin-inline-start: -6px;
  position: absolute;
  transform: scale(0);
  transition: transform 120ms ease;
  width: 12px;
}

.mp:hover .mp__seek-knob, .mp--audio .mp__seek-knob {
  transform: scale(1);
}

.mp__controls {
  align-items: center;
  display: flex;
  gap: 4px;
}

.mp__btn {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  padding: 0;
  width: 36px;
}

.mp__btn:hover, .mp__btn.is-active {
  background: rgba(255,255,255,.16);
}

.mp__volume {
  align-items: center;
  display: flex;
}

.mp__volume-range {
  accent-color: var(--player-accent);
  direction: ltr;
  margin: 0 4px;
  opacity: 0;
  transition: opacity 160ms ease, width 160ms ease;
  width: 0;
}

.mp__volume:hover .mp__volume-range, .mp__volume-range:focus-visible, .mp--audio .mp__volume-range {
  opacity: 1;
  width: 80px;
}

.mp__time {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  margin-inline: 6px;
  opacity: .9;
  white-space: nowrap;
}

.mp__spacer {
  flex: 1;
}

.mp__menu-anchor {
  position: relative;
}

.mp__menu {
  background: rgba(20,20,20,.96);
  border-radius: 8px;
  bottom: 44px;
  inset-inline-end: 0;
  min-width: 170px;
  padding: 6px;
  position: absolute;
}

.mp__menu-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  justify-content: space-between;
  padding: 8px 10px;
  text-align: start;
  width: 100%;
}

.mp__menu-item:hover {
  background: rgba(255,255,255,.12);
}

.mp__menu-item.is-selected {
  color: var(--player-accent);
  font-weight: 700;
}

.mp__menu-value {
  opacity: .7;
}

.mp__ended {
  align-items: center;
  background: rgba(0,0,0,.72);
  display: flex;
  flex-direction: column;
  gap: 14px;
  inset: 0;
  justify-content: center;
  position: absolute;
  z-index: 3;
}

.mp__ended-replay {
  background: rgba(255,255,255,.14);
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
}

.mp__ended-next {
  background: var(--player-accent);
  border-radius: 12px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: min(90%, 420px);
  padding: 12px 18px;
  text-align: center;
}

.mp__ended-next-label {
  font-size: 12px;
  opacity: .85;
  text-transform: uppercase;
}

.mp__error {
  color: #fff;
  font-size: 14px;
  inset: 50% 16px auto;
  position: absolute;
  text-align: center;
  transform: translateY(-50%);
}

.mp--minimal .mp__time, .mp--minimal .mp__volume-range {
  display: none;
}

/* Third-party embeds behind the post's own poster. */
.embed-player {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

.embed-player__frame {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.embed-player__poster {
  background: #000;
  border: 0;
  cursor: pointer;
  display: block;
  height: 100%;
  padding: 0;
  position: relative;
  width: 100%;
}

.embed-player__poster img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.embed-player__play {
  align-items: center;
  background: rgba(0,0,0,.6);
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 50%;
  color: #fff;
  display: flex;
  height: 72px;
  inset: 50% auto auto 50%;
  justify-content: center;
  padding-inline-start: 4px;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: background 160ms ease;
  width: 72px;
}

.embed-player__poster:hover .embed-player__play {
  background: var(--green-600);
}

.embed-player--youtube .embed-player__poster:hover .embed-player__play {
  background: #f00;
}

/* Detail page media stage. */
.post-detail__stage {
  margin: 0 0 22px;
  order: 2;
}

.post-detail--video .post-detail__stage {
  margin-inline: calc(var(--gutter) * -1);
  order: 0;
}

.post-detail--video .post-detail__stage .mp, .post-detail--video .post-detail__stage .embed-player {
  border-radius: 0;
}

.post-detail__stage--audio {
  order: 2;
}

.post-detail__cover--hero {
  aspect-ratio: 21 / 9;
  margin-inline: calc(var(--gutter) * -1);
  order: 0;
}

.post-detail__series {
  color: var(--ink-500);
  font-size: 14px;
  margin-bottom: 10px;
}

.post-detail__series a {
  color: var(--green-700);
  font-weight: 700;
}

.post-detail__badges {
  margin-bottom: 12px;
}

.post-detail--breaking .post-detail__title {
  color: #b91c1c;
}

/* Card extras by kind. */
.post-card__play {
  align-items: center;
  background: rgba(0,0,0,.55);
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 50%;
  color: #fff;
  display: flex;
  height: 46px;
  inset: 50% auto auto 50%;
  justify-content: center;
  padding-inline-start: 3px;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: background 160ms ease;
  width: 46px;
  z-index: 1;
}

.post-card:hover .post-card__play {
  background: var(--green-600);
}

.post-card__duration {
  background: rgba(0,0,0,.72);
  border-radius: 4px;
  bottom: 8px;
  color: #fff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  inset-inline-end: 8px;
  padding: 2px 6px;
  position: absolute;
  z-index: 1;
}

.post-card__badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  order: -2;
}

.post-card__badge {
  background: var(--surface-soft);
  border-radius: 4px;
  color: var(--ink-800);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 7px;
  text-transform: uppercase;
}

.post-card__badge--breaking {
  background: #dc2626;
  color: #fff;
}

.post-card__badge--episode {
  background: var(--navy-950);
  color: #fff;
}

.post-card__series {
  color: var(--ink-500);
  font-size: 12px;
}

.post-card__series a {
  color: var(--green-700);
  font-weight: 700;
}

.post-card__cover-link--player {
  margin-bottom: 14px;
}

.post-card__player .mp, .post-card__player .embed-player {
  border-radius: var(--radius);
}

/* Episode list & prev/next. */
.episode-list {
  margin-top: 32px;
  order: 5;
}

.episode-list__heading, .episode-list__season-title {
  color: var(--navy-950);
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 14px;
}

.episode-list__season-title {
  font-size: 15px;
  margin-top: 18px;
}

.episode-list__items {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.episode-list__link {
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  display: grid;
  gap: 14px;
  grid-template-columns: 148px minmax(0, 1fr);
  padding: 8px;
  transition: border-color 160ms ease, background 160ms ease;
}

.episode-list__link:hover {
  background: var(--surface-soft);
  border-color: var(--border-strong);
}

.episode-list__item.is-current .episode-list__link {
  background: var(--surface-soft);
  border-color: var(--green-600);
}

.episode-list__thumb {
  aspect-ratio: 16 / 9;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

.episode-list__thumb img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.episode-list__now {
  background: var(--green-600);
  border-radius: 4px;
  bottom: 6px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  inset-inline-start: 6px;
  padding: 2px 6px;
  position: absolute;
  text-transform: uppercase;
}

.episode-list__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.episode-list__number {
  color: var(--ink-500);
  font-size: 12px;
  font-weight: 800;
}

.episode-list__title {
  display: -webkit-box;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.episode-list__duration {
  color: var(--ink-500);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.episode-nav {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 22px;
  order: 3;
}

.episode-nav__link {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
}

.episode-nav__link span {
  color: var(--ink-500);
  font-size: 12px;
  text-transform: uppercase;
}

.episode-nav__link--next {
  text-align: end;
}

.episode-nav__link:hover {
  border-color: var(--green-600);
}

/* Breaking ticker (Shared/BreakingTicker). */
.breaking-ticker {
  align-items: stretch;
  background: #dc2626;
  color: #fff;
  display: flex;
  gap: 0;
  min-height: 40px;
  overflow: hidden;
}

.breaking-ticker__badge {
  align-items: center;
  background: #991b1b;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  gap: 8px;
  letter-spacing: .08em;
  padding: 0 14px;
  text-transform: uppercase;
}

.breaking-ticker__dot {
  animation: live-pulse 1.5s infinite;
  background: #fff;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.breaking-ticker__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.breaking-ticker__track {
  align-items: center;
  animation: ticker-scroll calc(var(--ticker-items, 4) * 9s) linear infinite;
  display: flex;
  gap: 48px;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0 24px;
  white-space: nowrap;
  width: max-content;
}

.breaking-ticker:hover .breaking-ticker__track {
  animation-play-state: paused;
}

.breaking-ticker__item a {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.breaking-ticker__item a:hover {
  text-decoration: underline;
}

@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

[dir="rtl"] .breaking-ticker__track {
  animation-name: ticker-scroll-rtl;
}

@keyframes ticker-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

@media (max-width: 760px) {
  .mp--audio {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  
  .episode-list__link {
    grid-template-columns: 110px minmax(0, 1fr);
  }
  
  .episode-nav {
    grid-template-columns: 1fr;
  }
  
  .post-detail--video .post-detail__stage, .post-detail__cover--hero {
    margin-inline: calc(var(--gutter) * -1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .breaking-ticker__track {
    animation: none;
  }
}

/* ── Events map (Map/HomeMap, /map) ───────────────────────────────────────── */
.home-map {
  --hm-ink: var(--ink-950);
  --hm-panel: var(--surface);
  --hm-line: var(--border);
  --hm-glass: rgba(255,255,255,.92);
  --hm-shadow: 0 6px 20px rgba(6,25,35,.16);
  background: var(--navy-950);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(6,25,35,.12);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  position: relative;
}

.home-map--with-list {
  grid-template-columns: minmax(0, 1fr) 340px;
}

.home-map--fill {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: 100%;
}

.home-map__stage {
  min-height: 1px;
  /* Never zero wide. MapLibre guards a zero-height canvas but not a zero-width
     one: the perspective matrix goes singular, its inverse comes back null,
     and the next frame reads null[0] — an exception inside its render queue,
     which then refuses to run again for the life of the map. A grid column of
     minmax(0, 1fr) can reach exactly zero during a resize. */
  min-width: 1px;
  position: relative;
}

.home-map__stage::after {
  background: linear-gradient(to top, rgba(6,25,35,.45), transparent);
  bottom: 0;
  content: "";
  height: 90px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 1;
}

.home-map .maplibregl-map {
  font: inherit;
}

.home-map .maplibregl-canvas:focus {
  outline: none;
}

/* MapLibre controls, our tools and the basemap switcher share one button look. */
.home-map .maplibregl-ctrl-group, .home-map__tool, .home-map__style-button {
  background: var(--hm-glass);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(6,25,35,.08);
  border-radius: 10px;
  box-shadow: var(--hm-shadow);
}

.home-map .maplibregl-ctrl-group button {
  height: 34px;
  width: 34px;
}

.home-map .maplibregl-ctrl-group button + button {
  border-top: 1px solid rgba(6,25,35,.08);
}

.home-map .maplibregl-ctrl-top-left, .home-map .maplibregl-ctrl-top-right {
  margin: 0;
}

.home-map .maplibregl-ctrl-top-left .maplibregl-ctrl, .home-map .maplibregl-ctrl-top-right .maplibregl-ctrl {
  margin: 10px 10px 0;
}

/* Coordinates, scale and minimap stack on the inline-end side; the legend
   has the inline-start side to itself. Mirrored per direction, so in RTL
   the stack moves left and the legend right, and nothing overlaps. */
.home-map[dir="ltr"] .maplibregl-ctrl-bottom-right,
.home-map[dir="rtl"] .maplibregl-ctrl-bottom-left {
  bottom: 30px;
}

.home-map .maplibregl-ctrl-scale {
  background: rgba(6,25,35,.55);
  border-color: rgba(255,255,255,.7);
  color: #fff;
  font-size: 10px;
}

.home-map .maplibregl-ctrl-attrib {
  background: rgba(255,255,255,.6);
  border-radius: 6px 0 0 0;
  font-size: 10px;
}

/* Below MapLibre's zoom (2 buttons) + fullscreen groups, same column. */
.home-map__tools {
  display: flex;
  flex-direction: column;
  gap: 6px;
  inset-block-start: 132px;
  inset-inline-end: 10px;
  position: absolute;
  z-index: 2;
}

.home-map__tool {
  align-items: center;
  color: var(--hm-ink);
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  height: 36px;
  justify-content: center;
  padding: 0;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
  width: 36px;
}

.home-map__tool:hover {
  background: #fff;
  transform: translateY(-1px);
}

.home-map__tool.is-active {
  background: #f59f00;
  border-color: #d98a00;
  color: #1f1300;
}

.home-map__tool--text {
  padding: 0 12px;
  white-space: nowrap;
  width: auto;
}

/* Markers */
.home-map__marker {
  align-items: center;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 6px 14px rgba(0,0,0,.35);
  color: #fff;
  cursor: pointer;
  display: flex;
  font-weight: 800;
  justify-content: center;
  letter-spacing: .03em;
  overflow: hidden;
  padding: 0;
  transform: translateY(-6px);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.home-map__marker:hover, .home-map__marker.is-selected {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(245,159,0,.55), 0 8px 18px rgba(0,0,0,.4);
  transform: translateY(-6px) scale(1.12);
}

.home-map__marker {
  animation: home-map-marker-in 380ms cubic-bezier(.2,.9,.3,1.2) both;
}

.home-map__marker.is-selected {
  animation: home-map-marker-in 380ms cubic-bezier(.2,.9,.3,1.2) both, home-map-breathe 1.8s ease-in-out .4s infinite;
}

/* Cluster badge — stands in for markers that would otherwise overlap.
   Deliberately unlike a marker: a reader must be able to tell at a glance
   that this is a count to open, not an event to read. */
.home-map__cluster {
  align-items: center;
  background: var(--navy-950, #0b1d28);
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  height: 34px;
  justify-content: center;
  line-height: 1;
  min-width: 34px;
  padding: 0 8px;
  transition: transform .15s ease, box-shadow .15s ease;
}

.home-map__cluster:hover {
  box-shadow: 0 0 0 4px rgba(245,159,0,.45), 0 6px 16px rgba(0,0,0,.45);
  transform: scale(1.08);
}

/* Pointer position. Monospaced so the digits stop jittering as it moves. */
.home-map__coords {
  background: rgba(11,29,40,.78);
  border-radius: 6px;
  bottom: 10px;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  /* A coordinate string is Latin-only; on the RTL site the bidi algorithm
     otherwise reorders its pieces ("E "15.7 '02 33°"). */
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: .02em;
  padding: 4px 8px;
  /* Never intercept a click meant for the map underneath. */
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

/* Physical sides, driven by the map's direction, not the box's own: the box
   is forced LTR for its text, so `inset-inline-end` on it would resolve to
   the right on the Arabic site too — straight onto the legend. */
.home-map[dir="ltr"] .home-map__coords {
  right: 10px;
}

.home-map[dir="rtl"] .home-map__coords {
  left: 10px;
}

/* Overview inset. Hidden on phones, where the screen is the constraint and a
   second map is a luxury. */
.home-map__minimap {
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 6px;
  /* Above the two scale bars (each ~26px with its margin), which sit above
     the coordinates. */
  bottom: 104px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  height: 96px;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  inset-inline-end: 10px;
  width: 150px;
  z-index: 2;
}

@media (max-width: 760px) {
  .home-map__minimap {
    display: none;
  }
  /* No pointer on a phone, so no pointer coordinates; and no scale bars —
     the full-width legend leaves them no honest room, and they collided
     with it. The corner stack's lift is undone with them. */
  .home-map__coords,
  .home-map .maplibregl-ctrl-scale {
    display: none;
  }
  .home-map[dir="ltr"] .maplibregl-ctrl-bottom-right,
  .home-map[dir="rtl"] .maplibregl-ctrl-bottom-left {
    bottom: 0;
  }
  /* The basemap switcher's phone position lives with the rest of that control,
     further down — two rules for it in two places, at the same breakpoint, is
     how it ended up in the wrong corner. */
}

.home-map__marker img {
  pointer-events: none;
}

@keyframes home-map-marker-in { from { opacity: 0; transform: translateY(-22px) scale(.6); } to { opacity: 1; transform: translateY(-6px) scale(1); } }

@keyframes home-map-breathe { 0%, 100% { transform: translateY(-6px) scale(1.12); } 50% { transform: translateY(-6px) scale(1.22); } }

.home-map__pulse {
  --c: #ef4444;
  display: block;
  height: 14px;
  position: relative;
  width: 14px;
}

.home-map__pulse::before, .home-map__pulse::after {
  border-radius: 50%;
  content: "";
  inset: 0;
  position: absolute;
}

.home-map__pulse::before {
  background: var(--c);
  box-shadow: 0 0 6px var(--c);
  inset: 3px;
}

.home-map__pulse::after {
  animation: home-map-pulse 2s ease-in-out infinite;
  border: 2px solid var(--c);
}

@keyframes home-map-pulse { 0% { transform: scale(1); opacity: .9; } 50% { transform: scale(2); opacity: .2; } 100% { transform: scale(1); opacity: .9; } }

@media (prefers-reduced-motion: reduce) {
  .home-map__marker, .home-map__marker.is-selected, .home-map__pulse::after {
    animation: none;
  }
}

/* Measuring rulers */
.home-map__ruler-point {
  background: #fff;
  border: 2.5px solid #f59f00;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,0,0,.4);
  display: block;
  height: 8px;
  pointer-events: none;
  width: 8px;
}

.home-map__ruler-point.is-first {
  background: #f59f00;
  height: 10px;
  width: 10px;
}

.home-map__ruler-label {
  background: rgba(15,23,42,.88);
  border: 1px solid rgba(245,159,0,.4);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  color: #f59f00;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  pointer-events: none;
  white-space: nowrap;
}

/* Party legend (bottom start) */
.home-map__legend {
  align-items: center;
  backdrop-filter: blur(12px);
  background: rgba(6,25,35,.82);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  bottom: 14px;
  display: flex;
  gap: 4px;
  inset-inline-start: 12px;
  /* Leaves the minimap column (150px + margins) free on the other side. */
  max-width: calc(100% - 186px);
  overflow-x: auto;
  padding: 5px 6px;
  position: absolute;
  scrollbar-width: none;
  z-index: 2;
}

.home-map__legend::-webkit-scrollbar {
  display: none;
}

.home-map__legend-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  gap: 7px;
  padding: 4px 10px 4px 5px;
  transition: opacity 150ms ease, background 150ms ease, color 150ms ease;
}

[dir="rtl"] .home-map__legend-item {
  padding: 4px 5px 4px 10px;
}

.home-map__legend-item:hover {
  background: rgba(255,255,255,.1);
}

.home-map__legend-item.is-dimmed {
  opacity: .45;
}

.home-map__legend-item.is-active {
  background: #fff;
  color: var(--navy-950);
}

.home-map__legend-item--restore {
  color: #ffd166;
  padding-inline: 10px;
}

.home-map__legend-swatch {
  align-items: center;
  border: 2px solid;
  border-radius: 50%;
  display: flex;
  height: 22px;
  justify-content: center;
  overflow: hidden;
  width: 22px;
}

.home-map__legend-swatch img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Basemap switcher: bottom inline-end corner, beside the coordinates, scale and
   minimap stack. Values tuned in the browser.

   Order matters and was the bug: the phone rule sat in a media query ABOVE the
   plain rule, and two rules of the same specificity are decided by which comes
   last — so the desktop position won at every width and the phone rule never
   did anything. The plain rule is the base; the media query overrides it. */
.home-map__style {
  inset-block-end: 38px;
  inset-inline-end: 105px;
  position: absolute;
  z-index: 2;
}

@media screen and (max-width: 760px) {
  .home-map__style {
    inset-block-end: 110px;
    inset-inline-end: 16px;
  }
}


.home-map__style-button, .home-map__style-item {
  align-items: center;
  color: var(--hm-ink);
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  padding: 5px;
}

.home-map__style-button {
  height: 36px;
  justify-content: center;
  width: 36px;
}

.home-map__style-swatch {
  border: 2px solid #fff;
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
  display: block;
  height: 22px;
  width: 22px;
}

.home-map__style-menu {
  background: var(--hm-glass);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(6,25,35,.08);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(6,25,35,.28);
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Opens upward from the button, aligned to its inline-end edge. */
  inset-block-end: 44px;
  inset-inline-end: 0;
  min-width: 180px;
  padding: 6px;
  position: absolute;
  z-index: 3;
}

.home-map__style-item {
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 6px 8px;
  width: 100%;
}

.home-map__style-item:hover {
  background: rgba(6,25,35,.06);
}

.home-map__style-item.is-selected {
  background: var(--green-100);
  color: var(--green-700);
}

/* Beside the zoom control (same side as the map controls). */
.home-map__list-toggle {
  backdrop-filter: blur(10px);
  background: rgba(6,25,35,.82);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  box-shadow: var(--hm-shadow);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  height: 36px;
  inset-block-start: 10px;
  inset-inline-end: 54px;
  padding: 0 14px;
  position: absolute;
  transition: background 150ms ease;
  z-index: 2;
}

.home-map__list-toggle:hover {
  background: var(--navy-800);
}

.home-map__list-toggle {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.home-map__list-toggle b {
  background: rgba(255,255,255,.16);
  border-radius: 999px;
  font-size: 11px;
  padding: 1px 7px;
}

/* Region select menu (top start) */
.home-map__region {
  inset-block-start: 10px;
  inset-inline-start: 10px;
  position: absolute;
  z-index: 4;
}

.home-map__region-button {
  align-items: center;
  backdrop-filter: blur(10px);
  background: rgba(6,25,35,.82);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  box-shadow: var(--hm-shadow);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 8px;
  height: 36px;
  max-width: min(60vw, 280px);
  padding: 0 12px 0 8px;
  transition: background 150ms ease;
}

[dir="rtl"] .home-map__region-button {
  padding: 0 8px 0 12px;
}

.home-map__region-button:hover {
  background: var(--navy-800);
}

.home-map__region-button img {
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.3);
  height: 16px;
  object-fit: cover;
  width: 24px;
}

.home-map__region-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-map__region-button svg {
  flex: 0 0 auto;
  opacity: .8;
}

.home-map__menu-backdrop {
  inset: 0;
  position: fixed;
  z-index: 3;
}

.home-map__region-menu {
  animation: home-map-rise 160ms ease both;
  backdrop-filter: blur(12px);
  background: var(--hm-glass);
  border: 1px solid rgba(6,25,35,.08);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(6,25,35,.3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  inset-block-start: 44px;
  inset-inline-start: 0;
  max-height: min(60vh, 420px);
  min-width: 240px;
  overflow-y: auto;
  padding: 6px;
  position: absolute;
  z-index: 4;
}

.home-map__region-item {
  align-items: center;
  border-radius: 10px;
  color: var(--hm-ink);
  display: flex;
  font-size: 13.5px;
  font-weight: 700;
  gap: 10px;
  padding: 9px 10px;
  text-decoration: none;
  transition: background 120ms ease;
}

.home-map__region-item img, .home-map__region-item i {
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(6,25,35,.12);
  display: block;
  flex: 0 0 auto;
  height: 18px;
  object-fit: cover;
  width: 26px;
}

.home-map__region-item i {
  background: var(--surface-soft);
}

.home-map__region-item span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-map__region-item small {
  background: var(--surface-soft);
  border-radius: 999px;
  color: var(--ink-600);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
}

.home-map__region-item:hover {
  background: rgba(6,25,35,.06);
}

.home-map__region-item.is-active {
  background: var(--green-100);
  color: var(--green-700);
}

.home-map__region-item.is-active small {
  background: var(--green-700);
  color: #fff;
}

/* Events drawer (phones): the list slides up over the map, like the CMS home. */
.home-map__backdrop {
  animation: home-map-fade 160ms ease both;
  background: rgba(6,14,25,.55);
  inset: 0;
  position: fixed;
  z-index: 1000;
}

.home-map__list--drawer {
  animation: home-map-slide 240ms cubic-bezier(.2,.8,.2,1) both;
  border-inline-start: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -20px 60px rgba(0,0,0,.35);
  height: min(78dvh, 720px);
  inset: auto 0 0 0;
  position: fixed;
  z-index: 1001;
}

.home-map__list--drawer::before {
  background: var(--border-strong);
  border-radius: 999px;
  content: "";
  height: 4px;
  inset-inline-start: 50%;
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  width: 40px;
}

.home-map__list--drawer .home-map__list-head {
  padding-top: 20px;
}

@keyframes home-map-slide { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Popup card */
.home-map__popup .maplibregl-popup-content {
  background: var(--hm-panel);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(6,25,35,.35);
  overflow: hidden;
  padding: 0;
  position: relative;
}

.home-map__popup .maplibregl-popup-tip {
  border-top-color: var(--hm-panel);
}

.home-map__popup-close, .home-map__modal-close {
  align-items: center;
  background: rgba(15,23,42,.72);
  border: 1.5px solid rgba(255,255,255,.85);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  height: 30px;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  justify-content: center;
  padding: 0;
  position: absolute;
  transition: background 150ms ease, transform 150ms ease;
  width: 30px;
  z-index: 3;
}

.home-map__popup-close:hover, .home-map__modal-close:hover {
  background: #dc2626;
  transform: scale(1.06);
}

.home-map__popup-close:focus-visible, .home-map__modal-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.home-map__card {
  border-top: 4px solid var(--accent, var(--green-600));
  color: var(--hm-ink);
  font-size: 13px;
  width: 300px;
}

.home-map__card-cover {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
}

.home-map__card-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 16px 14px;
}

.home-map__card-party {
  align-items: center;
  align-self: flex-start;
  border-radius: 6px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  gap: 6px;
  line-height: 1.3;
  padding: 3px 8px;
}

.home-map__card-party img {
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.6);
  display: block;
  height: 12px;
  object-fit: cover;
  width: 18px;
}

/* Party and category sit on one line, wrapping when both are long. The close
   button is in the top corner, so the row keeps clear of it. */
.home-map__card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-inline-end: 40px;
}

.home-map__card-category {
  align-items: center;
  background: rgba(127, 127, 127, .14);
  border-radius: 6px;
  color: inherit;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  gap: 5px;
  line-height: 1.3;
  opacity: .9;
  padding: 3px 8px;
}

.home-map__card-category img {
  display: block;
  height: 13px;
  object-fit: contain;
  width: 13px;
}

.home-map__card-title {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
  margin: 0;
}

.home-map__card-date {
  color: var(--ink-500);
  font-size: 12px;
  font-weight: 600;
}

.home-map__card-text {
  color: var(--ink-800);
  line-height: 1.65;
  margin: 0;
}

.home-map__card-children {
  color: var(--ink-600);
  font-size: 12px;
  margin: 0;
  padding-inline-start: 16px;
}

.home-map__card-actions {
  align-items: center;
  border-top: 1px solid var(--hm-line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding-top: 12px;
}

.home-map__btn {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--hm-line);
  border-radius: 999px;
  color: var(--ink-800);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  line-height: 1;
  padding: 8px 12px;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.home-map__btn:hover {
  background: var(--green-100);
  border-color: var(--green-600);
  color: var(--green-700);
}

.home-map__btn--primary {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
}

.home-map__btn--primary:hover {
  background: var(--green-600);
  border-color: var(--green-600);
  color: #fff;
}

.home-map__btn.is-done {
  background: var(--green-100);
  border-color: var(--green-600);
  color: var(--green-700);
}

.home-map__card-hide {
  background: transparent;
  border: 0;
  color: var(--ink-500);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  margin-inline-start: auto;
  padding: 6px 2px;
}

.home-map__card-hide:hover {
  color: #dc2626;
}

/* Events panel */
.home-map__list {
  background: var(--hm-panel);
  border-inline-start: 1px solid var(--hm-line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.home-map__list-head {
  background: linear-gradient(to bottom, var(--surface-soft), var(--hm-panel));
  border-bottom: 1px solid var(--hm-line);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  font-size: 13px;
  gap: 10px;
  padding: 14px 14px 12px;
}

.home-map__list-title {
  align-items: center;
  display: flex;
  gap: 8px;
}

.home-map__list-title strong {
  color: var(--navy-950);
  flex: 1;
  font-size: 16px;
  font-weight: 900;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-map__count {
  background: var(--navy-950);
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  white-space: nowrap;
}

.home-map__fly {
  align-items: center;
  background: var(--hm-panel);
  border: 1px solid var(--hm-line);
  border-radius: 8px;
  color: var(--ink-800);
  cursor: pointer;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  transition: border-color 150ms ease, color 150ms ease;
  width: 28px;
}

.home-map__fly:hover {
  border-color: var(--green-600);
  color: var(--green-700);
}

.home-map__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.home-map__search-wrap {
  align-items: center;
  background: var(--hm-panel);
  border: 1px solid var(--hm-line);
  border-radius: 10px;
  color: var(--ink-500);
  display: flex;
  flex: 1 1 100%;
  gap: 8px;
  padding-inline: 10px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.home-map__search-wrap:focus-within {
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px var(--green-100);
}

.home-map__search {
  background: transparent;
  border: 0;
  color: var(--hm-ink);
  flex: 1;
  font: inherit;
  font-size: 13px;
  min-width: 0;
  outline: none;
  padding: 8px 0;
}

.home-map__select {
  background: var(--hm-panel);
  border: 1px solid var(--hm-line);
  border-radius: 10px;
  color: inherit;
  flex: 1 1 140px;
  font: inherit;
  font-size: 13px;
  min-width: 0;
  padding: 7px 10px;
}

.home-map__select:focus {
  border-color: var(--green-600);
  outline: none;
}

.home-map__clear {
  background: transparent;
  border: 0;
  color: var(--green-700);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 4px;
}

.home-map__items {
  flex: 1;
  list-style: none;
  margin: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  scrollbar-color: var(--border-strong) transparent;
  scrollbar-width: thin;
}

.home-map__item {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 12px;
  display: flex;
  gap: 2px;
  margin-bottom: 4px;
  padding-inline-end: 4px;
  position: relative;
  transition: background 150ms ease, border-color 150ms ease;
}

.home-map__item::before {
  background: var(--accent, var(--green-600));
  border-radius: 999px;
  content: "";
  inset-block: 12px;
  inset-inline-start: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 150ms ease;
  width: 3px;
}

.home-map__item:hover {
  background: var(--surface-soft);
}

.home-map__item.is-selected {
  background: var(--surface-soft);
  border-color: var(--hm-line);
}

.home-map__item.is-selected::before {
  opacity: 1;
}

.home-map__item-main {
  align-items: flex-start;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex: 1;
  gap: 12px;
  min-width: 0;
  padding: 10px 10px 10px 12px;
  text-align: start;
}

.home-map__item-icon {
  align-items: center;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--accent, var(--hm-line));
  display: flex;
  flex: 0 0 32px;
  height: 32px;
  justify-content: center;
  margin-top: 2px;
  overflow: hidden;
  width: 32px;
}

.home-map__item-icon img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.home-map__item-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.home-map__item-title {
  color: var(--navy-950);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

.home-map__item-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 11.5px;
}

.home-map__item-party {
  font-weight: 800;
}

.home-map__item-cat {
  background: var(--surface-soft);
  border-radius: 4px;
  color: var(--ink-600);
  font-weight: 700;
  padding: 1px 6px;
}

.home-map__item.is-selected .home-map__item-cat, .home-map__item:hover .home-map__item-cat {
  background: #fff;
}

.home-map__item-date {
  color: var(--ink-500);
  font-size: 11.5px;
}

.home-map__item-action, .home-map__item-hide {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--ink-500);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 28px;
  height: 28px;
  justify-content: center;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}

.home-map__item:hover .home-map__item-action, .home-map__item:hover .home-map__item-hide, .home-map__item.is-selected .home-map__item-action, .home-map__item.is-selected .home-map__item-hide, .home-map__item-action.is-done {
  opacity: 1;
}

.home-map__item-action:hover, .home-map__item-hide:hover {
  background: #fff;
  color: var(--navy-950);
}

.home-map__item-hide:hover {
  color: #dc2626;
}

.home-map__item-action.is-done {
  color: var(--green-700);
}

.home-map__empty {
  color: var(--ink-500);
  padding: 40px 20px;
  text-align: center;
}

/* Details modal */
.home-map__modal {
  align-items: center;
  animation: home-map-fade 160ms ease both;
  backdrop-filter: blur(4px);
  background: rgba(6,14,25,.62);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 1000;
}

.home-map__modal-card {
  animation: home-map-rise 220ms cubic-bezier(.2,.8,.2,1) both;
  background: var(--hm-panel);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  color: var(--hm-ink);
  max-height: min(92vh, 900px);
  max-width: 680px;
  overflow: auto;
  position: relative;
  scrollbar-width: thin;
  width: 100%;
}

@keyframes home-map-fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes home-map-rise { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

.home-map__modal-close {
  height: 34px;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  width: 34px;
}

.home-map__modal-cover {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
}

.home-map__modal-embed {
  aspect-ratio: 16 / 9;
  background: #000;
  border: 0;
  display: block;
  width: 100%;
}

.home-map__modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px 24px;
}

.home-map__modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-inline-end: 40px;
}

.home-map__tag {
  background: var(--surface-soft);
  border-radius: 6px;
  color: var(--ink-800);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
}

.home-map__tag--link {
  color: var(--green-700);
}

.home-map__tag--link:hover {
  text-decoration: underline;
}

.home-map__modal-title {
  color: var(--navy-950);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.3;
  margin: 0;
}

.home-map__modal-label {
  color: var(--ink-500);
  font-size: 14px;
  margin: 0;
}

.home-map__modal-text {
  color: var(--ink-800);
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  white-space: pre-line;
}

.home-map__modal-text p {
  margin: 0 0 .8em;
}

.home-map__modal-text a {
  color: var(--green-700);
  text-decoration: underline;
}

.home-map__modal-text img, .home-map__modal-text iframe {
  border-radius: 10px;
  max-width: 100%;
}

.home-map__modal-parent {
  color: var(--ink-500);
  font-size: 13px;
  margin: 0;
}

.home-map__modal-section {
  background: var(--surface-soft);
  border-radius: 12px;
  padding: 12px 14px;
}

.home-map__modal-section h3 {
  color: var(--ink-500);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.home-map__modal-children {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-map__modal-children small {
  color: var(--ink-500);
}

.home-map__link-button {
  background: transparent;
  border: 0;
  color: var(--green-700);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0;
  text-align: start;
}

.home-map__link-button:hover {
  text-decoration: underline;
}

.home-map__modal-media {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

.home-map__modal-thumb {
  aspect-ratio: 1;
  background: #fff;
  border-radius: 10px;
  display: block;
  overflow: hidden;
  position: relative;
  transition: transform 150ms ease;
}

.home-map__modal-thumb:hover {
  transform: scale(1.03);
}

.home-map__modal-thumb img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.home-map__modal-thumb span {
  align-items: center;
  color: var(--ink-500);
  display: flex;
  font-size: 11px;
  height: 100%;
  justify-content: center;
}

.home-map__modal-play {
  background: rgba(0,0,0,.55);
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  height: 28px;
  inset: 50% auto auto 50%;
  line-height: 28px;
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
  width: 28px;
}

.home-map__modal-actions {
  margin-top: 4px;
}

@media (max-width: 760px) {
  .home-map--with-list {
    grid-template-columns: minmax(0, 1fr);
  }
  
  /* Bottom-end controls stack instead of sharing one spot: legend at the
       bottom, then the events-list pill, then the basemap switcher above it.
       Both used to sit 60px up on the same side, so the pill covered the
       switcher. Heights are the control height (36px) plus a 10px gap. */
  .home-map__list-toggle {
    inset-block-start: auto;
    inset-block-end: 60px;
    inset-inline-end: 10px;
  }
  
  .home-map__region-button {
    max-width: 56vw;
  }
  
  .home-map__legend {
    bottom: 12px;
    max-width: calc(100% - 24px);
  }
  
  .home-map__item-action, .home-map__item-hide {
    opacity: 1;
  }
  
  .home-map__modal {
    align-items: flex-end;
    padding: 0;
  }
  
  .home-map__modal-card {
    border-radius: 20px 20px 0 0;
    max-height: 90vh;
  }
  
  .home-map__modal-body {
    padding: 16px 16px 20px;
  }
}

/* Full-page map (/map, /map/<region>) and the widget's region bar.
   The page never scrolls: header + bar are fixed-height rows, the map stage
   takes the rest and only the events panel scrolls, inside itself. */
.map-page {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.map-page > .site-header, .map-page > .site-header__fallback {
  flex: 0 0 auto;
}

.map-page > .breadcrumb {
  flex: 0 0 auto;
}

.map-page > .breadcrumb--minimal, .map-page > .breadcrumb--pills {
  padding-bottom: 10px;
}

.map-page > .breadcrumb .breadcrumb-item.is-active span {
  display: inline-block;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.map-page__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.map-page__head {
  background: radial-gradient(900px 260px at 85% -40%, rgba(0,150,106,.35), transparent 70%), radial-gradient(700px 240px at 10% 120%, rgba(18,55,71,.9), transparent 70%), var(--navy-950);
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff;
  flex: 0 0 auto;
  position: relative;
}

.map-page__head::before {
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 18px 18px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent);
  opacity: .5;
  pointer-events: none;
  position: absolute;
}

.map-page__head::after {
  background: linear-gradient(90deg, transparent, var(--green-600), var(--gold-500, #e0b04a), transparent);
  bottom: -1px;
  content: "";
  height: 2px;
  inset-inline: 0;
  position: absolute;
}

.map-page__bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  margin-inline: auto;
  max-width: var(--container);
  padding: 14px var(--gutter);
  position: relative;
  width: 100%;
}

.map-page__intro {
  align-items: center;
  display: flex;
  flex: 1 1 460px;
  gap: 14px;
  min-width: 0;
}

.map-page__flag-wrap {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  display: grid;
  flex: 0 0 auto;
  padding: 6px;
  place-items: center;
}

.map-page__flag {
  border-radius: 6px;
  display: block;
  height: 30px;
  object-fit: cover;
  width: 44px;
}

.map-page__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.map-page__title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.map-page__title h1 {
  color: #fff;
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: 0;
}

.map-page__count {
  align-items: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 7px;
  padding: 4px 11px 4px 9px;
  white-space: nowrap;
}

[dir="rtl"] .map-page__count {
  padding: 4px 9px 4px 11px;
}

.map-page__live {
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(34,197,94,.7);
  display: inline-block;
  height: 8px;
  width: 8px;
  animation: map-page-live 1.8s ease-out infinite;
}

@keyframes map-page-live { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.7); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

.map-page__description {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgba(255,255,255,.72);
  display: -webkit-box;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  max-width: 72ch;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .map-page__live {
    animation: none;
  }
}

.map-page__stage {
  flex: 1;
  min-height: 0;
}

.map-page__stage .home-map--fill {
  height: 100%;
  min-height: 0;
}

/* HomeMap "Full page": edge to edge, and the page becomes one viewport tall —
   header + map + footer, no document scroll; the map takes what is left. */
.widget--map-full {
  margin-inline: calc(50% - 50vw);
  max-width: none;
  width: 100vw;
}

.widget--map-full .widget-map__bar {
  margin-inline: auto;
  max-width: var(--container);
  padding-inline: var(--gutter);
}

.widget--map-full .home-map {
  border-inline: 0;
  border-radius: 0;
  height: max(480px, calc(100dvh - 170px));
}

.widget--map-full {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.widget--map-full .widget-title {
  margin-inline: auto;
  max-width: var(--container);
  padding-inline: var(--gutter);
  width: 100%;
}

/* Map widget description: a dark banner in full-page mode, plain text otherwise. */
.widget-map__intro {
  color: var(--ink-600);
  font-size: 14px;
  line-height: 1.6;
  margin: -12px 0 14px;
  max-width: 80ch;
}

.widget-title + .widget-map__intro {
  margin-top: -14px;
}

.widget-map__head {
  background: radial-gradient(900px 260px at 85% -40%, rgba(0,150,106,.35), transparent 70%), radial-gradient(700px 240px at 10% 120%, rgba(18,55,71,.9), transparent 70%), var(--navy-950);
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff;
  flex: 0 0 auto;
  position: relative;
}

.widget-map__head::after {
  background: linear-gradient(90deg, transparent, var(--green-600), var(--gold-500), transparent);
  bottom: -1px;
  content: "";
  height: 2px;
  inset-inline: 0;
  position: absolute;
}

.widget-map__head-inner {
  align-items: center;
  display: flex;
  gap: 14px;
  margin-inline: auto;
  max-width: var(--container);
  padding: 12px var(--gutter);
  width: 100%;
}

.widget-map__flag {
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.2);
  flex: 0 0 auto;
  height: 30px;
  object-fit: cover;
  width: 44px;
}

.widget-map__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.widget-map__title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.widget-map__title h2 {
  color: #fff;
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 900;
  line-height: 1.25;
  margin: 0;
}

.widget-map__count {
  align-items: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 7px;
  padding: 4px 11px 4px 9px;
  white-space: nowrap;
}

.widget-map__count i {
  animation: map-page-live 1.8s ease-out infinite;
  background: #22c55e;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.widget-map__description {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgba(255,255,255,.72);
  display: -webkit-box;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  max-width: 90ch;
  overflow: hidden;
}

.map-preview__description {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgba(255,255,255,.78);
  display: -webkit-box;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  max-width: 70ch;
  overflow: hidden;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

@media (max-width: 760px) {
  .widget-map__description, .map-preview__description {
    -webkit-line-clamp: 1;
  }
}

/* ── Site search (Shared/Search widget, /search) ──────────────────────────── */
.widget--search {
  max-width: 100%;
}

.search-box {
  position: relative;
  width: 100%;
}

.search-box__field {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-500);
  display: flex;
  gap: 8px;
  padding: 0 6px 0 14px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

[dir="rtl"] .search-box__field {
  padding: 0 14px 0 6px;
}

.search-box__field:focus-within {
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px var(--green-100);
}

.search-box__field input {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-950);
  flex: 1;
  font: inherit;
  font-size: 14px;
  min-width: 0;
  outline: none;
  padding: 10px 0;
}

.search-box__field input::-webkit-search-cancel-button {
  appearance: none;
}

.search-box__submit {
  background: var(--navy-950);
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  padding: 7px 14px;
  transition: background 150ms ease;
}

.search-box__submit:hover {
  background: var(--green-700);
}

.search-box__spinner {
  animation: search-spin .8s linear infinite;
  border: 2px solid var(--border);
  border-radius: 50%;
  border-top-color: var(--green-600);
  flex: 0 0 auto;
  height: 14px;
  width: 14px;
}

@keyframes search-spin { to { transform: rotate(360deg); } }

.search-box__panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(6,25,35,.18);
  display: flex;
  flex-direction: column;
  inset-inline: 0;
  margin-top: 6px;
  max-height: min(60vh, 440px);
  overflow-y: auto;
  padding: 6px;
  position: absolute;
  top: 100%;
  z-index: 40;
}

/* Results laid out in the page (the search widget in a row), rather than
   floating over it: a grid of cards that pushes the rest of the page down,
   with no shadow, no scroller and no maximum height. */
.search-box--in-page {
  position: static;
}

.search-box__panel--page {
  box-shadow: none;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  inset-inline: auto;
  max-height: none;
  overflow: visible;
  padding: 12px;
  position: static;
  z-index: auto;
}

.search-box__panel--page .search-box__heading,
.search-box__panel--page .search-box__all,
.search-box__panel--page .search-box__empty {
  grid-column: 1 / -1;
}

.search-box__panel--page .search-box__item {
  margin-bottom: 0;
}

/* A result is a card: the cover, then what it is, its headline and its date.
   The bare label list read like a select menu and gave the reader nothing to
   recognise an article by. */
.search-box__item {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--ink-950);
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
  padding: 8px;
  text-decoration: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.search-box__item:hover, .search-box__item.is-active {
  border-color: var(--green-700);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
  transform: translateY(-1px);
}

.search-box__thumb {
  background: var(--surface-soft);
  border-radius: 8px;
  flex: 0 0 auto;
  height: 52px;
  overflow: hidden;
  width: 72px;
}

.search-box__thumb img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* No cover: a tinted tile in the colour of the kind, so the row still reads
   as a card rather than a gap. */
.search-box__thumb-fallback {
  background: var(--surface-soft);
  display: block;
  height: 100%;
  width: 100%;
}

.search-box__thumb-fallback--event {
  background: #fff3e0;
}

.search-box__thumb-fallback--term {
  background: var(--green-100);
}

.search-box__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.search-box__date {
  color: var(--ink-500);
  font-size: 11.5px;
}

.search-box__kind {
  background: var(--surface-soft);
  border-radius: 4px;
  color: var(--ink-600);
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 6px;
  text-transform: uppercase;
}

.search-box__kind--event {
  background: #fff3e0;
  color: #b45309;
}

.search-box__kind--term {
  background: var(--green-100);
  color: var(--green-700);
}

.search-box__label {
  display: -webkit-box;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-box__all {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  color: var(--green-700);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  margin-top: 4px;
  padding: 10px;
  text-align: start;
}

.search-box__all:hover {
  text-decoration: underline;
}

.search-box__empty {
  color: var(--ink-500);
  font-size: 13px;
  margin: 0;
  padding: 12px;
  text-align: center;
}

/* Compact (header): icon-sized field that grows on focus. */
.search-box--compact {
  width: 40px;
  transition: width 200ms ease;
}

.search-box--compact:focus-within, .search-box--compact.is-open {
  width: min(360px, 60vw);
}

.search-box--compact .search-box__field {
  padding: 0 11px;
}

.search-box--compact .search-box__field input {
  opacity: 0;
  padding: 9px 0;
  width: 0;
}

.search-box--compact:focus-within .search-box__field input, .search-box--compact.is-open .search-box__field input {
  opacity: 1;
  width: auto;
}

.search-box--compact .search-box__submit {
  display: none;
}

.search-box--compact:focus-within .search-box__submit {
  display: inline-block;
}

/* Results page (components/search/SearchResults.tsx)
   A single scannable column, with topics and map events in a rail beside it
   rather than stacked above the results. */
.search-results {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.search-results__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}

.search-results__heading {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.search-results__head .search-box__field input {
  font-size: 16px;
  padding: 13px 16px;
}

.search-results__summary {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 10px;
  margin: 0;
}

.search-results__count {
  background: var(--surface-2, rgba(0,0,0,.04));
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
}

/* Results beside the rail. Falls to one column well before phone width,
   because the rail is supporting material, not a second reading column. */
.search-results__body {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .search-results__body--with-rail {
    grid-template-columns: minmax(0, 1fr) 260px;
  }
}

.search-results__main {
  min-width: 0;
}

.search-results__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-result {
  border-bottom: 1px solid var(--border);
}

.search-result:first-child {
  border-top: 1px solid var(--border);
}

.search-result__link {
  align-items: flex-start;
  color: inherit;
  display: flex;
  gap: 16px;
  padding: 16px 8px;
  text-decoration: none;
  transition: background .15s ease;
}

.search-result__link:hover {
  background: var(--surface-2, rgba(0,0,0,.03));
}

.search-result__thumb {
  border-radius: var(--radius-md, 8px);
  flex-shrink: 0;
  height: 96px;
  overflow: hidden;
  width: 160px;
}

.search-result__thumb img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.search-result__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.search-result__meta {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 10px;
}

.search-result__kind {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.search-result__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.search-result__link:hover .search-result__title {
  text-decoration: underline;
}

/* Two lines of context: enough to judge the result, never enough to read
   instead of clicking. */
.search-result__excerpt {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--muted);
  display: -webkit-box;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

@media (max-width: 560px) {
  .search-result__link {
    gap: 12px;
    padding: 14px 4px;
  }

  .search-result__thumb {
    height: 66px;
    width: 96px;
  }

  .search-result__title {
    font-size: 15px;
  }

  /* One line on a phone; the headline is what matters at that width. */
  .search-result__excerpt {
    -webkit-line-clamp: 1;
  }
}

/* Loading state: grey blocks the size of a real row, so nothing shifts when
   the answers arrive. */
.search-result--skeleton {
  display: flex;
  gap: 16px;
  padding: 16px 8px;
}

.search-result--skeleton .search-result__thumb,
.search-result--skeleton .search-result__title,
.search-result--skeleton .search-result__excerpt {
  animation: search-pulse 1.4s ease-in-out infinite;
  background: var(--surface-2, rgba(0,0,0,.06));
  border-radius: 6px;
}

.search-result--skeleton .search-result__body {
  flex: 1;
  gap: 10px;
}

.search-result--skeleton .search-result__title {
  height: 18px;
  width: min(60%, 320px);
}

.search-result--skeleton .search-result__excerpt {
  height: 28px;
  width: 100%;
}

@keyframes search-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .search-result--skeleton .search-result__thumb,
  .search-result--skeleton .search-result__title,
  .search-result--skeleton .search-result__excerpt {
    animation: none;
  }
}

.search-results__rail {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.search-results__group h2 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  margin: 0 0 10px;
  text-transform: uppercase;
  color: var(--muted);
}

.search-results__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-results__links a {
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.search-results__links a:hover {
  text-decoration: underline;
}

.search-results__date {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

.search-results__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-results__chips a {
  background: var(--surface-2, rgba(0,0,0,.04));
  border-radius: 999px;
  color: inherit;
  display: inline-block;
  font-size: 13px;
  padding: 5px 12px;
  text-decoration: none;
  transition: background .15s ease;
}

.search-results__chips a:hover {
  background: var(--surface-3, rgba(0,0,0,.08));
}

.search-results__empty {
  color: var(--muted);
  font-size: 15px;
  padding: 32px 0;
  text-align: center;
}

.search-results__pager {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 28px;
}

.search-results__pager-numbers {
  align-items: center;
  display: flex;
  gap: 4px;
}

.search-results__pager-step,
.search-results__pager-number {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 9px 13px;
  text-decoration: none;
}

.search-results__pager-number {
  min-width: 36px;
  text-align: center;
}

.search-results__pager-step:hover,
.search-results__pager-number:hover {
  background: var(--surface-2, rgba(0,0,0,.04));
}

.search-results__pager-number.is-current {
  background: var(--accent, #0f766e);
  border-color: var(--accent, #0f766e);
  color: #fff;
}

.search-results__pager span[aria-disabled] {
  opacity: .4;
  pointer-events: none;
}

.search-results__pager-gap {
  color: var(--muted);
  padding: 0 2px;
}

/* Map preview card (Map/MapPreview) */
.map-preview {
  background: var(--navy-950);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(6,25,35,.12);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.map-preview__map {
  /* Never zero wide — see .home-map__stage. */
  min-width: 1px;
  position: relative;
  width: 100%;
}

.map-preview__map .maplibregl-map {
  font: inherit;
}

.map-preview__map .maplibregl-canvas:focus {
  outline: none;
}

.map-preview__map::after {
  background: linear-gradient(to top, rgba(6,25,35,.92) 0%, rgba(6,25,35,.55) 35%, transparent 65%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

/* The card's marker, matching the full map's: the event's icon on a disc in
   its colour. Smaller, because the card is a glimpse rather than the map. */
.map-preview__pin {
  align-items: center;
  background: var(--c, #ef4444);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #ef4444) 35%, transparent), 0 4px 10px rgba(0,0,0,.4);
  display: flex;
  height: 24px;
  justify-content: center;
  overflow: hidden;
  width: 24px;
}

.map-preview__pin img {
  display: block;
  pointer-events: none;
}

.map-preview__pin-code {
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.map-preview__pin--pulse {
  animation: home-map-pulse 2s ease-in-out infinite;
}

.map-preview__overlay {
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  inset-inline: 0;
  padding: 18px 20px;
  position: absolute;
  text-decoration: none;
  z-index: 2;
}

.map-preview__region {
  align-items: center;
  display: flex;
  gap: 10px;
}

.map-preview__region img {
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35);
  height: 18px;
  object-fit: cover;
  width: 26px;
}

.map-preview__region span {
  color: rgba(255,255,255,.8);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.map-preview__title {
  color: #fff;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
  line-height: 1.25;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}

.map-preview__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.map-preview__count {
  align-items: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 7px;
  padding: 4px 11px 4px 9px;
}

.map-preview__count i {
  animation: map-page-live 1.8s ease-out infinite;
  background: #22c55e;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.map-preview__open {
  align-items: center;
  background: var(--green-600);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 6px;
  margin-inline-start: auto;
  padding: 8px 14px;
  transition: background 150ms ease, transform 150ms ease;
}

.map-preview:hover .map-preview__open {
  background: var(--green-700);
  transform: translateY(-1px);
}

.map-preview__latest {
  background: var(--surface);
  color: var(--ink-950);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.map-preview__item {
  align-items: flex-start;
  border-top: 1px solid var(--border);
  color: inherit;
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  text-decoration: none;
  transition: background 120ms ease;
}

.map-preview__item:hover {
  background: var(--surface-soft);
}

.map-preview__item i {
  background: var(--c, var(--green-600));
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--c, var(--green-600));
  flex: 0 0 10px;
  height: 10px;
  margin-top: 5px;
  width: 10px;
}

.map-preview__item strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.4;
  overflow: hidden;
}

.map-preview__item small {
  color: var(--ink-500);
  display: block;
  font-size: 11.5px;
  margin-top: 2px;
}

.map-preview__item > span {
  min-width: 0;
}

@media (max-width: 760px) {
  .map-preview__overlay {
    padding: 14px;
  }
  
  .map-preview__open {
    font-size: 12px;
    padding: 7px 12px;
  }
  
  .widget--map-full .home-map {
    height: max(420px, calc(100dvh - 120px));
  }
}

.widget-map__bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.widget-map__full {
  color: var(--green-700);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

/* On a phone the head took a third of the screen before the map began. It
   is hidden there; the same title and description open from the (i) button in
   the map's tool column (.home-map__info). */
@media (max-width: 760px) {
  .map-page__head {
    display: none;
  }

  .map-page__region {
    flex: 0 0 auto;
  }
}

/* ── Schedule calendar (Schedule/Calendar widget) ─────────────────────────── */
.widget--schedule {
  display: block;
}

.schedule-cal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.schedule-cal__bar {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 16px;
}

.schedule-cal__nav {
  align-items: center;
  display: flex;
  gap: 6px;
}

.schedule-cal__nav-btn {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  font-size: 18px;
  height: 32px;
  justify-content: center;
  line-height: 1;
  width: 32px;
}

.schedule-cal__nav-btn:hover, .schedule-cal__today:hover, .schedule-cal__view:hover {
  background: var(--surface-soft);
}

.schedule-cal__today {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  height: 32px;
  padding: 0 12px;
}

.schedule-cal__heading {
  flex: 1;
  font-size: clamp(15px, 2.2vw, 19px);
  margin: 0;
  min-width: 180px;
  text-align: center;
}

.schedule-cal__views {
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  display: flex;
  gap: 2px;
  padding: 2px;
}

.schedule-cal__view {
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius-sm) - 1px);
  cursor: pointer;
  font-size: 13px;
  padding: 6px 12px;
}

.schedule-cal__view.is-active {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

.schedule-cal__weekdays, .schedule-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.schedule-cal__weekday {
  border-bottom: 1px solid var(--border);
  color: var(--ink-600);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 6px;
  text-align: center;
  text-transform: uppercase;
}

.schedule-cal__cell {
  border-bottom: 1px solid var(--border);
  border-inline-end: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 104px;
  padding: 6px;
}

.schedule-cal__cell:nth-child(7n) {
  border-inline-end: 0;
}

.schedule-cal__cell.is-outside {
  background: var(--canvas);
  color: var(--ink-500);
}

.schedule-cal__cell.is-today {
  background: var(--green-100);
}

.schedule-cal__daynum {
  align-self: flex-start;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  height: 24px;
  min-width: 24px;
  padding: 0 6px;
}

.schedule-cal__cell.is-today .schedule-cal__daynum {
  background: var(--green-600);
  color: #fff;
}

.schedule-cal__cell-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
}

.schedule-cal__chip {
  align-items: baseline;
  background: var(--surface-soft);
  border-inline-start: 3px solid var(--green-600);
  border-radius: 4px;
  color: inherit;
  display: flex;
  font-size: 11px;
  gap: 5px;
  overflow: hidden;
  padding: 3px 6px;
  text-decoration: none;
}

.schedule-cal__chip:hover {
  filter: brightness(.96);
}

.schedule-cal__chip-time {
  color: var(--ink-600);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.schedule-cal__chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-cal__more {
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: var(--ink-600);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 4px;
  text-decoration: underline;
}

.schedule-cal__agenda {
  display: grid;
  gap: 1px;
  background: var(--border);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.schedule-cal__col {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 14px;
}

.schedule-cal__col.is-today {
  background: var(--green-100);
}

.schedule-cal__col-head {
  align-items: baseline;
  display: flex;
  gap: 6px;
}

.schedule-cal__col-weekday {
  color: var(--ink-600);
  font-size: 12px;
  text-transform: uppercase;
}

.schedule-cal__col-day {
  font-size: 18px;
  font-weight: 700;
}

.schedule-cal__empty {
  color: var(--ink-500);
  font-size: 12px;
  margin: 0;
}

.schedule-cal__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.schedule-cal__row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
}

.schedule-cal__row-time {
  color: var(--ink-600);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.schedule-cal__row-link {
  border-inline-start: 3px solid var(--green-600);
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-inline-start: 8px;
  text-decoration: none;
}

.schedule-cal__row-link:hover .schedule-cal__row-name {
  text-decoration: underline;
}

.schedule-cal__row-name {
  font-size: 13px;
  font-weight: 600;
}

.schedule-cal__row-tag {
  color: var(--ink-600);
  font-size: 11px;
}

.schedule-cal__row-bar {
  background: var(--green-600);
  block-size: 3px;
  border-radius: 2px;
  opacity: .5;
  position: relative;
}

@media (max-width: 640px) {
  .schedule-cal__cell {
    min-height: 74px;
  }
  
  .schedule-cal__chip-time {
    display: none;
  }
  
  .schedule-cal__heading {
    order: -1;
    width: 100%;
    text-align: start;
  }
}

/* Agenda view, following Mantine's AgendaView: a range header, then one group
   per day with a tinted date header and full-width rows. Each row is a colour
   bar beside the title, with the time under it in dimmed small text. */
.schedule-cal__agenda-view {
  display: flex;
  flex-direction: column;
}

.schedule-cal__agenda-view-header {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  padding: 12px;
}

.schedule-cal__agenda-view-label {
  font-size: 14px;
  font-weight: 600;
  text-transform: capitalize;
  user-select: none;
}

.schedule-cal__agenda-view-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.schedule-cal__agenda-view-group:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.schedule-cal__agenda-view-date {
  background: var(--canvas);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px;
  text-transform: capitalize;
}

.schedule-cal__agenda-view-event {
  background: none;
  border: 0;
  cursor: pointer;
  display: block;
  font: inherit;
  text-align: start;
  width: 100%;
}

.schedule-cal__agenda-view-event:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.schedule-cal__agenda-view-event:hover, .schedule-cal__agenda-view-event:active {
  background: var(--canvas);
}

.schedule-cal__agenda-view-event:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: -2px;
}

.schedule-cal__agenda-view-row {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
}

.schedule-cal__agenda-view-color {
  background: var(--green-600);
  border-radius: 2px;
  flex-shrink: 0;
  width: 4px;
}

.schedule-cal__agenda-view-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.schedule-cal__agenda-view-title {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.schedule-cal__agenda-view-time {
  color: var(--ink-600);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.schedule-cal__agenda-view-none {
  color: var(--ink-500);
  margin: 0;
  padding: 32px 12px;
  text-align: center;
}

/* Entry details modal (addressed by ?eventId=). */
.schedule-cal__chip, .schedule-cal__agenda-link, .schedule-cal__row-link {
  cursor: pointer;
  font: inherit;
  text-align: start;
  width: 100%;
}

.schedule-cal__chip {
  border: 0;
  border-inline-start: 3px solid var(--green-600);
}

.schedule-cal__agenda-link {
  background: none;
  border: 0;
  padding: 0;
}

.schedule-cal__row-link {
  background: none;
  border: 0;
  border-inline-start: 3px solid var(--green-600);
}

.schedule-cal__modal {
  align-items: center;
  background: rgba(6,25,35,.55);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 16px;
  position: fixed;
  z-index: 900;
}

.schedule-cal__modal-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 88vh;
  max-width: 560px;
  overflow-y: auto;
  padding: 18px 20px 22px;
  width: 100%;
}

.schedule-cal__modal-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.schedule-cal__modal-when {
  color: var(--ink-600);
  font-size: 12px;
  margin: 0 0 4px;
}

.schedule-cal__modal-title {
  font-size: 19px;
  line-height: 1.35;
  margin: 0;
}

.schedule-cal__modal-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

/* Share: copies the entry's own address (?eventId=), or opens the share
   sheet. A round icon button like Close; "Link copied" appears beside it. */
.schedule-cal__modal-share {
  align-items: center;
  background: var(--surface-soft);
  border: 0;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 32px;
  justify-content: center;
  padding: 0;
  width: 32px;
}

.schedule-cal__modal-copied {
  background: var(--green-100);
  border-radius: 999px;
  color: var(--green-700);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  white-space: nowrap;
}

.schedule-cal__modal-share:hover {
  background: var(--border);
}

.schedule-cal__modal-share.is-done {
  background: var(--green-100);
  color: var(--green-700);
}

.schedule-cal__modal-close {
  background: var(--surface-soft);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 20px;
  height: 32px;
  line-height: 1;
  width: 32px;
}

.schedule-cal__modal-close:hover {
  background: var(--border);
}

.schedule-cal__modal-cover {
  border-radius: var(--radius);
  display: block;
  max-height: 260px;
  object-fit: cover;
  width: 100%;
}

.schedule-cal__modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.schedule-cal__modal-tag {
  background: var(--surface-soft);
  border-radius: 999px;
  color: var(--ink-600);
  font-size: 11px;
  padding: 3px 10px;
}

.schedule-cal__modal-text {
  margin: 0;
  white-space: pre-wrap;
}

.schedule-cal__modal-gallery {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

.schedule-cal__modal-gallery img {
  aspect-ratio: 1;
  border-radius: 10px;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 640px) {
  .schedule-cal__modal {
    align-items: flex-end;
    padding: 0;
  }
  
  .schedule-cal__modal-card {
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
  }
}

/* Phone header: month + year pickers so another period is one tap away. */
.schedule-cal__picker {
  display: flex;
  flex: 1 1 100%;
  gap: 6px;
}

.schedule-cal__select {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: inherit;
  flex: 1;
  font: inherit;
  font-size: 13px;
  height: 34px;
  padding: 0 8px;
}

.schedule-cal__select:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 1px;
}

/* Cookie banner.
   Accept and Decline are deliberately the same size and sit side by side. The
   accepted one is filled because it is the common answer, not because the
   other is discouraged — a decline that is hard to find is not a choice. */
.cookie-consent {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  max-width: min(var(--container), calc(100% - 24px));
}

.cookie-consent__text {
  color: var(--ink-800);
  font-size: 14px;
  line-height: 1.6;
}

.cookie-consent__link {
  color: var(--green-700);
  font-weight: 700;
  text-decoration: underline;
}

.cookie-consent__button {
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 20px;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.cookie-consent__button--accept {
  background: var(--green-600);
  color: #fff;
}

.cookie-consent__button--accept:hover {
  background: var(--green-700);
}

.cookie-consent__button--decline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink-800);
}

.cookie-consent__button--decline:hover {
  background: var(--surface-soft);
  border-color: var(--ink-500);
}

.cookie-consent__button:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 2px;
}

/* The event popup on a phone. The card is sized for a desktop map — 300px
   wide, a 16:9 cover, the description, the children, four actions — and on a
   phone that filled the screen and pushed the map away. Narrower than the
   viewport, a shorter cover, the text clamped to two lines, fewer children,
   compact buttons, and the whole content scrolls inside a bounded height
   rather than growing past it. */
@media (max-width: 760px) {
  .home-map__popup {
    max-width: min(300px, calc(100vw - 24px)) !important;
  }

  .home-map__popup .maplibregl-popup-content {
    border-radius: 12px;
    max-height: min(52vh, 380px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .home-map__card {
    font-size: 12px;
    width: min(300px, calc(100vw - 24px));
  }

  .home-map__card-cover {
    aspect-ratio: 21 / 9;
    max-height: 110px;
  }

  .home-map__card-body {
    gap: 5px;
    padding: 10px 12px 10px;
  }

  .home-map__card-title {
    font-size: 14px;
    line-height: 1.3;
  }

  .home-map__card-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .home-map__card-children li:nth-child(n + 4) {
    display: none;
  }

  .home-map__card-actions {
    gap: 6px;
  }

  .home-map__card-actions .home-map__btn {
    font-size: 12px;
    padding: 6px 10px;
  }

  .home-map__popup-close {
    height: 26px;
    width: 26px;
  }
}

/* About-this-map: the ⓘ button in the tool column and its sheet. The button
   exists only on a phone — on a desktop the page head shows the same. */
.home-map__tool--info {
  display: none;
}

.home-map__info {
  background: var(--hm-panel);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(6,25,35,.4);
  color: var(--hm-ink);
  inset-inline: 12px;
  inset-block-start: 12px;
  max-height: calc(100% - 24px);
  overflow: auto;
  padding: 16px 18px 18px;
  position: absolute;
  /* Above the shared backdrop (1000), like the events drawer. */
  z-index: 1001;
  animation: home-map-slide 220ms ease-out;
}

.home-map__info-head {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-inline-end: 40px;
}

.home-map__info-flag {
  border-radius: 6px;
  display: block;
  height: 24px;
  object-fit: cover;
  width: 36px;
}

.home-map__info-live {
  background: #22c55e;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  margin-inline-end: 4px;
  width: 8px;
  animation: map-page-live 1.8s ease-out infinite;
}

.home-map__info-title {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.3;
  margin: 10px 0 0;
}

.home-map__info-text {
  color: var(--hm-ink);
  font-size: 13px;
  line-height: 1.6;
  margin: 8px 0 0;
  opacity: .85;
}

@media (max-width: 760px) {
  .home-map__tool--info {
    display: inline-flex;
  }
}