/* ============================================
   ДГ №10 "Карамфилче" - Design System
   Modern Kindergarten Website
   ============================================ */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  /* Primary palette - warm teal */
  --color-primary: #167272;
  --color-primary-dark: #0f5f5f;
  --color-primary-light: #E0F5F5;
  --color-primary-50: #F0FAFA;
  /* Фонът на активния елемент в основното меню (линкът заедно със
     стрелката му). Падащото меню е бяло - нарочно, не по недоглеждане. */
  --kg-nav-open-bg: #eef4e5;

  /* Accent - warm sunshine */
  --color-accent: #FFB347;
  --color-accent-dark: #E09A2F;
  --color-accent-light: #FFF3E0;

  /* Secondary accents for groups */
  --color-pink: #F48FB1;
  --color-purple: #CE93D8;
  --color-blue: #81D4FA;
  --color-green: #A5D6A7;
  --color-red: #EF9A9A;
  --color-orange: #FFCC80;
  --color-indigo: #9FA8DA;
  --color-lime: #C5E1A5;

  /* Neutrals */
  --color-bg: #FAFBFC;
  --color-bg-warm: #FFF9F0;
  --color-surface: #FFFFFF;
  --color-border: #E8ECF0;
  --color-text: #2D3748;
  --color-text-light: #64748B;
  --color-text-muted: #94A3B8;

  /* Feedback */
  --color-success: #48BB78;
  --color-info: #4299E1;
  --color-warning: #ECC94B;

  /* Typography */
  --font-heading: 'Nunito', 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', 'Segoe UI', sans-serif;

  /* Font sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Page-level vertical rhythm */
  --layout-page-header-y: clamp(2rem, 3vw, 2.5rem);
  --layout-section-y: clamp(2rem, 4vw, 3rem);
  --layout-section-y-compact: clamp(1.5rem, 3vw, 2rem);
  --layout-breadcrumb-y: 0.25rem;

  /* Border radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 10px 10px -5px rgba(0,0,0,0.03);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* Container */
  --container-max: 1400px;
  --container-narrow: 800px;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

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

.screen-reader-text:focus {
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  clip: auto;
  overflow: visible;
  white-space: normal;
  z-index: 1000;
  color: var(--color-text);
  background: #fff;
}

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

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-dark); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

/* --- Utility --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.doc-language-note {
  width: 100%;
  max-width: var(--container-narrow);
  margin: var(--space-4) auto 0;
  padding: 0 var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.section {
  padding: var(--layout-section-y) 0;
}

.section.section--compact {
  padding-block: var(--layout-section-y-compact);
}

.section.section--continuation {
  padding-top: 0;
}

.section--alt {
  background-color: var(--color-bg-warm);
}

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

.section-title {
  text-align: center;
  margin-bottom: var(--space-4);
}

.section-subtitle {
  text-align: center;
  color: var(--color-text-light);
  font-size: var(--text-lg);
  margin-bottom: var(--space-12);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent-dark); }
.text-muted { color: var(--color-text-light); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* --- Skip Link --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--color-primary);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  z-index: 1000;
  font-weight: 600;
}
.skip-link:focus {
  top: var(--space-4);
  color: white;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  line-height: 1.4;
}

.btn--primary {
  background: var(--color-primary);
  color: white;
}
.btn--primary:hover {
  background: var(--color-primary-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn--accent {
  background: var(--color-accent);
  color: var(--color-text);
}
.btn--accent:hover {
  background: var(--color-accent-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn--outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn--outline:hover {
  background: var(--color-primary);
  color: white;
}

.btn--white {
  background: white;
  color: var(--color-primary);
}
.btn--white:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  transform: translateY(-2px);
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
}

.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

/* --- Header / Navbar --- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}

.header.scrolled {
  box-shadow: var(--shadow-md);
}

.header__top {
  background: var(--color-primary);
  color: white;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
}

.header__top .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__top a {
  color: rgba(255,255,255,0.9);
}
.header__top a:hover {
  color: white;
}

.header__top-info {
  display: flex;
  gap: var(--space-6);
  align-items: center;
}

.header__top-info span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.header__main {
  padding: var(--space-3) 0;
}

.header__main .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.logo__icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.logo__text {
  display: flex;
  flex-direction: column;
}

.logo__name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.2;
}

.logo__sub {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Navigation */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav__link {
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  position: relative;
}

.nav__link:hover,
.nav__link--active {
  color: var(--color-primary);
  background: var(--color-primary-50);
}

/* Dropdown */
.nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 18px;
  block-size: 30px;
  /* -9px изяжда целия десен падинг на линка, за да залепне стрелката за него;
     margin-right отваря паузата към следващия линк. Съотношение ~1:5. */
  margin-left: -9px;
  margin-right: 8px;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--color-text);
  background: transparent;
  cursor: pointer;
}

.nav__submenu-icon {
  /* SVG, not the ▾ character: U+25BE is missing from Nunito, so a fallback font
     drew it - and each platform placed the glyph at a different height, which is
     why it could not be centred reliably. With an SVG the box IS the triangle. */
  display: block;
  width: 10px;
  height: 6px;
  transition: transform var(--transition-fast);
}

.nav__submenu-toggle[aria-expanded="true"] .nav__submenu-icon {
  transform: rotate(180deg);
}

.nav__submenu-toggle:hover,
.nav__submenu-toggle:focus-visible {
  color: var(--color-primary);
  background: var(--color-primary-50);
}

.nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-2);
  min-width: 220px;
  z-index: 50;
  border: 1px solid var(--color-border);
}

.nav__dropdown[data-open="true"] {
  display: block;
}

.nav__dropdown a {
  display: block;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}

.nav__dropdown a:hover {
  background: var(--color-primary-50);
  color: var(--color-primary);
}

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  color: var(--color-text);
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  margin: 5px 0;
  transition: var(--transition-fast);
  border-radius: 2px;
}

/* --- Hero Section --- */
.hero {
  position: relative;
  background: linear-gradient(135deg, #2BA5A5 0%, #1E8A8A 50%, #1a7a7a 100%);
  color: white;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: rgba(255,179,71,0.1);
  border-radius: 50%;
}

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
  align-items: center;
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.hero__content h1 {
  color: white;
  font-size: var(--text-5xl);
  margin-bottom: var(--space-4);
  line-height: 1.15;
}

.hero__content h1 span {
  color: var(--color-accent);
}

.hero__content p {
  font-size: var(--text-lg);
  opacity: 0.9;
  margin-bottom: var(--space-8);
  max-width: 480px;
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__illustration {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  background: rgba(255,255,255,0.1);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8rem;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* --- Stats Bar --- */
.stats-bar {
  background: white;
  margin-top: -40px;
  position: relative;
  z-index: 2;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-8) var(--space-10);
}

.stats-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  text-align: center;
}

.stats-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.stats-bar__icon {
  width: 48px;
  height: 48px;
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-1);
}

.stats-bar__number {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-primary);
}

.stats-bar__label {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

/* --- Card Component --- */
.card {
  background: white;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.card__image {
  aspect-ratio: 16/10;
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  position: relative;
  overflow: hidden;
}

.card__image--tall {
  aspect-ratio: 4/3;
}

.card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--color-accent);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.card__body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-3);
  line-height: 1.4;
}

.card__text {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: 1.7;
  flex: 1;
}

.card__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card__link {
  font-weight: 600;
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
}

/* --- Grid layouts --- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}

/* --- Values / Features --- */
.value-card {
  text-align: center;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: white;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.value-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.value-card__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto var(--space-5);
}

