:root {
  --ink: #22313d;
  --muted: #66717c;
  --primary: #315d74;
  --primary-dark: #163f57;
  --paper: #fffdf9;
  --correct: #397759;
  --wrong: #b9473a;
  --line: rgba(62, 74, 87, 0.16);
  --shadow: 0 16px 38px rgba(35, 49, 61, 0.11);
}

* { box-sizing: border-box; }

body.nationalities-page {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 7% 0%, rgba(180, 137, 87, 0.14), transparent 26rem),
    radial-gradient(circle at 96% 4%, rgba(49, 93, 116, 0.13), transparent 28rem),
    linear-gradient(180deg, #f8f4ed 0%, #f4efe6 58%, #ebe2d4 100%);
}

button { font: inherit; }

.page-shell {
  width: min(1660px, calc(100% - 32px));
  margin: 16px auto 28px;
}

.page-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 6px 0 10px;
  padding: 11px clamp(16px, 2vw, 26px) 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 253, 249, 0.94);
  box-shadow: 0 15px 36px rgba(38, 48, 51, 0.09);
}

.eyebrow,
.panel-kicker {
  margin: 0;
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.page-hero h1 {
  margin: 2px 0;
  font: 700 clamp(1.8rem, 2.7vw, 2.8rem) / 1 "EB Garamond", Georgia, serif;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.page-hero .hero-copy > p:last-child {
  max-width: 72ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.82rem, 1vw, 0.98rem);
  line-height: 1.3;
}

.mode-switch {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(49, 93, 116, 0.18);
  border-radius: 14px;
  background: rgba(255, 253, 249, 0.9);
  box-shadow: 0 10px 24px rgba(48, 43, 34, 0.07);
}

.mode-button {
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #4e606b;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.mode-button.is-active {
  color: #fff;
  background: var(--primary-dark);
}

.activity-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(330px, 0.8fr);
  gap: 18px;
  align-items: start;
}

.map-card,
.task-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(62, 74, 87, 0.13);
  border-radius: 22px;
  background: rgba(255, 253, 249, 0.94);
  box-shadow: var(--shadow);
}

.map-toolbar,
.map-note {
  padding: 12px 17px;
  color: #556671;
  font-size: 0.82rem;
  font-weight: 700;
}

.map-toolbar { border-bottom: 1px solid var(--line); }
.map-note { border-top: 1px solid var(--line); font-weight: 500; line-height: 1.4; }

