/*.sofia-wrap {
  width: min(100% - var(--sofia-gutter) * 2, var(--sofia-wrapper-content));
  margin-inline: auto;
}

.sofia-wrap--header {
  width: min(100% - var(--sofia-gutter) * 2, var(--sofia-wrapper-header));
}

.sofia-site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.sofia-main {
  flex: 1;
}*/

/* Buttons */
/*.sofia-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  padding: 0 20px;
  border-radius: var(--sofia-radius-full);
  border: 1.6px solid transparent;
  font: 600 16px/1 var(--sofia-font);
  cursor: pointer;
  background: none;
  white-space: nowrap;
}

.sofia-btn--prime {
  background: var(--sofia-theme-accent);
  border-color: var(--sofia-theme-accent);
  color: var(--sofia-color-white);
}

.sofia-btn--prime:hover,
.sofia-btn--prime:focus-visible {
  background: var(--sofia-theme-accent-dark);
  border-color: var(--sofia-theme-accent-dark);
}

.sofia-btn--sub {
  border-color: var(--sofia-color-gray-85);
  color: var(--sofia-color-gray-85);
}

.sofia-icon {
  display: inline-block;
  width: var(--sofia-icon-24);
  height: var(--sofia-icon-24);
  border-radius: 50%;
  background: var(--sofia-theme-primary-soft);
  flex-shrink: 0;
}

.sofia-icon--50 { width: var(--sofia-icon-50); height: var(--sofia-icon-50); }
.sofia-icon--70 { width: var(--sofia-icon-70); height: var(--sofia-icon-70); }
.sofia-icon--16 { width: var(--sofia-icon-16); height: var(--sofia-icon-16); }

img.sofia-icon {
  object-fit: cover;
}*/

/* Header */
/*.sofia-header {
  position: relative;
  z-index: 20;
  background: var(--sofia-color-white);
}

.sofia-utility {
  background: var(--sofia-color-fon);
  font-size: var(--sofia-h8);
  min-height: 36px;
}

.sofia-utility__inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  min-height: 36px;
}

.sofia-utility a {
  color: var(--sofia-color-gray-85);
}

.sofia-header__bar {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 141px;
}

.sofia-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
}

.sofia-brand__logos {
  display: flex;
  gap: 12px;
}

.sofia-brand__logo {
  width: 80px;
  height: 93px;
  background: transparent;
  border-radius: var(--sofia-radius-xs);
  object-fit: contain;
}

.sofia-brand__name {
  font-size: var(--sofia-h8);
}

.sofia-brand__name strong {
  display: block;
  font-size: var(--sofia-h5);
  font-weight: 600;
}

.sofia-search {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sofia-search input {
  flex: 1;
  height: 47px;
  border: 1.6px solid var(--sofia-color-gray-20);
  border-radius: var(--sofia-radius-full);
  padding: 0 20px;
  font: 400 16px/1 var(--sofia-font);
}

.sofia-search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--sofia-color-fon);
  cursor: pointer;
}

.sofia-search__btn img {
  display: block;
}

.sofia-header__actions {
  position: relative;
  display: flex;
  gap: 12px;
}

.sofia-header__actions .sofia-btn--prime {
  background: var(--sofia-theme-accent);
  border-color: var(--sofia-theme-accent);
  color: var(--sofia-color-white);
}

.sofia-nav {
  border-top: 1px solid var(--sofia-color-gray-15);
}

.sofia-nav__list {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 70px;
  align-items: center;
}

.sofia-nav__item {
  position: relative;
}

.sofia-nav__list a {
  display: flex;
  align-items: center;
  min-height: 70px;
  padding: 0 16px;
  font-size: var(--sofia-nav);
}

.sofia-nav__list > .sofia-nav__item > a:hover,
.sofia-nav__list > .sofia-nav__item > a.is-active {
  color: var(--sofia-theme-accent);
}

.sofia-megamenu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 280px;
  padding: 12px 0;
  background: var(--sofia-color-white);
  box-shadow: var(--sofia-shadow-menu);
  z-index: 15;
}

.sofia-megamenu a {
  display: block;
  min-height: 44px;
  padding: 12px 20px;
  font-size: var(--sofia-h8);
}

.sofia-nav__item:hover .sofia-megamenu,
.sofia-nav__item:focus-within .sofia-megamenu {
  display: block;
}

.sofia-search-panel {
  position: absolute;
  left: 0;
  right: 56px;
  top: calc(100% + 8px);
  max-height: 360px;
  overflow: auto;
  background: var(--sofia-color-white);
  box-shadow: var(--sofia-shadow-menu);
  border-radius: var(--sofia-radius-m);
  padding: 16px;
  z-index: 16;
}

.sofia-search-group__title {
  margin: 0 0 8px;
  font-size: var(--sofia-h8);
  color: var(--sofia-color-gray-55);
}

.sofia-search-group a,
.sofia-overlay__list a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--sofia-color-gray-15);
}

.sofia-overlay {
  position: fixed;
  inset: 0;
  background: #00000066;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
}

.sofia-overlay[hidden],
[hidden] {
  display: none !important;
}

.sofia-overlay__dialog {
  width: min(720px, 100%);
  max-height: calc(100vh - 96px);
  overflow: auto;
  background: var(--sofia-color-white);
  border-radius: var(--sofia-radius-m);
  padding: 24px;
}

.sofia-overlay__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.sofia-overlay__close {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  font-size: 28px;
  cursor: pointer;
}

.sofia-overlay__filter {
  width: 100%;
  height: 47px;
  margin-bottom: 16px;
  border: 1.6px solid var(--sofia-color-gray-20);
  border-radius: var(--sofia-radius-full);
  padding: 0 20px;
  font: 400 16px/1 var(--sofia-font);
}

.sofia-az {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 16px;
}

.sofia-az__letter {
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--sofia-color-gray-55);
  font: 600 14px/1 var(--sofia-font);
  cursor: pointer;
}

.sofia-az__letter.is-active,
.sofia-az__letter:hover {
  color: var(--sofia-theme-accent);
}

.sofia-bottomnav {
  display: none;
}

body.overlay-open {
  overflow: hidden;
}

.sofia-menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 0;
  background: none;
  font-size: 24px;
  cursor: pointer;
}*/

/* Hero / title band — photo from Umbraco; pattern is the theme frame. */
/*.sofia-main .sofia-hero,
.sofia-hero,
.sofia-titleband {
  --sofia-wash: var(--sofia-theme-primary);
  --sofia-pattern-900: color-mix(in srgb, var(--sofia-wash) 82%, #000);
  --sofia-pattern-700: var(--sofia-wash);
  --sofia-pattern-500: color-mix(in srgb, var(--sofia-wash) 78%, #fff);
  --sofia-pattern-300: color-mix(in srgb, var(--sofia-wash) 52%, #fff);
  --sofia-pattern-200: color-mix(in srgb, var(--sofia-wash) 36%, #fff);
  --sofia-pattern-accent: var(--sofia-pattern-200);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--sofia-pattern-700);
  color: var(--sofia-color-white);
  display: grid;
  align-items: center;
}

.sofia-titleband {
  min-height: 220px;
}

.sofia-titleband--person {
  align-items: start;
}

.sofia-titleband--person-photo {
  min-height: 200px;
  padding-bottom: 5.5rem;
}

.sofia-titleband--person .sofia-titleband__inner {
  padding-top: 28px;
  padding-bottom: 0;
}

.sofia-back--plain {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  font-size: 0.85em;
  line-height: 1;
}

.sofia-main .sofia-hero,
.sofia-hero {
  min-height: max(380px, 62vh);
  padding-bottom: 6.5rem;
}

.sofia-hero + .umb-block-list {
  position: relative;
  z-index: 4;
  margin-top: -7.5rem;
}

.sofia-hero + .umb-block-list > .sofia-section:first-child {
  padding-top: 0;
}

.sofia-hero + .umb-block-list > .sofia-section:first-child > .sofia-wrap {
  background: var(--sofia-color-white);
  color: var(--sofia-color-gray-85);
  border-radius: 16px;
  box-shadow: 0 12px 40px #00000014;
  padding: 40px 48px;
}

.sofia-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 0;
}

.sofia-hero::after,
.sofia-titleband::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sofia-pattern-900) 45%, transparent) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}

.sofia-hero__pattern {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  max-height: 100%;
  z-index: 2;
  pointer-events: none;
}

.sofia-hero__pattern--left {
  left: 0;
  aspect-ratio: 440 / 450;
}

.sofia-hero__pattern--right {
  right: 0;
  aspect-ratio: 549 / 450;
}

.sofia-hero__inner,
.sofia-titleband__inner {
  position: relative;
  z-index: 3;
}

.sofia-hero .sofia-wrap,
.sofia-hero .sofia-hero__inner {
  justify-self: start;
  width: min(46rem, 58%);
  max-width: 46rem;
  margin-inline: 0 auto;
  padding: clamp(24px, 5vw, 72px);
  padding-right: 16px;
}

.sofia-titleband__inner {
  padding: clamp(20px, 5vw, 48px) 0;
}

.sofia-hero__inner h1 {
  margin: 0;
  line-height: 1.02;
  text-align: left;
}

.sofia-hero__inner p {
  margin: 0.75rem 0 0;
  font-size: var(--sofia-h6);
  opacity: 0.95;
  text-align: left;
}

.sofia-hero__search {
  display: none;
}

.sofia-emergency {
  position: relative;
  z-index: 25;
  background: var(--sofia-color-emergency);
  color: var(--sofia-color-gray-85);
  font-weight: 600;
  padding: 12px 0;
}

.sofia-titleband h1 {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sofia-titleband__lead {
  margin: 0;
  max-width: 40em;
  font-size: var(--sofia-h6);
}

.sofia-titleband[data-category="environment"] { --sofia-wash: var(--sofia-cat-environment); }
.sofia-titleband[data-category="transport"] { --sofia-wash: var(--sofia-cat-transport); }
.sofia-titleband[data-category="health"] { --sofia-wash: var(--sofia-cat-health); }
.sofia-titleband[data-category="finance"] { --sofia-wash: var(--sofia-cat-finance); }
.sofia-titleband[data-category="education"] { --sofia-wash: var(--sofia-cat-education); }
.sofia-titleband[data-category="participate"] { --sofia-wash: var(--sofia-cat-participate); }

.sofia-back {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1.6px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}*/

/* Sections / widgets */
/*.sofia-section {
  padding: var(--sofia-section-space) 0;
}

.sofia-section--fon {
  background: var(--sofia-color-fon);
}

.sofia-section__heading {
  margin-bottom: 32px;
}

.sofia-section__heading--center {
  text-align: center;
}

.sofia-grid {
  display: grid;
  gap: 32px 32px;
}

.sofia-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sofia-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sofia-grid--4 { grid-template-columns: repeat(4, 1fr); }

.sofia-layout {
  display: grid;
  gap: 32px;
  align-items: start;
}

.sofia-layout--1 { grid-template-columns: 1fr; }
.sofia-layout--2 { grid-template-columns: 1fr 1fr; }
.sofia-layout--3 { grid-template-columns: 1fr 1fr 1fr; }

.sofia-layout .sofia-section {
  padding: 0 0 24px;
}

.sofia-layout .sofia-wrap {
  width: 100%;
  margin: 0;
}

.sofia-highlights {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.sofia-highlights__col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.sofia-highlight {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-left: 32px;
  border-left: 3px solid var(--sofia-color-black);
  color: var(--sofia-color-black);
  text-decoration: none;
}

.sofia-highlight__title {
  font-size: var(--sofia-h4);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.56px;
  text-decoration: underline;
  text-decoration-thickness: 5%;
  text-underline-offset: 0.18em;
  text-underline-position: from-font;
}

.sofia-highlight__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--sofia-color-gray-85);
}

.sofia-highlight__tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sofia-highlight-dot, var(--sofia-theme-accent));
  flex-shrink: 0;
}

.sofia-highlight[data-category="environment"] { --sofia-highlight-dot: var(--sofia-cat-environment); }
.sofia-highlight[data-category="transport"] { --sofia-highlight-dot: var(--sofia-cat-transport); }
.sofia-highlight[data-category="health"] { --sofia-highlight-dot: var(--sofia-cat-health); }
.sofia-highlight[data-category="finance"] { --sofia-highlight-dot: var(--sofia-cat-finance); }
.sofia-highlight[data-category="education"] { --sofia-highlight-dot: var(--sofia-cat-education); }
.sofia-highlight[data-category="participate"] { --sofia-highlight-dot: var(--sofia-cat-participate); }

.sofia-info {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.sofia-info .sofia-icon {
  border-radius: 0;
  background: transparent;
}

.sofia-info__body h3,
.sofia-info__body h4 {
  margin-bottom: 8px;
}

.sofia-info__body p {
  margin: 0;
  color: var(--sofia-color-gray-55);
}

.sofia-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.sofia-pager a,
.sofia-pager span {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sofia-radius-full);
  border: 1.6px solid var(--sofia-color-gray-15);
  color: var(--sofia-color-gray-85);
  padding: 0 12px;
}

.sofia-pager a:hover,
.sofia-pager a:focus-visible {
  border-color: var(--sofia-theme-primary);
}

.sofia-pager [aria-current="page"] {
  background: var(--sofia-theme-primary);
  border-color: var(--sofia-theme-primary);
  color: var(--sofia-color-white);
}

.sofia-pager__gap,
.sofia-pager span[aria-hidden="true"] {
  border-color: transparent;
  color: var(--sofia-color-gray-40);
}

.sofia-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1.6px solid var(--sofia-color-gray-15);
  margin-bottom: 24px;
}

.sofia-tabs button {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 8px 24px;
  font: 400 18px/1.3 var(--sofia-font);
  cursor: pointer;
  color: var(--sofia-color-gray-55);
}

.sofia-tabs button.is-active {
  color: var(--sofia-color-gray-85);
  border-bottom-color: var(--sofia-theme-accent);
  font-weight: 600;
}

.sofia-news {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sofia-news__media {
  aspect-ratio: 16 / 10;
  background: var(--sofia-color-fon);
  border-radius: var(--sofia-radius-xs);
}

.sofia-news__date {
  color: var(--sofia-color-gray-55);
  font-size: var(--sofia-h8);
}

.sofia-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.sofia-dots span,
.sofia-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sofia-color-gray-20);
}

.sofia-dots button {
  cursor: pointer;
}

.sofia-dots span.is-active,
.sofia-dots button.is-active {
  background: var(--sofia-theme-accent);
}

.sofia-image-banner-section {
  overflow: hidden;
}

.sofia-image-banner {
  position: relative;
  min-height: 531px;
  background: var(--sofia-color-gray-15);
}

.sofia-image-banner__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sofia-image-banner__inner {
  position: relative;
  z-index: 1;
  min-height: 531px;
  display: flex;
  align-items: stretch;
}

.sofia-image-banner--left .sofia-image-banner__inner {
  width: min(460px, 100%);
  margin: 0;
}

.sofia-image-banner--left .sofia-image-banner__panel {
  width: 100%;
}

.sofia-image-banner .sofia-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 2;
  margin: 0;
}

.sofia-image-banner--right {
  display: flex;
  min-height: 492px;
}

.sofia-image-banner--right .sofia-image-banner__photo {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 492px;
  height: auto;
}

.sofia-image-banner--right .sofia-image-banner__inner {
  flex: 0 0 auto;
  width: min(500px, 100%);
  min-height: 492px;
  margin: 0;
}

.sofia-image-banner--right .sofia-image-banner__panel {
  width: 100%;
  padding: 70px 40px;
}

.sofia-image-banner__panel {
  position: relative;
  overflow: hidden;
  width: min(460px, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  padding: 70px 32px;
  background: var(--sofia-theme-primary);
  color: var(--sofia-color-white);
}

.sofia-image-banner__panel::after {
  content: "";
  position: absolute;
  right: -48px;
  top: 50%;
  width: 220px;
  height: 280px;
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, #fff 18%, transparent) 0 42%, transparent 43%),
    radial-gradient(circle at 78% 62%, color-mix(in srgb, #fff 12%, transparent) 0 36%, transparent 37%);
  pointer-events: none;
}

.sofia-image-banner__copy {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--sofia-h3);
  line-height: 1.2;
  letter-spacing: -1px;
  text-decoration: underline;
  text-decoration-thickness: 5%;
  text-underline-offset: 0.14em;
}

.sofia-image-banner__cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  padding: 16px 24px;
  border-radius: var(--sofia-radius-xs);
  background: var(--sofia-color-white);
  color: var(--sofia-color-black);
  font: 600 var(--sofia-h7)/1.3 var(--sofia-font);
  text-decoration: none;
}

.sofia-eservices {
  position: relative;
}

.sofia-eservices__menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 30;
  width: 392px;
  padding: 20px 20px 24px;
  background: var(--sofia-theme-accent);
  color: var(--sofia-color-white);
}

.sofia-eservices__search {
  display: flex;
  align-items: center;
  height: 47px;
  margin-bottom: 8px;
  padding: 0 16px;
  background: var(--sofia-color-white);
  border-radius: var(--sofia-radius-xs);
}

.sofia-eservices__filter {
  flex: 1;
  min-width: 0;
  height: 47px;
  border: 0;
  padding: 0;
  font: 400 16px/1 var(--sofia-font);
  background: transparent;
}

.sofia-eservices__search img {
  flex-shrink: 0;
}

.sofia-eservices__list {
  max-height: 360px;
  overflow: auto;
}

.sofia-eservices__list a {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, #fff 35%, transparent);
  color: var(--sofia-color-white);
  font-size: var(--sofia-h7);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.sofia-eservices__list a:first-child {
  background: var(--sofia-theme-accent-dark);
}

.sofia-eservices__all {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 47px;
  margin: 20px auto 0;
  padding: 12px 24px;
  border-radius: var(--sofia-radius-full);
  background: var(--sofia-color-white);
  color: var(--sofia-color-black);
  font: 600 var(--sofia-h7)/1.3 var(--sofia-font);
}

.sofia-cta-banners--pair,
.sofia-participate__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.sofia-banner {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 32px;
  border-radius: var(--sofia-radius-xs);
}

.sofia-banner--prime {
  background: var(--sofia-theme-primary);
  color: var(--sofia-color-white);
}

.sofia-banner--sub {
  background: var(--sofia-theme-primary-soft);
  color: var(--sofia-color-black);
}

.sofia-banner .sofia-icon {
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

.sofia-banner--prime .sofia-icon {
  filter: brightness(0) invert(1);
}

.sofia-banner__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}

.sofia-banner__title {
  margin: 0;
  font-size: var(--sofia-h4);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.56px;
  text-decoration: underline;
  text-decoration-thickness: 5%;
  text-underline-offset: 0.14em;
}

.sofia-banner__text {
  margin: 0;
  font-size: var(--sofia-h6);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

.sofia-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  padding: 16px 24px;
  border-radius: var(--sofia-radius-xs);
  background: var(--sofia-color-white);
  color: var(--sofia-color-black);
  font: 600 var(--sofia-h7)/1.3 var(--sofia-font);
  text-decoration: none;
}

.sofia-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  border-bottom: 1px solid var(--sofia-color-gray-15);
  font-weight: 600;
}

.sofia-quick-links {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.sofia-quick-links__col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.sofia-quick-links__empty {
  margin: 0;
  text-align: center;
}

.sofia-quick-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px;
  background: var(--sofia-color-fon);
  border-radius: var(--sofia-radius-xs);
  color: var(--sofia-color-black);
  text-decoration: none;
}

.sofia-section--fon .sofia-quick-link {
  background: var(--sofia-color-white);
}

.sofia-quick-link__icon {
  width: var(--sofia-icon-24);
  height: var(--sofia-icon-24);
  flex-shrink: 0;
}

.sofia-quick-link__label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.sofia-quick-link__text {
  font-size: var(--sofia-h7);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.18em;
  text-underline-position: from-font;
}

.sofia-quick-link__ext {
  width: var(--sofia-icon-16);
  height: var(--sofia-icon-16);
  flex-shrink: 0;
}

.sofia-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sofia-quest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  background: var(--sofia-color-blue-soft);
  border-radius: var(--sofia-radius-xs);
}

.sofia-quest__question {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  color: var(--sofia-color-gray-85);
  font-size: var(--sofia-h5);
  font-weight: 400;
  line-height: 1.3;
}

.sofia-quest__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.sofia-quest__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 85px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--sofia-radius-xs);
  background: var(--sofia-color-white);
  color: var(--sofia-color-black);
  font: 400 var(--sofia-h7)/1.3 var(--sofia-font);
  cursor: pointer;
}

.sofia-quest__btn img {
  display: block;
  flex-shrink: 0;
}

.sofia-card {
  background: var(--sofia-color-white);
  border-radius: var(--sofia-radius-m);
  overflow: hidden;
}

.sofia-card__media {
  aspect-ratio: 16 / 9;
  background: var(--sofia-color-fon);
}

.sofia-card__body {
  padding: 24px;
}*/