.value-card__icon--teal { background: var(--color-primary-light); }
.value-card__icon--orange { background: var(--color-accent-light); }
.value-card__icon--pink { background: #FDE7EF; }
.value-card__icon--blue { background: #E3F2FD; }

.value-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

.value-card p {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: 1.7;
}

/* --- Group Card (for groups overview) --- */
.group-card {
  background: white;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  position: relative;
}

.group-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.group-card__header {
  padding: var(--space-8) var(--space-6) var(--space-6);
  text-align: center;
  position: relative;
}

.group-card__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin: 0 auto var(--space-4);
  box-shadow: var(--shadow-md);
}

.group-card__name {
  font-size: var(--text-xl);
  font-weight: 800;
}

.group-card__motto {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  font-style: italic;
  padding: 0 var(--space-6) var(--space-6);
  line-height: 1.6;
  text-align: center;
}

.group-card__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

/* --- Team Section --- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-6);
}

.team-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.team-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.team-card__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

.team-card__name {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.team-card__role {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

/* --- Breadcrumb --- */
.breadcrumb {
  padding: var(--layout-breadcrumb-y) 0;
  font-size: var(--text-sm);
}

.breadcrumb__list {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  min-block-size: 44px;
  overflow-wrap: anywhere;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: '/';
  flex: 0 0 auto;
  margin: 0 var(--space-2);
  color: var(--color-text-light);
  align-self: flex-start;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
}

.breadcrumb__item a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

.breadcrumb__item--current {
  color: #475569;
}

.breadcrumb__item a,
.breadcrumb__item--current {
  min-inline-size: 44px;
}

.breadcrumb-bar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.breadcrumb-bar--warm {
  background: var(--color-bg-warm);
}

.page-header .breadcrumb a,
.page-header .breadcrumb [aria-current="page"] { color: #fff; }

/* --- Page Header (inner pages) --- */
.page-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  padding: var(--layout-page-header-y) 0;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
}

.page-header h1 {
  color: white;
  font-size: var(--text-4xl);
  margin-bottom: var(--space-3);
}

.page-header p {
  font-size: var(--text-lg);
  opacity: 0.85;
  max-width: 600px;
}

/* --- Contact Info --- */
.contact-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

.contact-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.contact-item__icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.contact-item__text h3,
.contact-item__text h4 {
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
}

.contact-item__text p {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

/* --- Map placeholder --- */
.map-placeholder {
  width: 100%;
  height: 350px;
  background: var(--color-primary-light);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--color-text-light);
  border: 2px dashed var(--color-border);
}

/* --- Contact Form --- */
.form-group {
  margin-bottom: var(--space-5);
}

.form-group label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast);
  background: white;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.form-privacy-note {
  margin: calc(var(--space-2) * -1) 0 var(--space-5);
  color: var(--color-text-light);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.form-notice {
  margin-bottom: var(--space-6);
  border: 2px solid;
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}

.form-notice p {
  margin: 0;
  font-weight: 600;
}

.form-notice--success {
  background: #f0fff4;
  border-color: var(--color-success);
  color: #276749;
}

.form-notice--error {
  background: #fff5f5;
  border-color: #fc8181;
  color: #9b2c2c;
}

/* --- Gallery --- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.gallery-item {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
}

.gallery-item:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
}

.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: var(--transition-base);
}

.gallery-item:hover::after {
  background: rgba(0,0,0,0.1);
}

/* --- Karamfilcheta: our pride --- */
.pride-page {
  --pride-ink: #25423e;
  --pride-teal: #2f9186;
  --pride-pink: #e98ca0;
  --pride-butter: #f3d779;
  --pride-leaf: #dfead6;
  --pride-paper: #fffdf7;
  overflow: clip;
  color: var(--pride-ink);
  background: var(--pride-paper);
}

.pride-hero {
  position: relative;
  isolation: isolate;
  min-height: 540px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(243, 215, 121, 0.36) 0 7%, transparent 7.2%),
    radial-gradient(circle at 93% 84%, rgba(233, 140, 160, 0.18) 0 13%, transparent 13.2%),
    linear-gradient(128deg, #eef5e9 0%, #fffaf0 52%, #f9eee9 100%);
}

.pride-hero::before,
.pride-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(47, 145, 134, 0.2);
  border-radius: 50%;
  pointer-events: none;
}

.pride-hero::before {
  width: 540px;
  height: 540px;
  top: -330px;
  left: 38%;
}

.pride-hero::after {
  width: 280px;
  height: 280px;
  right: -130px;
  bottom: -170px;
}

.pride-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
  padding-top: var(--layout-section-y);
  padding-bottom: var(--layout-section-y);
}

.pride-hero__content {
  position: relative;
  z-index: 2;
}

.pride-hero__content h1 {
  max-width: 660px;
  margin: 0;
  color: var(--pride-ink);
  font-size: clamp(3rem, 6vw, 5.7rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.pride-hero__intro {
  max-width: 590px;
  margin-top: var(--space-8);
  color: #50645f;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.8;
}

.pride-hero__intro > :last-child {
  margin-bottom: 0;
}

.pride-hero__flower {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 0 var(--space-8) 22px;
  border-radius: 50%;
  background: #fff4b8;
  box-shadow:
    0 -18px 0 5px var(--pride-pink),
    17px -5px 0 5px #f1a1af,
    11px 15px 0 5px #e77f95,
    -11px 15px 0 5px #f2a9b6,
    -17px -5px 0 5px #e98ca0;
}

.pride-collage {
  position: relative;
  min-height: 440px;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
}

.pride-collage__photo {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 8px solid rgba(255, 253, 247, 0.96);
  box-shadow: 0 24px 55px rgba(37, 66, 62, 0.18);
  animation: pride-collage-arrive 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

.pride-collage__photo--1 {
  z-index: 3;
  left: 0;
  bottom: 0;
  width: 64%;
  aspect-ratio: 1.02;
  border-radius: 47% 53% 42% 58% / 55% 38% 62% 45%;
}

.pride-collage__photo--2 {
  z-index: 2;
  top: 0;
  right: 0;
  width: 53%;
  aspect-ratio: 0.94;
  border-radius: 57% 43% 62% 38% / 42% 58% 42% 58%;
  animation-delay: 90ms;
}

.pride-collage__photo--3 {
  z-index: 4;
  right: 7%;
  bottom: 2%;
  width: 35%;
  aspect-ratio: 1;
  border-radius: 50%;
  animation-delay: 170ms;
}

.pride-collage__petal {
  position: absolute;
  z-index: 5;
  width: 68px;
  height: 31px;
  border-radius: 100% 0 100% 0;
  pointer-events: none;
}

.pride-collage__petal--one {
  top: 8%;
  left: 11%;
  background: var(--pride-butter);
  transform: rotate(-24deg);
}

.pride-collage__petal--two {
  right: -1%;
  bottom: 21%;
  background: #a9d7bd;
  transform: rotate(32deg) scale(0.78);
}

@keyframes pride-collage-arrive {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.pride-page + .pride-lightbox + .footer,
.pride-page ~ .footer {
  position: relative;
}

.pride-achievements {
  position: relative;
  padding-top: var(--layout-section-y);
  padding-bottom: var(--layout-section-y);
  background:
    linear-gradient(rgba(47, 145, 134, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 145, 134, 0.045) 1px, transparent 1px),
    #fffdf8;
  background-size: 28px 28px;
}

.pride-section-title {
  max-width: 760px;
  margin: 0 auto clamp(36px, 5vw, 64px);
  color: var(--pride-ink);
  font-size: clamp(2rem, 4.2vw, 3.7rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-align: center;
  text-wrap: balance;
}

.pride-section-title::after {
  content: '';
  display: block;
  width: 72px;
  height: 5px;
  margin: var(--space-5) auto 0;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--pride-teal), var(--pride-pink));
}

.pride-section-title--gallery::after {
  background: linear-gradient(90deg, var(--pride-butter), var(--pride-pink));
}

.pride-achievements__content > p:first-child {
  max-width: 700px;
  margin: 0 auto var(--space-10);
  text-align: center;
  color: #5d706c;
  font-size: var(--text-lg);
}

.pride-achievements__content > ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pride-achievement;
}

.pride-achievements__content > ul > li {
  position: relative;
  min-width: 0;
  min-height: 210px;
  padding: 76px var(--space-7, 1.75rem) var(--space-8);
  overflow: hidden;
  border: 1px solid #e9e6dc;
  border-radius: 26px 26px 26px 8px;
  color: #5b6c68;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 36px rgba(55, 78, 71, 0.08);
  counter-increment: pride-achievement;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms ease;
}

.pride-achievements__content > ul > li::before {
  content: counter(pride-achievement, decimal-leading-zero);
  position: absolute;
  top: 22px;
  left: 26px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50% 50% 50% 12px;
  color: #1e6c64;
  background: #dff2eb;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.pride-achievements__content > ul > li::after {
  content: '';
  position: absolute;
  width: 92px;
  height: 92px;
  right: -50px;
  bottom: -51px;
  border: 18px solid rgba(47, 145, 134, 0.07);
  border-radius: 50%;
}

.pride-achievements__content > ul > li:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 46px rgba(55, 78, 71, 0.13);
}

.pride-achievements__content > ul > li:nth-child(4n + 2)::before {
  color: #9b5365;
  background: #fbe4e9;
}

.pride-achievements__content > ul > li:nth-child(4n + 3)::before {
  color: #8a6825;
  background: #fff0ba;
}

.pride-achievements__content > ul > li:nth-child(4n)::before {
  color: #4a6951;
  background: #e6efd8;
}

.pride-achievements__content strong {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--pride-ink);
  font-family: var(--font-heading);
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  line-height: 1.28;
}