.politician-strip { padding: 10px 11px 11px; border-top: 1px solid var(--line); background: #f4f0e9; }
.politician-list { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; }
.politician-chip { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; opacity: .62; transition: opacity .15s, border-color .15s, box-shadow .15s, transform .15s; }
.politician-chip.is-current { border-color: var(--primary); opacity: 1; box-shadow: 0 0 0 3px rgba(49,93,116,.2), 0 7px 16px rgba(35,49,61,.13); transform: scale(1.035); }
.politician-chip img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #e8e4dc; }

.map-stage {
  display: block;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1281.2388 / 455;
  overflow: hidden;
  padding: 0;
  background: #e8eef0;
}

.map-stage svg {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  touch-action: manipulation;
}

.narodnost { cursor: pointer; outline: none; transition: filter 160ms ease, opacity 160ms ease; }
.narodnost path { transition: filter 160ms ease, stroke-width 160ms ease; }
.narodnost:hover path,
.narodnost:focus-visible path,
.narodnost.is-selected path { filter: brightness(1.08) saturate(1.2) drop-shadow(0 0 5px rgba(22, 63, 87, .55)); stroke: #163f57 !important; stroke-width: 2.2 !important; }
.narodnost.is-correct path { filter: brightness(1.08) saturate(1.25) drop-shadow(0 0 7px rgba(57, 119, 89, .75)); stroke: var(--correct) !important; stroke-width: 2.6 !important; }
.narodnost.is-wrong path { filter: grayscale(.1) drop-shadow(0 0 6px rgba(185, 71, 58, .75)); stroke: var(--wrong) !important; stroke-width: 2.6 !important; }
.narodnost.is-question { opacity: 1 !important; }
.narodnost.is-question path { filter: brightness(1.12) saturate(1.35) drop-shadow(0 0 8px rgba(22, 63, 87, .72)); stroke: var(--primary-dark) !important; stroke-width: 3 !important; }
.is-practice .narodnost:not(.is-question):not(.is-correct):not(.is-wrong) { opacity: .76; }
.is-politicians .narodnost:not(.is-correct):not(.is-wrong) { opacity: .78; }
.is-learn .narodnost:not(.is-selected) { opacity: .7; }
.is-practice .narodnost.is-question path,
.is-learn .narodnost.is-selected path { filter: brightness(1.08) saturate(1.42) drop-shadow(0 0 7px rgba(22,63,87,.58)); stroke: var(--primary-dark) !important; stroke-width: 2.8 !important; }

.task-card { padding: 22px; }
.task-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .78rem; font-weight: 800; }
.task-card h2 { margin: 8px 0 10px; font: 700 clamp(1.55rem, 2vw, 2rem) / 1.05 "EB Garamond", Georgia, serif; }
.politician-name-options { display: grid; grid-template-columns: 1fr; gap: 9px; margin: 14px 0 16px; }
.politician-name-button { min-height: 50px; padding: 11px 15px; border: 1px solid rgba(49,93,116,.22); border-radius: 11px; color: var(--ink); background: #fff; font-size: .92rem; font-weight: 800; line-height: 1.2; text-align: left; cursor: pointer; }
.politician-name-button:hover, .politician-name-button:focus-visible { border-color: var(--primary); background: #edf4f6; outline: none; }
.politician-name-button.is-wrong { border-color: var(--wrong); color: #84352c; background: #f7e5e1; opacity: .58; }
.politician-name-button.is-correct { border-color: var(--correct); color: #28563f; background: #e4f0e9; box-shadow: 0 0 0 2px rgba(57,119,89,.14); }
.politician-name-button:disabled { cursor: default; }
.practice-options { display: grid; grid-template-columns: 1fr; gap: 9px; margin: 14px 0 16px; }
.practice-options[hidden] { display: none; }
.practice-option-button { display: block; width: 100%; min-height: 50px; padding: 10px 14px; border: 1px solid rgba(49,93,116,.22); border-radius: 11px; color: var(--ink); background: #fff; font-size: .9rem; font-weight: 800; text-align: left; cursor: pointer; }
.practice-option-button:hover, .practice-option-button:focus-visible { border-color: var(--primary); background: #edf4f6; outline: none; }
.practice-option-button.is-wrong { border-color: var(--wrong); color: #84352c; background: #f7e5e1; opacity: .58; }
.practice-option-button.is-correct { border-color: var(--correct); color: #28563f; background: #e4f0e9; box-shadow: 0 0 0 2px rgba(57,119,89,.14); }
.practice-option-button:disabled { cursor: default; }
.map-population-options { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; padding: 12px 14px 14px; border-top: 1px solid var(--line); background: #f4f0e9; }
.map-population-options[hidden] { display: none; }
.population-option-button { min-height: 48px; padding: 10px 8px; border: 1px solid rgba(49,93,116,.24); border-radius: 11px; color: var(--primary-dark); background: #fff; font-size: .94rem; font-weight: 850; text-align: center; cursor: pointer; }
.population-option-button:hover, .population-option-button:focus-visible { border-color: var(--primary); background: #edf4f6; outline: none; }
.population-option-button.is-wrong { border-color: var(--wrong); color: #84352c; background: #f7e5e1; opacity: .58; }
.population-option-button.is-correct { border-color: var(--correct); color: #28563f; background: #e4f0e9; box-shadow: 0 0 0 2px rgba(57,119,89,.14); }
.population-option-button:disabled { cursor: default; }
.task-help,
.method-note { margin: 0 0 18px; color: var(--muted); line-height: 1.55; }
.feedback { margin-top: 18px; padding: 12px 14px; border-radius: 12px; font-weight: 750; }
.feedback.is-correct { color: #28563f; background: #e4f0e9; }
.feedback.is-wrong { color: #84352c; background: #f7e5e1; }
.result { margin: 20px 0; padding: 18px; border: 1px solid rgba(49,93,116,.2); border-radius: 16px; background: #f1f6f7; }
.result strong { display: block; font: 700 2.2rem/1 "EB Garamond", Georgia, serif; color: var(--primary-dark); }
.primary-button { min-height: 44px; padding: 10px 16px; border: 0; border-radius: 11px; color: #fff; background: var(--primary-dark); font-weight: 800; cursor: pointer; }

.learn-list { display: grid; gap: 7px; margin: 16px 0; }
.learn-button { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; font-weight: 750; text-align: left; cursor: pointer; }
.learn-button.is-active { border-color: var(--primary); background: #edf4f6; }
.swatch { width: 16px; height: 16px; border: 1px solid rgba(34,49,61,.22); border-radius: 50%; background: var(--swatch); }
.learn-method { padding: 13px 16px 15px; border-top: 1px solid var(--line); color: #53636c; font-size: .78rem; line-height: 1.5; }
.learn-method > p { margin: 0; }
.method-toggle { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 3px 0; border: 0; color: var(--primary-dark); background: transparent; font-weight: 800; cursor: pointer; }
.method-arrow { display: inline-block; font-size: 1.1em; transition: transform .18s ease; }
.method-toggle[aria-expanded="true"] .method-arrow { transform: rotate(180deg); }
.method-details { margin-top: 9px; padding-top: 11px; border-top: 1px solid rgba(62,74,87,.14); }
.method-details h3 { margin: 0 0 7px; color: var(--ink); font: 700 1.08rem/1.15 "EB Garamond", Georgia, serif; }
.method-details h4 { margin: 11px 0 3px; color: var(--ink); font-size: .78rem; }
.method-details p { margin: 0 0 8px; }
.method-details p:last-child { margin-bottom: 0; }

.population-overview { padding: 18px; border-top: 1px solid var(--line); background: #f8f5ef; }
.population-overview-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); gap: 18px; align-items: end; }
.population-overview-heading h2 { margin: 5px 0 0; font: 700 clamp(1.35rem, 1.8vw, 1.8rem) / 1.08 "EB Garamond", Georgia, serif; }
.population-overview-heading > p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.population-tile-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.population-tile { display: grid; grid-template-columns: 8px minmax(0, 1fr); min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.population-color { background: var(--population-color); }
.population-tile > div { min-width: 0; padding: 11px 10px 12px; }
.population-tile p { margin: 0; color: var(--muted); font-size: .69rem; font-weight: 850; text-transform: uppercase; letter-spacing: .045em; }
.population-tile strong { display: block; margin: 4px 0 6px; color: var(--primary-dark); font-size: 1.08rem; line-height: 1; }
.population-tile small { display: block; color: #586771; font-size: .68rem; line-height: 1.4; }
.czechoslovak-concept-note { margin-top: 13px; padding: 14px 16px; border: 1px solid rgba(49,93,116,.18); border-radius: 13px; background: #edf4f6; }
.czechoslovak-concept-note h3 { margin: 0 0 5px; color: var(--primary-dark); font: 700 1.15rem/1.1 "EB Garamond", Georgia, serif; }
.czechoslovak-concept-note p { margin: 0; color: #4f626e; font-size: .78rem; line-height: 1.5; }
.population-source { margin: 13px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.population-source a { color: var(--primary-dark); font-weight: 750; text-underline-offset: 2px; }

.overview-panel {
  grid-column: 1 / -1;
  padding: clamp(20px, 2.4vw, 34px);
  border: 1px solid rgba(62, 74, 87, 0.13);
  border-radius: 22px;
  background: rgba(255, 253, 249, 0.94);
  box-shadow: var(--shadow);
}
.overview-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); align-items: end; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.overview-heading h2 { margin: 5px 0 0; font: 700 clamp(1.8rem, 2.5vw, 2.55rem) / 1.05 "EB Garamond", Georgia, serif; }
.overview-heading > p { margin: 0; color: var(--muted); line-height: 1.55; }
.overview-groups { display: grid; gap: 34px; margin-top: 24px; }
.overview-group-heading { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1fr); gap: 20px; align-items: baseline; margin-bottom: 12px; }
.overview-group-heading h3 { margin: 0; color: var(--primary-dark); font: 700 1.45rem/1.1 "EB Garamond", Georgia, serif; }
.overview-group-heading p { margin: 0; color: var(--muted); line-height: 1.45; }
.overview-streams { display: grid; gap: 18px; }
.overview-stream { padding: 15px; border: 1px solid rgba(49,93,116,.14); border-radius: 17px; background: #f7f3ec; }
.overview-stream-heading { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1fr); gap: 18px; align-items: baseline; margin-bottom: 12px; }
.overview-stream-heading h4 { margin: 0; color: #334d5c; font: 700 1.15rem/1.12 "EB Garamond", Georgia, serif; }
.overview-stream-heading p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.overview-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.overview-card-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.person-card { display: grid; grid-template-columns: 160px minmax(0, 1fr); min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.person-card > img { display: block; width: 160px; height: 190px; align-self: start; object-fit: contain; background: #e8e4dc; }
.person-card-copy { min-width: 0; padding: 14px 16px 15px; }
.person-card-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.person-card-meta span { padding: 4px 8px; border-radius: 999px; color: var(--primary-dark); background: #edf4f6; font-size: .69rem; font-weight: 850; line-height: 1.2; }
.person-card-meta span + span { color: #68543d; background: #f4eee4; }
.person-card h5 { margin: 8px 0 5px; font: 700 1.35rem/1.05 "EB Garamond", Georgia, serif; }
.person-card p { margin: 0; color: #53636c; font-size: .84rem; line-height: 1.48; }
.portrait-source { display: inline-block; margin-top: 8px; color: var(--primary-dark); font-size: .7rem; font-weight: 750; line-height: 1.35; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Dvě úrovně navigace aktivity */
.activity-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 7px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,253,249,.94); }
.primary-switch { box-shadow: none; }
.submode-switch { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: #eee9e0; }
.submode-button { min-height: 34px; padding: 7px 13px; border: 0; border-radius: 8px; color: #53636c; background: transparent; font-size: .8rem; font-weight: 800; cursor: pointer; }
.submode-button.is-active { color: var(--primary-dark); background: #fff; box-shadow: 0 1px 5px rgba(35,49,61,.1); }

/* Mapa je odvozena od skutečného bboxu obsahu: -278.28/-122.63 až 952.65/386.56. */
.map-stage { aspect-ratio: 1271 / 550; background: #fff; }
.map-stage svg { overflow: visible; }
.is-politicians .activity-layout { grid-template-columns: minmax(430px, .96fr) minmax(480px, 1.04fr); }
.politician-focus { display: grid; place-items: center; width: 248px; height: 248px; margin: 12px auto 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #e8e4dc; }
.politician-focus:empty { display: none; }
.politician-focus img { display: block; width: 100%; height: 100%; object-fit: contain; }
.is-politicians .politician-name-options { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-top: 12px; }
.is-politicians .politician-name-button { min-height: 48px; padding: 9px 12px; }

/* Kompaktní přehled šesti didaktických skupin */
.learn-list { gap: 8px; margin: 12px 0 14px; }
.learn-button { grid-template-columns: 16px minmax(0,1fr); gap: 10px; min-height: 0; padding: 10px; }
.learn-copy { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.learn-copy b { font-size: .86rem; }
.learn-copy strong { flex: 0 0 auto; color: var(--primary-dark); font-size: .8rem; }
.other-categories { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.other-categories h3 { margin: 0 0 9px; color: var(--ink); font: 700 1.08rem/1.15 "EB Garamond", Georgia, serif; }
.other-categories ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.other-categories li { display: grid; gap: 2px; padding-left: 10px; border-left: 3px solid rgba(49,93,116,.25); }
.other-categories b { font-size: .82rem; }
.other-categories span { color: #586771; font-size: .72rem; line-height: 1.4; }

/* Jedna rovná mřížka osobností */
.overview-panel { padding: clamp(18px, 2vw, 28px); }
.overview-heading { gap: 18px; padding-bottom: 14px; }
.overview-heading h2 { font-size: clamp(1.55rem, 2vw, 2.1rem); }
.overview-heading > p { font-size: .84rem; }
.politician-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; margin-top: 16px; }
.politician-overview-grid .person-card { display: flex; flex-direction: column; min-width: 0; }
.politician-overview-grid .person-card { --trend-accent: #315d74; border-top: 4px solid var(--trend-accent); }
.politician-overview-grid .trend-cooperation { --trend-accent: #397759; }
.politician-overview-grid .trend-activism { --trend-accent: #6c6fd1; }
.politician-overview-grid .trend-social-democracy { --trend-accent: #a35b78; }
.politician-overview-grid .trend-radical-nationalism { --trend-accent: #8a4b42; }
.politician-overview-grid .trend-slovak-autonomy { --trend-accent: #8a6a3f; }
.politician-overview-grid .person-card-meta span + span { border-left: 3px solid var(--trend-accent); }
.politician-overview-grid .person-card > img { width: 100%; height: 220px; object-fit: contain; }
.politician-overview-grid .person-card-copy { padding: 12px 13px 14px; }
.politician-overview-grid .person-card h3 { margin: 0 0 7px; font: 700 1.3rem/1.05 "EB Garamond", Georgia, serif; }
.politician-overview-grid .person-card-meta { margin-bottom: 8px; }
.politician-overview-grid .person-card p { font-size: .76rem; line-height: 1.42; }

@media (max-width: 1024px) {
  .page-hero { align-items: stretch; flex-direction: column; gap: 16px; }
  .mode-switch { align-self: flex-start; }
  .activity-layout { grid-template-columns: 1fr; }
  .task-card { grid-row: 1; }
  .is-practice .map-card { grid-row: 1; }
  .is-practice .task-card { grid-row: 2; }
  .is-learn .map-card { grid-row: 1; }
  .is-learn .task-card { grid-row: 2; }
  .is-politicians .activity-layout { grid-template-columns: 1fr; }
  .politician-overview-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .page-shell { width: calc(100% - 20px); margin-top: 10px; }
  .page-hero { margin: 6px 0 10px; padding: 13px 14px; border-radius: 18px; }
  .page-hero h1 { font-size: 2.15rem; }
  .activity-controls { align-items: stretch; flex-direction: column; }
  .mode-switch { width: 100%; }
  .mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-button { width: 100%; padding-inline: 9px; font-size: .8rem; }
  .activity-layout { gap: 12px; }
  .task-card { padding: 17px; border-radius: 18px; }
  .map-card { border-radius: 18px; }
  .map-toolbar,
  .map-note { padding: 10px 12px; }
  .politician-strip { overflow-x: auto; padding: 8px; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  .politician-list { width: max-content; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 96px; }
  .politician-name-options { gap: 8px; }
  .politician-name-button { min-height: 48px; padding: 10px 13px; font-size: .88rem; }
  .practice-options { gap: 8px; }
  .practice-option-button { min-height: 48px; padding: 10px 13px; font-size: .86rem; }
  .map-population-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 12px 12px; }
  .population-option-button { min-height: 46px; font-size: .9rem; }
  .population-overview { padding: 15px 12px; }
  .population-overview-heading { grid-template-columns: 1fr; gap: 8px; }
  .population-tile-list { grid-template-columns: 1fr; }
  .population-tile { grid-template-columns: 9px minmax(0, 1fr); }
  .population-tile > div { padding: 11px 12px; }
  .population-tile small { font-size: .73rem; }
  .overview-panel { padding: 18px; border-radius: 18px; }
  .overview-heading,
  .overview-group-heading { grid-template-columns: 1fr; gap: 8px; }
  .overview-stream-heading { grid-template-columns: 1fr; gap: 5px; }
  .overview-stream { padding: 11px; }
  .overview-card-grid { grid-template-columns: 1fr; }
  .person-card { grid-template-columns: 128px minmax(0, 1fr); }
  .person-card > img { width: 128px; height: 154px; }
  .person-card-copy { padding: 11px 12px 13px; }
  .person-card h5 { font-size: 1.22rem; }
  .person-card p { font-size: .8rem; }
  .politician-overview-grid { grid-template-columns: 1fr; }
  .politician-focus { width: 220px; height: 220px; }
  .is-politicians .politician-name-options { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .is-politicians .politician-name-button { min-height: 52px; padding: 9px; font-size: .8rem; }
  .politician-overview-grid .person-card { display: grid; grid-template-columns: 128px minmax(0,1fr); }
  .politician-overview-grid .person-card > img { width: 128px; height: 164px; }
}

@media (max-width: 390px) {
  .politician-name-button { min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .narodnost,
  .narodnost path { transition: none; }
}