/* Article */
/*.sofia-article {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 64px;
  padding: var(--sofia-section-space) 0;
}

.sofia-person-kicker {
  padding: 28px 0 16px;
}

.sofia-person-kicker__inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}

.sofia-person-kicker__title {
  margin: 0;
  font-size: var(--sofia-h4);
  font-weight: 600;
  letter-spacing: -0.5px;
}

.sofia-person-page {
  position: relative;
  z-index: 4;
  padding-bottom: var(--sofia-section-space);
}

.sofia-person-page--hero {
  margin-top: -4.5rem;
}

.sofia-person-page--hero > .sofia-wrap {
  background: var(--sofia-color-white);
  padding: 20px 20px 0;
}

.sofia-person-hero {
  position: relative;
}

.sofia-person-hero__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center top;
  background: var(--sofia-color-fon);
}

.sofia-person-share {
  position: absolute;
  top: 24px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 2;
}

.sofia-person-share a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sofia-color-white);
  color: var(--sofia-color-gray-85);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: lowercase;
}

.sofia-person-card {
  position: relative;
  z-index: 3;
  width: calc(100% - 64px);
  margin: -7.5rem auto 0;
  background: var(--sofia-color-white);
  padding: 40px 48px 8px;
}

.sofia-person__name {
  font-size: var(--sofia-h5);
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.sofia-person__lead {
  margin: 0;
  font-size: var(--sofia-h8);
  line-height: 1.5;
}

.sofia-docs {
  padding-bottom: calc(var(--sofia-section-space) + 24px);
}

.sofia-person__body {
  font-size: var(--sofia-h7);
  line-height: 1.6;
  padding-top: var(--sofia-section-space);
  padding-bottom: var(--sofia-section-space);
}

.sofia-person__body h2 {
  font-size: var(--sofia-h5);
  letter-spacing: 0;
  margin-top: 1.5em;
}

.sofia-article__body--page {
  padding-bottom: var(--sofia-section-space);
}

.sofia-sidenav {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  align-self: start;
}

.sofia-sidenav a,
.sofia-sidenav__parent {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--sofia-color-gray-15);
  font-size: var(--sofia-h8);
}

.sofia-sidenav a.is-active {
  font-weight: 600;
}

.sofia-kicker {
  margin: 0 0 8px;
  color: var(--sofia-color-gray-55);
  font-size: var(--sofia-h8);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.sofia-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.sofia-tags li {
  padding: 4px 12px;
  border-radius: var(--sofia-radius-full);
  background: var(--sofia-color-fon);
  font-size: var(--sofia-h8);
}

.sofia-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 24px;
}

.sofia-anchors a {
  color: var(--sofia-theme-primary);
  font-size: var(--sofia-h8);
}

.sofia-article__lead {
  font-size: var(--sofia-h6);
  margin: 0 0 24px;
}

.sofia-files {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.sofia-files a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sofia-color-gray-15);
  font-weight: 600;
}

.sofia-files__date {
  font-weight: 400;
  color: var(--sofia-color-gray-55);
}

.sofia-docs__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 48px;
}

.sofia-doc {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-height: 0;
  padding: 0 0 0 20px;
  background: none;
  border-left: 3px solid var(--sofia-color-gray-20);
}

.sofia-doc__icon {
  display: block;
  width: 27px;
  height: 32px;
}

.sofia-doc__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sofia-doc__title {
  font-size: var(--sofia-h6);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.sofia-doc__date {
  color: var(--sofia-color-gray-55);
  font-size: var(--sofia-h8);
}

.sofia-docs__more {
  margin: 24px 0 0;
}

.sofia-docs__more a {
  color: var(--sofia-theme-primary);
  font-weight: 600;
  text-decoration: underline;
}

.sofia-highlight-link {
  display: block;
  padding: 32px;
  background: var(--sofia-color-fon);
}

.sofia-highlight-link__title {
  font-size: var(--sofia-h4);
  margin: 0 0 8px;
}

.sofia-highlight-link__cta {
  display: inline-block;
  margin-top: 16px;
  font-weight: 600;
  text-decoration: underline;
}

.sofia-partners__row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}

.sofia-partners__row img {
  height: 48px;
  width: auto;
}

.sofia-newsletter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 24px 0 0;
}

.sofia-newsletter__label {
  font-weight: 600;
}

.sofia-newsletter input,
.sofia-footer__search input,
.sofia-search input {
  height: 47px;
  border: 1.6px solid var(--sofia-color-gray-20);
  border-radius: var(--sofia-radius-full);
  padding: 0 20px;
  font: 400 16px/1 var(--sofia-font);
  background: var(--sofia-color-white);
}

.sofia-article__photo {
  width: 100%;
  max-height: 470px;
  object-fit: cover;
  background: var(--sofia-color-fon);
  margin-bottom: 32px;
}

.sofia-article__body {
  font-size: var(--sofia-h7);
  line-height: 1.6;
}

.sofia-article__body h2 {
  font-size: var(--sofia-h5);
  letter-spacing: 0;
  margin-top: 2em;
}

.sofia-breadcrumb {
  font-size: var(--sofia-h8);
  color: var(--sofia-color-gray-55);
  padding: 24px 0 0;
}

.sofia-breadcrumb a { color: inherit; }

.sofia-breadcrumb--inline {
  padding: 0;
  white-space: nowrap;
}*/

/* Footer */
/*.sofia-footer {
  background: var(--sofia-color-fon);
  padding: 100px 0 70px;
  margin-top: auto;
}

.sofia-footer__grid {
  display: grid;
  grid-template-columns: 106px 1fr 71px;
  gap: 32px;
}

.sofia-social {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: var(--sofia-h8);
}

.sofia-footer__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.sofia-footer__nav a {
  display: block;
  padding: 12px 0;
}

.sofia-footer__search {
  display: flex;
  gap: 16px;
  margin: 32px 0;
}

.sofia-footer__search .sofia-btn--prime {
  background: var(--sofia-theme-accent);
  border-color: var(--sofia-theme-accent);
  color: var(--sofia-color-white);
}

.sofia-footer__search input {
  max-width: 331px;
  height: 47px;
  border: 1.6px solid var(--sofia-color-gray-20);
  border-radius: var(--sofia-radius-full);
  padding: 0 20px;
  font: 400 16px/1 var(--sofia-font);
  background: var(--sofia-color-white);
}

.sofia-footer__search input:focus,
.sofia-search input:focus,
.sofia-newsletter input:focus {
  border-color: var(--sofia-theme-primary);
  outline: 2px solid color-mix(in srgb, var(--sofia-theme-primary) 35%, transparent);
  outline-offset: 1px;
}

.sofia-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  font-size: var(--sofia-h8);
  margin-top: 24px;
}

.sofia-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: var(--sofia-h8);
  background: none;
  border: 0;
  cursor: pointer;
}

.sofia-top__icon {
  display: block;
  width: 71px;
  height: 70px;
}

@media (max-width: 900px) {
  :root {
    --sofia-h1: 32px;
    --sofia-h2: 26px;
    --sofia-h3: 24px;
    --sofia-h4: 20px;
    --sofia-section-space: 30px;
    --sofia-gutter: 16px;
  }

  .sofia-utility,
  .sofia-header__actions,
  .sofia-header .sofia-search,
  .sofia-menu-toggle { display: none; }

  .sofia-nav { display: none; }

  .sofia-header__bar {
    min-height: 89px;
    padding-block: 12px;
    gap: 16px;
  }

  .sofia-brand {
    min-width: 0;
    gap: 16px;
  }

  .sofia-brand__logo {
    width: 56px;
    height: 65px;
  }

  .sofia-brand__name {
    font-size: 18px;
    line-height: 1.3;
  }

  .sofia-main .sofia-hero,
  .sofia-hero {
    min-height: 324px;
    height: 324px;
    padding-bottom: 0;
    align-items: end;
  }

  .sofia-hero + .umb-block-list {
    margin-top: 0;
  }

  .sofia-hero + .umb-block-list > .sofia-section:first-child {
    padding-top: var(--sofia-section-space);
  }

  .sofia-hero + .umb-block-list > .sofia-section:first-child > .sofia-wrap {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    color: inherit;
  }

  .sofia-hero__pattern--right { display: none; }

  .sofia-hero .sofia-hero__inner,
  .sofia-titleband__inner {
    width: 100%;
    max-width: 100%;
    padding: 0 16px 35px;
  }

  .sofia-hero__inner h1 {
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.96px;
  }

  .sofia-hero__inner p {
    margin: 12px 0 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.4px;
    opacity: 1;
  }

  .sofia-hero__search {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
  }

  .sofia-hero__search input {
    flex: 1;
    min-width: 0;
    height: 43px;
    border: 0;
    border-radius: var(--sofia-radius-xs);
    padding: 8px 16px;
    font: 400 16px/1.5 var(--sofia-font);
    background: var(--sofia-color-white);
    color: var(--sofia-color-black);
  }

  .sofia-hero__search button {
    flex: 0 0 auto;
    min-width: 85px;
    height: 43px;
    padding: 12px 18px;
    border: 0;
    border-radius: var(--sofia-radius-xs);
    background: var(--sofia-color-white);
    color: var(--sofia-color-black);
    font: 600 15px/1.3 var(--sofia-font);
    cursor: pointer;
  }

  .sofia-grid--3,
  .sofia-grid--2,
  .sofia-grid--4 {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .sofia-titleband--person-photo {
    padding-bottom: 3.5rem;
  }

  .sofia-person-kicker__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .sofia-person-page--hero {
    margin-top: -3rem;
  }

  .sofia-person-page--hero > .sofia-wrap {
    padding: 12px 12px 0;
  }

  .sofia-person-hero__photo {
    aspect-ratio: 4 / 3;
  }

  .sofia-person-card {
    width: calc(100% - 24px);
    margin-top: -4.5rem;
    padding: 24px 20px 8px;
  }

  .sofia-person-share {
    top: 12px;
    right: 12px;
  }

  .sofia-docs__row {
    grid-template-columns: 1fr;
  }

  .sofia-info-grid .sofia-grid--3 .sofia-info__body p {
    display: none;
  }

  .sofia-info-grid .sofia-info__body h3 {
    margin: 0;
    font-size: var(--sofia-h4);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.56px;
    text-decoration: underline;
    text-decoration-thickness: 5%;
    text-underline-offset: 0.18em;
  }

  .sofia-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    margin-bottom: 24px;
    -webkit-overflow-scrolling: touch;
  }

  .sofia-tabs button {
    flex: 0 0 auto;
    padding: 8px 24px 16px;
    font-size: 16px;
    white-space: nowrap;
  }

  .sofia-news {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 24px;
  }

  .sofia-news > * {
    min-width: 100%;
    scroll-snap-align: start;
  }

  .sofia-cta-banners--pair,
  .sofia-participate__items {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sofia-highlights {
    flex-direction: column;
    gap: 24px;
  }

  .sofia-highlights__col {
    gap: 24px;
  }

  .sofia-highlight__title {
    font-size: var(--sofia-h4);
    letter-spacing: -0.4px;
  }

  .sofia-quick-links {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }

  .sofia-quick-links__col,
  .sofia-quick-link {
    width: 100%;
  }

  .sofia-quick-links-section .sofia-section__heading {
    text-align: left;
  }

  .sofia-quest {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .sofia-quest__question {
    font-size: var(--sofia-h5);
  }

  .sofia-quest__actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .sofia-image-banner,
  .sofia-image-banner--left,
  .sofia-image-banner--right {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .sofia-image-banner__photo,
  .sofia-image-banner--left .sofia-image-banner__photo,
  .sofia-image-banner--right .sofia-image-banner__photo {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 360px;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .sofia-image-banner__inner,
  .sofia-image-banner--left .sofia-image-banner__inner,
  .sofia-image-banner--right .sofia-image-banner__inner {
    width: 100%;
    min-height: 0;
    margin: 0;
  }

  .sofia-image-banner__panel {
    width: 100%;
    padding: 24px;
    gap: 16px;
  }

  .sofia-image-banner__copy {
    font-size: var(--sofia-h3);
    letter-spacing: -0.72px;
  }

  .sofia-image-banner__cta {
    display: none;
  }

  .sofia-layout--2,
  .sofia-layout--3 {
    grid-template-columns: 1fr;
  }

  .sofia-article,
  .sofia-footer__grid,
  .sofia-footer__nav {
    grid-template-columns: 1fr;
  }

  .sofia-article {
    display: flex;
    flex-direction: column;
  }

  .sofia-sidenav {
    position: sticky;
    top: 0;
    z-index: 4;
    width: 100%;
    background: var(--sofia-color-white);
    box-shadow: 0 12px 16px var(--sofia-color-white);
  }

  .sofia-bottomnav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 64px;
    background: var(--sofia-color-white);
    border-top: 1px solid var(--sofia-color-gray-15);
    z-index: 30;
  }

  .sofia-bottomnav a,
  .sofia-bottomnav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    background: none;
    font: 600 14px/1 var(--sofia-font);
    cursor: pointer;
    color: inherit;
  }

  .sofia-footer {
    padding-bottom: 120px;
  }

  body.nav-open .sofia-nav {
    display: block;
    position: fixed;
    inset: 0 0 64px;
    background: var(--sofia-color-white);
    z-index: 20;
    padding: 88px 16px 16px;
    overflow: auto;
  }

  body.nav-open .sofia-nav__list {
    flex-direction: column;
    align-items: stretch;
  }

  body.nav-open .sofia-megamenu {
    display: block;
    position: static;
    box-shadow: none;
    padding-left: 16px;
  }
}*/

:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-fon: #f3f5fa;
    --color-gray85: #262626;
    --color-gray70: #4d4d4d;
    --color-gray20: #cccccc;
    --color-gray15: #e4e4e4;
    --color-red3: #df1f6a;
    --color-add-red2: #c90054;
    --color-blue-sub: #2f54c5;
    --color-blue5: #e2e9ff;
    --font-family: 'Sofia Sans', Arial, sans-serif;
    --radius-xs: 4px;
    --radius-full: 1000px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-family);
    color: var(--color-black);
    background: var(--color-white);
}

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

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

/* JS toggles dropdowns/overlays with the hidden attribute; it must win over display:flex on components. */
[hidden] {
    display: none !important;
}

body.overlay-open {
    overflow: hidden;
}

/* ================= RESPONSIVE VIEW SWITCH (media queries only) ================= */
/* Breakpoint: below 768px shows the mobile design (Figma mobile frame = 360px); 768px and up shows desktop (Figma desktop frame = 1366px). */
:root {
    --h1: 80px;
    --h2: 52px;
    --h4: 28px;
    --h5: 24px;
    --h6: 20px;
    --h7: 18px;
    --h8: 16px;
    --nav: 19px;
    --container-width: 1200px;
}

/* Desktop markup is visible by default; mobile-only elements start hidden. */
.wrap, .m-sticky-widget, .bottom-nav {
    display: none;
}

@media (max-width: 767.98px) {
    :root {
        --h1: 32px;
        --h2: 26px;
        --h4: 20px;
        --h5: 18px;
        --h6: 16px;
        --h7: 15px;
        --h8: 14px;
        --radius-m: 16px;
        --max-width: 480px;
    }

    .sticky-widget {
        display: none;
    }

    .wrap {
        display: block;
    }

    .m-sticky-widget {
        display: flex;
    }

    .bottom-nav {
        display: flex;
    }

    body {
        padding-bottom: 70px;
    }
    /* room for the mobile fixed bottom nav */
}

@media (min-width: 768px) {
    /* Mobile-only navigation: the bottom tab bar and the drill-down menu never show on desktop widths.
       !important because the component rules further down set display:flex. */
    .bottom-nav, .menu-overlay, .menu-overlay.open {
        display: none !important;
    }
}

/* ============================================================ */
/* DESKTOP STYLES (>=768px)                                       */
/* ============================================================ */

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 32px;
}

.visually-hidden,
.sofia-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- 12-column grid system (Bootstrap-like) ---------- */
.row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr)); /* minmax(0) so long words can't stretch a column */
    gap: 32px; /* default gutter */
}

.row.g-24 { gap: 24px; }
.row.g-40 { gap: 40px; }
.row.gy-48 { row-gap: 48px; column-gap: 32px; }

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media (max-width: 767.98px) {
    /* Mobile: every column collapses to a single full-width column */
    .row > [class*="col-"] {
        grid-column: span 12;
    }
}

/* ---------- Editor-only widget wrapper (Edit widget / Copy for AI, shown on hover) ---------- */
.sofia-widget-edit {
    position: relative;
}

.sofia-widget-edit__bar {
    position: absolute;
    top: 12px;
    right: 32px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.sofia-widget-edit:hover .sofia-widget-edit__bar,
.sofia-widget-edit:focus-within .sofia-widget-edit__bar {
    opacity: 1;
    pointer-events: auto;
}

/* ---------- Header / top bar ---------- */
/* Figma desktop frame is 1366px with 32px side padding on every header row.
   Backgrounds and borders stay full-bleed; the content is capped at 1366px (--sofia-wrapper-site) and centred. */
.sofia-header {
    --header-gutter: max(32px, calc((100% - var(--sofia-wrapper-site)) / 2 + 32px));
    position: relative;
    z-index: 30;
    background: var(--color-white);
}

.topbar {
    background: var(--color-fon);
    display: flex;
    justify-content: flex-end;
    gap: 32px;
    align-items: center;
    padding-block: 8px;
    padding-inline: var(--header-gutter);
    font-size: var(--h8);
    flex-wrap: wrap;
}

    .topbar a {
        white-space: nowrap;
    }

        .topbar a:hover {
            text-decoration: underline;
        }

    .topbar .lang {
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .topbar .lang img {
            width: 16px;
            height: 16px;
        }

.header-main {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 24px;
    padding-inline: var(--header-gutter);
    flex-wrap: wrap;
}

    .header-main .brand {
        display: flex;
        align-items: center;
        gap: 24px;
    }

        .header-main .brand img {
            height: 70px;
            width: auto;
        }

    .header-main .brand-name {
        font-size: var(--h4);
        letter-spacing: -0.56px;
        white-space: nowrap;
    }

        /* District sites: "Столична община" + district name on a second line */
        .header-main .brand-name strong {
            display: block;
            font-weight: 600;
        }

.header-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 300px;
    max-width: 500px;
}

    .header-search input {
        flex: 1;
        min-width: 0;
        border: 1px solid var(--color-gray20);
        border-radius: var(--radius-xs);
        height: 47px;
        padding: 0 16px;
        font-family: var(--font-family);
        font-size: var(--h8);
    }

    .header-search button {
        background: var(--color-fon);
        border: none;
        border-radius: var(--radius-full);
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

        .header-search button img {
            width: 24px;
            height: 24px;
        }

/* Live results under the header search (filled from the site tree by site.js) */
.sofia-search-panel {
    position: absolute;
    left: 0;
    right: 80px;
    top: calc(100% + 8px);
    max-height: 360px;
    overflow: auto;
    background: var(--color-white);
    border: 1px solid var(--color-gray15);
    border-radius: var(--radius-xs);
    box-shadow: 0 10px 20px rgba(0,0,0,0.07);
    padding: 16px 24px;
    z-index: 500;
}

.sofia-search-group + .sofia-search-group {
    margin-top: 16px;
}

.sofia-search-group__title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-red3);
    text-transform: uppercase;
}

.sofia-search-group a {
    display: block;
    padding: 8px 0;
    font-size: var(--h8);
}

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

.header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    position: relative;
}

/* ---------- Compact desktop menu (Figma 1280px frames) ---------- */
/* Below the 1366px desktop frame the main menu row is replaced by a round menu button that opens a side panel.
   The panel wraps the one .main-menu; at full desktop its wrappers are display:contents so the bar lays out as before. */
.header-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--sofia-theme-primary);
    cursor: pointer;
}

    .header-menu-btn img {
        width: 24px;
        height: 24px;
    }

.desk-menu,
.desk-menu__panel {
    display: contents;
}

.desk-menu__backdrop,
.desk-menu__head,
.main-menu .nav-icon,
.main-menu .nav-intro,
.main-menu .nav-drill,
.main-menu .panel-title-row {
    display: none;
}

.desk-menu__close {
    display: flex;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

/* ---------- Е-услуги dropdown panel ---------- */
.eservices-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--color-red3);
    border-radius: var(--radius-xs);
    padding: 24px;
    width: 390px;
    max-width: calc(100vw - 32px);
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: sofia-drop-in 0.18s ease;
}

@keyframes sofia-drop-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.eservices-search {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .eservices-search input {
        flex: 1;
        min-width: 0;
        border: none;
        border-radius: var(--radius-xs);
        background: var(--color-white);
        height: 46px;
        padding: 0 16px;
        font-family: var(--font-family);
        font-size: var(--h6);
    }

    .eservices-search img {
        width: 24px;
        height: 24px;
    }

.eservices-list {
    display: flex;
    flex-direction: column;
    max-height: 340px;
    overflow-y: auto;
}

    .eservices-list a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 24px 0;
        border-bottom: 1px solid var(--color-add-red2);
        color: var(--color-white);
        font-size: var(--h7);
    }

        .eservices-list a:hover {
            background: var(--color-add-red2);
        }

        .eservices-list a:last-child {
            border-bottom: none;
        }

    .eservices-list .label-group {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .eservices-list img.arrow {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

.eservices-viewall {
    align-self: flex-start;
    background: var(--color-white);
    color: var(--color-black);
    border-radius: var(--radius-xs);
    padding: 16px 24px;
    font-size: var(--h7);
    font-weight: 600;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 85px;
    padding: 12px 24px;
    border-radius: var(--radius-xs);
    font-size: var(--h7);
    font-family: var(--font-family);
    cursor: pointer;
    border: 1.4px solid transparent;
    white-space: nowrap;
}

.btn-outline {
    border-color: var(--color-red3);
    background: transparent;
    color: var(--color-black);
}

.btn-prime {
    background: var(--color-red3);
    color: var(--color-white);
    font-weight: 600;
}

    .btn-prime:hover,
    .btn-prime[aria-expanded="true"] {
        background: var(--color-add-red2);
    }

.btn-white {
    background: var(--color-white);
    color: var(--color-black);
    font-weight: 600;
}

.btn-white-regular {
    background: var(--color-white);
    color: var(--color-black);
}

.main-menu {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    padding-inline: var(--header-gutter);
    background: var(--color-white);
    overflow: visible;
}

    .main-menu .nav-item {
        position: relative;
    }

    .main-menu a.nav-link {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 24px 0;
        font-size: var(--h7);
        white-space: nowrap;
    }

        .main-menu a.nav-link.is-active {
            box-shadow: inset 0 -3px 0 var(--color-red3);
        }

        .main-menu a.nav-link img {
            width: 10px;
            height: 10px;
            transition: transform 0.15s ease;
        }

.nav-item:hover > a.nav-link img, .nav-item:focus-within > a.nav-link img {
    transform: rotate(180deg);
}

/* ---------- Mega-menu dropdown (hover, supports multi-level nesting) ---------- */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-white);
    border: 1px solid var(--color-gray15);
    border-radius: var(--radius-xs);
    box-shadow: 0 10px 20px rgba(0,0,0,0.07);
    padding: 24px;
    min-width: 340px;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.nav-item:hover > .nav-dropdown, .nav-item:focus-within > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-group-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-red3);
    text-transform: uppercase;
    margin: 0 0 12px;
}

    .dropdown-group-label::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--color-red3);
        flex-shrink: 0;
    }

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

    .dropdown-list > a {
        padding: 12px 0;
        font-size: var(--h8);
        color: var(--color-black);
    }

.dropdown-divider {
    height: 1px;
    background: var(--color-gray15);
    margin: 12px 0;
}

.dropdown-viewall {
    font-size: var(--h7);
    font-weight: 600;
    text-decoration: underline;
    margin-top: 12px;
    display: inline-block;
}

.dropdown-item {
    position: relative;
}

    .dropdown-item > a.dropdown-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 12px 0;
        font-size: var(--h8);
        color: var(--color-black);
        white-space: nowrap;
    }

        .dropdown-list > a:hover,
        .dropdown-item > a.dropdown-link:hover {
            text-decoration: underline;
        }

        .dropdown-item > a.dropdown-link img.arrow {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }

.dropdown-flyout {
    position: absolute;
    left: 100%;
    top: -24px;
    margin-left: 8px;
    background: var(--color-white);
    border: 1px solid var(--color-gray15);
    border-radius: var(--radius-xs);
    box-shadow: 0 10px 20px rgba(0,0,0,0.07);
    padding: 24px;
    min-width: 320px;
    z-index: 501;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

    /* Invisible bridge over the 8px gap so the flyout stays open while the pointer crosses it */
    .dropdown-flyout::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 100%;
        width: 10px;
    }

.dropdown-item:hover > .dropdown-flyout, .dropdown-item:focus-within > .dropdown-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* The last two top-level items sit near the right edge: open their menus leftwards. */
.main-menu .nav-item:nth-last-child(-n+2) > .nav-dropdown {
    left: auto;
    right: 0;
}

.main-menu .nav-item:nth-last-child(-n+2) .dropdown-flyout {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 8px;
}

    .main-menu .nav-item:nth-last-child(-n+2) .dropdown-flyout::before {
        right: auto;
        left: 100%;
    }

/* ---------- Editor-only chrome (visible to logged-in backoffice users) ---------- */
.sofia-editor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 2px 8px #00000026;
    color: var(--color-gray85);
    cursor: pointer;
}

.sofia-page-edit {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.sofia-page-edit__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 0 10px 0 6px;
    border-radius: 14px;
    background: var(--color-white);
    box-shadow: 0 2px 8px #00000026;
    color: var(--color-gray85);
    font: 600 13px/1 var(--font-family);
}

.sofia-page-edit .sofia-editor-btn {
    width: 28px;
    height: 28px;
}