.pride-gallery-section {
  padding-top: var(--layout-section-y);
  padding-bottom: var(--layout-section-y);
  background: #edf4e8;
}

.pride-gallery {
  column-count: 3;
  column-gap: var(--space-5);
}

.pride-gallery__item {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--space-5);
  overflow: hidden;
  break-inside: avoid;
  border: 6px solid rgba(255, 255, 255, 0.92);
  border-radius: 28px 28px 28px 8px;
  color: white;
  background: #dbe9da;
  box-shadow: 0 12px 30px rgba(45, 75, 66, 0.11);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms ease;
}

.pride-gallery__item::before {
  content: '\2197';
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 50%;
  color: white;
  background: rgba(28, 60, 54, 0.72);
  box-shadow: 0 6px 18px rgba(22, 46, 42, 0.2);
  opacity: 0;
  transform: scale(0.84);
  transition: opacity 180ms ease, transform 180ms ease;
}

.pride-gallery__item img {
  width: 100%;
  height: auto;
}

.pride-gallery__item:hover,
.pride-gallery__item:focus-visible {
  color: white;
  transform: translateY(-5px);
  box-shadow: 0 20px 42px rgba(45, 75, 66, 0.18);
}

.pride-gallery__item:hover::before,
.pride-gallery__item:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.pride-gallery__item:focus-visible {
  outline: 4px solid #245f59;
  outline-offset: 4px;
}

.pride-gallery__caption {
  position: absolute;
  inset: auto 0 0;
  padding: 54px var(--space-5) var(--space-5);
  color: white;
  background: linear-gradient(transparent, rgba(20, 45, 41, 0.82));
  font-size: var(--text-sm);
  font-weight: 700;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.pride-gallery__item:hover .pride-gallery__caption,
.pride-gallery__item:focus-visible .pride-gallery__caption {
  opacity: 1;
  transform: translateY(0);
}

body.pride-lightbox-open {
  overflow: hidden;
}

.pride-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  gap: clamp(8px, 2vw, 24px);
  padding: clamp(18px, 4vw, 48px);
  color: white;
  background: rgba(18, 37, 34, 0.94);
  backdrop-filter: blur(12px);
}

.pride-lightbox[hidden] {
  display: none;
}

.pride-lightbox__figure {
  width: fit-content;
  max-width: 100%;
  justify-self: center;
  min-width: 0;
  margin: 0;
}

.pride-lightbox__image {
  width: auto;
  max-width: 100%;
  max-height: min(76vh, 880px);
  margin: 0 auto;
  border-radius: 24px 24px 24px 8px;
  object-fit: contain;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.4);
}

.pride-lightbox__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: 880px;
  margin: var(--space-4) auto 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-sm);
}

.pride-lightbox__counter {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.pride-lightbox__close,
.pride-lightbox__nav {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  font-size: 1.45rem;
  transition: transform 180ms ease, background-color 180ms ease;
}

.pride-lightbox__close {
  position: absolute;
  top: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 32px);
  z-index: 2;
}

.pride-lightbox__close:hover,
.pride-lightbox__nav:hover,
.pride-lightbox__close:focus-visible,
.pride-lightbox__nav:focus-visible {
  background: var(--pride-teal, #2f9186);
  transform: scale(1.08);
}

.pride-lightbox__close:focus-visible,
.pride-lightbox__nav:focus-visible {
  outline: 3px solid white;
  outline-offset: 3px;
}

@media (max-width: 960px) {
  .pride-hero__layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.1fr);
  }

  .pride-collage {
    min-height: 370px;
  }

  .pride-achievements__content > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .pride-hero {
    min-height: auto;
  }

  .pride-hero__layout {
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--layout-section-y);
    padding-bottom: var(--layout-section-y);
  }

  .pride-hero__content h1 {
    font-size: clamp(2.65rem, 13vw, 4.3rem);
  }

  .pride-collage {
    min-height: 390px;
    max-width: 520px;
  }

  .pride-gallery {
    column-count: 2;
    column-gap: var(--space-3);
  }

  .pride-gallery__item {
    margin-bottom: var(--space-3);
    border-width: 4px;
    border-radius: 20px 20px 20px 6px;
  }

  .pride-lightbox {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    padding: 72px 10px 22px;
  }

  .pride-lightbox__close,
  .pride-lightbox__nav {
    width: 46px;
    height: 46px;
  }
}

@media (max-width: 520px) {
  .pride-achievements__content > ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .pride-achievements__content > ul > li {
    min-height: 0;
    padding: 72px var(--space-6) var(--space-7, 1.75rem);
  }

  .pride-collage {
    min-height: 330px;
  }
}

@media (max-width: 420px) {
  .pride-gallery {
    column-count: 1;
  }

  .pride-lightbox {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 4px;
  }
}

@media (hover: none) {
  .pride-gallery__caption {
    opacity: 1;
    transform: translateY(0);
  }

  .pride-gallery__item::before {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Timeline (for enrollment) --- */
.timeline {
  position: relative;
  padding-left: var(--space-10);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-primary-light);
  border-radius: 3px;
}

.timeline__item {
  position: relative;
  margin-bottom: var(--space-8);
  padding: var(--space-6);
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-10) + 8px);
  top: var(--space-8);
  width: 18px;
  height: 18px;
  background: var(--color-primary);
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: var(--shadow-sm);
}

.timeline__date {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.timeline__title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.timeline__text {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: 1.7;
}

/* --- Tabs (for group pages) --- */
.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-8);
}

.tab {
  flex: 1 1 0%;
  min-width: 0;
  text-align: center;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-light);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-fast);
}

.tab:hover {
  color: var(--color-primary);
}

.tab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.tab-panel {
  display: none;
}

.tab-panel--active {
  display: block;
}