.sofia-copy-notice {
    position: fixed;
    right: 16px;
    bottom: 24px;
    z-index: 600;
    max-width: 360px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--color-white);
    box-shadow: 0 2px 12px #00000026;
    color: var(--color-gray85);
    font: 600 13px/1.4 var(--font-family);
}

/* ---------- Search overlay (opened from the mobile bottom nav) ---------- */
.sofia-overlay {
    position: fixed;
    inset: 0;
    background: #00000066;
    z-index: 300;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px;
}

.sofia-overlay__dialog {
    width: min(720px, 100%);
    max-height: calc(100vh - 96px);
    overflow: auto;
    background: var(--color-white);
    border-radius: var(--radius-xs);
    padding: 24px;
}

.sofia-overlay__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

    .sofia-overlay__bar h2 {
        margin: 0;
        font-size: var(--h4);
        font-weight: 600;
    }

.sofia-overlay__close {
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    font-size: 28px;
    cursor: pointer;
}

.sofia-overlay__filter {
    width: 100%;
    height: 47px;
    margin-bottom: 16px;
    border: 1px solid var(--color-gray20);
    border-radius: var(--radius-xs);
    padding: 0 16px;
    font-family: var(--font-family);
    font-size: var(--h8);
}

/* ---------- Hero ---------- */
/* Photo (Home › heroGraphic) full-bleed, theme pattern (_graph) over both sides, copy on top.
   Pattern fills bind to --sofia-theme-primary*, so district themes recolour it. */
.hero {
    position: relative;
    isolation: isolate;
    height: 450px;
    display: flex;
    align-items: center;
    padding-bottom: 48px; /* copy sits a little above centre, clear of the info card that overlaps the bottom */
    background: var(--sofia-theme-primary);
    color: var(--color-white);
    overflow: hidden;
}

.hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Pinned to the top: any overflow is trimmed from the bottom only, so the top of the photo is never cut. */
    object-position: center top;
    z-index: 0;
}

.hero .sofia-hero__pattern {
    position: absolute;
    top: 0;
    height: 100%;
    width: auto;
    z-index: 1;
    pointer-events: none;
}

.hero .sofia-hero__pattern--left {
    left: 0;
    aspect-ratio: 440 / 450;
}

.hero .sofia-hero__pattern--right {
    right: 0;
    aspect-ratio: 549 / 450;
}

/* Copy lines up with the 1200px content column (same left edge as the info grid below) */
.hero .hero-content {
    position: relative;
    z-index: 2;
    width: min(100% - 64px, var(--container-width));
    margin: 0 auto;
}

.hero h1 {
    font-size: var(--h1);
    line-height: 1.1;
    letter-spacing: -2.4px;
    font-weight: 400;
    margin: 0 0 8px;
}

.hero p {
    font-size: var(--h4);
    font-weight: 600;
    letter-spacing: -0.56px;
    margin: 0;
}

/* Search in the hero is mobile-only; desktop searches from the header */
.hero-search {
    display: none;
}

@media (max-width: 767.98px) {
    .hero {
        height: 324px;
        align-items: flex-end;
        padding-bottom: 0;
    }

        /* The desktop pattern would cover the whole photo at this width (Figma has a separate mobile graphic) */
        .hero .sofia-hero__pattern {
            display: none;
        }

        .hero .hero-content {
            width: 100%;
            padding: 0 16px 35px;
        }

        .hero h1 {
            letter-spacing: -0.96px;
            margin: 0 0 12px;
        }

        .hero p {
            letter-spacing: -0.4px;
            margin: 0 0 12px;
        }

    .hero-search {
        display: flex;
        gap: 8px;
    }

        .hero-search input {
            flex: 1;
            min-width: 0;
            border: none;
            border-radius: var(--radius-xs);
            height: 43px;
            padding: 0 16px;
            font-family: var(--font-family);
            font-size: var(--h6);
        }

        .hero-search button {
            background: var(--color-white);
            color: var(--color-black);
            border: none;
            border-radius: var(--radius-xs);
            padding: 0 18px;
            font-family: var(--font-family);
            font-size: var(--h7);
            font-weight: 600;
            min-width: 85px;
            cursor: pointer;
        }
}

/* ---------- Info grid (infoGridBlock) ---------- */
/* A normal white section (70px, joins the single-gap rule for white neighbours) — e.g. "Участвай" further down.
   Figma grid: 3 columns, 32px column / 48px row gap. */
.info-grid-section {
    background: var(--color-white);
    padding: 70px 32px;
}

.info-grid-section--fon {
    background: var(--color-fon);
}

.info-grid {
    max-width: var(--container-width);
    margin: 0 auto;
}

.info-grid-intro {
    font-size: var(--h6);
    line-height: 1.5;
    color: var(--color-gray85);
    margin: 0 0 32px;
}

/* Home: when the grid is the first widget after the hero, the card overlaps the hero by 85px
   and sits on the light "fon" background (Figma). Also matches when wrapped by the editor bar. */
.hero + .umb-block-list > .info-grid-section:first-child,
.hero + .umb-block-list > .sofia-widget-edit:first-child > .info-grid-section {
    position: relative;
    z-index: 3;
    margin-top: -85px;
    padding: 0 32px;
    background: linear-gradient(to bottom, transparent 85px, var(--color-fon) 85px);
}

    /* ...drawn as a white card: 48px padding (Figma) */
    .hero + .umb-block-list > .info-grid-section:first-child .info-grid,
    .hero + .umb-block-list > .sofia-widget-edit:first-child > .info-grid-section .info-grid {
        padding: 48px;
        background: var(--color-white);
    }

.info-card {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

    .info-card .icon {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
        object-fit: contain;
    }

    .info-card h3 {
        font-size: var(--h4);
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.56px;
        text-decoration: underline;
        margin: 0 0 16px;
    }

    .info-card p {
        font-size: var(--h6);
        line-height: 1.5;
        color: var(--color-gray85);
        margin: 0;
    }

a.info-card:hover h3 {
    color: var(--color-red3);
}

/* Tablet: three 50px-icon columns get too narrow for the 28px titles, go to two per row */
@media (min-width: 768px) and (max-width: 1100px) {
    .info-grid .row > .col-4,
    .info-grid .row > .col-3 {
        grid-column: span 6;
    }
}

/* Mobile (HTML design): flat white list, icon + title only, no overlap */
@media (max-width: 767.98px) {
    .info-grid-section {
        padding: 0;
    }

    .hero + .umb-block-list > .info-grid-section:first-child,
    .hero + .umb-block-list > .sofia-widget-edit:first-child > .info-grid-section {
        margin-top: 0;
        padding: 0;
        background: var(--color-white);
    }

    .info-grid,
    .hero + .umb-block-list > .info-grid-section:first-child .info-grid,
    .hero + .umb-block-list > .sofia-widget-edit:first-child > .info-grid-section .info-grid {
        padding: 50px 16px;
    }

        .info-grid .row.gy-48 {
            row-gap: 24px;
            column-gap: 18px;
        }

    .info-card {
        gap: 18px;
    }

        .info-card .icon {
            width: 32px;
            height: 32px;
        }

        .info-card h3 {
            letter-spacing: -0.4px;
            margin: 0 0 8px;
        }

    .info-grid .info-card p {
        display: none;
    }
}

/* ---------- Person page (articlePerson) ---------- */
/* Figma "4000-Sofia.bg-Администрация" (Кмет): 220px theme band — back arrow + 80px role title on the 1300px frame
   (48px inset), 334px tile cluster pinned top-right — then a white 1200px card overlapping it by 77px:
   16:9 photo with a 10% wash, and the name + lead box inset 40px, riding 100px up over the photo. */
.person-band {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: var(--sofia-theme-primary);
    color: var(--color-white);
}

.person-band__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1300px;
    height: 200px;
    margin: 0 auto;
    padding: 0 48px 50px;
}

.person-band__back {
    display: flex;
    flex-shrink: 0;
}

    .person-band__back img {
        width: 50px;
        height: 50px;
    }

.person-band__title {
    margin: 0;
    font-size: var(--sofia-h1); /* 68px, -3% */
    line-height: 1.1;
    letter-spacing: -2.04px;
}

.person-band__tiles {
    position: absolute;
    top: 0;
    right: 0;
    width: 334px;
    height: 240px;
}

.person-card {
    position: relative;
    z-index: 1;
    width: min(100% - 64px, var(--container-width));
    margin: -77px auto 0;
    padding: 48px 48px 0;
    background: var(--color-white);
}

.person-card__photo {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--color-gray20);
}

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

    .person-card__photo::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.1);
    }

.person-card__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 40px;
    padding: 40px 32px;
    background: var(--color-white);
}

.person-card__photo + .person-card__body {
    margin-top: -100px;
}

.person-card__name {
    margin: 0;
    font-size: var(--h4);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.56px;
    text-transform: uppercase;
}

.person-card__lead {
    margin: 0;
    font-size: var(--h6);
    line-height: 1.5;
    color: var(--color-gray85);
}

/* Biography (rich text): 28px section headings, 20px copy, 32px between sections, pink-dot bullets */
.person-body {
    width: min(100% - 64px, var(--container-width));
    margin: 0 auto;
    padding: 48px 0 70px;
    font-size: var(--h6);
    line-height: 1.5;
    color: var(--color-gray85);
}

    .person-body h2,
    .person-body h3 {
        margin: 24px 0 16px;
        font-size: var(--h4);
        font-weight: 400;
        line-height: 1.3;
        letter-spacing: -0.56px;
        color: var(--color-black);
    }

    .person-body > :first-child {
        margin-top: 0;
    }

    .person-body p,
    .person-body ul {
        margin: 0 0 8px;
    }

    /* tokens.css sizes every p at --sofia-p (16px); the biography copy is 20px (Figma H6) */
    .person-body p,
    .person-body li {
        font-size: inherit;
    }

    .person-body ul {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0;
        list-style: none;
    }

    .person-body li {
        display: flex;
        gap: 16px;
    }

        .person-body li::before {
            content: '';
            width: 7px;
            height: 19px;
            flex-shrink: 0;
            background: url(/img/icons/bullet-dot.svg) no-repeat;
        }

    .person-body a {
        text-decoration: underline;
    }

/* A white widget right after the biography shares its 70px gap instead of adding another */
.person-body + .umb-block-list > .section--white:first-child,
.person-body + .umb-block-list > .sofia-widget-edit:first-child > .section--white {
    padding-top: 0;
}

/* ---------- Documents strip (documentsCarouselBlock), Figma "Какво свършихме" ---------- */
/* 3 per slide: 3px black left rule, 32px inset, PDF icon + 28px underlined title; dots, then an outline button */
.docs-section {
    padding: 70px 32px;
}

.docs-section--fon {
    background: var(--color-fon);
}

.docs-slider,
.docs-more {
    max-width: var(--container-width);
    margin-inline: auto;
}

.doc-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding-left: 32px;
    border-left: 3px solid var(--color-black);
}

.doc-item__icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    object-fit: contain;
}

.doc-item__copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.doc-item__title {
    font-size: var(--h4);
    line-height: 1.3;
    letter-spacing: -0.56px;
    text-decoration: underline;
}

.doc-item:hover .doc-item__title {
    color: var(--color-red3);
}

.doc-item time {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gray85);
}

.docs-more {
    margin-top: 40px;
    margin-bottom: 0;
    text-align: center;
}

@media (max-width: 767.98px) {
    .person-band {
        height: auto;
    }

    .person-band__inner {
        height: auto;
        gap: 12px;
        padding: 24px 16px 101px; /* 77px of it sits under the overlapping card */
    }

        .person-band__back img {
            width: 32px;
            height: 32px;
        }

    .person-band__title {
        font-size: var(--h1); /* 32px */
        letter-spacing: -0.96px;
    }

    .person-band__tiles {
        width: 167px;
        height: 120px;
    }

    .person-card {
        width: calc(100% - 32px);
        padding: 16px 16px 0;
    }

    .person-card__body {
        gap: 12px;
        margin: 0 12px;
        padding: 24px 16px;
    }

    .person-card__photo + .person-card__body {
        margin-top: -48px;
    }

    .person-card__name {
        letter-spacing: -0.4px;
    }

    .person-body {
        width: calc(100% - 32px);
        padding: 32px 0 50px;
    }

        .person-body h2,
        .person-body h3 {
            letter-spacing: -0.4px;
        }

    .docs-section {
        padding: 50px 16px;
    }

    .docs-row.row {
        row-gap: 24px;
    }

    .doc-item {
        padding-left: 16px;
    }

    .doc-item__title {
        letter-spacing: -0.4px;
    }
}

/* ---------- Article / news page (article template), Figma "1000-Sofia.bg-…-Article" ---------- */
/* 300px section tree + 64px + 836px column on the 1200px frame, 70px below the section bar. */
.article-page {
    display: grid;
    grid-template-columns: 300px minmax(0, 836px);
    column-gap: 64px;
    align-items: start;
    width: min(100% - 64px, var(--container-width));
    margin: 0 auto;
    padding: 70px 0;
}

.article-page--solo {
    grid-template-columns: minmax(0, 836px);
    justify-content: center;
}

/* A white widget or the feedback bar after the article shares its 70px gap */
.article-page + .umb-block-list > :is(.section--white, .quest-section):first-child,
.article-page + .umb-block-list > .sofia-widget-edit:first-child > :is(.section--white, .quest-section) {
    padding-top: 0;
}

/* Section tree: 20px rows between hairlines; items with children get a chevron, the current branch is open
   (semibold) with its pages in a grey panel. */
.side-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.side-nav__item {
    border-bottom: 1px solid var(--color-gray15);
}

.side-nav__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    font-size: var(--h6);
    line-height: 1.5;
}

    .side-nav__row a:hover,
    .side-nav__sub a:hover {
        color: var(--color-red3);
    }

.side-nav__item.is-open > .side-nav__row a,
.side-nav__row a[aria-current] {
    font-weight: 600;
}

.side-nav__toggle {
    display: flex;
    flex-shrink: 0;
    padding: 8px 0 0;
    border: none;
    background: none;
    cursor: pointer;
}

    .side-nav__toggle img {
        width: 16px;
        height: 16px;
        transition: transform 0.15s ease;
    }

    .side-nav__toggle[aria-expanded="true"] img {
        transform: rotate(180deg);
    }

.side-nav .side-nav__sub {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 16px;
    border-radius: var(--radius-xs);
    background: var(--color-fon);
    font-size: var(--h6);
    line-height: 1.5;
}

    .side-nav .side-nav__sub[hidden] {
        display: none;
    }

    .side-nav__sub a {
        text-decoration: underline;
    }

        .side-nav__sub a[aria-current] {
            font-weight: 600;
        }

/* Article column: 40px between its parts */
.article {
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-width: 0;
}

.article__title {
    margin: 0;
    font-size: var(--h2);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1.56px;
}

.article__date {
    margin-top: -24px;
    font-size: var(--h8);
    font-weight: 600;
    color: var(--color-gray85);
}

.article__intro {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* "На тази страница": pale-yellow box, 3px yellow left rule, 36px heading, ring-bullet anchor links */
.on-page {
    padding: 32px;
    border-left: 3px solid #f1ae00;
    border-radius: var(--radius-xs);
    background: #faf5d1;
}

.on-page__title {
    margin: 0 0 24px;
    font-size: var(--sofia-h3);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1.08px;
}

.on-page ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.on-page li {
    display: flex;
    gap: 16px;
    font-size: var(--h6);
    line-height: 1.5;
}

    .on-page li::before {
        content: '';
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-top: 7px;
        background: url(/img/icons/bullet-ring-16.svg) center / 16px no-repeat;
    }

.on-page a {
    text-decoration: underline;
}

    .on-page a:hover {
        color: var(--color-red3);
    }

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

    .article__tags li {
        padding: 6px 16px;
        border: 1px solid var(--sofia-color-blue-light);
        border-radius: var(--radius-xs);
        background: var(--color-fon);
        font-size: var(--h8);
        line-height: 1.3;
    }

.article__lead {
    margin: 0;
    font-size: var(--h5);
    line-height: 1.4;
    color: var(--color-gray85);
}

.article__photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-xs);
}

/* Rich-text body: 20px copy, 28px H2 (bold part via <strong>), pink-dot lists, the quote as a link box,
   full-width images and embedded video; 32px between blocks, 8px between list items. */
.article__body {
    font-size: var(--h6);
    line-height: 1.5;
    color: var(--color-gray85);
}

    .article__body > * {
        margin: 0;
    }

        .article__body > * + * {
            margin-top: 32px;
        }

    .article__body p,
    .article__body li {
        font-size: inherit;
    }

    .article__body h2,
    .article__body h3,
    .article__body h4 {
        font-weight: 400;
        line-height: 1.3;
        color: var(--color-black);
    }

    .article__body h2 {
        font-size: var(--h4);
        letter-spacing: -0.56px;
        scroll-margin-top: 24px;
    }

    .article__body h3 {
        font-size: var(--h5);
        letter-spacing: 0;
    }

    .article__body h4 {
        font-size: var(--h6);
        font-weight: 600;
        letter-spacing: 0;
    }

    .article__body strong,
    .article__body b {
        font-weight: 700;
    }

    .article__body a {
        text-decoration: underline;
    }

        .article__body a:hover {
            color: var(--color-red3);
        }

    .article__body ul {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0;
        list-style: none;
    }

        /* Dot outside the text flow, so mixed inline content (e.g. <strong>…</strong> text) stays one line box */
        .article__body ul > li {
            position: relative;
            padding-left: 23px;
        }

            .article__body ul > li::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 7px;
                height: 19px;
                background: url(/img/icons/bullet-dot.svg) no-repeat;
            }

            /* A list item can hold paragraphs (Figma: bold-led sub-points 12px apart) */
            .article__body ul > li > p {
                margin: 0;
            }

                .article__body ul > li > p + p {
                    margin-top: 12px;
                }

    .article__body ol {
        padding-left: 1.4em;
    }

        .article__body ol > li + li {
            margin-top: 8px;
        }

    /* Quote = Figma link box: grey, 3px blue left rule, link icon, semibold link then the note */
    .article__body blockquote {
        position: relative;
        padding: 16px 32px 16px 68px; /* 32px + 24px icon + 12px */
        border-left: 3px solid var(--sofia-color-blue);
        background: var(--color-fon);
    }

        .article__body blockquote::before {
            content: '';
            position: absolute;
            top: 20px;
            left: 32px;
            width: 24px;
            height: 24px;
            background: url(/img/icons/link-24.svg) center / 24px no-repeat;
        }

        .article__body blockquote > * {
            margin: 0;
        }

            .article__body blockquote > * + * {
                margin-top: 6px;
            }

        .article__body blockquote a {
            font-weight: 600;
            color: var(--color-black);
        }

            .article__body blockquote a[href^="http"]::after {
                content: '';
                display: inline-block;
                width: 16px;
                height: 16px;
                margin-left: 12px;
                vertical-align: -2px;
                background: url(/img/icons/arrow-link-16.svg) center / 16px no-repeat;
            }

    .article__body img,
    .article__body video,
    .article__body iframe {
        display: block;
        max-width: 100%;
        border-radius: var(--radius-xs);
    }

    .article__body img {
        height: auto;
    }

    .article__body iframe,
    .article__body video {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border: 0;
    }

/* Article widgets: stacked in the column, 40px apart, no section padding or background of their own */
.article__widgets .umb-block-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.article__widgets :is(.promo-section, .linked-section, .doc-section, .partners-section, .gallery-section) {
    padding: 0;
    background: none;
}

.article__widgets .promo-grid.row {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Banner: icon, then title + text with the button on the right (Figma article banners) */
.article__widgets .promo-card > div {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
    align-items: center;
}

    .article__widgets .promo-card > div > :not(.btn) {
        grid-column: 1;
    }

.article__widgets .promo-card h3 {
    margin: 0 0 16px;
}

.article__widgets .promo-card p {
    margin: 0;
}

.article__widgets .promo-card .btn {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: 16px 24px;
    font-weight: 600;
}

/* ---------- Related content, documents, partners, gallery as page widgets (full width) ---------- */
.linked-section,
.doc-section,
.partners-section,
.gallery-section {
    padding: 70px 32px;
}

    .linked,
    .doc-list,
    .partners,
    .gallery-section > * {
        max-width: var(--container-width);
        margin-inline: auto;
    }

/* Related services / content (relatedServicesBlock).
   On a page — Figma "Услуги": 52px heading, pink box with the e-service icon, white → links in two columns. */
.linked__title {
    margin: 0 0 32px;
    font-size: var(--h2);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1.56px;
    text-align: center;
}

.linked {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding: 32px;
    border-radius: var(--radius-xs);
    background: var(--color-red3);
    color: var(--color-white);
}

.linked__icon {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

.linked__list {
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 32px;
}

    .linked__list li {
        break-inside: avoid;
        padding-bottom: 16px;
    }

.linked__link {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    font-size: var(--h5);
    line-height: 1.3;
}

    .linked__link::before {
        content: '';
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-top: 7px;
        background: url(/img/icons/arrow-right-white-16.svg) center / 16px no-repeat;
    }

    .linked__link span {
        text-decoration: underline;
    }

    .linked__link .linked__link-icon {
        display: none;
    }

    .linked__link .linked__external {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin: 7px 0 0 -8px;
        filter: brightness(0) invert(1);
    }

    .linked__link:hover span {
        opacity: 0.85;
    }

/* In an article column — Figma "Свързано съдържание": the section is the light-blue box, heading inside */
.article__widgets .linked-section {
    padding: 32px;
    border-left: 3px solid var(--sofia-color-blue);
    border-radius: var(--radius-xs);
    background: var(--color-blue5);
}

.article__widgets .linked__title {
    margin: 0 0 24px;
    font-size: var(--sofia-h3);
    letter-spacing: -1.08px;
    text-align: left;
}

.article__widgets .linked {
    display: block;
    padding: 0;
    background: none;
    color: inherit;
}

.article__widgets .linked__icon {
    display: none;
}

.article__widgets .linked__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    columns: auto;
}

    .article__widgets .linked__list li {
        padding: 0;
    }

.article__widgets .linked__link {
    gap: 12px;
    font-size: var(--h6);
    font-weight: 600;
    line-height: 1.5;
}

    .article__widgets .linked__link::before {
        display: none;
    }

    .article__widgets .linked__link .linked__link-icon {
        display: block;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        margin-top: 3px;
    }

    .article__widgets .linked__link .linked__external {
        margin: 7px 0 0 -6px;
        filter: none;
    }

    .article__widgets .linked__link:hover span {
        opacity: 1;
        color: var(--color-red3);
    }

.doc-list__title,
.gallery__title {
    margin: 0 0 24px;
    font-size: var(--sofia-h3);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1.08px;
}

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

/* Related documents (fileListBlock), Figma "Свързани документи": grey rows 4px apart */
.doc-list__title {
    margin-bottom: 32px;
}

.doc-list ul {
    gap: 4px;
}

.doc-list__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border-radius: var(--radius-xs);
    background: var(--color-fon);
    font-size: var(--h6);
    line-height: 1.5;
}

    .doc-list__item img {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        object-fit: contain;
    }

    .doc-list__item span {
        flex: 1;
        text-decoration: underline;
    }

    .doc-list__item time {
        font-size: var(--h8);
        color: var(--color-gray85);
    }

    .doc-list__item:hover span {
        color: var(--color-red3);
    }

/* Partners / funding strip (partnersBlock): grey box, logos up to 214×108, the heading as the note */
.partners {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 32px;
    background: var(--color-fon);
}

.partners__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

    .partners__logos img {
        width: auto;
        max-width: 214px;
        height: 108px;
        object-fit: contain;
    }

.partners__note {
    flex: 1;
    margin: 0;
    font-size: var(--h7);
    line-height: 1.3;
}

/* Gallery (galleryBlock): 379×213 photos 24px apart; ← → and a progress line under them */
.gallery__track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

    .gallery__track::-webkit-scrollbar {
        display: none;
    }

    .gallery__track img {
        flex: 0 0 379px;
        width: 379px;
        height: 213px;
        object-fit: cover;
        scroll-snap-align: start;
        background: var(--color-gray20);
    }

.gallery__nav {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(379px, 100%);
    margin-top: 16px;
}

    .gallery__nav button {
        display: flex;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
    }

        .gallery__nav button:disabled {
            opacity: 0.35;
            cursor: default;
        }

        .gallery__nav button img {
            width: 24px;
            height: 24px;
        }

.gallery__progress {
    position: relative;
    flex: 1;
    height: 2px;
    margin-left: 12px;
    background: var(--color-gray15);
}

    .gallery__progress span {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 40px;
        height: 2px;
        background: var(--color-red3);
        transition: left 0.2s ease, width 0.2s ease;
    }

@media (min-width: 768px) and (max-width: 1100px) {
    .article-page {
        grid-template-columns: 240px minmax(0, 1fr);
        column-gap: 40px;
    }
}

@media (max-width: 767.98px) {
    /* The section tree lives in the mobile drill-down menu */
    .article-page {
        grid-template-columns: minmax(0, 1fr);
        width: calc(100% - 32px);
        padding: 24px 0 50px;
    }

    .side-nav {
        display: none;
    }

    .article {
        gap: 24px;
    }

    .article__title {
        letter-spacing: -0.78px;
    }

    .article__date {
        margin-top: -12px;
    }

    .on-page {
        padding: 24px 16px;
    }

    .on-page__title,
    .article__widgets .linked__title,
    .doc-list__title,
    .gallery__title {
        font-size: 24px; /* mobile H3 */
        letter-spacing: -0.72px;
    }

    .linked__title {
        margin-bottom: 24px;
        letter-spacing: -0.78px;
    }

    .article__body > * + * {
        margin-top: 24px;
    }

    .article__body h2 {
        letter-spacing: -0.4px;
    }

    .article__body blockquote {
        padding: 16px 16px 16px 52px;
    }

        .article__body blockquote::before {
            left: 16px;
        }

    .article__widgets .umb-block-list,
    .article__widgets .promo-grid.row {
        gap: 24px;
    }

    .article__widgets .promo-card {
        flex-direction: column;
        padding: 24px;
    }

        .article__widgets .promo-card > div {
            display: block;
        }

        .article__widgets .promo-card .btn {
            margin-top: 16px;
        }

    .linked-section,
    .doc-section,
    .partners-section,
    .gallery-section {
        padding: 50px 16px;
    }

    /* Услуги: icon above, links in one column */
    .linked {
        flex-direction: column;
        gap: 16px;
        padding: 24px 16px;
    }

    .linked__list {
        columns: 1;
    }

    .article__widgets .linked-section {
        padding: 24px 16px;
    }

    .article__widgets .linked {
        padding: 0;
    }

    .doc-list__item {
        padding: 16px;
    }

    .partners {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 16px;
    }

    .gallery__track img {
        flex-basis: 280px;
        width: 280px;
        height: 158px;
    }
}

/* ---------- Campaigns (campaignsBlock), Figma "Кампании" ---------- */
/* Two cards 32px apart: 16:9 photo, then a white box 100px up over its lower-left, 120px short of the right edge */
.campaigns-section {
    padding: 70px 32px;
}

.campaigns-section--fon {
    background: var(--color-fon);
}

    .campaigns-section--fon .campaign-card__body {
        background: var(--color-fon);
    }

.campaigns-grid.row {
    max-width: var(--container-width);
    margin: 0 auto;
    align-items: start;
}

.campaign-card__photo {
    aspect-ratio: 16 / 9;
    background: var(--color-gray20);
}

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

.campaign-card__body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin: -100px 120px 0 0;
    padding: 32px 32px 32px 0;
    background: var(--color-white);
}

    .campaign-card__body .tag {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--color-gray85);
        text-transform: uppercase;
    }

        .campaign-card__body .tag::before {
            content: '';
            width: 6px;
            height: 6px;
            flex-shrink: 0;
            border-radius: 50%;
            background: var(--color-red3);
        }

    .campaign-card__body h3 {
        margin: 0;
        font-size: var(--h4);
        font-weight: 400;
        line-height: 1.3;
        letter-spacing: -0.56px;
    }

        .campaign-card__body h3 a {
            text-decoration: underline;
        }

            .campaign-card__body h3 a:hover {
                color: var(--color-red3);
            }

    .campaign-card__body p {
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        font-size: var(--h6);
        line-height: 1.5;
        color: var(--color-gray85);
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .campaign-card__body .btn {
        margin-top: 16px; /* 16px gap + 16px = Figma's 32px above the button */
        padding: 16px 24px;
    }

/* ---------- Air quality (airQualityBlock), Figma "Градски данни" ---------- */
/* Theme-colour panel on the full width; content on the 1200px column; photo on the right behind tiles */
.air-section {
    padding: 70px 0;
}

    .air-section .section-title {
        padding-inline: 32px;
    }

.air {
    position: relative;
    overflow: hidden;
    padding: 32px max(32px, calc((100% - var(--container-width)) / 2));
    background: var(--sofia-theme-primary);
    color: var(--color-white);
}

/* Figma: the photo shows through windows in the green shape along the right 366px of the 1366px panel */
.air__photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 366px;
}

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

.air__tiles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.air__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    max-width: 976px;
}

.air__head {
    display: flex;
    align-items: center;
    gap: 16px;
}

    .air__head img {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
    }

    .air__head h3 {
        margin: 0;
        font-size: var(--h4);
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.56px;
    }

    .air__head p {
        margin: 0;
        font-size: var(--h6);
        line-height: 1.5;
    }

.air__stations {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 220px));
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .air__stations li {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-left: 16px;
        border-left: 3px solid var(--color-white);
    }

.air__name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--h7);
    line-height: 1.3;
}

.air__stations strong {
    font-size: var(--sofia-h3);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1.08px;
    white-space: nowrap;
}

/* Level dot: colour inside a white ring (18px in the stations, 12px in the legend) */
.air__dot {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    background: var(--air-level);
}