/* --- Accordion (FAQ) --- */
.accordion {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.accordion__item {
  border-bottom: 1px solid var(--color-border);
}

.accordion__item:last-child {
  border-bottom: none;
}

.accordion__trigger {
  width: 100%;
  padding: var(--space-5) var(--space-6);
  background: white;
  border: none;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background var(--transition-fast);
}

.accordion__trigger:hover {
  background: var(--color-primary-50);
}

.accordion__trigger::after {
  content: '+';
  font-size: var(--text-xl);
  color: var(--color-primary);
  transition: transform var(--transition-fast);
}

.accordion__trigger[aria-expanded="true"]::after {
  content: '-';
}

.accordion__panel {
  padding: 0 var(--space-6) var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: 1.7;
  background: white;
}

/* --- CTA Banner --- */
.cta-banner {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  border-radius: var(--radius-2xl);
  padding: var(--space-12) var(--space-10);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
}

.cta-banner h2 {
  color: white;
  margin-bottom: var(--space-4);
}

.cta-banner p {
  opacity: 0.9;
  margin-bottom: var(--space-8);
  font-size: var(--text-lg);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Footer --- */
.footer {
  background: var(--color-text);
  color: rgba(255,255,255,0.8);
  padding: var(--space-16) 0 0;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

.footer__brand p {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.7;
  opacity: 0.7;
}

.footer__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  color: white;
  margin-bottom: var(--space-5);
}

.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__links a {
  color: rgba(255,255,255,0.65);
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}

.footer__links a:hover {
  color: white;
}

.footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.footer__social a {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  transition: all var(--transition-fast);
  font-size: 1.1rem;
}

.footer__social a:hover {
  background: var(--color-primary);
  color: white;
}

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: var(--space-6) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  opacity: 0.5;
}

.footer__bottom a {
  color: rgba(255,255,255,0.7);
}

/* Language dropdown */
.lang-switcher { position: relative; flex-shrink: 0; }
.lang-switcher > summary {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 58px; min-height: 44px; padding: 8px;
  border-radius: var(--radius-sm); cursor: pointer; list-style: none;
  color: var(--color-text); background: var(--color-primary-50);
}
.lang-switcher > summary::-webkit-details-marker { display: none; }
.lang-switcher > summary:focus-visible, .lang-switcher__list a:focus-visible {
  outline: 2px solid var(--color-primary); outline-offset: 3px;
}
.lang-switcher__flag { width: 27px; height: 18px; flex-shrink: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.lang-switcher__chevron { width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.lang-switcher[open] .lang-switcher__chevron { transform: rotate(225deg); }
.lang-switcher__list {
  position: absolute; z-index: 110; right: 0; top: calc(100% + 6px);
  min-width: 170px; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--color-primary-50);
  border-radius: var(--radius-md); box-shadow: 0 8px 25px rgba(0,0,0,.12);
}
.lang-switcher__list li a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px;
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
  color: var(--color-text); text-decoration: none;
}
.lang-switcher__list li a:hover, .lang-switcher__list .current-lang a {
  background: var(--color-primary-50); color: var(--color-primary);
}
@media (max-width: 1100px) {
  .lang-switcher__list { position: static; margin-top: 6px; width: 100%; box-shadow: none; }
}
.trp-floater-ls-wrap, .trp-language-switcher-container,
.trp-language-switcher.trp-floating-switcher, div[class*="trp-floater"] { display: none !important; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero__content p { margin-left: auto; margin-right: auto; }
  .hero__actions { justify-content: center; }
  .hero__visual { display: none; }
  .stats-bar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  :root {
    --text-5xl: 2.25rem;
    --text-4xl: 1.875rem;
    --text-3xl: 1.5rem;
  }

  .nav { display: none; }
  .nav-toggle { display: block; }
  .nav--open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    padding: var(--space-4);
    box-shadow: var(--shadow-lg);
    border-top: 1px solid var(--color-border);
  }

  .header__top-info { display: none; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .stats-bar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-bar { margin: 0 var(--space-4); margin-top: -30px; padding: var(--space-6); }
  .contact-strip { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero { min-height: 400px; }

  .nav-toggle, .lang-btn, .announcement__close,
  .nav__submenu-toggle, .nav__link, .btn--sm {
    min-inline-size: 44px;
    min-block-size: 44px;
  }

  .nav__item {
    flex-wrap: wrap;
    width: 100%;
  }

  .nav__dropdown {
    position: static;
    flex-basis: 100%;
    width: 100%;
  }

}

@media (max-width: 480px) {
  .stats-bar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .hero__actions { flex-direction: column; align-items: center; }
}

/* --- Announcement bar --- */
.announcement {
  background: var(--color-accent);
  color: var(--color-text);
  text-align: center;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
}

.announcement a {
  color: var(--color-text);
  text-decoration: underline;
}

/* --- News list (for news page) --- */
.news-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.news-row {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--space-6);
  background: white;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.news-row:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.news-row__image {
  aspect-ratio: 16/10;
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.news-row__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- Info box --- */
.info-box {
  background: var(--color-primary-50);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin: 0;
}

.info-box--warning {
  background: var(--color-accent-light);
  border-left-color: var(--color-accent);
}

.info-box h4,
.info-box h3 {
  margin-bottom: var(--space-2);
}

.info-box p {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

/* --- Tag / Chip --- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* --- Schedule table --- */
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.schedule-table th {
  background: var(--color-primary);
  color: white;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
}

.schedule-table td {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.schedule-table tr:last-child td {
  border-bottom: none;
}

.schedule-table tr:hover td {
  background: var(--color-primary-50);
}

/* --- Documents page --- */
.docs-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.doc-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.doc-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.doc-item__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.doc-item__info {
  flex: 1;
  min-width: 0;
}

.doc-item__name {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.doc-item__name a {
  color: var(--color-text);
}
.doc-item__name a:hover {
  color: var(--color-primary);
}

.doc-item__desc {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

@media (max-width: 768px) {
  .doc-item {
    flex-wrap: wrap;
  }
  .doc-item .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- Homepage extras (from mockup) --- */

/* Announcement close btn */
.announcement { position: relative; }
.announcement__close {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0.7;
  line-height: 1;
  color: inherit;
}
.announcement__close:hover { opacity: 1; }

/* Outline-white btn (hero) */
.btn--outline-white {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.75);
  color: white;
}
.btn--outline-white:hover {
  background: rgba(255,255,255,0.15);
  border-color: white;
  color: white;
  transform: translateY(-2px);
}

/* Stats bar wrapper */
.stats-bar-wrapper {
  position: relative;
  z-index: 10;
}

/* Groups grid */
.groups-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

/* Group card color variants */
.group-card__icon--dandelion { background: linear-gradient(135deg, #FFF9C4, #FFF176); }
.group-card__icon--clover    { background: linear-gradient(135deg, #C8E6C9, #A5D6A7); }
.group-card__icon--snowdrop  { background: linear-gradient(135deg, #E3F2FD, #BBDEFB); }
.group-card__icon--primrose  { background: linear-gradient(135deg, #FCE4EC, #F8BBD0); }
.group-card__icon--tulip     { background: linear-gradient(135deg, #FFCCBC, #FFAB91); }
.group-card__icon--lilac     { background: linear-gradient(135deg, #EDE7F6, #D1C4E9); }
.group-card__icon--rose      { background: linear-gradient(135deg, #FCE4EC, #F48FB1); }
.group-card__icon--hyacinth  { background: linear-gradient(135deg, #E8EAF6, #9FA8DA); }

.group-card__header--dandelion { background: linear-gradient(160deg, #FFFDE7 0%, #FFF9C4 100%); }
.group-card__header--clover    { background: linear-gradient(160deg, #F1F8E9 0%, #DCEDC8 100%); }
.group-card__header--snowdrop  { background: linear-gradient(160deg, #E3F2FD 0%, #BBDEFB 100%); }
.group-card__header--primrose  { background: linear-gradient(160deg, #FCE4EC 0%, #F8BBD0 100%); }
.group-card__header--tulip     { background: linear-gradient(160deg, #FFF3E0 0%, #FFCCBC 100%); }
.group-card__header--lilac     { background: linear-gradient(160deg, #F3E5F5 0%, #E1BEE7 100%); }
.group-card__header--rose      { background: linear-gradient(160deg, #FCE4EC 0%, #F8BBD0 100%); }
.group-card__header--hyacinth  { background: linear-gradient(160deg, #E8EAF6 0%, #C5CAE9 100%); }

/* Groups CTA */
.groups-cta { text-align: center; }

/* News grid */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

/* CTA section */
.cta-section {
  padding: var(--layout-section-y) 0;
}

/* Contact section */
.contact-section {
  padding: var(--layout-section-y) 0;
  background: white;
}
.contact-strip-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}

/* Footer contact list */
.footer__contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.footer__contact-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
}
.footer__contact-list li span.ico {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Stats divider */
.stats-bar__item + .stats-bar__item {
  border-left: 1px solid var(--color-border);
}

/* Values intro */
.values-intro {
  max-width: 640px;
  margin: 0 auto var(--space-12);
  text-align: center;
  color: var(--color-text-light);
  font-size: var(--text-lg);
}

/* Hero badge */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-5);
  backdrop-filter: blur(4px);
}

/* CTA banner extras */
.cta-banner__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}
.cta-banner__date {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
  opacity: 0.95;
}

/* Homepage responsive extras */
@media (max-width: 1024px) {
  .groups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-strip-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .groups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .contact-strip-4 { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .stats-bar__item + .stats-bar__item { border-left: none; }
}
@media (max-width: 480px) {
  .groups-grid { grid-template-columns: 1fr; }
}

/* --- Homepage 2026 visual refresh --- */
.home {
  background: #f6f6ed;
}

.home .announcement,
.home .header__top {
  display: none;
}

.header {
  background: rgba(255, 253, 248, 0.98);
  border-bottom: 1px solid #ece9df;
  box-shadow: none;
}

.header.scrolled {
  box-shadow: 0 8px 24px rgba(55, 72, 68, 0.08);
}

.header__main {
  padding: 10px 0;
}

.logo {
  gap: 10px;
  flex: 0 0 auto;
}

.logo__mark {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex: 0 0 auto;
}

.logo__name {
  color: #27302e;
  font-size: 1.16rem;
  line-height: 1.05;
}

.logo__sub {
  color: #bc6f7d;
  font-size: 0.68rem;
  margin-top: 4px;
}

.nav {
  gap: 0;
}

.nav__link {
  padding: 9px 9px;
  font-size: 0.92rem;
  color: #27302e;
}

.nav__link:hover,
.nav__link--active {
  color: #246f67;
  background: #eef4e5;
}

.nav > .btn--primary {
  background: #2f9b8f;
  border-color: #2f9b8f;
  margin-left: 6px !important;
  padding: 8px 14px;
  font-size: 0.76rem;
  white-space: nowrap;
}

.nav > .btn--primary:hover {
  background: #237e74;
  border-color: #237e74;
}

.home .hero {
  min-height: 520px;
  color: #42504d;
  background: #edf4e9;
  border-bottom: 1px solid #d8e5d5;
  overflow: hidden;
}

.home .hero::before,
.home .hero::after {
  display: none;
}

.home .hero .container {
  grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
  gap: 42px;
  padding-top: var(--layout-section-y);
  padding-bottom: var(--layout-section-y);
}

.home .hero__content {
  padding-left: 8px;
}

.home .hero__badge {
  color: #51605d;
  background: #fbf5e8;
  border: 1px solid #f4ead5;
  backdrop-filter: none;
  padding: 7px 15px;
  font-size: 0.78rem;
  margin-bottom: 24px;
}

.home .hero__badge .dashicons {
  color: #e68e9d;
  font-size: 16px;
  width: 16px;
  height: 16px;
}

.home .hero__content h1 {
  max-width: 470px;
  color: #23897e;
  font-size: clamp(2.65rem, 4.2vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin-bottom: 22px;
}

.home .hero__content h1 span {
  color: #ed91a0;
}

.home .hero__content p {
  color: #53615f;
  opacity: 1;
  font-size: 1rem;
  line-height: 1.8;
  max-width: 510px;
  margin-bottom: 27px;
}

.home .hero__actions {
  gap: 14px;
}

.home .hero .btn {
  padding: 12px 23px;
  font-size: 0.92rem;
}

/* Без повдигане при ховър - смяната на цвета е достатъчна обратна връзка. */
.home .hero .btn:hover {
  transform: none;
}

.home .hero .btn--accent {
  color: #fff;
  background: #2f9b8f;
  border-color: #2f9b8f;
  box-shadow: 0 10px 20px rgba(47, 155, 143, 0.16);
}

/* При ховър двата бутона в hero-а си разменят вида: пълният става светъл
   като съседа си, а очертаният се запълва. Предишният вариант само
   потъмняваше зеленото с един тон и на практика не си личеше. */
.home .hero .btn--accent:hover {
  color: #326f68;
  background: #fffdf8;
  border-color: #65aaa2;
  box-shadow: none;
}

.home .hero .btn--outline-white {
  color: #326f68;
  background: #fffdf8;
  border-color: #65aaa2;
}

.home .hero .btn--outline-white:hover {
  color: #fff;
  background: #2f9b8f;
  border-color: #2f9b8f;
}

.btn__flower {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.home .hero__visual {
  position: relative;
  justify-content: flex-end;
}

.home .hero__illustration {
  width: 100%;
  max-width: 610px;
  aspect-ratio: 1.28 / 1;
  border-radius: 44% 56% 52% 48% / 33% 29% 71% 67%;
  background: #edf5eb;
  box-shadow: 0 24px 50px rgba(60, 89, 78, 0.13);
  animation: none;
  font-size: 0;
}

.home .hero__illustration--img {
  object-fit: cover;
  object-position: 49% 48%;
}

.decorative-foliage {
  position: absolute;
  z-index: 1;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.decorative-foliage--hero {
  left: -28px;
  bottom: 4px;
  width: 118px;
  height: 118px;
  transform: rotate(-22deg);
  opacity: 0.82;
}

.home .stats-bar-wrapper {
  margin-top: -36px;
  padding-bottom: 10px;
  background: transparent;
}

.home .stats-bar {
  margin-top: 0;
  padding: 20px 34px;
  border: 1px solid rgba(232, 228, 216, 0.9);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(77, 89, 82, 0.11);
}

.home .stats-bar__grid {
  gap: 0;
}

.home .stats-bar__item {
  gap: 2px;
  padding: 0 20px;
}

.home .stats-bar__icon {
  width: 47px;
  height: 47px;
  margin-bottom: 4px;
  color: #d9818f;
  background: #fbf2df;
  border-radius: 50%;
}

.home .stats-bar__item:nth-child(2) .stats-bar__icon { color: #666b6a; background: #f7efd9; }
.home .stats-bar__item:nth-child(3) .stats-bar__icon { color: #c87d8b; background: #f3f7e8; }
.home .stats-bar__item:nth-child(4) .stats-bar__icon { color: #d39735; background: #fbf0dc; }

.home .stats-bar__icon .dashicons {
  width: 25px;
  height: 25px;
  font-size: 25px;
}

.home .stats-bar__number {
  color: #24887e;
  font-size: 1.55rem;
  line-height: 1.15;
}

.home .stats-bar__label {
  color: #64706e;
  font-size: 0.78rem;
}

.home #about.section--alt {
  position: relative;
  overflow: hidden;
  padding: var(--layout-section-y) 0;
  background: #fffaf0;
}

.home #about > .container {
  position: relative;
  z-index: 1;
}

.decorative-foliage--groups {
  right: -82px;
  bottom: -54px;
  width: 160px;
  height: 160px;
  transform: rotate(-14deg);
  opacity: 0.72;
}

.home #about .section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #263431;
  font-size: 1.65rem;
  margin-bottom: 8px;
}

.section-title__flower {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.home .values-intro {
  max-width: 650px;
  color: #6a7472;
  font-size: 0.89rem;
  line-height: 1.65;
  margin-bottom: 26px;
}

.home #about .grid-4 {
  gap: 18px;
}

.home .value-card {
  min-height: 244px;
  padding: 25px 22px;
  border: 1px solid #eeeae1;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(70, 82, 76, 0.06);
}

.home .value-card__icon {
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 50%;
}

.home .value-card__icon .dashicons {
  width: 30px;
  height: 30px;
  font-size: 30px;
  color: #408f86;
}

.home .value-card__icon--orange .dashicons { color: #ef8a76; }
.home .value-card__icon--pink .dashicons { color: #d4788a; }
.home .value-card__icon--blue .dashicons { color: #4a94b1; }

.home .value-card h3 {
  color: #2f3c39;
  font-size: 1rem;
  margin-bottom: 10px;
}

.home .value-card p {
  color: #65716f;
  font-size: 0.82rem;
  line-height: 1.65;
}

@media (max-width: 1100px) {
  .nav { display: none; }
  .nav-toggle { display: block; }
  .nav--open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 16px;
    background: #fffdf8;
    border-top: 1px solid #ece9df;
    box-shadow: 0 16px 30px rgba(55, 72, 68, 0.12);
  }

  .home .hero .container {
    grid-template-columns: minmax(0, 0.95fr) minmax(400px, 1.05fr);
    gap: 28px;
  }
}

@media (max-width: 768px) {
  .header__main { padding: 8px 0; }
  .logo__mark { width: 40px; height: 40px; }
  .logo__name { font-size: 1.05rem; }

  .home .hero {
    min-height: auto;
  }

  .home .hero .container {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: var(--layout-section-y);
    padding-bottom: var(--layout-section-y);
    text-align: left;
  }

  .home .hero__content { padding-left: 0; }
  .home .hero__content p { margin-left: 0; margin-right: 0; }
  .home .hero__actions { justify-content: flex-start; }
  .home .hero__visual { display: flex; justify-content: center; }
  .home .hero__illustration { max-width: 560px; }
  .decorative-foliage--hero { left: 2%; bottom: -8px; width: 96px; height: 96px; }
  .decorative-foliage--groups { right: -44px; opacity: 0.5; }

  .home .stats-bar {
    margin: 0 16px;
    padding: 22px 14px;
  }

  .home .stats-bar__grid { gap: 22px 0; }
  .home .stats-bar__item { padding: 0 10px; }
  .home .stats-bar__item:nth-child(odd) { border-right: 1px solid #ece9df; }
  .home .stats-bar__item + .stats-bar__item { border-left: 0; }
  .home #about .grid-4,
  .gallery-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
  }

  .news-row__image-link {
    width: 100% !important;
  }
}

@media (max-width: 520px) {
  .home .hero__content h1 { font-size: 2.6rem; }
  .home .hero__actions { align-items: stretch; }
  .home .hero .btn { justify-content: center; width: 100%; }
  .home .stats-bar__number { font-size: 1.25rem; }
}

/* --- Mobile navigation and page-path refinement --- */
.nav-toggle {
  position: relative;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-md);
}

.nav-toggle:focus-visible {
  outline: 3px solid rgba(22, 114, 114, 0.35);
  outline-offset: 2px;
}

.nav-toggle .nav-toggle__line {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  margin: 0;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 240ms ease, opacity 180ms ease;
}

.nav-toggle__line:nth-child(1) { top: 14px; }
.nav-toggle__line:nth-child(2) { top: 21px; }
.nav-toggle__line:nth-child(3) { top: 28px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

html.nav-is-open,
body.nav-is-open {
  overscroll-behavior: none;
}

@media (max-width: 1100px) {
  .nav {
    display: flex;
    visibility: hidden;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    max-block-size: 0;
    overflow: hidden;
    padding: 0 var(--space-4);
    background: #fffdf8;
    border-top: 1px solid transparent;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
  }

  .nav--open {
    visibility: visible;
    max-block-size: var(--kg-mobile-nav-max-height, calc(100dvh - 72px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-3) var(--space-4) var(--space-5);
    border-top-color: #ece9df;
    box-shadow: 0 16px 30px rgba(55, 72, 68, 0.12);
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s;
  }

  .nav > .nav__link,
  .nav__item > .nav__link,
  .nav > .btn {
    width: 100%;
    min-width: 0;
    min-block-size: 44px;
    justify-content: flex-start;
    margin-left: 0 !important;
    padding: var(--space-2) var(--space-3);
    text-align: left;
  }

  .nav__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    width: 100%;
  }

  .nav__submenu-toggle {
    grid-column: 2;
    inline-size: 44px;
    block-size: 44px;
    min-inline-size: 44px;
    min-block-size: 44px;
    margin-left: 0;
  }

  .nav__dropdown {
    grid-column: 1 / -1;
    position: static;
    width: 100%;
    min-width: 0;
    margin: var(--space-1) 0 var(--space-2);
    padding: var(--space-1);
    box-shadow: var(--shadow-md);
  }

  .nav__dropdown a {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    padding: var(--space-2) var(--space-3);
  }

  .nav > .btn--primary {
    margin-top: var(--space-2);
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .header__admission-link,
  .announcement a,
  .archive-filter .tag {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }

  .archive-filter .tag {
    padding: var(--space-2) var(--space-3);
  }

  .page-header h1 {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px) {
  .page-header--single {
    padding: var(--layout-page-header-y) 0;
  }

  .page-header--single h1 {
    font-size: clamp(1.5rem, 7.5vw, 1.875rem);
    line-height: 1.18;
    margin-bottom: var(--space-2);
  }

  .page-header--single .page-header__meta {
    margin-top: var(--space-2) !important;
    line-height: 1.5;
  }

  .breadcrumb {
    padding: var(--layout-breadcrumb-y) 0;
  }

  .breadcrumb__list {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .breadcrumb__item {
    flex: 0 0 auto;
  }

  .breadcrumb__item--current {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .nav,
  .nav-toggle .nav-toggle__line,
  .nav__submenu-icon,
  .pride-collage__photo,
  .pride-achievements__content > ul > li,
  .pride-gallery__item,
  .pride-gallery__item img,
  .pride-gallery__caption,
  .pride-lightbox__close,
  .pride-lightbox__nav {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print */
@media print {
  .header, .footer, .cta-banner { display: none; }
  .section { padding: var(--space-4) 0; }
  body { color: #000; background: #fff; }
}

/* =========================================================================
   Обръщение към родителите (начална страница)
   ========================================================================= */

.letter {
  background: var(--color-bg-warm);
}

.letter__card {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 56px) clamp(30px, 4vw, 52px);
  background: var(--color-surface);
  border: 1px solid rgba(232, 228, 216, 0.9);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(77, 89, 82, 0.09);
  text-align: center;
}

.letter__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-full);
  background: #fdeef1;
  color: #e68e9d;
}

.letter__mark .dashicons {
  width: 26px;
  height: 26px;
  font-size: 26px;
}

.letter__title {
  margin-bottom: var(--space-6);
  color: #23897e;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  letter-spacing: -0.02em;
}

.letter__body {
  text-align: left;
  color: #53615f;
  font-size: 1.02rem;
  line-height: 1.85;
}

.letter__body p + p {
  margin-top: var(--space-5);
}

@media (max-width: 640px) {
  .letter__body {
    font-size: 0.97rem;
    line-height: 1.8;
  }
}

/* Декорация от двете страни на обръщението */
.letter {
  position: relative;
  overflow: hidden;
}

/* Едно листо, легнало върху зелената форма в долния десен ъгъл. */
.decorative-foliage--letter-leaf {
  right: 96px;
  bottom: 26px;
  width: 170px;
  height: 170px;
  transform: rotate(-12deg);
  opacity: 0.85;
  z-index: 1;
}

@media (max-width: 900px) {
  .decorative-foliage--letter-leaf {
    right: 40px;
    bottom: 14px;
    width: 128px;
    height: 128px;
  }
}

@media (max-width: 640px) {
  .decorative-foliage--letter-leaf {
    display: none;
  }
}

/* Нарисувани иконки на групи (кокиче) - заемат мястото на емоджито */
.kg-flower {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.16em;
  overflow: visible;
}

.footer__links .kg-flower,
.group-emoji-badge .kg-flower {
  vertical-align: -0.2em;
}

.kg-flower--compact {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.26em;
}


/* Котва за декорацията в „Нашите групи" - .section сама по себе си няма
   position, а без нея листото би се закачило за най-близкия друг предшественик. */
#grupi {
  position: relative;
  overflow: hidden;
}

/* =========================================================================
   Основно меню: стрелката към своя линк + фон върху целия елемент
   ========================================================================= */

/* Кутията на стрелката вече е центрирана спрямо линка, но самият триъгълник
   се рисува 3px под оптическата среда на буквите. Коригира се с top, а не с
   transform, за да не се бие с rotate(180deg) при отворено подменю. */
/* Само елементите с подменю имат обвивка .nav__item - плоските линкове са
   директни деца на .nav и запазват собствения си фон. */
.nav__item {
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.nav__item:hover,
.nav__item:focus-within,
.nav__item:has(.nav__link--active) {
  background: var(--kg-nav-open-bg);
}

.nav__item:hover > .nav__link,
.nav__item:focus-within > .nav__link,
.nav__item > .nav__link--active {
  color: #246f67;
}

/* Без това се получава фон във фона - вътрешният пил изрязва стрелката. */
.nav__item > .nav__link:hover,
.nav__item > .nav__link--active,
.nav__item > .nav__submenu-toggle:hover,
.nav__item > .nav__submenu-toggle:focus-visible {
  background: transparent;
}

/* Паузата към следващия линк вече идва от ръба на фона, не от бутона. */
.nav__item > .nav__submenu-toggle {
  margin-right: 3px;
}

/* Декорацията в „Нашите групи": вътре в границите, не увиснала отвън.
   Котвата е самият .container, за да съвпада с десния ръб на картите,
   а не с ръба на екрана. */
#grupi > .container {
  position: relative;
}

.decorative-foliage--groups {
  right: -10px;
  bottom: -4px;
  width: 124px;
  height: 124px;
  transform: rotate(-12deg);
  opacity: 0.5;
}

@media (max-width: 900px) {
  .decorative-foliage--groups {
    width: 92px;
    height: 92px;
    right: 4px;
    opacity: 0.38;
  }
}

@media (max-width: 560px) {
  .decorative-foliage--groups {
    display: none;
  }
}

/* =========================================================================
   „Уважаеми родители": топъл фон, вълна отгоре, мека зелена форма долу вдясно
   Цветовете са взети от референтната снимка (крем #FFF8EA, зелено #C6E4C8).
   ========================================================================= */

.letter {
  background: #fff8ea;
  padding-block: var(--layout-section-y);
}

/* Вълната е нарисувана в цвета на това, което стои НАД секцията, и покрива
   горния ѝ ръб - така преходът изглежда изрязан, а не залепен. */
.letter::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  right: -1px;
  height: 78px;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 78' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v36c-190 36-330-6-520 11s-360 33-560 16S130 22 0 42Z' fill='%23fffdf4'/%3E%3Cpath d='M0 0h1440v22c-190 36-330-6-520 11s-360 33-560 16S130 8 0 28Z' fill='%23edf4e9'/%3E%3C/svg%3E") no-repeat top center / 100% 100%;
  pointer-events: none;
}

/* Меката зелена форма в долния десен ъгъл. overflow:hidden на .letter я реже
   по ръба на секцията, затова изглежда като част от фона, а не като лепенка. */
.letter::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(460px, 42vw);
  height: 250px;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 460 250' preserveAspectRatio='none'%3E%3Cpath d='M460 250H0c60-34 96-96 168-132S318 78 396 40c26-13 47-27 64-40v250Z' fill='%23c6e4c8'/%3E%3C/svg%3E") no-repeat right bottom / 100% 100%;
  pointer-events: none;
}

/* Картата и декорациите остават над фоновите форми. */
.letter .container,
.letter__card {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .letter::after {
    width: 78vw;
    height: 150px;
  }
}

/* Лентата с фактите продължава фона на интрото: без разделителна черта
   и без смяна на тона между двете. */
.home .hero {
  border-bottom: 0;
}

/* Зеленото се носи от самото интро, а не от обвивката на лентата - иначе
   фонът ѝ би покрил вълната, върху която тя трябва да лежи. */
.home .hero {
  padding-bottom: 44px;
}

.home .stats-bar-wrapper {
  background: #edf4e9;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* =========================================================================
   Страница „За нас"
   ========================================================================= */

/* Снимката в същата органична форма като илюстрацията на началната страница -
   така двете страници говорят на един визуален език. */
.about-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1.28 / 1;
  object-fit: cover;
  border-radius: 44% 56% 52% 48% / 33% 29% 71% 67%;
  box-shadow: 0 24px 50px rgba(60, 89, 78, 0.13);
}

/* Показва се, докато няма качена снимка. */
.about-photo--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: linear-gradient(135deg, #eaf4ec 0%, #dbeae0 100%);
  box-shadow: none;
  font-size: 5rem;
  color: var(--color-text-muted);
}

/* Статистиките лежат направо върху зелена лента с вълна отгоре -
   без бяла карта, без сянка, без вертикални черти. */
.about-stats {
  position: relative;
  overflow: hidden;
  background: #e8efdc;
  padding-top: var(--layout-section-y);
}

.about-stats::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  right: -1px;
  height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v24c-200 38-340-6-540 12s-360 34-560 16S130 10 0 30Z' fill='%23fafbfc'/%3E%3C/svg%3E") no-repeat top center / 100% 100%;
  pointer-events: none;
}

.about-stats .stats-bar {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Разделители между колоните: къса центрирана черта в тона на зеленото,
   вместо пълната сива рамка, която на този фон изглежда мръсно. */
.about-stats .stats-bar__item + .stats-bar__item {
  border-left: 0;
}

.about-stats .stats-bar__item {
  position: relative;
}

.about-stats .stats-bar__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 62%;
  background: rgba(74, 100, 66, 0.22);
}

.about-stats .stats-bar__item:first-child::before {
  content: none;
}

/* При две колони лявата не бива да получава черта отляво. */
@media (max-width: 768px) {
  .about-stats .stats-bar__item:nth-child(odd)::before {
    content: none;
  }
}

.about-stats .stats-bar__icon {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: none;
}

/* Снимката остава закачена, докато времевата линия минава покрай нея, и се
   освобождава сама в края на секцията. position: sticky, а не паралакс с
   JavaScript - няма накъсване при скрол и не изисква нито ред скрипт.
   Само от 992px нагоре: под тази ширина колоните са една под друга и
   закачането няма смисъл. */
@media (min-width: 992px) {
  .about-photo-col {
    position: sticky;
    top: 120px;
  }
}

/* =========================================================================
   Лента с категории над списъка с новини
   Всеки таб е връзка към отделен адрес, не превключвател в браузъра.
   ========================================================================= */

.news-tabs {
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

/* При повече категории лентата се плъзга хоризонтално, вместо да се пренася
   на втори ред - така остава един ясен ред независимо колко станат. */
.news-tabs__scroll {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

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

.news-tabs__link {
  flex: 0 0 auto;
  padding: 12px 18px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text-light);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.news-tabs__link:hover,
.news-tabs__link:focus-visible {
  color: var(--color-primary);
}

.news-tabs__link--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

@media (max-width: 640px) {
  .news-tabs__link {
    padding: 10px 13px;
    font-size: 0.88rem;
  }
}

/* =========================================================================
   Основно меню: подчертаване вместо зелен фон при посочване
   Само за хоризонталното меню (от 1101px). В мобилното меню линковете са
   на цял ред - там черта под тях би изглеждала като разделител, затова
   отдолу си остава фонът.
   ========================================================================= */
@media (min-width: 1101px) {
  /* Фонът отпада само при посочване - активният линк го запазва. */
  .nav__link:hover,
  .nav__item:hover {
    background: transparent;
  }

  /* Чертата се изтегля отляво надясно. Анимира се transform, а не width -
     transform не предизвиква преизчисляване на оформлението при всеки кадър. */
  .nav__link::after {
    content: '';
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 240ms ease;
    pointer-events: none;
  }

  .nav__link:hover::after,
  .nav__link:focus-visible::after,
  /* Посочване на стрелката или на самото падащо меню също подчертава
     родителския линк - иначе не се вижда кое подменю е отворено. */
  .nav__item:hover > .nav__link::after {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__link::after {
    transition-duration: 0.01ms;
  }
}

/* =========================================================================
   Падащото меню: същото подчертаване като в основната навигация
   ========================================================================= */
@media (min-width: 1101px) {
  /* Колона от елементи с ширина по текста. Иначе линковете са блокове на
     цялата ширина на панела и чертата под тях щеше да стига до ръба му -
     изглежда като разделител между редовете, а не като подчертаване. */
  .nav__dropdown[data-open="true"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .nav__dropdown a {
    position: relative;
  }

  .nav__dropdown a:hover {
    background: transparent;
  }

  .nav__dropdown a::after {
    content: '';
    position: absolute;
    left: var(--space-4);
    right: var(--space-4);
    bottom: 5px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 240ms ease;
    pointer-events: none;
  }

  .nav__dropdown a:hover::after,
  .nav__dropdown a:focus-visible::after {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__dropdown a::after {
    transition-duration: 0.01ms;
  }
}

/* =========================================================================
   Профил на купувача: плочките са ред „икона + текст", не колона
   ========================================================================= */
.value-card--row {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  text-align: left;
  /* Плочките в един ред стават еднакво високи. */
  height: 100%;
}

/* Причината иконките да не са подравнени: базовият .value-card__icon е
   центриран с margin: 0 auto. В редова подредба автоматичните полета изяждат
   свободното място, а то е различно във всяка плочка според дължината на
   текста - оттам иконата се озоваваше на различно място. */
.value-card--row .value-card__icon {
  margin: 0;
  flex: 0 0 auto;
}

.value-card--row .value-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.value-card--row .value-card__body p {
  margin-bottom: var(--space-4);
}

/* Линкът ляга на дъното, за да е на една линия в съседните плочки. */
.value-card--row .card__link {
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;
}

/* =========================================================================
   Таблет (до 1024px) - три поправки по началната страница
   ========================================================================= */

/* 1. Снимката в интрото се скриваше изцяло под 1024px. На таблет има място
      за нея, стига да застане ПОД текста, а не до него. Затова тук колоната
      е изрично една - иначе .home .hero .container държи две заради
      по-високата си специфичност и остава празна колона от 400px. */
@media (min-width: 721px) and (max-width: 1024px) {
  .hero .container,
  .home .hero .container {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__visual,
  .home .hero__visual {
    display: flex;
    justify-content: center;
  }

  .home .hero__illustration {
    max-width: 520px;
    margin-inline: auto;
  }

  /* Заглавието е с таван от 470px ширина. text-align: center центрира текста
     ВЪТРЕ в тази кутия, но самата кутия си стои вляво - затова заглавието
     изглеждаше подравнено вляво, докато абзацът под него беше в средата
     (той получава margin: auto по-нагоре в блока за 1024px). */
  .home .hero__content h1 {
    margin-inline: auto;
  }

  .home .hero__content {
    padding-left: 0;
  }
}

/* 2. Бялото блокче със статистиките. Отстъпът 20px отгоре е мерен за един
      ред от четири; при два реда е твърде малък и редовете се долепят. */
@media (max-width: 1024px) {
  .home .stats-bar {
    padding: var(--space-8) var(--space-6);
  }

  .home .stats-bar__grid {
    row-gap: var(--space-6);
    column-gap: 0;
  }

  /* Разделителната черта е между колони. Правилото „всеки следващ елемент“
     даваше черта и на първия елемент от втория ред - оттам увисналата
     вертикална линия вляво. При две колони черта носят само четните. */
  .stats-bar__item + .stats-bar__item {
    border-left: none;
  }

  .home .stats-bar__grid .stats-bar__item:nth-child(even) {
    border-left: 1px solid var(--color-border);
  }
}

/* 3. Мотото на групата опираше в цветната лента - имаше нула отстъп отгоре.
      Важи на всички ширини, дефектът не е само на таблет. */
.group-card__motto {
  padding-top: var(--space-5);
}

/* Четирите показателя са с един и същ стил - размер, дебелина и цвят идват
   само от .stats-bar__number. Часовете нямат собствен размер; преди имаха, и
   то като inline стил в шаблона, който биеше правилата за телефон - оттам
   идваше разликата.

   Единственото им отличие е забраната за пренасяне: „07:00 - 19:00“ е далеч
   по-дълъг низ от „8“ и без нея се чупи на два реда. */
.stats-bar__number--hours {
  white-space: nowrap;
}

/* Един стил за четирите показателя и на телефон. „07:00 - 19:00“ е най-дългият
   низ и той определя дали всички се побират: измерено, при 1.25rem/800 иска
   126px, а колоната дава 115px - оттам идваше пренасянето.

   Две промени, вместо да смаляваме само часовете:
   1) отстъпът на елемента пада от 20px на 8px - 40px на колона стояха празни;
   2) размерът следва ширината на екрана, за да остане голям на 390px и пак
      да се побира на 320px. Дебелината 800 остава непроменена. */
@media (max-width: 520px) {
  .home .stats-bar__item {
    padding: 0 8px;
  }

  .home .stats-bar__number {
    font-size: clamp(1rem, 5.1vw, 1.25rem);
  }
}

/* =========================================================================
   Екип: плочките с длъжности се разгръщат с имената
   ========================================================================= */

/* Плочката става <button>, затова ѝ се връща видът на .value-card - браузърът
   иначе слага собствен фон, рамка и подравняване. */
.value-card--expandable {
  font: inherit;
  color: inherit;
  border: 0;
  width: 100%;
  cursor: pointer;
  text-align: center;
  display: block;
}

.value-card--expandable:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.value-card__hint {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
}

.value-card--expandable[aria-expanded="true"] {
  box-shadow: var(--shadow-lg);
}

.value-card--expandable[aria-expanded="true"] .value-card__hint::after {
  content: ' ▲';
}

/* Панелът е под цялата решетка, а не вътре в плочката: в колона от четири
   плочката е тясна и списък с имена в нея се начупва на срички. */
.team-panel {
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-8);
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.team-panel__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
}

/* Появява се само когато публикуваните имена са по-малко от щатната бройка. */
.team-panel__note {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted, #6b7a77);
}

.team-panel__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.team-panel__person {
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-50, #F0FAFA);
  border-radius: var(--radius-md);
}

.team-panel__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
}

.team-panel__meta {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin-top: 2px;
}

/* =========================================================================
   Горна лента в хедъра - подредба на таблет и телефон
   ========================================================================= */

/* Стойността никога не се чупи по средата. Без това „052 303 170“ ставаше
   „052 303“ / „170“, а „Понеделник – Петък“ се разполовяваше - това правеше
   лентата да изглежда счупена, не тясна. */
.header__top-info span {
  white-space: nowrap;
}

/* Пренасянето става МЕЖДУ елементите, а не вътре в тях. */
.header__top-info,
.header__top .container {
  flex-wrap: wrap;
}

@media (max-width: 1100px) {
  .header__top {
    padding: var(--space-2) 0;
    font-size: var(--text-xs);
  }

  .header__top .container {
    justify-content: center;
    gap: var(--space-3);
  }

  .header__top-info {
    gap: var(--space-4);
    justify-content: center;
  }

  /* Работното време отпада първо: то е най-дългият елемент и същата
     информация стои и в блока с показателите, и във футъра. */
  .header__top-hours {
    display: none;
  }
}

@media (max-width: 768px) {
  /* Под 768px остава само призивът за прием - телефонът и пощата са на
     един тап разстояние през „Контакти“. */
  .header__top .container {
    justify-content: center;
  }
}

/* =========================================================================
   Контакти на таблет (769-1100px)
   ========================================================================= */
@media (min-width: 769px) and (max-width: 1100px) {
  /* Трите данни за контакт остават в един ред, но с по-стегнати разстояния и
     по-малка иконка - иначе адресът се пренася на три реда и колоната става
     двойно по-висока от съседните, което разкривява реда. */
  .contact-strip {
    gap: var(--space-5);
  }

  .contact-item {
    gap: var(--space-3);
  }

  .contact-item__icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 1.2rem;
  }

  /* Формата и страничните кутии слизат една под друга. На таблет двете
     колони дават по около 450px - достатъчно за четене, но тясно за
     попълване на форма с пръст. */
  .page-template-page-kontakti .grid-2 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
  }
}

/* =========================================================================
   Карта в „Контакти“
   ========================================================================= */
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 460px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  background: var(--color-primary-light);
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.map-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

@media (max-width: 640px) {
  /* На телефон 16:9 става твърде ниска ивица, за да се разчете улицата. */
  .map-embed {
    aspect-ratio: 4 / 3;
  }

  .map-links .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}


/* ─── Екип: по един ред на длъжност ─────────────────────────────────────
   Преди имената се отваряха в панел под мрежата - искаше клик и скрол.
   После бяха в плочки по четири, но късите плочки оставяха празно място,
   защото редът се изравнява по най-високата. Един ред на длъжност заема
   точно колкото му трябва. */
.team-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.team-row {
  display: flex;
  gap: var(--space-6);
  background: #fff;
  border: 1px solid var(--color-border, #e2ece7);
  border-radius: var(--radius-lg, 16px);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
}

.team-row__head {
  flex: 0 0 245px;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.team-row__head .value-card__icon {
  flex: none;
  margin: 0;
}

/* Числото и длъжността са отделни колони, залепени по базовата линия.
   Така при дълга длъжност вторият ред се подравнява под първата ѝ буква,
   а не под числото. nowrap пази етикета до числото, min-width:0 му
   позволява да се пренася вътре в себе си. */
.team-row__title {
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0 7px;
  line-height: 1.25;
}

.team-row__count {
  flex: none;
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-primary);
}

.team-row__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 700;
}

.team-row__body {
  flex: 1;
  min-width: 0;
}

.team-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0 var(--space-6);
  align-content: start;
}

.team-list__item {
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border, #e2ece7);
  line-height: 1.35;
}

.team-list__name {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.team-list__group {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted, #94A3B8);
}

.team-list__note {
  margin: var(--space-3) 0 0;
  font-size: 0.78rem;
  color: var(--color-text-muted, #94A3B8);
}

@media (max-width: 768px) {
  .team-row {
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
  }
  .team-row__head { flex: none; }
}