.air__dot--low { --air-level: #86e577; }
.air__dot--moderate { --air-level: #ffb800; }
.air__dot--medium { --air-level: #ff8f60; }
.air__dot--high { --air-level: #ff6931; }
.air__dot--veryHigh { --air-level: #df1f22; }

.air__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: -8px 0 0; /* Figma: 32px under the stations (the column gap is 40px) */
    padding: 0;
    list-style: none;
    font-size: var(--h8);
    line-height: 1.3;
}

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

    .air__legend .air__dot {
        width: 12px;
        height: 12px;
    }

.air .btn {
    padding: 16px 24px;
}

/* ---------- Highlights as a row (highlightsBlock layout "row"), Figma "Програми и проекти" ---------- */
.highlights-slider {
    max-width: var(--container-width);
    margin: 0 auto;
}

.highlights-row.row {
    align-items: start;
}

@media (max-width: 1100px) {
    .air__stations {
        grid-template-columns: repeat(2, minmax(0, 220px));
    }

    .air__photo {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .campaigns-section {
        padding: 30px 16px;
    }

    .campaigns-grid.row {
        row-gap: 32px;
    }

    .campaign-card__body {
        margin: -48px 24px 0 0;
        padding: 24px 16px 0 0;
    }

        .campaign-card__body h3 {
            letter-spacing: -0.4px;
        }

    .air-section {
        padding: 30px 0;
    }

        .air-section .section-title {
            padding-inline: 16px;
        }

    .air {
        padding: 24px 16px;
    }

    .air__content {
        gap: 24px;
    }

    .air__head {
        align-items: flex-start;
    }

        .air__head img {
            width: 40px;
            height: 40px;
        }

        .air__head h3 {
            letter-spacing: -0.4px;
        }

    .air__stations {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
    }

        .air__stations li {
            padding-left: 12px;
        }

        .air__stations strong {
            font-size: 24px;
            letter-spacing: -0.72px;
            white-space: normal;
        }

    .air__legend {
        margin-top: 0;
    }

    .highlights-row.row {
        row-gap: 32px;
    }
}

/* ---------- Document archive (documentArchive template), Figma "4010 Отчети" ---------- */
/* Back link (32px arrow + 28px parent name), 52px title, documents in two 40px-apart columns (atoms/_docItem),
   pager — 40px between each, on the 1200px column. */
.archive {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: min(100% - 64px, var(--container-width));
    margin: 0 auto;
    padding: 32px 0 70px;
}

.archive__back {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 16px;
    font-size: var(--h4);
    line-height: 1.3;
    letter-spacing: -0.56px;
}

    .archive__back img {
        width: 32px;
        height: 32px;
    }

    .archive__back:hover {
        text-decoration: underline;
    }

.archive__title {
    margin: 0;
    font-size: var(--h2);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1.56px;
}

/* Figma "Отчети": the header closes with a full-width 1px line under the section link (the person page has none —
   its blue band starts there) */
.sofia-header:has(+ .sofia-main > .archive:first-child) {
    border-bottom: 1px solid var(--color-gray15);
}

/* Column-first like Figma (items 1–9 left, 10–18 right); items keep their own heights */
.archive__list {
    columns: 2;
    column-gap: 40px;
    margin-bottom: -40px;
}

    .archive__list .doc-item {
        break-inside: avoid;
        margin-bottom: 40px;
    }

/* A white widget or the feedback bar after the archive shares its 70px gap (Figma: pager → 70px → bar) */
.archive + .umb-block-list > :is(.section--white, .quest-section):first-child,
.archive + .umb-block-list > .sofia-widget-edit:first-child > :is(.section--white, .quest-section) {
    padding-top: 0;
}

/* ---------- Pager (layout/_pager), Figma "pagination" ---------- */
.pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding-top: 32px;
    font-size: var(--h6);
    line-height: 1.5;
}

.pager__step {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

    .pager__step img {
        width: 24px;
        height: 24px;
    }

    .pager__step[aria-disabled] {
        opacity: 0.35;
    }

.pager__pages {
    display: flex;
    gap: 8px;
}

.pager__page {
    min-width: 45px;
    padding: 8px 12px;
    border: 1px solid var(--color-gray15);
    border-radius: var(--radius-xs);
    text-align: center;
}

a.pager__page:hover {
    border-color: var(--color-black);
}

.pager__page[aria-current] {
    border-color: var(--color-red3);
    background: var(--color-red3);
    color: var(--color-white);
}

@media (max-width: 767.98px) {
    .archive {
        gap: 24px;
        width: calc(100% - 32px);
        padding: 24px 0 50px;
    }

    .archive__back {
        letter-spacing: -0.4px;
    }

    .archive__title {
        letter-spacing: -0.78px;
    }

    .archive__list {
        columns: 1;
        margin-bottom: -24px;
    }

        .archive__list .doc-item {
            margin-bottom: 24px;
        }

    /* Arrows only: five page boxes plus both labels do not fit 360px */
    .pager {
        gap: 16px;
        padding-top: 16px;
    }

    .pager__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .pager__page {
        min-width: 40px;
        padding: 6px 8px;
    }
}

/* ---------- Breadcrumbs (layout/_breadcrumb) ---------- */
/* Figma "Path": right-aligned under the header on the 32px gutter; underlined ancestors, 4px dot separators,
   current page in grey. Mobile: left-aligned on the 16px gutter. */
.breadcrumb {
    padding: 12px max(32px, calc((100% - var(--sofia-wrapper-site)) / 2 + 32px)) 24px;
    font-size: var(--h8);
    line-height: 1.3;
}

    .breadcrumb ol {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 8px 16px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .breadcrumb li {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .breadcrumb li + li::before {
            content: '';
            width: 4px;
            height: 4px;
            flex-shrink: 0;
            border-radius: 50%;
            background: var(--color-black);
        }

    .breadcrumb a {
        text-decoration: underline;
    }

    .breadcrumb [aria-current] {
        color: #737373; /* Figma gray55% */
    }

/* ---------- Page title (layout/_titleBand) ---------- */
/* Figma "Tite page atom": 50px back arrow + 80px H1 on white, 32px gutter */
.page-title {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 0 max(32px, calc((100% - var(--sofia-wrapper-site)) / 2 + 32px)) 32px;
}

    /* Inner-page H1 is 68px (tokens --sofia-h1), -3%; 80px (--h1) is the home hero only */
    .page-title h1 {
        margin: 0;
        font-size: var(--sofia-h1);
        font-weight: 400;
        line-height: 1.1;
        letter-spacing: -2.04px;
    }

.page-title__back {
    display: flex;
    flex-shrink: 0;
    padding-top: 16px;
}

    .page-title__back img {
        width: 50px;
        height: 50px;
    }

    .page-title__back .page-title__arrow--mobile {
        display: none;
    }

/* ---------- Title band (layout/_titleBand) ---------- */
/* Figma "XS-graph": 300px band in the theme (category) colour. Lead text on the left on the content edge,
   929px graphic pinned right: photo from x=135 with six tiles over its edges. On narrow desktops the graphic
   slides right (out of view) so the lead keeps ~370px. */
.title-band {
    position: relative;
    display: flex;
    align-items: center;
    height: 300px;
    overflow: hidden;
    background: var(--sofia-theme-primary);
    color: var(--color-white);
}

.title-band__lead {
    position: relative;
    z-index: 1;
    width: 306px;
    margin: 0;
    padding: 0 0 90px max(32px, calc(50% - 595px));
    box-sizing: content-box;
    font-size: var(--h5);
    line-height: 1.3;
}

.title-band__graphic {
    position: absolute;
    top: 0;
    right: min(0px, calc(100% - 1300px));
    width: 929px;
    height: 300px;
}

.title-band__photo {
    position: absolute;
    top: 0;
    left: 135px;
    width: 794px;
    height: 100%;
    object-fit: cover;
}

.title-band__tiles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.title-band__tiles--mobile {
    display: none;
}

/* The first widget (info grid) overlaps the band by 84px as a white 1200px card: 48px padding, 70px bottom */
.title-band--overlap + .umb-block-list > .info-grid-section:first-child,
.title-band--overlap + .umb-block-list > .sofia-widget-edit:first-child > .info-grid-section {
    position: relative;
    z-index: 2;
    margin-top: -84px;
    padding: 0 32px;
    background: transparent;
}

    .title-band--overlap + .umb-block-list > .info-grid-section:first-child .info-grid,
    .title-band--overlap + .umb-block-list > .sofia-widget-edit:first-child > .info-grid-section .info-grid {
        padding: 48px 48px 70px;
        background: var(--color-white);
    }

/* ---------- Section link (header, Figma Level2 / Level3) ---------- */
/* Pages below a section name that section under the breadcrumbs: Figma page frames (Кмет, Отчети) — 28px H4,
   -2%, no underline (underlined on hover only) */
.section-link {
    margin: 0;
    padding: 0 max(32px, calc((100% - var(--sofia-wrapper-site)) / 2 + 32px)) 24px;
    font-size: var(--h4);
    line-height: 1.3;
    letter-spacing: -0.56px;
}

    .section-link a:hover {
        text-decoration: underline;
    }

@media (max-width: 767.98px) {
    .section-link {
        padding-inline: 16px;
        letter-spacing: -0.4px;
    }
}

/* ---------- Section menu (layout/_mainMenu under the page title on section pages) ---------- */
/* Figma lvl1 "main menu": at full desktop the one site menu sits under the title and shows only the current
   section's subpages, lined up with the title text, 20px apart, each with a down chevron and a dropdown below.
   Narrower widths keep the side panel / drill-down (the panel is fixed, so its place in the page does not matter). */
.desk-menu.is-open {
    position: relative;
    z-index: 600;
}

@media (min-width: 1366px) {
    .page-title:has(+ .desk-menu .main-menu--section) {
        padding-bottom: 0;
    }

    /* Level 1: lined up with the big title's text (gutter + 50px arrow + 24px gap, Figma 110px) */
    .main-menu.main-menu--level1 {
        padding-inline: calc(max(32px, calc((100% - var(--sofia-wrapper-site)) / 2 + 32px)) + 78px);
    }

    /* Level 2: on the gutter under the small section link, closed by a hairline */
    .main-menu.main-menu--level2 {
        border-bottom: 1px solid var(--color-gray15);
    }

    /* Level 3+ and pages outside the menu: no bar (the menu still serves the side panel / drill-down) */
    .main-menu.main-menu--hidden {
        display: none;
    }

    .section-link:has(+ .desk-menu .main-menu--level2) {
        padding-bottom: 0;
    }

        .main-menu--section .nav-item:not(.is-current),
        .main-menu--section .nav-item.is-current > a.nav-link {
            display: none;
        }

        .main-menu--section .nav-item.is-current > .nav-dropdown {
            position: static;
            display: flex;
            flex-wrap: wrap;
            column-gap: 20px;
            min-width: 0;
            padding: 0;
            border: none;
            box-shadow: none;
            background: none;
            opacity: 1;
            visibility: visible;
            transform: none;
            transition: none;
        }

        .main-menu--section .nav-dropdown > .dropdown-item > a.dropdown-link {
            justify-content: flex-start;
            gap: 6px;
            padding: 24px 0;
            font-size: var(--h7);
        }

            .main-menu--section .nav-dropdown > .dropdown-item > a.dropdown-link img.arrow {
                display: none;
            }

            .main-menu--section .nav-dropdown > .dropdown-item > a.dropdown-link:has(img.arrow)::after {
                content: '';
                width: 10px;
                height: 10px;
                background: url(/img/icons/chevron-down-10.svg) center / 10px no-repeat;
                transition: transform 0.15s ease;
            }

            /* The branch the page is in: semibold with a 3px red underline (Figma article header) */
            .main-menu--section .nav-dropdown > .dropdown-item.is-current > a.dropdown-link {
                font-weight: 600;
                box-shadow: inset 0 -3px 0 var(--color-red3);
            }

            .main-menu--section .nav-dropdown > .dropdown-item:hover > a.dropdown-link::after,
            .main-menu--section .nav-dropdown > .dropdown-item:focus-within > a.dropdown-link::after {
                transform: rotate(180deg);
            }

        /* Its dropdown opens below the item (deeper levels keep the side flyouts) */
        .main-menu--section .nav-dropdown > .dropdown-item > .dropdown-flyout {
            top: 100%;
            left: 0;
            right: auto;
            margin: 0;
            transform: translateY(-6px);
        }

            .main-menu--section .nav-dropdown > .dropdown-item:hover > .dropdown-flyout,
            .main-menu--section .nav-dropdown > .dropdown-item:focus-within > .dropdown-flyout {
                transform: none;
            }

            .main-menu--section .nav-dropdown > .dropdown-item > .dropdown-flyout::before {
                display: none;
            }
}

/* Mobile (Figma "Path" / "mTite page atom" / "XS mgraph"): left breadcrumbs, 32px title with a 24px arrow,
   full-width 360×209 photo with a corner tile in each corner (scales with the width), cards below on white. */
@media (max-width: 767.98px) {
    .breadcrumb {
        padding: 12px 16px 18px;
    }

        .breadcrumb ol {
            justify-content: flex-start;
        }

    .page-title {
        gap: 16px;
        padding: 18px 16px;
    }

        .page-title h1 {
            font-size: var(--h1); /* 32px */
            letter-spacing: -0.96px;
        }

    .page-title__back {
        padding-top: 8px;
    }

        .page-title__back .page-title__arrow--desktop {
            display: none;
        }

        .page-title__back .page-title__arrow--mobile {
            display: block;
            width: 24px;
            height: 24px;
        }

    .title-band {
        display: block;
        height: auto;
        aspect-ratio: 360 / 209;
    }

    .title-band__lead {
        display: none;
    }

    .title-band__graphic {
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .title-band__photo {
        left: 0;
        width: 100%;
    }

    /* 12% black wash over the photo, under the tiles */
    .title-band__graphic::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.12);
    }

    .title-band__tiles {
        z-index: 1;
    }

    .title-band__tiles--desktop {
        display: none;
    }

    .title-band__tiles--mobile {
        display: block;
    }

    .title-band--overlap + .umb-block-list > .info-grid-section:first-child,
    .title-band--overlap + .umb-block-list > .sofia-widget-edit:first-child > .info-grid-section {
        margin-top: 0;
        padding: 0;
    }

        .title-band--overlap + .umb-block-list > .info-grid-section:first-child .info-grid,
        .title-band--overlap + .umb-block-list > .sofia-widget-edit:first-child > .info-grid-section .info-grid {
            padding: 48px 16px 70px;
        }

            .title-band--overlap + .umb-block-list .info-grid .row.gy-48 {
                row-gap: 32px;
            }

            .title-band--overlap + .umb-block-list .info-grid .info-card h3 {
                margin: 0 0 16px;
            }

            /* Unlike the home grid, the landing cards keep their text on mobile */
            .title-band--overlap + .umb-block-list .info-grid .info-card p {
                display: block;
            }
}

/* ---------- Mobile menu (<768px): the shared .main-menu as a full-screen drill-down ---------- */
/* Opened by the bottom nav's "Дейности" tab. Every submenu (.nav-dropdown / .dropdown-flyout) is a panel that
   slides over its parent when the row's chevron (.nav-drill) is tapped; the bottom tab bar stays on top.
   Selectors start with .desk-menu .main-menu to outrank the desktop hover and nth-last-child dropdown rules. */
@media (max-width: 767.98px) {
    .desk-menu {
        display: none;
    }

        .desk-menu.is-open {
            display: block;
        }

    .desk-menu__panel {
        position: fixed;
        inset: 0 0 70px;
        display: flex;
        flex-direction: column;
        background: var(--color-white);
        overflow: hidden;
    }

    body.desk-menu-open .bottom-nav {
        z-index: 700;
    }

    .desk-menu__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-shrink: 0;
        padding: 12px 16px;
        border-bottom: 1px solid var(--color-gray15);
    }

    .desk-menu__brand {
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: var(--h5);
    }

        .desk-menu__brand img {
            width: 56px;
            height: 65px;
            object-fit: contain;
        }

        .desk-menu__brand strong {
            display: block;
            font-weight: 600;
        }

    .desk-menu__close img {
        width: 20px;
        height: 20px;
    }

    .desk-menu .main-menu {
        position: relative;
        flex: 1;
        min-height: 0;
        padding: 24px 16px;
        overflow-x: hidden; /* closed submenus wait off-canvas at translateX(100%) */
        overflow-y: auto;
    }

        /* The panel that has a submenu open over it must not scroll underneath */
        .desk-menu .main-menu.is-drilled,
        .desk-menu .main-menu .is-drilled {
            overflow: hidden;
        }

        /* Each panel's list is a 2-column grid (labels | divider + chevron) that its rows share through subgrid,
           so every chevron lines up just after the panel's longest label. */
        .desk-menu .main-menu,
        .desk-menu .main-menu .nav-item > .nav-dropdown,
        .desk-menu .main-menu .dropdown-flyout > .dropdown-list {
            display: grid;
            grid-template-columns: minmax(0, max-content) 36px;
            justify-content: start;
            align-content: start;
            gap: 16px 15px;
        }

        /* Row: link label, then a drill button laid over the whole row (divider + chevron in the 2nd column) */
        .desk-menu .main-menu .nav-item,
        .desk-menu .main-menu .dropdown-item {
            position: static;
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: subgrid;
            align-items: center;
        }

        .desk-menu .main-menu a.nav-link,
        .desk-menu .main-menu .dropdown-item > a.dropdown-link {
            grid-area: 1 / 1;
            justify-content: flex-start;
            min-height: 40px;
            padding: 0;
            font-size: var(--h5);
            font-weight: 400;
            line-height: 1.3;
            text-decoration: underline;
            white-space: normal;
        }

            .desk-menu .main-menu a.nav-link.is-active {
                box-shadow: none;
            }

            .desk-menu .main-menu a.nav-link img,
            .desk-menu .main-menu .dropdown-item > a.dropdown-link img.arrow {
                display: none;
            }

        .desk-menu .main-menu .nav-drill {
            grid-area: 1 / 1 / 2 / 3;
            align-self: stretch;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 15px;
            padding: 0;
            border: none;
            background: none;
            cursor: pointer;
        }

            .desk-menu .main-menu .nav-drill::before {
                content: '';
                width: 1px;
                align-self: stretch;
                background: var(--color-gray15);
            }

            .desk-menu .main-menu .nav-drill img {
                width: 20px;
                height: 20px;
            }

        .desk-menu .main-menu .nav-item > .nav-dropdown,
        .desk-menu .main-menu .dropdown-item > .dropdown-flyout {
            position: absolute;
            inset: 0;
            z-index: 1;
            min-width: 0;
            margin: 0;
            padding: 24px 16px;
            border: none;
            border-radius: 0;
            box-shadow: none;
            background: var(--color-white);
            overflow-x: hidden;
            overflow-y: auto;
            opacity: 1;
            visibility: hidden;
            transform: translateX(100%);
            transition: transform 0.28s ease, visibility 0.28s;
        }

            .desk-menu .main-menu .dropdown-item > .dropdown-flyout::before {
                display: none;
            }

        .desk-menu .main-menu .is-open > .nav-dropdown,
        .desk-menu .main-menu .is-open > .dropdown-flyout {
            visibility: visible;
            transform: none;
        }

        .desk-menu .main-menu .dropdown-item > .dropdown-flyout {
            display: flex;
            flex-direction: column;
            gap: 16px; /* + the title row's 16px margin = 32px, as under the level-1 title */
        }

        .desk-menu .main-menu .panel-title-row {
            grid-column: 1 / -1;
            display: flex;
            margin-bottom: 16px;
        }
}

/* ---------- Section heading ---------- */
.section-title {
    font-size: var(--h2);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1.56px;
    text-align: center;
    margin: 0 0 32px;
}

/* ---------- News / Актуално (newsListingBlock) ---------- */
/* Figma: fon background, 70px padding, tabs spread over the 1200px column, 3 cards per slide. */
.news-section {
    background: var(--color-fon);
    padding: 70px 32px;
}

.news-section--white {
    background: var(--color-white);
}

.news-tabs {
    display: flex;
    max-width: var(--container-width);
    margin: 0 auto 32px;
    border-bottom: 1px solid var(--color-gray15);
}

    .news-tabs button,
    .news-tabs a {
        flex: 1 1 auto;
        padding: 0 16px 16px;
        margin-bottom: -1px; /* underline sits on the grey border */
        border: none;
        border-bottom: 3px solid transparent;
        background: none;
        font-family: var(--font-family);
        font-size: var(--nav);
        color: var(--color-gray85);
        white-space: nowrap;
        cursor: pointer;
    }

        .news-tabs button:hover,
        .news-tabs a:hover {
            color: var(--color-black);
        }

        .news-tabs button.is-active,
        .news-tabs a[aria-current] {
            color: var(--color-black);
            border-bottom-color: var(--color-red3);
        }

    /* Few tabs (Figma lvl1 "Новини | Събития"): a centred 192px-per-tab bar instead of spanning the column;
       four or more (home, news list pages) keep filling the 1200px row. */
    .news-tabs:not(:has(> :nth-child(4))) {
        width: fit-content;
    }

        .news-tabs:not(:has(> :nth-child(4))) > * {
            flex: 1 1 0;
            min-width: 192px;
        }

    /* News list pages: the tabs are links to the categories (Всички, Новини, Събития, …) */
    .news-tabs a {
        text-align: center;
    }

.news-archive .news-tabs {
    width: 100%;
    max-width: none;
    margin: 0;
}

.news-archive__empty {
    margin: 0;
    font-size: var(--h6);
    color: var(--color-gray85);
}

.news-panel {
    max-width: var(--container-width);
    margin: 0 auto;
}

.news-card {
    display: block;
}

    .news-card img,
    .news-card__placeholder {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        background: var(--color-gray20);
        margin-bottom: 28px;
    }

    .news-card h3 {
        font-size: var(--h4);
        font-weight: 400;
        line-height: 1.3;
        letter-spacing: -0.56px;
        text-decoration: underline;
        margin: 0 0 12px;
    }

    .news-card:hover h3 {
        color: var(--color-red3);
    }

    .news-card time {
        font-size: 13px;
        font-weight: 600;
        color: var(--color-gray85);
    }

/* Slider dots — Figma: active = 14px ring, others = 6px dots */
.dots {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 32px;
}

    .dots button {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
    }

        .dots button::before {
            content: '';
            display: block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--color-black);
            transition: width 0.2s ease, height 0.2s ease;
        }

        .dots button.active::before {
            width: 14px;
            height: 14px;
            background: transparent;
            border: 2.5px solid var(--color-black);
        }

/* ---------- Slider (swipeable + mouse-draggable, scroll-snap) ---------- */
.d-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}

    .d-slider.dragging {
        cursor: grabbing;
        scroll-snap-type: none;
    }

        .d-slider.dragging a {
            pointer-events: none; /* no hover flicker / accidental navigation mid-drag */
        }

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

    .d-slider .slide {
        flex: 0 0 100%;
        min-width: 0;
        scroll-snap-align: start;
    }

    .d-slider img,
    .d-slider a {
        -webkit-user-drag: none;
        user-select: none;
    }

@media (max-width: 767.98px) {
    .news-section {
        padding: 30px 0;
    }

    /* Tabs scroll sideways instead of squeezing */
    .news-tabs {
        overflow-x: auto;
        scrollbar-width: none;
        padding: 0 16px;
    }

        .news-tabs::-webkit-scrollbar {
            display: none;
        }

        .news-tabs button,
        .news-tabs a {
            flex: 0 0 auto;
        }

    /* Figma mobile: two tabs share the width (164px each on 360px) */
    .news-tabs:not(:has(> :nth-child(4))) {
        width: auto;
    }

        .news-tabs:not(:has(> :nth-child(4))) > * {
            min-width: 0;
        }

    .news-archive .news-tabs {
        margin-inline: -16px;
        width: calc(100% + 32px);
    }

    .news-archive .news-grid.row {
        padding: 0;
    }

    .news-grid.row {
        padding: 0 16px;
        row-gap: 24px;
    }

    .news-card img,
    .news-card__placeholder {
        margin-bottom: 12px;
    }

    .news-card h3 {
        letter-spacing: -0.4px;
    }
}

/* ---------- Highlights / Акценти (highlightsBlock) ---------- */
/* Figma: two independent columns (40px apart), items stacked 32px apart, 3px black bar + 32px indent. */
.highlights-section {
    background: var(--color-white);
    padding: 70px 32px;
}

.highlights-section--fon {
    background: var(--color-fon);
}

.highlights-grid {
    max-width: var(--container-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    align-items: start;
}

.highlights-col {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.highlight-item {
    display: block;
    border-left: 3px solid var(--color-black);
    padding-left: 32px;
}

    .highlight-item h3 {
        font-size: var(--h4);
        font-weight: 400;
        line-height: 1.3;
        letter-spacing: -0.56px;
        text-decoration: underline;
        margin: 0 0 12px;
    }

    .highlight-item:hover h3 {
        color: var(--color-red3);
    }

    .highlight-item .tag {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 600;
        color: var(--color-gray85);
        text-transform: uppercase;
    }

        .highlight-item .tag::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--color-red3);
            flex-shrink: 0;
        }

.highlights-empty {
    text-align: center;
    color: var(--color-gray70);
    margin: 0;
}

@media (max-width: 767.98px) {
    .highlights-section {
        padding: 30px 16px;
    }

    /* One column; the two stacks follow each other with the same 32px rhythm */
    .highlights-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 32px;
    }

    .highlight-item {
        padding-left: 24px;
    }

        .highlight-item h3 {
            letter-spacing: -0.4px;
        }
}

/* ---------- White sections next to each other: one 70px gap, not two ---------- */
/* Works with or without the editor wrapper (.sofia-widget-edit) around each widget. */
.umb-block-list > :is(.section--white, .sofia-widget-edit:has(> .section--white)) + .section--white,
.umb-block-list > :is(.section--white, .sofia-widget-edit:has(> .section--white)) + .sofia-widget-edit > .section--white {
    padding-top: 0;
}

/* ---------- Image banner slider (imageBannerBlock): За гости и туристи / Как работи София ---------- */
/* Figma: full-width 530px photo, 460px blue panel 32px from the left edge, vertically centred, theme pattern on its right. */
.image-banner-section {
    padding: 70px 0;
}

.image-banner-section--fon {
    background: var(--color-fon);
}

/* No dots under a single banner: the photo runs straight into the next section (Figma: Как работи София → promo) */
.image-banner-section--static {
    padding-bottom: 0;
}

.image-banner-section .section-title {
    padding: 0 32px;
}

.image-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 530px;
    padding-inline: max(32px, calc((100% - var(--sofia-wrapper-site)) / 2 + 32px)); /* same left edge as the header */
    overflow: hidden;
    background: var(--color-gray20);
}

.image-banner__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.image-banner .info-box {
    position: relative;
    z-index: 1;
    width: 460px;
    max-width: 100%;
    min-height: 390px;
    display: flex;
    align-items: center;
    padding: 48px 32px;
    background: var(--sofia-theme-primary);
    color: var(--color-white);
    overflow: hidden;
}

.info-box__pattern {
    position: absolute;
    top: 0;
    right: 0;
    width: 270px;
    height: 391px;
    pointer-events: none;
}

.info-box__body {
    position: relative; /* above the pattern */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

    .info-box__body p {
        font-size: 36px;
        line-height: 1.2;
        letter-spacing: -1.08px;
        text-decoration: underline;
        margin: 0;
    }

        .info-box__body p a:hover {
            text-decoration-thickness: 2px;
        }

.image-banner-section .dots {
    margin-top: 32px;
}

/* "Как работи София" (panel side = right). Figma: photo column + 500px blue panel, 492px tall, 40px text inset,
   two-column theme pattern down the panel's right edge. */
.image-banner--right {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(500px, 40%);
    align-items: stretch;
    min-height: 492px;
    padding: 0;
}

    /* The photo fills the row instead of sizing it: without contain:size a 16:9 photo in a
       1200px-wide column (wide screens) would stretch the banner far past Figma's 492px. */
    .image-banner--right .image-banner__photo {
        position: static;
        height: 100%;
        contain: size;
    }

    .image-banner--right .info-box {
        width: auto;
        min-height: 0;
        padding: 70px 40px;
    }

.info-box__pattern--tall {
    width: 272px;
    height: 491px;
}

@media (max-width: 767.98px) {
    .image-banner-section {
        padding: 50px 0 30px;
    }

    .image-banner-section--static {
        padding-bottom: 0;
    }

    /* Mobile design: square photo with the panel laid over its lower part, inset 16px on both sides,
       its bottom edge sitting 24px below the photo whatever the text length.
       Photo and panel share one grid cell; the panel is pinned to the bottom and pushed 24px past it. */
    .image-banner,
    .image-banner--right {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding: 0 0 24px;
        background: transparent; /* the strips beside the inset panel show the page, not a grey box */
    }

    .image-banner__photo,
    .image-banner--right .image-banner__photo {
        position: static;
        grid-area: 1 / 1;
        align-self: start;
        aspect-ratio: 1 / 1;
        height: auto;
        contain: none;
    }

    .image-banner .info-box {
        grid-area: 1 / 1;
    }

    .image-banner .info-box {
        align-self: end;
        width: auto;
        min-height: 0;
        margin: 0 16px -24px;
        padding: 32px;
    }

    /* Figma mobile: 24px, -3% tracking */
    .info-box__body p {
        font-size: 24px;
        letter-spacing: -0.72px;
    }

    /* Figma mobile has no button here; the underlined text already links to the same page */
    .image-banner .info-box__body .btn {
        display: none;
    }
}

/* ---------- Participate / Участвай (participateBlock) ---------- */
/* Figma: two columns, 50px icon, 28px regular underlined title (link), 20px text clamped to 4 lines. */
.participate-section {
    padding: 70px 32px;
}

.participate-section--fon {
    background: var(--color-fon);
}

.participate-grid.row {
    max-width: var(--container-width);
    margin: 0 auto;
}

.info-card--participate h3 {
    font-weight: 400;
}

    .info-card--participate h3 a:hover {
        color: var(--color-red3);
    }

.info-card--participate p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

/* ---------- Promo banners (ctaBannersBlock) ---------- */
/* Figma: fon section, two 584px cards, 32px padding, 70px icon + 32px gap, 28px semibold title. */
.promo-section {
    background: var(--color-fon);
    padding: 70px 32px;
}

    .promo-section.section--white {
        background: var(--color-white);
    }

.promo-grid.row {
    max-width: var(--container-width);
    margin: 0 auto;
}

.promo-card {
    display: flex;
    gap: 32px;
    padding: 32px;
    border-radius: var(--radius-xs);
}

    .promo-card.dark {
        background: var(--sofia-theme-primary);
        color: var(--color-white);
    }

    .promo-card.light {
        background: var(--color-blue5);
        color: var(--color-black);
    }

    .promo-card .icon {
        width: 70px;
        height: 70px;
        flex-shrink: 0;
        object-fit: contain;
    }

    .promo-card h3 {
        font-size: var(--h4);
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.56px;
        text-decoration: underline;
        margin: 0 0 24px;
    }

    .promo-card p {
        font-size: var(--h6);
        line-height: 1.5;
        margin: 0 0 24px;
    }

/* ---------- Quick links / Бързи връзки (quickLinksBlock) ---------- */
/* Figma: three independent columns 24px apart, fon tiles 24px padding, 10px between tiles. */
.quicklinks-section {
    padding: 70px 32px;
}

.quicklinks-section--fon {
    background: var(--color-fon);
}

    .quicklinks-section--fon .quicklink {
        background: var(--color-white);
    }

.quicklinks-grid.row {
    max-width: var(--container-width);
    margin: 0 auto;
    align-items: start;
}

.quicklinks-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quicklink {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-fon);
    border-radius: var(--radius-xs);
    padding: 24px;
    font-size: var(--h7);
    line-height: 1.3;
}

    .quicklink > img {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

.quicklink__text {
    text-decoration: underline;
}

.quicklink:hover .quicklink__text {
    color: var(--color-red3);
}

.quicklink__ext {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    vertical-align: -2px;
}

.quicklinks-empty {
    text-align: center;
    color: var(--color-gray70);
    margin: 0;
}

/* ---------- Quest / feedback bar (feedbackBlock) ---------- */
/* Figma: 70px above and below (not collapsed with the white section before it), light blue bar. */
.quest-section {
    padding: 70px 32px;
}

.quest-bar {
    max-width: var(--container-width);
    margin: 0 auto;
    background: var(--color-blue5);
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    flex-wrap: wrap;
}

    .quest-bar p {
        font-size: var(--h5);
        color: var(--color-gray85);
        margin: 0;
        flex: 1;
        min-width: 220px;
    }

    .quest-bar .options {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

        .quest-bar .options button {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--color-white);
            border: none;
            border-radius: var(--radius-xs);
            padding: 12px 24px;
            font-family: var(--font-family);
            font-size: var(--h7); /* Figma H7, 18px */
            line-height: 1.3;
            color: var(--color-black);
            cursor: pointer;
        }

            .quest-bar .options button:hover {
                box-shadow: inset 0 0 0 1.4px var(--sofia-theme-primary);
            }

        .quest-bar .options img {
            width: 32px;
            height: 32px;
        }

@media (max-width: 767.98px) {
    .section-title {
        margin-bottom: 24px;
        letter-spacing: -0.78px; /* -3% of the 26px mobile H2 */
    }

    .participate-section {
        padding: 30px 16px;
    }

    .participate-grid.row {
        row-gap: 32px;
    }

    .info-card--participate .icon {
        width: 32px;
        height: 32px;
        margin-top: 8px;
    }

    .promo-section {
        padding: 30px 16px;
    }

    .promo-grid.row {
        row-gap: 18px;
    }

    .promo-card {
        padding: 24px;
        gap: 24px;
    }

        .promo-card .icon {
            width: 40px;
            height: 40px;
        }

        .promo-card h3 {
            letter-spacing: -0.4px;
        }

    .quicklinks-section {
        padding: 30px 16px;
    }

    .quicklinks-grid.row.g-24 {
        row-gap: 10px;
    }

    .quest-section {
        padding: 30px 16px;
    }

    .quest-bar {
        flex-direction: column;
        align-items: stretch;
    }

        .quest-bar p {
            text-align: center;
            flex: none;
        }

        .quest-bar .options button {
            flex: 1 1 auto;
            justify-content: center;
        }
}

/* ---------- Footer (layout/_footer) ---------- */
/* Figma: fon, 4px theme-blue top border, content on the header's 1366px frame (32px gutters).
   Columns: social | nav (accordion + right-hand list, newsletter, legal, brand) | back to top, 100px apart. */
.footer {
    background: var(--color-fon);
    border-top: 4px solid var(--sofia-theme-primary);
    padding-block: 100px 70px; /* Figma padding/100 */
    padding-inline: max(32px, calc((100% - var(--sofia-wrapper-site)) / 2 + 32px));
}

.footer-inner {
    display: flex;
    gap: 100px;
    align-items: flex-start;
}

.footer-social {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .footer-social a {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: var(--h8);
        line-height: 24px;
        text-decoration: underline;
        white-space: nowrap;
    }

    .footer-social img {
        width: 24px;
        height: 24px;
    }

.footer-nav {
    flex: 1;
    min-width: 0;
}

.footer-nav-columns {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 32px;
}

.footer-menu {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer-menu-item {
    display: flex;
    flex-direction: column;
}

.footer-toggle {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: var(--h5);
    line-height: 1.3;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-family);
    color: inherit;
    cursor: pointer;
    text-align: left;
}

    .footer-toggle img {
        width: 16px;
        height: 16px;
        transition: transform 0.2s ease;
    }

    .footer-toggle[aria-expanded="true"] img {
        transform: rotate(180deg);
    }

    .footer-toggle:hover {
        text-decoration: underline;
    }

/* Mobile-only stand-in for the accordion button */
.footer-section-link {
    display: none;
}

/* Animates to the panel's real height (no fixed max-height that would cut long sections) */
.footer-accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}

    .footer-accordion-panel > div {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .footer-accordion-panel.open {
        grid-template-rows: 1fr;
    }

        .footer-accordion-panel.open > div {
            padding-top: 12px;
        }

    .footer-accordion-panel a {
        font-size: var(--h6);
        text-decoration: underline;
    }

    /* Closed panels: links must not be reachable with Tab */
    .footer-accordion-panel:not(.open) a {
        visibility: hidden;
    }

.footer-submenu {
    display: flex;
    flex-direction: column;
}

    .footer-submenu a {
        padding: 12px 0;
        font-size: var(--h6);
        line-height: 1.5;
    }

        .footer-submenu a:first-child {
            padding-top: 0;
        }

        .footer-submenu a:hover {
            text-decoration: underline;
        }

.newsletter {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

    .newsletter input {
        width: 330px;
        max-width: 100%;
        border: none;
        border-bottom: 1px solid var(--color-gray20);
        padding: 8px 0;
        background: transparent;
        font-family: var(--font-family);
        font-size: var(--h6);
        color: var(--color-black);
    }

        .newsletter input::placeholder {
            color: var(--color-black);
        }

        .newsletter input:focus {
            outline: none;
            border-bottom-color: var(--color-black);
        }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

.footer-legal {
    flex: 0 1 484px; /* legal links wrap within the newsletter column, as in Figma */
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    font-size: var(--h8);
}

    .footer-legal-links a {
        text-decoration: underline;
        white-space: nowrap;
    }

.footer-legal .copyright {
    font-weight: 600;
    font-size: var(--h8);
    margin: 0;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 24px;
}

    .footer-brand img {
        height: 108px;
        width: auto;
    }

    .footer-brand span {
        font-size: var(--h5);
        white-space: nowrap;
    }

        .footer-brand span strong {
            display: block;
            font-weight: 600;
        }

.footer-top button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-family);
    font-size: var(--h8);
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.footer-top img {
    width: 70px;
    height: 70px;
}

/* Tablet: the four-column row gets tight; stack the nav columns and the legal/brand row */
@media (max-width: 1100px) {
    .footer-inner {
        gap: 48px;
    }

    .footer-nav-columns,
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Mobile (Figma mfooter): centred column, icon-only social row, sections as plain links (no accordion), 18px rhythm */
@media (max-width: 767.98px) {
    .footer {
        padding: 50px 24px 30px;
        text-align: center;
    }

    .footer-inner {
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }

    .footer-social {
        flex-direction: row;
        justify-content: center;
    }

        .footer-social img {
            width: 20px;
            height: 20px;
        }

        /* Icon only; the network name stays for screen readers */
        .footer-social img + span {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }

    .footer-nav {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .footer-nav-columns {
        align-items: center;
        gap: 18px;
        margin-bottom: 0;
    }

    .footer-menu {
        align-items: center;
        gap: 18px;
    }

    .footer-toggle {
        justify-content: center;
        font-weight: 600;
        text-decoration: underline;
        text-align: center;
    }

    button.footer-toggle,
    .footer-accordion-panel {
        display: none;
    }

    .footer-section-link {
        display: flex;
    }

    .footer-submenu {
        align-items: center;
    }

        .footer-submenu a,
        .footer-submenu a:first-child {
            padding: 6px 0;
        }

    .newsletter {
        flex-wrap: nowrap;
        margin-bottom: 0;
    }

        .newsletter input {
            flex: 1 1 0;
            width: auto;
            min-width: 0;
        }

        .newsletter .btn {
            padding-inline: 18px;
        }

    .footer-bottom {
        align-items: center;
        gap: 18px;
    }

    .footer-legal {
        flex-basis: auto;
        text-align: center;
        gap: 32px;
    }

    .footer-legal-links {
        justify-content: center;
        gap: 12px 18px;
    }

    .footer-brand {
        flex-direction: column;
        gap: 18px;
    }

        .footer-brand img {
            height: 110px;
        }

        .footer-brand span {
            font-size: var(--h4);
            letter-spacing: -0.4px;
        }

    .footer-top img {
        width: 40px;
        height: 40px;
    }
}

/* ---------- Sticky accessibility widget ---------- */
.sticky-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 100;
}

    .sticky-widget button {
        width: 64px;
        height: 64px;
        border-radius: var(--radius-full);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .sticky-widget .accessibility {
        background: var(--color-blue-sub);
    }

    .sticky-widget .chat {
        background: var(--color-gray70);
    }

    .sticky-widget img {
        width: 32px;
        height: 32px;
    }


/* ============================================================ */
/* MOBILE STYLES (<768px)                                         */
/* ============================================================ */

.wrap {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Compact desktop menu (Figma 1280px): placed after the base header/.main-menu rules so it wins the cascade.
   The main menu becomes the side panel: 3-column grid of section icon, title and subpages; flyouts are left out. */
@media (min-width: 768px) and (max-width: 1365.98px) {
    .header-main {
        gap: 48px;
    }

    .header-search {
        max-width: none;
    }

    .header-menu-btn {
        display: flex;
    }

    .desk-menu {
        display: none;
    }

        .desk-menu.is-open {
            display: block;
        }

    .desk-menu__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
    }

    .desk-menu__panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(1073px, 100%);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 40px;
        padding: 48px 40px 40px;
        background: var(--color-white);
        animation: desk-menu-in 0.25s ease;
    }

    .desk-menu__head {
        display: flex;
        justify-content: flex-end;
    }

    .desk-menu__brand {
        display: none;
    }

    .desk-menu__close img {
        width: 24px;
        height: 24px;
    }

    .main-menu {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 48px 32px;
        padding: 0;
    }

        .main-menu .nav-item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }

        .main-menu .nav-icon {
            display: block;
            width: 50px;
            height: 50px;
        }

        .main-menu a.nav-link {
            padding: 0;
            font-size: var(--nav);
            font-weight: 700;
            line-height: 1.3;
            text-decoration: underline;
            white-space: normal;
        }

            .main-menu a.nav-link.is-active {
                box-shadow: none;
            }

            .main-menu a.nav-link img,
            .main-menu .dropdown-item > a.dropdown-link img.arrow,
            .main-menu .dropdown-flyout {
                display: none;
            }

        /* The hover dropdown is always open, in the flow under its title */
        .main-menu .nav-dropdown {
            position: static;
            display: flex;
            flex-direction: column;
            gap: 12px;
            min-width: 0;
            padding: 12px 0 0;
            border: none;
            border-radius: 0;
            box-shadow: none;
            opacity: 1;
            visibility: visible;
            transform: none;
            transition: none;
        }

        .main-menu .dropdown-item > a.dropdown-link {
            justify-content: flex-start;
            gap: 8px;
            padding: 0;
            font-size: var(--h7);
            font-weight: 600;
            line-height: 1.5;
            text-decoration: underline;
            white-space: normal;
        }

            .main-menu .dropdown-item > a.dropdown-link::before {
                content: '';
                width: 16px;
                height: 16px;
                flex-shrink: 0;
                background: url(/img/icons/arrow2-right-16.svg) center / 16px no-repeat;
            }

        .main-menu .nav-intro {
            display: block;
            max-width: 278px;
            margin: 0;
            padding-top: 12px;
            font-size: var(--h6);
            line-height: 1.3;
            color: var(--color-gray70);
        }
}

/* Lift the header (and the menu panel inside it) above the page's sticky widgets */
body.desk-menu-open .sofia-header {
    z-index: 600;
}

@keyframes desk-menu-in {
    from {
        transform: translateX(40px);
        opacity: 0;
    }
}

/* ---------- Mobile header: same markup, desktop-only parts hidden (they live in the bottom nav / menu overlay) ---------- */
@media (max-width: 767.98px) {
    .topbar, .header-search, .header-actions {
        display: none;
    }

    .header-main {
        padding: 12px 16px;
    }

        .header-main .brand {
            gap: 16px;
        }

            .header-main .brand img {
                width: 56px;
                height: 65px;
                object-fit: contain;
            }

        .header-main .brand-name {
            font-size: var(--h5);
        }
}

/* ---------- Section heading ---------- */
.m-section-title {
    font-size: var(--h2);
    font-weight: 400;
    letter-spacing: -0.78px;
    text-align: center;
    margin: 0 0 24px;
    line-height: 1.2;
}

.section-title-lg {
    font-size: 52px;
    letter-spacing: -1.56px;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 32px;
    font-weight: 400;
}

/* ---------- Bottom nav ---------- */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 4px;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 0 15px rgba(0,0,0,0.15);
    z-index: 50;
}

    .bottom-nav a, .bottom-nav button {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        border: none;
        background: none;
        padding: 0;
        font-family: var(--font-family);
        cursor: pointer;
    }

    .bottom-nav img {
        width: 24px;
        height: 24px;
    }

    .bottom-nav span {
        font-size: var(--h8);
        color: var(--color-gray85);
    }

    .bottom-nav button.active span {
        color: var(--color-red3);
    }

    /* "Дейности" swaps to the red icon while its drill-down panels are open */
    .bottom-nav .icon-active,
    .bottom-nav button.active .icon-default {
        display: none;
    }

    .bottom-nav button.active .icon-active {
        display: block;
    }

/* Inside the overlay the tab bar is the last flex row, so panels never scroll under it */
.menu-overlay .bottom-nav {
    position: static;
    flex-shrink: 0;
}

/* ================= MOBILE NAV MENU (drill-down overlay) ================= */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-white);
    z-index: 200;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

    .menu-overlay.open {
        display: flex;
    }

.menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-gray15);
    background: var(--color-white);
    flex-shrink: 0;
}

    .menu-header .brand {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .menu-header img.logo {
        width: 56px;
        height: 65px;
    }

    .menu-header .brand span {
        font-size: var(--h5);
    }

        .menu-header .brand span strong {
            display: block;
            font-weight: 600;
        }

.menu-close {
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    padding: 0;
}

    .menu-close img {
        width: 100%;
        height: 100%;
    }

.panel-viewport {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.panel {
    position: absolute;
    inset: 0;
    background: var(--color-white);
    padding: 24px 16px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.28s ease;
}

    .panel.active {
        transform: translateX(0);
    }

.panel-title-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 32px;
}

    .panel-title-row button.back {
        border: none;
        background: none;
        padding: 4px 0 0;
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

        .panel-title-row button.back img {
            width: 100%;
            height: 100%;
            transform: rotate(180deg);
        }

    .panel-title-row h2 {
        font-size: var(--h4);
        font-weight: 600;
        letter-spacing: -0.4px;
        text-decoration: underline;
        margin: 0;
        line-height: 1.3;
    }

.menu-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.menu-link {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    text-align: left;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-family);
}

    .menu-link .label {
        flex: 1;
        font-size: var(--h5);
        text-decoration: underline;
        line-height: 1.3;
    }

    .menu-link .divider {
        width: 1px;
        align-self: stretch;
        background: var(--color-gray15);
        flex-shrink: 0;
    }

    .menu-link .chevron {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .menu-link:not(.has-target) {
        cursor: default;
    }

        .menu-link:not(.has-target) .chevron {
            opacity: 0.35;
        }

.menu-list.lvl1 .menu-link {
    height: 40px;
}

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--color-gray20);
    border-radius: var(--radius-xs);
    padding: 12px;
    margin-top: 8px;
    background: none;
    font-size: 16px;
    letter-spacing: 0.32px;
    text-decoration: underline;
}

    .lang-toggle img {
        width: 16px;
        height: 16px;
    }

/* ---------- Sticky accessibility widget ---------- */
.m-sticky-widget {
    position: fixed;
    right: 16px;
    bottom: 76px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 60;
}

    .m-sticky-widget button {
        width: 56px;
        height: 56px;
        border-radius: var(--radius-full);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .m-sticky-widget .accessibility {
        background: var(--color-blue-sub);
    }

    .m-sticky-widget .chat {
        background: var(--color-gray70);
    }

    .m-sticky-widget img {
        width: 32px;
        height: 32px;
    }

.sofia-emergency {
    position: relative;
    z-index: 25;
    background: var(--sofia-color-emergency);
    color: var(--sofia-color-gray-85);
    font-weight: 600;
    padding: 12px 0;
}