/* =============================================================================
   style-theme.css — премиум визуален слой
   ОУ „Алеко Константинов“, гр. Пловдив

   Зарежда се СЛЕД style-editorial.css на всяка страница и надгражда базовите
   стилове: тухлено + маслинено + бяло, glassmorphism навигация,
   заоблени ъгли, меки сенки, hover микро-интеракции и луксозна хронология.

   Структурата на HTML не е променяна — всичко тук е само визуален слой, така
   че цялата логика в script-editorial.js продължава да работи непокътната.

   Секции:
     1. Токени (цветове, радиуси, сенки, преходи)
     2. Навигация — glassmorphism
     3. Карти и контейнери — радиуси и дълбочина
     4. Бутони и връзки — hover с уголемяване и сияние
     5. Хронология „Нашата история“ — fade-in-up
     6. Медийна мрежа — Новини, Алеко ТВ, Вестник
     7. Чат уиджет „Алекознайко“
     8. Мобилна визия
     9. prefers-reduced-motion
============================================================================= */

/* ---------------------------------------------------------------------------
   1. ТОКЕНИ
--------------------------------------------------------------------------- */

:root{
  /* тухлено — основен авторитетен цвят */
  --clay:#A24C36;
  --clay-deep:#7C3A29;
  --clay-soft:#C06A4E;
  --clay-tint:#F4E2D9;
  --clay-mist:#FDF8F4;

  /* маслинено — акцент за живот и движение */
  --sage:#6E9C5C;
  --sage-deep:#2F6F66;
  --sage-tint:#E3EAD9;

  /* радиуси — минималистично заоблени, единна система */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:16px;
  --r-pill:999px;

  /* сенки — меки, синкави, с усещане за дълбочина */
  --sh-1:0 2px 8px rgba(36,30,25,.05);
  --sh-2:0 10px 30px rgba(36,30,25,.09);
  --sh-3:0 18px 44px -12px rgba(36,30,25,.16);
  --sh-4:0 28px 64px -20px rgba(36,30,25,.24);
  --sh-glow:0 0 0 4px rgba(162,76,54,.12);
  --sh-glow-em:0 0 0 4px rgba(110,156,92,.16);

  /* стъкло */
  --glass:rgba(251,248,241,.72);
  --glass-line:rgba(255,255,255,.65);

  --ease:cubic-bezier(.16,.8,.3,1);
  --t:all .3s ease;
}

/* ---------------------------------------------------------------------------
   2. НАВИГАЦИЯ — GLASSMORPHISM
   Плаващ стъклен бар, който се отделя от съдържанието при скролване.
--------------------------------------------------------------------------- */

.ed-nav{
  transition:padding .35s var(--ease), background .35s ease,
             box-shadow .35s ease, top .25s ease,
             left .35s var(--ease), right .35s var(--ease),
             border-radius .35s ease;
}

.ed-nav.scrolled{
  top:calc(var(--ed-banner-h, 0px) + 12px);
  left:16px;
  right:16px;
  padding:14px 32px;
  border-radius:var(--r-lg);
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid var(--glass-line);
  box-shadow:var(--sh-2), inset 0 1px 0 rgba(255,255,255,.8);
}

/* тънка синя нишка по долния ръб — подсказва, че барът е „над“ страницата */
.ed-nav.scrolled::after{
  content:'';
  position:absolute;
  left:22px; right:22px; bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(162,76,54,.22), transparent);
  pointer-events:none;
}

.ed-nav.scrolled .ed-wordmark{ color:var(--clay); }
.ed-nav.scrolled .ed-wordmark sup{ color:var(--sage); }

.ed-menu-btn{ border-radius:var(--r-pill); padding:6px 12px; margin-left:-12px; transition:var(--t); }
.ed-menu-btn:hover{ background:rgba(162,76,54,.07); transform:scale(1.04); }
.ed-nav.on-dark:not(.scrolled) .ed-menu-btn:hover{ background:rgba(255,255,255,.14); }

.ed-contact{
  padding:8px 18px;
  border-radius:var(--r-pill);
  background:var(--clay);
  color:#fff !important;
  font-weight:700;
  transition:var(--t);
}
.ed-contact:hover{
  transform:scale(1.05);
  background:var(--clay-deep);
  box-shadow:var(--sh-glow), var(--sh-2);
}

/* стъклен ефект и за fullscreen менюто */
.ed-overlay{
  background:linear-gradient(180deg, rgba(251,248,241,.94), rgba(248,240,226,.97));
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
}
.ed-ov-item{ border-radius:var(--r-md); transition:var(--t); }
.ed-ov-item:hover,
.ed-ov-item.active{
  color:var(--clay);
  transform:translateX(8px);
}
.ed-ov-panel{
  border-radius:var(--r-md);
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--sh-2);
}
.ed-ov-panel a{ border-radius:var(--r-sm); transition:var(--t); }
.ed-ov-panel a:hover{ color:var(--clay); background:var(--clay-tint); padding-left:14px; }
.ed-ov-panel a.current{ color:var(--sage-deep); font-weight:700; }

/* ---------------------------------------------------------------------------
   3. КАРТИ И КОНТЕЙНЕРИ — единна система от радиуси и дълбочина
--------------------------------------------------------------------------- */

.ed-prog-card,
.ed-news-card,
.ed-news-hero,
.ed-media-card,
.ed-doc-cat,
.ed-doc-cat-btn,
.ed-doc-cat-panel,
.ed-page-card,
.ed-team-card,
.ed-info-card,
.ed-stat-card,
.ed-pin-text{
  border-radius:var(--r-lg);
}

.ed-prog-card{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--sh-1);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease),
             border-color .3s ease;
}
/* фините тонирани фонове се заменят с чисто бяло + цветен ляв кант, за да
   остане фонът четлив, а цветът да носи информация, не декорация */
.ed-prog-card:nth-of-type(6n+1),
.ed-prog-card:nth-of-type(6n+2),
.ed-prog-card:nth-of-type(6n+3),
.ed-prog-card:nth-of-type(6n+4),
.ed-prog-card:nth-of-type(6n+5),
.ed-prog-card:nth-of-type(6n+6){ background:#fff; }

.ed-prog-card::after{
  content:'';
  position:absolute;
  left:0; top:22px; bottom:22px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg, var(--clay), var(--sage));
  opacity:.55;
  transition:opacity .35s ease, top .35s var(--ease), bottom .35s var(--ease);
}
.ed-prog-card:hover{
  transform:translateY(-8px) scale(1.015);
  border-color:rgba(162,76,54,.28);
  box-shadow:var(--sh-4), var(--sh-glow);
}
.ed-prog-card:hover::after{ opacity:1; top:12px; bottom:12px; }
.ed-prog-card .p-ic{ color:var(--clay); transition:var(--t); }
.ed-prog-card:hover .p-ic{ transform:scale(1.12); color:var(--sage-deep); }
.ed-prog-card .p-n{ color:var(--clay-tint); }
.ed-prog-card:hover .p-arrow{ color:var(--sage); transform:translateX(5px); }
.ed-prog-card .p-arrow{ transition:var(--t); }

.ed-doc-cat-btn{ transition:var(--t); }
.ed-doc-cat-btn:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:var(--sh-3), var(--sh-glow);
}
/* Свиването на категориите ставаше само с grid-template-rows:0fr. Ако нещо в
   съдържанието има собствена височина, при този начин то се подава навън и
   документите надничат под затворения ред. Затова тук слагаме и изрично
   отрязване по височина — то работи при всякакво съдържание и браузър. */
.ed-doc-cat-panel{
  overflow:hidden;
  max-height:0;
  box-shadow:none;
  transition:max-height .5s cubic-bezier(.16,.8,.3,1), grid-template-rows .5s cubic-bezier(.16,.8,.3,1);
}
.ed-doc-cat-panel.open{
  max-height:5000px;
  box-shadow:none;
}
.ed-doc-cat-panel > *{ overflow:hidden; min-height:0; }

/* ---------------------------------------------------------------------------
   4. БУТОНИ И ВРЪЗКИ — уголемяване + фино сияние
--------------------------------------------------------------------------- */

.ed-hero-cta,
.ed-filter-chip,
.ed-cat-back,
.ed-btn{
  border-radius:var(--r-pill);
  transition:var(--t);
}

.ed-hero-cta{
  background:var(--clay);
  color:#fff;
  box-shadow:var(--sh-3);
}
.ed-hero-cta:hover{
  transform:scale(1.05) translateY(-2px);
  background:var(--clay-deep);
  box-shadow:var(--sh-4), 0 0 0 5px rgba(255,255,255,.22);
}

.ed-filter-chip{ border:1px solid var(--line); background:#fff; }
.ed-filter-chip:hover{
  transform:translateY(-2px) scale(1.04);
  border-color:var(--clay);
  color:var(--clay);
  box-shadow:var(--sh-glow);
}
.ed-filter-chip.active{
  background:var(--clay);
  border-color:var(--clay);
  color:#fff;
  box-shadow:var(--sh-2);
}

/* маслинено подчертаване на текстовите връзки в съдържанието */
.ed-footer-col a,
.ed-overlay-foot a{ transition:var(--t); }
.ed-footer-col a:hover,
.ed-overlay-foot a:hover{ color:var(--sage); transform:translateX(3px); }

/* ---------------------------------------------------------------------------
   5. ХРОНОЛОГИЯ „НАШАТА ИСТОРИЯ“ — fade-in-up с луксозни точки и линия
--------------------------------------------------------------------------- */

.ed-history-hline{ padding-top:6px; }

/* линията става градиент синьо → маслинено, с меко сияние */
.ed-history-hline::before{
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,
    rgba(162,76,54,.15) 0%,
    var(--clay) 18%,
    var(--clay-soft) 52%,
    var(--sage) 86%,
    rgba(110,156,92,.15) 100%);
  box-shadow:0 1px 10px rgba(162,76,54,.18);
}

/* всяка карта влиза отдолу нагоре, с плътен стъпков ритъм.
   !important е нужен, защото базовият HTML носи inline transition-delay
   до 2.2s — твърде бавно, за да се чете като едно движение. */
.ed-history-hline .ed-hl-item{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .6s ease, transform .7s var(--ease);
}
.ed-history-hline .ed-hl-item.in{ opacity:1; transform:none; }
.ed-history-hline .ed-hl-item:nth-child(1){ transition-delay:.05s !important; }
.ed-history-hline .ed-hl-item:nth-child(2){ transition-delay:.17s !important; }
.ed-history-hline .ed-hl-item:nth-child(3){ transition-delay:.29s !important; }
.ed-history-hline .ed-hl-item:nth-child(4){ transition-delay:.41s !important; }

.ed-hl-year{
  color:var(--clay);
  font-weight:500;
  letter-spacing:-.01em;
}

/* точката: бял пръстен, синя сърцевина, смарагдов ореол при влизане */
.ed-hl-dot{
  width:15px; height:15px;
  background:var(--clay);
  border:3px solid #fff;
  box-shadow:0 0 0 1px rgba(162,76,54,.25), 0 4px 12px rgba(162,76,54,.3);
}
.ed-hl-item.in .ed-hl-dot{ animation:edDotBloom .9s var(--ease) .2s both; }
@keyframes edDotBloom{
  0%  { transform:scale(0); box-shadow:0 0 0 0 rgba(110,156,92,.45); }
  55% { transform:scale(1.18); box-shadow:0 0 0 10px rgba(110,156,92,0); }
  100%{ transform:scale(1); box-shadow:0 0 0 1px rgba(162,76,54,.25), 0 4px 12px rgba(162,76,54,.3); }
}

.ed-hl-item{ padding:0 10px; }
.ed-hl-text{ color:var(--ink-soft); }

.ed-history-banner{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-3); }
.ed-history-big{ color:var(--clay); }

/* ---------------------------------------------------------------------------
   6. МЕДИЙНА МРЕЖА — Новини, Алеко ТВ, Училищен вестник
--------------------------------------------------------------------------- */

.ed-news-hero{
  box-shadow:var(--sh-3);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.ed-news-hero:hover{ transform:translateY(-6px) scale(1.008); box-shadow:var(--sh-4); }
.ed-news-hero .nh-tag{
  border-radius:var(--r-pill);
  background:var(--sage);
  color:#fff;
  font-weight:700;
}

.ed-news-spine-item{
  border-radius:var(--r-md);
  padding:16px 18px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--sh-1);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.ed-news-spine-item:hover{
  transform:translateX(6px);
  border-color:rgba(162,76,54,.25);
  box-shadow:var(--sh-2);
}
.ed-news-spine-item .nsi-dot{ background:var(--sage); box-shadow:0 0 0 3px rgba(110,156,92,.16); }
.ed-news-spine-item .nsi-cat{ color:var(--clay); font-weight:700; }

.ed-news-card{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--sh-1);
  overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.ed-news-card:hover{
  transform:translateY(-6px);
  border-color:rgba(162,76,54,.25);
  box-shadow:var(--sh-3);
}

.ed-media-card{
  border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.ed-media-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-4); }
.ed-media-mascot{ background:linear-gradient(200deg, var(--clay) 0%, var(--clay-deep) 72%); }
.ed-media-video:hover .mc-play{ background:var(--sage); }
.ed-media-card .mc-kicker{ color:rgba(255,255,255,.82); }

/* placeholders за видео и PDF — рамка с фин шах вместо празно поле */
.ed-media-ph,
.ed-video-ph,
.ed-pdf-ph{
  border-radius:var(--r-md);
  border:1px dashed rgba(162,76,54,.3);
  background:
    linear-gradient(135deg, rgba(162,76,54,.04) 25%, transparent 25%) 0 0/16px 16px,
    var(--clay-mist);
  color:var(--clay);
}

/* ---------------------------------------------------------------------------
   7. ЧАТ УИДЖЕТ „АЛЕКОЗНАЙКО“
--------------------------------------------------------------------------- */

.ed-chat-fab{
  border:3px solid #fff;
  background:var(--clay-tint);
  box-shadow:0 14px 34px -10px rgba(162,76,54,.5);
}
.ed-chat-fab:hover{ transform:scale(1.08) translateY(-3px); box-shadow:0 20px 44px -12px rgba(162,76,54,.55); }

/* двоен пулс: смарагдова точка + бавен син ореол около целия бутон */
.ed-chat-fab::after{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:2px solid rgba(162,76,54,.4);
  animation:edFabHalo 2.8s var(--ease) infinite;
  pointer-events:none;
}
@keyframes edFabHalo{
  0%  { transform:scale(1); opacity:.6; }
  70% { transform:scale(1.45); opacity:0; }
  100%{ transform:scale(1.45); opacity:0; }
}
.ed-chat-ping{ background:var(--sage); border-color:#fff; }
.ed-chat-ping::after{ background:var(--sage); }

.ed-chat-panel{
  width:368px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 34px 76px -22px rgba(36,30,25,.42);
}
.ed-chat-header{
  background:linear-gradient(135deg, var(--clay) 0%, var(--clay-deep) 100%);
  color:#fff;
}
.ed-chat-header .ch-status{ color:rgba(255,255,255,.78); }
.ed-chat-header .ch-status .dot{ background:#A8C286; box-shadow:0 0 0 3px rgba(168,194,134,.25); }
.ed-chat-header img{ border-color:rgba(255,255,255,.55); }
.ed-chat-close{ background:rgba(255,255,255,.16); color:#fff; transition:var(--t); }
.ed-chat-close:hover{ background:rgba(255,255,255,.3); transform:scale(1.08); }

.ed-chat-body{ background:var(--clay-mist); }
.ed-chat-msg{
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  animation:edMsgIn .35s var(--ease) both;
}
@keyframes edMsgIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.ed-chat-msg.bot{ background:#fff; color:var(--ink); border:1px solid var(--line); border-bottom-left-radius:5px; }
.ed-chat-msg.user{
  background:var(--clay);
  color:#fff;
  border-bottom-right-radius:5px;
  box-shadow:0 6px 16px -6px rgba(162,76,54,.45);
}

.ed-chat-quick{ background:var(--clay-mist); }
.ed-chat-quick .qc{
  color:var(--clay);
  background:#fff;
  border:1px solid rgba(162,76,54,.2);
  transition:var(--t);
}
.ed-chat-quick .qc:hover{
  background:var(--clay);
  color:#fff;
  transform:translateY(-2px) scale(1.04);
  box-shadow:var(--sh-glow);
}

.ed-chat-input{ background:#fff; }
.ed-chat-input input{ background:var(--clay-mist); border:1px solid var(--line); }
.ed-chat-input input:focus{ outline:none; border-color:var(--clay); box-shadow:var(--sh-glow); }
.ed-chat-input button{ background:var(--clay); color:#fff; }
.ed-chat-input button:hover{ background:var(--clay-deep); transform:scale(1.08); box-shadow:var(--sh-glow); }

/* ---------------------------------------------------------------------------
   8. МОБИЛНА ВИЗИЯ
--------------------------------------------------------------------------- */

@media (max-width:900px){
  .ed-nav.scrolled{
    top:calc(var(--ed-banner-h, 0px) + 8px);
    left:8px; right:8px;
    padding:12px 18px;
    border-radius:var(--r-md);
  }
  .ed-contact{ padding:7px 14px; }
}

@media (max-width:760px){
  /* хронологията става вертикална линия с точки отляво — истински timeline,
     вместо четири центрирани блока един под друг */
  .ed-history-hline{ flex-direction:column; gap:28px; padding-left:30px; }
  .ed-history-hline::before{
    display:block;
    top:8px; bottom:8px; left:6px;
    right:auto;
    width:2px; height:auto;
    transform:scaleY(0);
    transform-origin:top;
    background:linear-gradient(180deg, var(--clay), var(--clay-soft), var(--sage));
    transition:transform 1.6s var(--ease) .1s;
  }
  .ed-history-hline.in::before{ transform:scaleY(1); }
  .ed-hl-item{ align-items:flex-start; text-align:left; padding:0; }
  .ed-hl-year{ margin-bottom:8px; font-size:30px; }
  .ed-hl-dot{ position:absolute; left:-30px; margin:0; top:14px; }
  .ed-hl-item{ position:relative; }
  .ed-hl-text{ max-width:100%; }
}

@media (max-width:560px){
  .ed-chat-panel{
    position:fixed;
    right:10px; left:10px; bottom:10px;
    width:auto;
    height:min(78vh, 540px);
    border-radius:18px;
  }
  .ed-prog-card:hover{ transform:none; }
}

/* ---------------------------------------------------------------------------
   9. PREFERS-REDUCED-MOTION
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .ed-nav, .ed-prog-card, .ed-news-card, .ed-media-card,
  .ed-hero-cta, .ed-filter-chip, .ed-chat-msg,
  .ed-history-hline .ed-hl-item, .ed-history-hline::before{
    transition:none !important;
    animation:none !important;
  }
  .ed-history-hline .ed-hl-item{ opacity:1; transform:none; }
  .ed-history-hline::before{ transform:scaleX(1); }
  .ed-chat-fab::after{ animation:none; opacity:0; }
  .ed-hl-item.in .ed-hl-dot{ animation:none; transform:scale(1); }
  .ed-prog-card:hover, .ed-hero-cta:hover, .ed-filter-chip:hover,
  .ed-doc-cat-btn:hover, .ed-contact:hover{ transform:none; }
}

/* ---------------------------------------------------------------------------
   10. СЕКЦИОННИ ИДЕНТИЧНОСТИ
   Всеки раздел носи свой акцент през --brick / --brick-deep / --brick-bg
   (дефинирани в style-editorial.css върху body[data-theme]). Тук им добавяме
   собствено сияние, за да се усеща характерът, а не само цветът.
--------------------------------------------------------------------------- */

body{ --accent:var(--brick); --accent-deep:var(--brick-deep); --accent-bg:var(--brick-bg); }
body{ --accent-glow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }

/* заглавната лента на всяка вътрешна страница поема акцента на раздела */
.ed-cover{ box-shadow:inset 0 -1px 0 rgba(255,255,255,.2), var(--sh-3); }
/* светлият ъгъл вече е нарисуван вътре в самите SVG кавъри (секция 34),
   затова тук не слагаме втори слой — той се биеше с воала за четимост */
.ed-page-title{ color:var(--accent-deep); }
.ed-kicker{ color:var(--accent); }

/* плочките на раздела: акцентна икона, акцентен кант и сияние при посочване */
.ed-doc-cat-btn{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--sh-1);
  cursor:pointer;
}
.ed-doc-cat-btn .ic{
  border-radius:var(--r-md);
  background:var(--accent-bg);
  color:var(--accent-deep);
  transition:transform .35s var(--ease), background .3s ease;
}
.ed-doc-cat-btn:hover{
  transform:translateY(-5px);
  border-color:var(--accent);
  box-shadow:var(--sh-3), var(--accent-glow);
}
.ed-doc-cat-btn:hover .ic{ transform:scale(1.1) rotate(-3deg); background:var(--accent); color:#fff; }
.ed-doc-cat-btn .chev{ color:var(--accent); transition:transform .3s ease; }
.ed-doc-cat-btn:hover .chev{ transform:translateX(4px); }
.ed-doc-cat-btn[aria-expanded="true"]{ border-color:var(--accent); box-shadow:var(--accent-glow); }

/* „Прием“ — плочките се четат като стъпки: номер в ъгъла и светване при hover */
[data-theme="priem"] .ed-doc-cat-grid{ counter-reset:stepnum; }
[data-theme="priem"] .ed-doc-cat-grid .ed-doc-cat-btn::after{
  counter-increment:stepnum;
  content:counter(stepnum);
  position:absolute; left:26px; top:22px;
  font-family:'Fraunces',serif; font-style:italic; font-size:15px;
  color:var(--accent);
  opacity:.5;
  transition:opacity .3s ease;
}
[data-theme="priem"] .ed-doc-cat-grid .ed-doc-cat-btn:hover::after{ opacity:1; }

/* „Учебен процес“ — редовете с графици стават чисти карти с цветен таг */
.ed-sub-item{
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:#fff;
  transition:transform .3s var(--ease), box-shadow .3s ease, border-color .3s;
}
.ed-sub-item:hover{
  transform:translateY(-3px);
  border-color:var(--accent);
  box-shadow:var(--sh-2), var(--accent-glow);
}
.ed-spine-cats .ed-sub-item::before{
  content:'';
  display:inline-block;
  width:6px; height:6px; margin-right:10px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-bg);
  vertical-align:middle;
}

/* ---------------------------------------------------------------------------
   11. ВЪЛНООБРАЗНИ РАЗДЕЛИТЕЛИ МЕЖДУ СЕКЦИИТЕ
   Инлайн SVG като background — без нов HTML, без допълнителна заявка.
--------------------------------------------------------------------------- */

.ed-programs, .ed-news, .ed-footer{ position:relative; }
.ed-programs::before, .ed-news::before, .ed-footer::before{
  content:'';
  position:absolute;
  top:-46px; left:0; right:0;
  height:46px;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46 C 240 6 480 6 720 24 C 960 42 1200 42 1440 12 L1440 46 Z' fill='%23FBFCFE'/%3E%3C/svg%3E");
}
.ed-footer::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0 C 240 40 480 40 720 22 C 960 4 1200 4 1440 34 L1440 0 Z' fill='%23FBFCFE'/%3E%3C/svg%3E");
  top:auto; bottom:100%;
}

/* ---------------------------------------------------------------------------
   12. ХРОНОЛОГИЯТА — 3D РАЗКРИВАНЕ И СВЕТЕЩИ ВРЪЗКИ
--------------------------------------------------------------------------- */

.ed-history-hline{ perspective:1100px; }
.ed-history-hline .ed-hl-item{
  transform:translateY(30px) rotateX(-14deg) scale(.97);
  transform-origin:50% 100%;
  transition:opacity .7s ease, transform .85s var(--ease);
}
.ed-history-hline .ed-hl-item.in{ transform:none; }

/* светеща нишка, която пробягва по линията след като тя се изчертае */
.ed-history-hline::after{
  content:'';
  position:absolute;
  top:56px; left:0;
  width:22%; height:4px;
  border-radius:4px;
  background:linear-gradient(90deg, transparent, rgba(192,106,78,.85), transparent);
  filter:blur(1px);
  opacity:0;
}
.ed-history-hline.in::after{ animation:edSpark 2.8s var(--ease) .9s infinite; }
@keyframes edSpark{
  0%  { left:-22%; opacity:0; }
  18% { opacity:.9; }
  82% { opacity:.9; }
  100%{ left:100%; opacity:0; }
}

.ed-hl-year{ text-shadow:0 2px 14px rgba(162,76,54,.14); }

/* ---------------------------------------------------------------------------
   14. ЧАТЪТ — „ОНЛАЙН“ ПУЛС И ТРИ ТОЧКИ „ПИШЕ…“
--------------------------------------------------------------------------- */

.ed-chat-header .ch-status .dot{ position:relative; }
.ed-chat-header .ch-status .dot::after{
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  background:#A8C286;
  animation:edOnlinePulse 2s var(--ease) infinite;
}
@keyframes edOnlinePulse{
  0%  { transform:scale(1); opacity:.8; }
  100%{ transform:scale(3); opacity:0; }
}

.ed-chat-msg.typing{
  display:flex; align-items:center; gap:5px;
  padding:14px 16px;
  animation:none;
  opacity:1;
}
.ed-chat-msg.typing .td{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--clay-soft);
  animation:edTypeBounce 1.1s ease-in-out infinite;
}
.ed-chat-msg.typing .td:nth-child(2){ animation-delay:.16s; }
.ed-chat-msg.typing .td:nth-child(3){ animation-delay:.32s; }
@keyframes edTypeBounce{
  0%,62%,100%{ transform:translateY(0); opacity:.45; }
  31%        { transform:translateY(-6px); opacity:1; }
}

@media (prefers-reduced-motion:reduce){
  .ed-history-hline .ed-hl-item{ transform:none !important; }
  .ed-history-hline.in::after,
  .ed-chat-header .ch-status .dot::after,
  .ed-chat-msg.typing .td,
  .ed-episode-card .ep-thumb::after{ animation:none; }
}

/* ---------------------------------------------------------------------------
   15. МЕНЮТО — ПЛАВАЩО МАТОВО СТЪКЛО И ПАДАЩ ЕДИНЕН КОНТЕЙНЕР
   Подменюто вече не е странична решетка, а един елегантен контейнер, който
   се спуска точно под своя раздел, в един стълб, с икона пред всеки линк.
--------------------------------------------------------------------------- */

.ed-ov-group{ position:relative; }

.ed-ov-panel{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:auto;
  margin-left:0;
  width:min(340px, calc(100vw - 48px));
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:2px;
  border-radius:16px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 20px 48px -16px rgba(36,30,25,.22), inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  z-index:5;
  transition:opacity .4s ease-in-out, transform .4s ease-in-out;
}
.ed-ov-panel.active{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.ed-ov-panel a{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 14px;
  border-radius:12px;
  font-family:'Manrope',sans-serif;
  font-style:normal;
  font-size:14.5px;
  font-weight:600;
  line-height:1.35;
  color:var(--ink-soft);
  background:none;
  transition:all .4s ease-in-out;
}
.ed-ov-panel a:hover{
  color:var(--brick);
  background:var(--brick-bg);
  padding-left:18px;
  transform:scale(1.015);
}
.ed-ov-panel a.current{
  color:var(--brick);
  background:var(--brick-bg);
}

/* иконите са inline SVG маски, затова поемат цвета на самия линк */
.ed-ov-panel a::before{
  content:'';
  flex:0 0 auto;
  width:17px; height:17px;
  background:currentColor;
  opacity:.7;
  mask:var(--ic) center/contain no-repeat;
  -webkit-mask:var(--ic) center/contain no-repeat;
  transition:opacity .4s ease-in-out, transform .4s ease-in-out;
}
.ed-ov-panel a:hover::before{ opacity:1; transform:scale(1.12); }

/* по едно семейство икони, разпознати по адреса на линка */
.ed-ov-panel a{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E"); }
.ed-ov-panel a[href*="#about"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='16' x2='12' y2='11'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E"); }
.ed-ov-panel a[href*="vizia"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ed-ov-panel a[href*="ekip"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3C/svg%3E"); }
.ed-ov-panel a[href*="kvalifikacii"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M8.2 13.9 7 22l5-3 5 3-1.2-8.1'/%3E%3C/svg%3E"); }
.ed-ov-panel a[href*="materialna-baza"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l7-4 7 4v14'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E"); }
.ed-ov-panel a[href*="razpisanie"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 16 14'/%3E%3C/svg%3E"); }
.ed-ov-panel a[href*="grafici"], .ed-ov-panel a[href*="sreshti"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='8' y1='2' x2='8' y2='5'/%3E%3Cline x1='16' y1='2' x2='16' y2='5'/%3E%3C/svg%3E"); }
.ed-ov-panel a[href*="nvo"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpolyline points='8 12 11 15 16 9'/%3E%3C/svg%3E"); }
.ed-ov-panel a[href*="priem1"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='16' y1='11' x2='22' y2='11'/%3E%3C/svg%3E"); }
.ed-ov-panel a[href*="priem5"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='10 8 14 12 10 16'/%3E%3C/svg%3E"); }
.ed-ov-panel a[href*="svobodni"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E"); }
.ed-ov-panel a[href*="uniformi"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3 4 6v5h3v10h10V11h3V6l-5-3'/%3E%3Cpath d='M9 3a3 3 0 0 0 6 0'/%3E%3C/svg%3E"); }
.ed-ov-panel a[href*="vtori-chas"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9 9 0 0 1-3.9-.9L3 21l1.9-5.1A8.4 8.4 0 0 1 4 11.5 8.5 8.5 0 0 1 12.5 3a8.5 8.5 0 0 1 8.5 8.5z'/%3E%3C/svg%3E"); }
.ed-ov-panel a[href*="uchebnici"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); }
.ed-ov-panel a[href*="blanki"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E"); }
.ed-ov-panel a[href*="dnevnik"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E"); }

/* на телефон контейнерът влиза в потока и избутва списъка надолу, вместо да
   покрива следващите раздели — така акордеонът остава четим с един пръст */
@media (max-width:760px){
  .ed-ov-panel{
    position:static;
    width:100%;
    margin:6px 0 10px;
    transform:none;
    max-height:0;
    padding:0 10px;
    overflow:hidden;
    transition:max-height .45s ease-in-out, opacity .35s ease-in-out, padding .35s ease-in-out;
  }
  .ed-ov-panel.active{ max-height:520px; padding:10px; }
  .ed-ov-panel a{ font-size:15px; }
}

/* ---------------------------------------------------------------------------
   16. МЕДИЯ И НОВИНИ — СВЕТЛА, СВЕЖА ВИЗИЯ
   Заменя тъмния премиум вид от предишната версия: бяло и меко сиво като
   основа, тухлено и маслинено само като акцент.
--------------------------------------------------------------------------- */

.ed-episode-card{
  border-radius:var(--r-lg);
  padding:12px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--sh-2);
  transition:transform .4s ease-in-out, box-shadow .4s ease-in-out, border-color .4s ease-in-out;
}
.ed-episode-card:hover{
  transform:translateY(-5px) scale(1.01);
  border-color:var(--brick);
  box-shadow:var(--sh-4), var(--accent-glow);
}
.ed-episode-card .ep-thumb{
  border-radius:var(--r-md);
  background:linear-gradient(135deg, #FDF9F5 0%, #F5EDE6 100%);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 #fff;
}
.ed-episode-card .ep-t{ color:var(--ink); }
.ed-episode-card .ep-meta{ color:var(--muted); }

/* светъл, ясен бутон за пускане — бял кръг със син триъгълник и мек пулс */
.ed-episode-card .ep-thumb::after{
  content:'';
  position:absolute; left:50%; top:50%;
  width:56px; height:56px; margin:-28px 0 0 -28px;
  border-radius:50%;
  background:rgba(255,255,255,.92)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231B3E8F'%3E%3Cpath d='M9 6v12l9-6z'/%3E%3C/svg%3E")
    center/22px no-repeat;
  box-shadow:0 8px 22px -6px rgba(36,30,25,.3), 0 0 0 0 rgba(162,76,54,.35);
  animation:edPlayPulseLight 2.6s ease-in-out infinite;
  pointer-events:none;
  transition:transform .4s ease-in-out;
}
.ed-episode-card:hover .ep-thumb::after{ transform:scale(1.1); }
@keyframes edPlayPulseLight{
  0%  { box-shadow:0 8px 22px -6px rgba(36,30,25,.3), 0 0 0 0 rgba(162,76,54,.35); }
  70% { box-shadow:0 8px 22px -6px rgba(36,30,25,.3), 0 0 0 16px rgba(162,76,54,0); }
  100%{ box-shadow:0 8px 22px -6px rgba(36,30,25,.3), 0 0 0 0 rgba(162,76,54,0); }
}

/* Алеко ТВ и Алекознайко минават от виолетово към тухлено и маслинено,
   за да остане цялата медийна част светла и училищна */
[data-theme="alekotv"]{ --brick:#A0472E; --brick-deep:#7C3A29; --brick-bg:#F4E2D9; }
[data-theme="alekoznaiko"]{ --brick:#5C7A46; --brick-deep:#425934; --brick-bg:#E3EAD9; }

.ed-alekotv-banner{ border-radius:var(--r-lg); box-shadow:var(--sh-3); overflow:hidden; }

.ed-news-hero::after{
  background:linear-gradient(200deg, rgba(162,76,54,.05) 0%, rgba(36,30,25,.42) 62%, rgba(36,30,25,.72) 100%);
}
.ed-media-video::after{
  background:linear-gradient(200deg, rgba(162,76,54,.08) 0%, rgba(36,30,25,.4) 58%, rgba(36,30,25,.68) 100%);
}

/* ---------------------------------------------------------------------------
   17. МИКРО-ИНТЕРАКЦИИ — единен ритъм 0.4s ease-in-out
--------------------------------------------------------------------------- */

.ed-hero-cta, .ed-contact, .ed-filter-chip, .ed-chat-quick .qc,
.ed-doc-cat-btn, .ed-prog-card, .ed-episode-card, .ed-sub-item,
.ed-news-card, .ed-media-card, .ed-footer-col a, .ed-overlay-foot a{
  transition:all .4s ease-in-out;
}
a, button{ cursor:pointer; }
.ed-doc-cat-btn, .ed-prog-card, .ed-episode-card{ cursor:pointer; }

@media (prefers-reduced-motion:reduce){
  .ed-episode-card .ep-thumb::after{ animation:none; }
  .ed-ov-panel{ transition:opacity .01s linear; }
}

/* ---------------------------------------------------------------------------
   18. МЕНЮ ОТСТРАНИ С РАЗТЯГАНЕ НАСТРАНИ
   Хоризонталната лента имаше вграден проблем: подсекциите трябваше да отиват
   някъде под редицата, а точно там стоят долните линкове (Е-дневник,
   Обществен съвет, ЗЗЛД, Контакти) — колкото и място да резервирам, двете се
   караха за същата зона.

   Сега разделите стоят в стълб отляво, а подсекциите се разтягат НАДЯСНО, в
   празното поле до тях. Долните линкове са закотвени най-долу в стълба и
   физически няма как да бъдат застигнати — разтягането тръгва встрани, не
   надолу.
--------------------------------------------------------------------------- */

.ed-overlay{
  top:calc(var(--ed-banner-h, 0px) + 84px);
  bottom:24px;
  left:24px;
  right:auto;
  width:min(330px, 84vw);
  max-height:none;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:20px 18px;
  border-radius:22px;
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(26px) saturate(1.7);
  -webkit-backdrop-filter:blur(26px) saturate(1.7);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 30px 70px -24px rgba(36,30,25,.3), inset 0 1px 0 rgba(255,255,255,.95);
  transform:translateX(-18px);
  overflow:visible;
}
.ed-overlay.open{ transform:none; }

.ed-overlay-main{
  flex-direction:column;
  align-items:stretch;
  gap:2px;
  width:100%;
  align-self:stretch;
  padding-bottom:0;
}

.ed-ov-item{
  font-family:'Manrope',sans-serif;
  font-style:normal;
  font-weight:700;
  font-size:15.5px;
  letter-spacing:0;
  line-height:1.25;
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  color:var(--ink);
  transform:translateX(-10px);
  transition:all .4s ease-in-out;
}
.ed-overlay.open .ed-ov-item{ transform:none; }
.ed-ov-item::before{ display:none; }
/* прозрачен мост НАДЯСНО: пътят на мишката към разтеглената лента остава
   вътре в активната зона на раздела */
.ed-ov-item::after{
  content:'';
  position:absolute;
  left:100%;
  top:-6px;
  bottom:-6px;
  width:26px;
}
.ed-ov-item:hover, .ed-ov-item.active{
  padding-left:14px;
  color:#fff;
  background:var(--brick);
  box-shadow:0 8px 20px -8px rgba(162,76,54,.5);
  transform:translateX(3px) scale(1.01);
}
.ed-ov-item.current{ box-shadow:inset 0 0 0 1.5px var(--brick); }
.ed-ov-item .ed-ov-chev{ margin-left:auto; font-size:1em; transform:none; }
.ed-ov-item.active .ed-ov-chev{ transform:rotate(90deg); }

/* --- лентата с подсекциите: изстрелва се надясно от своя раздел --- */
.ed-ov-group{ position:relative; }
.ed-ov-panel{
  position:absolute;
  top:-8px;
  left:calc(100% + 22px);
  right:auto;
  width:max-content;
  max-width:min(620px, calc(100vw - 420px));
  margin:0;
  padding:12px;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  border-radius:18px;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(22px) saturate(1.6);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 24px 56px -20px rgba(36,30,25,.26), inset 0 1px 0 rgba(255,255,255,.95);
  opacity:0;
  transform:none;
  clip-path:inset(0 100% 0 0 round 18px);
  pointer-events:none;
  z-index:5;
  transition:clip-path .45s cubic-bezier(.16,.8,.3,1) .3s,
             opacity .3s ease-in-out .3s;
}
.ed-ov-panel.active{
  opacity:1;
  clip-path:inset(0 0 0 0 round 18px);
  pointer-events:auto;
  transition:clip-path .5s cubic-bezier(.16,.8,.3,1), opacity .3s ease-in-out;
}
/* мост отляво на лентата, за да няма пропаст между нея и раздела */
.ed-ov-panel::before{
  content:'';
  position:absolute;
  left:-24px;
  top:0; bottom:0;
  width:24px;
}

.ed-ov-panel a{
  padding:9px 14px;
  border-radius:var(--r-pill);
  font-family:'Manrope',sans-serif;
  font-style:normal;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-soft);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(162,76,54,.12);
  white-space:nowrap;
  transition:all .4s ease-in-out;
}
.ed-ov-panel a:hover{
  padding-left:14px;
  color:#fff;
  background:var(--brick);
  border-color:var(--brick);
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 10px 24px -10px rgba(162,76,54,.55);
}
.ed-ov-panel a.current{ color:var(--brick); background:var(--brick-bg); border-color:var(--brick); }
.ed-ov-panel a::before{ width:15px; height:15px; }

/* --- долните линкове: закотвени най-долу в стълба --- */
.ed-overlay-foot{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid rgba(162,76,54,.14);
}
.ed-overlay-foot a{
  padding:9px 14px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  transition:all .4s ease-in-out;
}
.ed-overlay-foot a:hover{
  color:var(--brick);
  background:var(--brick-bg);
  transform:translateX(4px);
}

/* --- мобилно: стълбът заема почти целия екран, подсекциите падат под своя
       раздел като акордеон (встрани няма място) --- */
@media (max-width:900px){
  .ed-ov-panel{ max-width:min(420px, calc(100vw - 380px)); }
}
@media (max-width:760px){
  .ed-overlay{
    top:0; bottom:0; right:0; left:auto;
    width:min(86vw, 370px);
    padding:calc(var(--ed-banner-h,0px) + 88px) 20px 28px;
    border-radius:22px 0 0 22px;
    transform:translateX(102%);
    overflow-y:auto;
    transition:transform .5s cubic-bezier(.16,.8,.3,1), opacity .3s ease;
  }
  .ed-overlay.open{ transform:none; }
  .ed-ov-item{ font-size:16px; padding:13px 14px; }
  .ed-ov-item::after{ display:none; }
  .ed-ov-panel{
    position:static;
    width:100%;
    max-width:none;
    margin:4px 0 10px;
    padding:0 8px;
    max-height:0;
    overflow:hidden;
    flex-direction:column;
    align-items:stretch;
    background:rgba(255,255,255,.55);
    box-shadow:none;
    clip-path:none;
    transition:max-height .45s ease-in-out, opacity .35s ease-in-out, padding .35s ease-in-out;
  }
  .ed-ov-panel.active{
    max-height:560px;
    padding:8px;
    clip-path:none;
    opacity:1;
    pointer-events:auto;
    transition:max-height .45s ease-in-out, opacity .3s ease-in-out, padding .35s ease-in-out;
  }
  .ed-ov-panel a{ white-space:normal; }
}

/* ===========================================================================
   21. ВЪТРЕШНО ОФОРМЛЕНИЕ НА СЕКЦИИТЕ — ТРИ РАЗЛИЧНИ ПОДХОДА
   Проблемът с предишния вид: всеки ред беше самостоятелна бяла карта с кант и
   сянка, независимо дали е стъпка от процес, справочен запис или дълъг
   обяснителен текст. Еднакви кутии = нулева иерархия, а текстът се разтягаше
   през целия екран, оставяйки дясната половина празна.

   Сега подходът зависи от съдържанието:
     Б → Прием и Учебен процес (процеси): двуколонно, с номерирани стъпки
     А → Документи, ЗЗЛД, Контакти (справочник): разчертан индекс без кутии
     В → дълги описания навсякъде: свиват се и се отварят при клик (JS)

   Общо за всички: една рамка вместо три, без сенки по редовете, и дължина на
   реда до 72 знака.
=========================================================================== */

/* --- махаме трите вложени рамки: остава само гръбнакът отляво --- */
.ed-doc-cat-panel{
  background:none;
  border:0;
  box-shadow:none;
  border-radius:0;
  overflow:hidden;      /* пази отрязването от секция 39 */
}
.ed-doc-cat-inner{ padding-left:0; padding-right:0; }

.ed-doc-cat-btn{
  background:none;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  padding:18px 4px;
}
.ed-doc-cat-btn:hover{
  transform:none;
  border-color:var(--brick);
  box-shadow:none;
  background:linear-gradient(90deg, var(--brick-bg) 0%, transparent 70%);
}
.ed-doc-cat-btn[aria-expanded="true"]{
  border-color:var(--brick);
  box-shadow:none;
  background:none;
}
/* етикетът на подсекцията вече не е сериф курсив — това е упътване, не заглавие */
.ed-doc-cat-btn .t{
  font-family:'Manrope',sans-serif;
  font-style:normal;
  font-weight:800;
  font-size:clamp(17px,1.9vw,21px);
  letter-spacing:-.01em;
  color:var(--ink);
}
/* точката застава до заглавието, а не на свой ред над него */
.ed-doc-cat-btn .sc-dot{
  flex:0 0 auto;
  width:8px; height:8px;
  margin-right:2px;
  border-radius:50%;
  background:var(--brick);
  box-shadow:0 0 0 4px var(--brick-bg);
}

/* ---------------------------------------------------------------------------
   Б. ПРОЦЕСИ — Прием и Учебен процес
   Двуколонно: отляво номер и заглавие, отдясно описанието. Вертикална линия
   свързва стъпките, за да се четат като последователност, а не като списък.
--------------------------------------------------------------------------- */

[data-theme="priem"] .ed-doc-cat-inner,
[data-theme="uchproc"] .ed-doc-cat-inner{
  counter-reset:stepn;
  position:relative;
  padding:10px 0 6px;
}
/* линията на процеса */
[data-theme="priem"] .ed-doc-cat-inner::before,
[data-theme="uchproc"] .ed-doc-cat-inner::before{
  content:'';
  position:absolute;
  left:13px;
  top:34px;
  bottom:34px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg, var(--brick) 0%, var(--brick-bg) 100%);
  opacity:.5;
}

[data-theme="priem"] .ed-sub-item,
[data-theme="uchproc"] .ed-sub-item{
  position:relative;
  display:grid;
  grid-template-columns:28px minmax(0, 300px) minmax(0, 1fr);
  align-items:start;
  gap:0 26px;
  padding:22px 0 24px 0;
  margin:0;
  background:none;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  transform:none;
}
[data-theme="priem"] .ed-sub-item:last-child,
[data-theme="uchproc"] .ed-sub-item:last-child{ border-bottom:0; }

[data-theme="priem"] .ed-sub-item:hover,
[data-theme="uchproc"] .ed-sub-item:hover{
  transform:none;
  box-shadow:none;
  border-color:var(--line);
}
[data-theme="priem"] .ed-sub-item::before,
[data-theme="uchproc"] .ed-sub-item::before{
  counter-increment:stepn;
  content:counter(stepn, decimal-leading-zero);
  grid-column:1;
  display:block;
  width:28px; height:28px;
  margin:0;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--brick);
  box-shadow:none;
  color:var(--brick);
  font-family:'Manrope',sans-serif;
  font-size:11px;
  font-weight:800;
  line-height:25px;
  text-align:center;
  vertical-align:baseline;
  transition:background .4s ease-in-out, color .4s ease-in-out;
}
[data-theme="priem"] .ed-sub-item:hover::before,
[data-theme="uchproc"] .ed-sub-item:hover::before{
  background:var(--brick);
  color:#fff;
}
[data-theme="priem"] .ed-sub-item .t,
[data-theme="uchproc"] .ed-sub-item .t{
  grid-column:2;
  font-size:16.5px;
  font-weight:800;
  line-height:1.35;
  color:var(--ink);
  padding-top:3px;
}
[data-theme="priem"] .ed-sub-item .d,
[data-theme="uchproc"] .ed-sub-item .d{
  grid-column:3;
  max-width:72ch;
  font-size:14.5px;
  line-height:1.72;
  color:var(--ink-soft);
  padding-top:4px;
}

@media (max-width:860px){
  [data-theme="priem"] .ed-sub-item,
  [data-theme="uchproc"] .ed-sub-item{
    grid-template-columns:28px minmax(0, 1fr);
    gap:6px 18px;
  }
  [data-theme="priem"] .ed-sub-item .t,
  [data-theme="uchproc"] .ed-sub-item .t{ grid-column:2; }
  [data-theme="priem"] .ed-sub-item .d,
  [data-theme="uchproc"] .ed-sub-item .d{ grid-column:2; padding-top:2px; }
}

/* ---------------------------------------------------------------------------
   А. СПРАВОЧНИК — Документи, ЗЗЛД, Обществен съвет, Контакти
   Разчертан индекс: тънки линии вместо карти, тесен стълб отляво за етикета,
   съдържанието отдясно. Тук човек търси едно име в дълъг списък — кутиите
   само му пречат.
--------------------------------------------------------------------------- */

[data-theme="info"] .ed-doc-grid{
  display:block;
  margin:0;
}
[data-theme="info"] .ed-doc-card{
  display:grid;
  grid-template-columns:34px minmax(0, 1fr) auto;
  align-items:center;
  gap:0 18px;
  padding:15px 6px;
  margin:0;
  background:none;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  transition:background .3s ease-in-out;
}
[data-theme="info"] .ed-doc-card:hover{
  background:linear-gradient(90deg, var(--brick-bg) 0%, transparent 82%);
  transform:none;
  box-shadow:none;
}
[data-theme="info"] .ed-doc-card .fic{
  grid-row:1 / span 2;
  grid-column:1;
  width:34px; height:34px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--brick-bg);
  color:var(--brick-deep);
}
[data-theme="info"] .ed-doc-card .fname{
  grid-column:2;
  text-align:left;
  font-size:15px;
  font-weight:700;
  color:var(--ink);
  background:none;
  border:0;
  padding:0;
}
[data-theme="info"] .ed-doc-card .fname:hover{ color:var(--brick); }
[data-theme="info"] .ed-doc-card .doc-preview{
  grid-column:2;
  max-width:72ch;
  margin:2px 0 0;
  font-size:13px;
  line-height:1.6;
}
[data-theme="info"] .ed-doc-card .doc-actions{
  grid-column:3;
  grid-row:1 / span 2;
  display:flex;
  align-items:center;
  gap:10px;
  opacity:0;
  transform:translateX(6px);
  transition:all .3s ease-in-out;
}
[data-theme="info"] .ed-doc-card:hover .doc-actions,
[data-theme="info"] .ed-doc-card:focus-within .doc-actions{
  opacity:1;
  transform:none;
}
@media (max-width:760px){
  [data-theme="info"] .ed-doc-card{
    grid-template-columns:34px minmax(0, 1fr);
    padding:16px 4px;
  }
  [data-theme="info"] .ed-doc-card .doc-actions{
    grid-column:2;
    grid-row:auto;
    opacity:1;
    transform:none;
    margin-top:8px;
  }
}

/* ---------------------------------------------------------------------------
   В. ДЪЛГИ ОПИСАНИЯ — свиване с бутон
   Класът .is-long се добавя от JS само на редове с наистина дълъг текст.
--------------------------------------------------------------------------- */

.ed-sub-item .d{ max-width:72ch; }

.ed-sub-item.is-long .d{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:none;
}
.ed-sub-item.is-long.is-open .d{
  display:block;
  overflow:visible;
}
.ed-more-btn{
  grid-column:3;
  justify-self:start;
  margin-top:8px;
  padding:5px 12px 5px 0;
  background:none;
  border:0;
  font-family:'Manrope',sans-serif;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--brick);
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:all .3s ease-in-out;
}
.ed-more-btn::after{
  content:'';
  width:12px; height:12px;
  background:currentColor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s ease-in-out;
}
.ed-more-btn:hover{ gap:9px; }
.ed-sub-item.is-open .ed-more-btn::after{ transform:rotate(180deg); }

@media (max-width:860px){
  .ed-more-btn{ grid-column:2; }
}

/* редовете в останалите раздели (За родители, Проекти) също губят кутиите,
   но запазват простия си вид на списък с тънки разделители */
[data-theme="roditeli"] .ed-sub-item,
[data-theme="proekti"] .ed-sub-item,
body:not([data-theme]) .ed-sub-item{
  background:none;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  padding:18px 4px;
  transform:none;
}
[data-theme="roditeli"] .ed-sub-item:hover,
[data-theme="proekti"] .ed-sub-item:hover,
body:not([data-theme]) .ed-sub-item:hover{
  transform:none;
  box-shadow:none;
  border-color:var(--line);
  background:linear-gradient(90deg, var(--brick-bg) 0%, transparent 76%);
}
[data-theme="roditeli"] .ed-sub-item:last-child,
[data-theme="proekti"] .ed-sub-item:last-child,
body:not([data-theme]) .ed-sub-item:last-child{ border-bottom:0; }
.ed-spine-cats .ed-sub-item::before{ display:none; }
/* ...но не и в процесите, където ::before носи номера на стъпката */
[data-theme="priem"] .ed-spine-cats .ed-sub-item::before,
[data-theme="uchproc"] .ed-spine-cats .ed-sub-item::before{ display:block; }

/* ===========================================================================
   22. ЦВЯТ НА ПЛОЧКИТЕ В ЛЕНТАТА „УЧИЛИЩЕТО ОТБЛИЗО“
   По-рано ги направих всичките бели, за да е фонът чист. Резултатът е шест
   еднакви бели квадрата — окото няма за какво да се захване. Сега всяка
   плочка носи свой много светъл тон, а иконата и номерът ѝ са в наситената
   версия на същия тон. Тоновете остават в синьо-маслиненото семейство, за да
   не се разпадне палитрата.
=========================================================================== */

.ed-prog-card:nth-of-type(6n+1){ background:linear-gradient(165deg, #FFFFFF 0%, #F6E8DF 100%); --tone:#A24C36; }
.ed-prog-card:nth-of-type(6n+2){ background:linear-gradient(165deg, #FFFFFF 0%, #E7EEDC 100%); --tone:#5C7A46; }
.ed-prog-card:nth-of-type(6n+3){ background:linear-gradient(165deg, #FFFFFF 0%, #F7EAE1 100%); --tone:#C06A4E; }
.ed-prog-card:nth-of-type(6n+4){ background:linear-gradient(165deg, #FFFFFF 0%, #F6EBD6 100%); --tone:#B8863B; }
.ed-prog-card:nth-of-type(6n+5){ background:linear-gradient(165deg, #FFFFFF 0%, #F3E7E9 100%); --tone:#8C4B66; }
.ed-prog-card:nth-of-type(6n+6){ background:linear-gradient(165deg, #FFFFFF 0%, #E9EFDF 100%); --tone:#6E9C5C; }

.ed-prog-card{ border-color:rgba(255,255,255,.9); }
.ed-prog-card .p-ic{
  background:rgba(255,255,255,.85);
  color:var(--tone, var(--clay));
  box-shadow:0 4px 12px -4px rgba(36,30,25,.14);
}
.ed-prog-card:hover .p-ic{ background:var(--tone, var(--clay)); color:#fff; }
.ed-prog-card .p-n{ color:var(--tone, var(--clay)); opacity:.38; }
.ed-prog-card::after{
  background:linear-gradient(180deg, var(--tone, var(--clay)), transparent);
  opacity:.6;
}
.ed-prog-card:hover{ border-color:var(--tone, var(--clay)); }
.ed-prog-card:hover .p-arrow{ color:var(--tone, var(--clay)); }

/* ===========================================================================
   24. БЪРЗ РЕЖИМ НА МЕНЮТО + ВИДИМИ ЛИНКОВЕ В ТЕКСТА
=========================================================================== */

/* Щом една лента вече е отворена (.cat-open), преминаването към друг раздел
   не минава през гратисното забавяне: новата лента се разтяга за 0.16s, а
   старата изчезва веднага. Забавянето остава само за първото отваряне и за
   излизането от менюто, където пази мишката да не „изпусне“ подсекциите. */
.ed-overlay.cat-open .ed-ov-panel{
  transition:clip-path .16s cubic-bezier(.16,.8,.3,1),
             opacity .12s ease-in-out;
}
.ed-overlay.cat-open .ed-ov-panel.active{
  transition:clip-path .2s cubic-bezier(.16,.8,.3,1),
             opacity .14s ease-in-out;
}
/* самите пилюли също реагират по-живо, докато менюто е разгърнато */
.ed-overlay.cat-open .ed-ov-item{ transition:all .18s ease-in-out; }
.ed-overlay.cat-open .ed-ov-panel a{ transition:all .18s ease-in-out; }

/* --- линковете вътре в текста ---
   Глобалното правило в style-editorial.css е a{ color:inherit }, което е
   правилно за навигацията и картите, но прави линк в средата на абзац
   неразличим от обикновен текст. Тук му връщаме цвят и подчертаване. */
.ed-sub-item .d a,
.ed-doc-card .doc-preview a,
.ed-page-hero p a,
.ed-about-closing a,
.f-lab a,
.ed-note a{
  color:var(--brick);
  font-weight:700;
  white-space:nowrap;
  border-bottom:1.5px solid var(--brick-bg);
  padding-bottom:1px;
  transition:all .3s ease-in-out;
}
.ed-sub-item .d a:hover,
.ed-doc-card .doc-preview a:hover,
.ed-page-hero p a:hover,
.ed-about-closing a:hover,
.f-lab a:hover,
.ed-note a:hover{
  color:var(--brick-deep);
  background:var(--brick-bg);
  border-bottom-color:var(--brick);
  border-radius:4px;
  padding:1px 5px;
  margin:0 -5px;
}
/* стрелка след линка, за да личи, че води някъде */
.ed-sub-item .d a::after{ content:' →'; font-weight:400; }


/* ===========================================================================
   25. „УЧИЛИЩЕТО ОТБЛИЗО“ — СВЕТЛА СЕКЦИЯ
   След няколко опита с тъмна сцена, прожектор и слънце изводът е прост:
   секцията иска да бъде светла като целия сайт. Тъмната лента винаги
   изглеждаше или мътна, или залепена отгоре, а вълнообразният разделител
   правеше точно онзи рязък ръб, който трябваше да избегнем.

   Затова тук няма сцена, няма лъч и няма тъмнина. Остават кремавият фон на
   страницата, тъмно заглавие и шест плочки в свежи тонове с меки сенки.
   Цветовете са от времевата линия на „Нашата история“, за да си говорят
   двете секции.
=========================================================================== */

.ed-programs{
  position:relative;
  background:none;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  padding-top:96px;
  padding-bottom:104px;
}
/* вълнообразният разделител точно тук правеше видима черта — махнат */
.ed-programs::before,
.ed-programs::after{ display:none; }

.ed-programs .ed-kicker{ color:var(--brick); }
.ed-programs .ed-h2{ color:var(--ink); text-shadow:none; }
.ed-programs-head p{ color:var(--ink-soft); }

/* --- плочките: бели, с тон от времевата линия --- */
.ed-prog-card{
  border:1px solid var(--line);
  box-shadow:0 8px 24px -14px rgba(36,30,25,.2);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s ease;
}
.ed-prog-card:nth-of-type(6n+1){ background:linear-gradient(165deg, #FFFFFF 0%, #F9E9E2 100%); --tone:#A24C36; }
.ed-prog-card:nth-of-type(6n+2){ background:linear-gradient(165deg, #FFFFFF 0%, #EBF2E4 100%); --tone:#6E9C5C; }
.ed-prog-card:nth-of-type(6n+3){ background:linear-gradient(165deg, #FFFFFF 0%, #FBEBDF 100%); --tone:#C06A4E; }
.ed-prog-card:nth-of-type(6n+4){ background:linear-gradient(165deg, #FFFFFF 0%, #E4F0EC 100%); --tone:#2F6F66; }
.ed-prog-card:nth-of-type(6n+5){ background:linear-gradient(165deg, #FFFFFF 0%, #FCF0D9 100%); --tone:#B8863B; }
.ed-prog-card:nth-of-type(6n+6){ background:linear-gradient(165deg, #FFFFFF 0%, #EEF2E2 100%); --tone:#5C7A46; }

.ed-prog-card .p-ic{
  background:#fff;
  color:var(--tone);
  box-shadow:0 3px 10px -4px rgba(36,30,25,.22);
}
.ed-prog-card .p-n{ color:var(--tone); opacity:.4; }
.ed-prog-card::after{ background:linear-gradient(180deg, var(--tone), transparent); opacity:.7; }
.ed-prog-card::before{
  background:linear-gradient(118deg, transparent 0%, rgba(255,255,255,.75) 46%, transparent 100%);
}
.ed-prog-card:hover{
  transform:translateY(-8px);
  border-color:var(--tone);
  box-shadow:0 26px 52px -22px rgba(36,30,25,.3);
}
.ed-prog-card:hover .p-ic{ background:var(--tone); color:#fff; }
.ed-prog-card:hover .p-arrow{ color:var(--tone); }

@media (max-width:760px){
  .ed-programs{ padding-top:72px; padding-bottom:80px; }
  /* лентата върви плавно: маската върху движещ се слой е скъпа, а блиците и
     дълбоките сенки се преизчисляват при всяка стъпка */
  .ed-prog-marquee{ -webkit-mask-image:none; mask-image:none; }
  .ed-prog-track{
    will-change:transform;
    transform:translateZ(0);
    backface-visibility:hidden;
    animation-duration:46s;
  }
  .ed-prog-card{
    box-shadow:0 6px 16px -10px rgba(36,30,25,.22);
    transition:none;
  }
  .ed-prog-card::before{ display:none; }
}

/* ===========================================================================
   26. „НАШАТА ИСТОРИЯ“ — РОТАЦИЯ НА ПОСТИЖЕНИЯТА
   Досега целият блок беше филмова ролка: превъртеше се вертикално на 38
   секунди в безкраен цикъл, а съдържанието беше удвоено, за да няма шев.
   Оттам идваше и повтореното изречение. Проблемът не е в движението, а в
   това какво се движи: движеща се текстова маса не може да се чете, а
   орденът — най-силният факт на училището — минаваше и си отиваше.

   Сега се върти само късото: шест отличия минават едно по едно, всяко застава
   около четири секунди, спира при посочване. Обяснителният текст и числата
   стоят на място.
=========================================================================== */

.ed-achieve{
  position:relative;
  max-width:820px;
  margin:0 auto 34px;
  padding:34px 28px 26px;
  text-align:center;
}
.ed-achieve-label{
  display:inline-block;
  margin-bottom:18px;
  font-family:'Manrope',sans-serif;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
/* тънки тухлени черти горе и долу — блокът се чете като плакет */
.ed-achieve::before,
.ed-achieve::after{
  content:'';
  position:absolute;
  left:50%;
  width:74px;
  height:1.5px;
  margin-left:-37px;
  background:linear-gradient(90deg, transparent, var(--brick), transparent);
}
.ed-achieve::before{ top:0; }
.ed-achieve::after{ bottom:0; }

/* прозорецът: висок колкото два реда, за да не подскача страницата */
.ed-achieve-window{
  position:relative;
  height:3.1em;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ed-achieve-line{
  position:absolute;
  left:0; right:0;
  margin:0;
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(20px,2.9vw,31px);
  line-height:1.32;
  color:var(--brick);
  opacity:0;
  transform:translateY(42%);
  transition:opacity .55s ease, transform .7s cubic-bezier(.16,.8,.3,1);
  pointer-events:none;
}
.ed-achieve-line.is-on{ opacity:1; transform:none; }
.ed-achieve-line.is-out{ opacity:0; transform:translateY(-42%); }

/* лентичка, която показва колко остава до следващото */
.ed-achieve-bar{
  position:relative;
  width:132px;
  height:2px;
  margin:22px auto 0;
  border-radius:2px;
  background:var(--line);
  overflow:hidden;
}
.ed-achieve-bar span{
  position:absolute;
  left:0; top:0; bottom:0;
  width:100%;
  border-radius:2px;
  background:linear-gradient(90deg, var(--brick), #C06A4E, #6E9C5C);
  transform-origin:left center;
  transform:scaleX(0);
}
.ed-achieve[data-running="1"] .ed-achieve-bar span{
  animation:edAchieveBar var(--hold, 4200ms) linear forwards;
}
@keyframes edAchieveBar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* --- числата --- */
.ed-fact-strip{ justify-content:center; gap:clamp(28px,6vw,86px); }
.ed-fact-strip .fact{ text-align:center; }
.ed-team-cta{
  display:inline-block;
  margin-bottom:10px;
  padding:11px 22px;
  border-radius:999px;
  background:var(--brick);
  color:#fff !important;
  font-family:'Manrope',sans-serif;
  font-size:14px;
  font-weight:700;
  border:0;
  transition:all .3s ease-in-out;
}
.ed-team-cta:hover{
  background:var(--brick-deep);
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 12px 26px -12px rgba(162,76,54,.55);
}
.ed-team-cta::after{ content:' →'; }
.fact-link .f-lab{ max-width:190px; }

@media (max-width:640px){
  .ed-achieve{ padding:28px 14px 22px; margin-bottom:26px; }
  .ed-achieve-window{ height:4.4em; }
  .ed-achieve-line{ font-size:19px; }
}

/* без анимация: всички отличия се показват като списък, нищо не се крие */
@media (prefers-reduced-motion:reduce){
  .ed-achieve-window{ height:auto; display:block; }
  .ed-achieve-line{
    position:static;
    opacity:1;
    transform:none;
    margin:0 0 12px;
    font-size:19px;
  }
  .ed-achieve-bar{ display:none; }
}

/* ===========================================================================
   27. НОВИНИ И РУБРИКИ — ХОРИЗОНТАЛЕН АКТ
   Заменя двата стари блока: голяма новина с три бели кутии отдясно и реда с
   двете медийни карти. Проблемите там бяха три — кутиите бяха единствените в
   сайта, всички новини бяха с еднаква тежест, а „Клубове и медии“ повтаряше
   плочките от „Училището отблизо“.

   Сега петте неща са един акт: скролът надолу превежда лентата настрани.
   Секцията е висока точно колкото трябва, за да минат всички панели, а вътре
   стои залепен екран. Скролът остава нормален — нищо не се прихваща.
=========================================================================== */

.hz{ position:relative; }
.hz-sticky{
  position:sticky; top:0;
  height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}

.hz-head{
  position:absolute; top:clamp(26px,5vh,58px); left:0; right:0;
  z-index:4;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; padding:0 clamp(20px,5vw,90px);
}
.hz-head .ed-h2{ margin:0; font-size:clamp(26px,3.4vw,46px); }
.hz-all{
  display:inline-block; margin-top:10px;
  font-family:'Manrope',sans-serif; font-size:12px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--brick);
  border-bottom:1.5px solid var(--brick-bg); padding-bottom:3px;
  transition:all .3s ease-in-out;
}
.hz-all:hover{ border-bottom-color:var(--brick); }
.hz-count{
  font-family:'Fraunces',serif; font-style:italic;
  font-size:clamp(20px,2.4vw,32px); color:var(--brick); white-space:nowrap;
}
.hz-count i{ font-style:normal; font-size:.5em; color:var(--muted); letter-spacing:.1em; }

.hz-track{
  display:flex; align-items:center;
  gap:clamp(22px,2.6vw,44px);
  padding:0 clamp(20px,5vw,90px);
  will-change:transform;
}
.hz-panel{
  flex:0 0 clamp(300px,68vw,860px);
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(20px,3vw,48px); align-items:center;
}
.hz-media{
  position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3;
  box-shadow:0 26px 60px -28px rgba(36,30,25,.5);
}
.hz-media span{
  position:absolute; inset:0; display:block;
  background-size:cover; background-position:center;
  transform:scale(1.06);
  transition:transform 1.2s cubic-bezier(.16,.8,.3,1);
}
.hz-panel:hover .hz-media span{ transform:scale(1.11); }
.hz-media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.22) 0%, transparent 42%);
}

.hz-text{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.hz-num{
  font-family:'Fraunces',serif; font-style:italic;
  font-size:clamp(34px,4.6vw,62px); line-height:.9;
  color:var(--brick); opacity:.28;
}
.hz-cat{
  font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.hz-t{
  margin:0; max-width:20ch;
  font-family:'Fraunces',serif; font-weight:400;
  font-size:clamp(23px,2.9vw,40px); line-height:1.14; color:var(--ink);
}
.hz-lead{
  margin:0; max-width:40ch;
  font-family:'Manrope',sans-serif; font-size:14.5px; line-height:1.7;
  color:var(--ink-soft);
}
.hz-cta{
  margin-top:6px; padding:12px 22px; border-radius:999px;
  background:var(--brick); color:#fff !important;
  font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase;
  transition:all .35s ease-in-out;
}
.hz-cta:hover{
  background:var(--brick-deep);
  transform:translateY(-3px);
  box-shadow:0 16px 32px -14px rgba(162,76,54,.6);
}

/* ориентири: напредък и точки */
.hz-bar{
  position:absolute; z-index:4;
  bottom:clamp(24px,5vh,54px);
  left:clamp(20px,5vw,90px); right:clamp(20px,5vw,90px);
  height:2px; border-radius:2px; background:var(--line);
}
.hz-bar i{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  border-radius:2px;
  background:linear-gradient(90deg, var(--brick), #C06A4E 60%, #6E9C5C);
}
.hz-dots{
  position:absolute; z-index:4;
  bottom:clamp(38px,7vh,74px); left:50%; transform:translateX(-50%);
  display:flex; gap:9px;
}
.hz-dot{
  width:8px; height:8px; padding:0; border:0; border-radius:50%;
  background:var(--line-2); cursor:pointer;
  transition:all .35s ease-in-out;
}
.hz-dot:hover{ background:var(--brick-bg); }
.hz-dot.is-on{ background:var(--brick); transform:scale(1.5); }
.hz-dot:focus-visible{ outline:2px solid var(--brick); outline-offset:3px; }

/* --- телефон: нормален вертикален списък --- */
@media (max-width:860px){
  .hz-sticky{ position:static; height:auto; padding:0 0 30px; overflow:visible; }
  .hz-head{
    position:static; padding:0 20px; margin-bottom:26px;
    flex-direction:column; align-items:flex-start;
  }
  .hz-track{ flex-direction:column; transform:none !important; padding:0 20px; gap:46px; }
  .hz-panel{ flex:none; grid-template-columns:1fr; gap:18px; }
  .hz-media{ aspect-ratio:16/11; }
  .hz-num{ font-size:34px; }
  .hz-bar, .hz-dots, .hz-count{ display:none; }
}

/* ===========================================================================
   28. СТРАНИЦА „НОВИНИ“ — СЪЩИЯТ ЕЗИК КАТО НАЧАЛНАТА
   Решетката от фото-плочки беше последното място с карти. Сега новините са
   редове: дата в тесен стълб отляво, малък кадър, заглавие и едно изречение,
   тънки косъмчета между тях. Същата логика като дневника в началната страница,
   а филтрите продължават да работят — само скриват редове, вместо плочки.
=========================================================================== */

.nl{ margin-top:8px; }
.nl-item{ border-top:1px solid var(--line); }
.nl-item:last-of-type{ border-bottom:1px solid var(--line); }
.nl-item[hidden]{ display:none; }

.nl-link{
  display:grid;
  grid-template-columns:clamp(92px,10vw,122px) clamp(150px,17vw,220px) minmax(0,1fr) auto;
  align-items:center;
  gap:0 clamp(18px,2.6vw,38px);
  padding:22px 6px;
  transition:padding-left .45s cubic-bezier(.16,.8,.3,1), background .4s ease;
}
.nl-link:hover{
  padding-left:18px;
  background:linear-gradient(90deg, var(--brick-bg) 0%, transparent 76%);
}

.nl-when{ display:flex; flex-direction:column; }
.nl-when b{
  font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  font-size:clamp(20px,2.1vw,27px); line-height:1.05; color:var(--brick);
}
.nl-when i{
  margin-top:4px; font-style:normal;
  font-family:'Manrope',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
}

.nl-media{
  position:relative; display:block;
  aspect-ratio:16/10; border-radius:11px; overflow:hidden;
  box-shadow:0 10px 26px -14px rgba(36,30,25,.4);
}
.nl-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.03);
  transition:transform .8s cubic-bezier(.16,.8,.3,1), filter .5s ease;
  filter:saturate(.95);
}
.nl-link:hover .nl-media img{ transform:scale(1.1); filter:saturate(1.05); }
.nl-badge{
  position:absolute; left:9px; top:9px;
  padding:4px 10px; border-radius:999px;
  background:var(--brick); color:#fff;
  font-family:'Manrope',sans-serif; font-size:9.5px; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase;
}

.nl-body{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.nl-cat{
  font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  transition:color .35s ease;
}
.nl-t{
  font-family:'Fraunces',serif; font-weight:400;
  font-size:clamp(18px,2vw,26px); line-height:1.26; color:var(--ink);
  transition:color .35s ease;
}
.nl-lead{
  max-width:56ch;
  font-family:'Manrope',sans-serif; font-size:13.5px; line-height:1.68;
  color:var(--ink-soft);
}
.nl-go{
  font-family:'Manrope',sans-serif; font-size:19px; color:var(--brick);
  opacity:0; transform:translateX(-8px);
  transition:all .4s cubic-bezier(.16,.8,.3,1);
}
.nl-link:hover .nl-cat{ color:var(--brick); }
.nl-link:hover .nl-t{ color:var(--brick-deep); }
.nl-link:hover .nl-go{ opacity:1; transform:none; }

.nl-empty{
  margin:34px 0 0; padding:26px 0;
  border-top:1px solid var(--line);
  font-family:'Manrope',sans-serif; font-size:14px; color:var(--muted);
  text-align:center;
}

@media (max-width:860px){
  .nl-link{
    grid-template-columns:82px minmax(0,1fr);
    grid-template-areas:'when body' 'media media';
    gap:14px 16px;
    padding:20px 2px;
  }
  .nl-when{ grid-area:when; }
  .nl-body{ grid-area:body; }
  .nl-media{ grid-area:media; aspect-ratio:16/9; }
  .nl-go{ display:none; }
  .nl-lead{ font-size:13px; }
}

/* ако залепването не работи, актът се държи като вертикален списък */
.hz.hz-fallback .hz-sticky{ position:static; height:auto; padding:0 0 30px; overflow:visible; }
.hz.hz-fallback .hz-head{ position:static; padding:0 clamp(20px,5vw,90px); margin-bottom:26px; }
.hz.hz-fallback .hz-track{ flex-direction:column; transform:none !important; gap:52px; }
.hz.hz-fallback .hz-panel{ flex:none; }
.hz.hz-fallback .hz-bar,
.hz.hz-fallback .hz-dots,
.hz.hz-fallback .hz-count{ display:none; }

/* ===========================================================================
   29. ВЪРТЯЩА СЕ ЛЕНТА С НОВИНИТЕ
   Заменя хоризонталния акт на началната страница. Картите стоят на дъга в
   перспектива и при всяко превъртане се наместват по ред: активната отпред в
   цял размер, съседните назад и настрани с все по-малък размер и рязкост.
   Лентата е кръгова — след последната идва първата.

   Иерархията е без рамки: само активната карта разкрива уводното изречение и
   бутона. Съседните показват само категория и заглавие, затова окото веднага
   знае кое е водещото.

   Стиловете на акта (секция 27) остават в файла — ако решим да го сложим на
   страница „Новини“, е готов; в HTML на началната страница вече го няма.
=========================================================================== */

.bl{ position:relative; padding:18px 0 0; }
.bl-stage{
  position:relative;
  height:clamp(390px,50vh,500px);
  perspective:1600px;
  perspective-origin:50% 44%;
  cursor:grab;
  touch-action:pan-y;
}
.bl-stage.is-drag{ cursor:grabbing; }

.bl-card{
  position:absolute; left:50%; top:0;
  width:clamp(280px,34vw,450px);
  margin-left:calc(clamp(280px,34vw,450px) / -2);
  display:block;
  border-radius:16px; overflow:hidden;
  background:var(--cream-3);
  border:1px solid var(--line);
  transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.2,.9,.25,1),
             opacity .6s ease, box-shadow .6s ease, filter .6s ease;
  will-change:transform;
}
.bl-img{
  display:block;
  height:clamp(176px,21vh,230px);
  background-size:cover; background-position:center;
}
.bl-info{ display:block; padding:18px 20px 22px; }
.bl-cat{
  display:block; margin-bottom:8px;
  font-family:'Manrope',sans-serif; font-size:10px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.bl-t{
  display:block;
  font-family:'Fraunces',serif; font-weight:400;
  font-size:clamp(17px,1.5vw,21px); line-height:1.22; color:var(--ink);
}
.bl-lead{
  display:block; margin-top:9px;
  max-height:0; overflow:hidden; opacity:0;
  font-family:'Manrope',sans-serif; font-size:13px; line-height:1.62;
  color:var(--ink-soft);
  transition:max-height .6s ease, opacity .5s ease;
}
.bl-cta{
  display:block; margin-top:0;
  max-height:0; overflow:hidden; opacity:0;
  font-family:'Manrope',sans-serif; font-size:11.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brick);
  transition:max-height .6s ease, opacity .5s ease, margin-top .5s ease;
}
.bl-card.is-on .bl-lead{ max-height:5.4em; opacity:1; }
.bl-card.is-on .bl-cta{ max-height:2em; opacity:1; margin-top:12px; }
.bl-card.is-on{ border-color:var(--brick-bg); }

.bl-num{
  position:absolute; z-index:3; right:14px; top:12px;
  padding:5px 11px; border-radius:999px;
  background:rgba(251,248,241,.9);
  backdrop-filter:blur(6px);
  font-family:'Fraunces',serif; font-style:italic; font-size:14px;
  color:var(--brick);
}

/* --- номерата долу --- */
.bl-ticks{
  display:flex; justify-content:center; align-items:center;
  gap:clamp(10px,1.6vw,22px);
  margin-top:clamp(18px,3vh,32px);
}
.bl-tick{
  position:relative; padding:8px 4px 12px;
  border:0; background:none; cursor:pointer;
  font-family:'Fraunces',serif; font-style:italic; font-size:15px;
  color:var(--muted);
  transition:all .35s ease-in-out;
}
.bl-tick b{ font-weight:400; }
.bl-tick i{
  position:absolute; left:0; right:0; bottom:0;
  display:block; height:2px; border-radius:2px;
  background:var(--line); overflow:hidden;
}
.bl-tick i::after{
  content:''; position:absolute; inset:0; border-radius:2px;
  background:linear-gradient(90deg, var(--brick), #C06A4E 60%, #6E9C5C);
  transform:scaleX(0); transform-origin:left;
}
.bl-tick:hover{ color:var(--brick); }
.bl-tick:focus-visible{ outline:2px solid var(--brick); outline-offset:3px; }
.bl-tick.is-on{ color:var(--brick); font-size:20px; }
.bl[data-running="1"] .bl-tick.is-on i::after{
  animation:blTick var(--hold,5200ms) linear forwards;
}
@keyframes blTick{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.bl-hint{
  margin:14px auto 0; width:max-content;
  font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

@media (max-width:760px){
  .bl-stage{ height:clamp(410px,62vh,520px); perspective:1100px; }
  .bl-card{
    width:clamp(250px,82vw,340px);
    margin-left:calc(clamp(250px,82vw,340px) / -2);
  }
  .bl-img{ height:158px; }
}
@media (prefers-reduced-motion:reduce){
  .bl-card{ transition:none; }
  .bl-tick.is-on i::after{ animation:none; transform:scaleX(1); }
}


/* ===========================================================================
   31. РУБРИКИ И КЛУБОВЕ — СОБСТВЕН РАЗДЕЛ
   Алеко ТВ и Алекознайко бяха достъпни само като панели във въртящата се
   лента с новините — трябваше да чакаш да дойдат техните номера. Тук имат
   свой раздел под нея, а редът отдолу води до останалите рубрики.
=========================================================================== */

.rb-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(18px,2.4vw,32px);
}
.rb-card{
  display:flex; flex-direction:column;
  border-radius:16px; overflow:hidden;
  background:var(--cream-3);
  border:1px solid var(--line);
  box-shadow:0 10px 26px -18px rgba(36,30,25,.35);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s ease;
}
.rb-card:hover{
  transform:translateY(-6px);
  border-color:var(--brick);
  box-shadow:0 26px 52px -24px rgba(36,30,25,.42);
}
.rb-img{
  position:relative; display:block;
  aspect-ratio:16/9;
  background-size:cover; background-position:center;
}
.rb-play{
  position:absolute; left:50%; top:50%;
  width:52px; height:52px; margin:-26px 0 0 -26px;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(251,248,241,.94); color:var(--brick);
  box-shadow:0 8px 22px -8px rgba(36,30,25,.5);
  transition:all .4s ease-in-out;
}
.rb-card:hover .rb-play{ background:var(--brick); color:#fff; transform:scale(1.1); }
.rb-body{ display:block; padding:20px 22px 24px; }
.rb-kick{
  display:block; margin-bottom:8px;
  font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brick);
}
.rb-t{
  display:block;
  font-family:'Fraunces',serif; font-weight:400;
  font-size:clamp(18px,1.9vw,24px); line-height:1.24; color:var(--ink);
}
.rb-sub{
  display:block; margin-top:9px; max-width:44ch;
  font-family:'Manrope',sans-serif; font-size:13.5px; line-height:1.65;
  color:var(--ink-soft);
}

@media (max-width:760px){
  .rb-grid{ grid-template-columns:1fr; }
}

/* ===========================================================================
   32. ГЕРОЙСКИЯТ КАДЪР — КИНО ЛЕНТА И СВЕТЕЩА НИШКА
   Кадърът беше височина 100vh — цял екран, при който посетителят не вижда,
   че отдолу има съдържание. Сега е кинематографична лента 2.35:1 от ръб до
   ръб: на широк монитор заема около половината екран, значи веднага се показва
   и началото на „Нашата история“. Съотношението се води по ширината, затова
   изглежда еднакво на всеки монитор, вместо да се изрязва на нисък.

   Надписите, заглавието дума по дума и полароидът остават както си бяха.

   Отгоре: тънка светеща нишка пресича кадъра по средата на всеки 7 секунди,
   а по средата остава едва видима постоянна линия като хоризонт. Същият език
   като искрата по времевата линия в „Нашата история“.
=========================================================================== */

.ed-hero{
  height:auto;
  min-height:auto;
  max-height:none;
  overflow:visible;
  background:var(--cream);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:calc(var(--ed-banner-h, 0px) + clamp(98px,11vh,124px)) 0 clamp(20px,3vh,36px);
}

/* --- лентата --- */
.ed-hero-bg{
  position:relative;
  flex:0 0 auto;
  width:100vw;
  margin-left:calc(50% - 50vw);
  aspect-ratio:2.35 / 1;
  max-height:62vh;
  min-height:340px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}

/* надписите остават долу в кадъра */
/* Надписите се вдигат по-високо в кадъра: движещата се лента стои плътно под
   него и текстът опираше в нея. Сега между тях има въздух, а редовете имат
   повече място по ширина, за да не се пренасят на повече редове. */
.ed-hero .ed-hero-inner{
  position:absolute; z-index:4;
  left:0; right:0; bottom:0;
  padding:0 clamp(20px,5vw,80px) clamp(64px,10vh,120px);
}
.ed-hero .ed-hero-sub{ max-width:66ch; }



/* показалецът за скрол вече е под лентата, върху кремавото */
.ed-hero .ed-scroll-cue{
  position:relative; left:auto; bottom:auto;
  align-self:center; transform:none;
}
.ed-hero .ed-scroll-cue .line{ background:var(--brick); opacity:.5; }

/* --- светещата нишка: закотвена за САМОТО ЗАГЛАВИЕ ---
   По-рано беше позиционирана спрямо долния край на кадъра, а той се мени с
   височината на екрана — затова нишката се озоваваше някъде другаде, вместо
   под името. Сега е псевдоелемент на самото заглавие, значи винаги минава
   точно под него, на всеки екран. */
.ed-hero .ed-hero-inner h1{ position:relative; }

/* постоянната бледа линия под името */
.ed-hero .ed-hero-inner h1::after{
  content:'';
  position:absolute;
  left:50%; bottom:-18px;
  transform:translateX(-50%);
  width:min(720px, 94%);
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,246,232,.3) 22%, rgba(255,246,232,.3) 78%, transparent);
  pointer-events:none;
}
/* искрата, която пробягва по нея */
.ed-hero .ed-hero-inner h1::before{
  content:'';
  position:absolute;
  bottom:-19px; left:4%;
  width:26%; height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,
    transparent,
    rgba(255,246,232,.95) 45%,
    rgba(192,106,78,.9) 62%,
    transparent);
  box-shadow:0 0 18px 3px rgba(255,236,190,.35);
  filter:blur(.4px);
  pointer-events:none;
  animation:fxThread 7s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes fxThread{
  0%   { left:-26%; opacity:0; }
  12%  { opacity:1; }
  80%  { opacity:1; }
  100% { left:100%; opacity:0; }
}
/* старият елемент в разметката вече не се ползва */
.fx-thread{ display:none; }

@media (max-width:860px){
  .ed-hero-bg{ aspect-ratio:16 / 10; max-height:none; min-height:300px; }
}
@media (max-width:760px){
  /* на телефон кадърът е по-висок, за да не е ивица */
  .ed-hero-bg{ aspect-ratio:4 / 3; max-height:none; min-height:340px; }
}

@media (prefers-reduced-motion:reduce){
  /* линията под името остава, спира само искрата */
  .ed-hero .ed-hero-inner h1::before{ animation:none; opacity:0; }
}

/* Менюто е върху кремаво и е в тъмен текст, затова затъмняващият воал в
   горния ръб на кадъра е излишен — само мърсеше картината. */
.ed-hero .ed-nav-scrim{ display:none; }

/* ===========================================================================
   33. НОВИНАРСКА ЛЕНТА НАЙ-ОТДОЛУ
   Закаченото съобщение беше полароид в кадъра. В ниската кино лента то нямаше
   място: блъскаше се с бутона „Контакти“ и с логото, а на телефон лягаше върху
   заглавието. Сега е тънка лента, закачена най-долу на екрана, в която текстът
   тече бавно отдясно наляво — както важните съобщения в новините.

   Нарочно е сдържана: 34 пиксела висока, полупрозрачна с размиване, дребен
   текст в разредка. Показва се само когато е активна и докато не е изтекла —
   същата логика като преди, същите атрибути data-active и data-expires.

   Бутонът „Контакти“ е махнат от бара на всички 26 страници — заради него
   логото се съкращаваше. Контактите остават в менюто, долу в списъка.
=========================================================================== */

.ed-ticker{
  margin-top:10px;
  /* Стои веднага под заглавната снимка, в потока на страницата — не е закачена
     за долния край на екрана. Разлива се на цялата ширина, за да продължи
     ръбовете на кадъра. */
  position:relative;
  left:50%;
  width:100vw;
  margin-left:-50vw;
  z-index:5;
  height:36px;
  display:flex; align-items:center;
  background:rgba(251,248,241,.82);
  backdrop-filter:blur(12px) saturate(1.3);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  border-top:1px solid rgba(162,76,54,.14);
  border-bottom:1px solid rgba(162,76,54,.14);
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .6s ease, transform .7s cubic-bezier(.16,.8,.3,1);
}
.ed-ticker.active{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

/* релсата реже, а пътечката се движи — затова текстът изчезва плавно в ръбовете */
.tk-rail{
  flex:1; min-width:0; overflow:hidden;
  -webkit-mask:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.tk-track{
  display:flex; width:max-content;
  animation:tkRun 68s linear infinite;
}
.ed-ticker:hover .tk-track{ animation-play-state:paused; }
@keyframes tkRun{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.tk-item{
  display:inline-flex; align-items:center; gap:12px;
  padding-right:64px;
  white-space:nowrap;
  font-family:'Manrope',sans-serif;
  font-size:11.5px; font-weight:600;
  letter-spacing:.1em;
  color:var(--ink-soft);
}
.tk-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--brick);
  box-shadow:0 0 0 3px rgba(162,76,54,.14);
  flex:0 0 auto;
}
.tk-msg{ text-transform:uppercase; }
.tk-link{
  font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brick);
  border-bottom:1px solid rgba(162,76,54,.35);
  padding-bottom:1px;
  transition:border-color .3s ease;
}
.tk-link:hover{ border-bottom-color:var(--brick); }

@media (max-width:760px){
  .ed-ticker{ height:32px; }
  .tk-item{ font-size:10.5px; padding-right:48px; gap:9px; }
  .tk-track{ animation-duration:52s; }
}
@media (prefers-reduced-motion:reduce){
  /* без движение лентата само стои, а текстът се чете отляво */
  .tk-track{ animation:none; }
  .tk-rail{ -webkit-mask:none; mask:none; }
}

/* ===========================================================================
   34. СКИНОВЕ НА РАЗДЕЛИТЕ — РИСУВАНИ КАВЪРИ
   Всеки раздел има свой кавър: истинска SVG рисунка в папка art/, в цвета на
   собствената си палитра, с абстрактен мотив по темата. Същият език като
   тапетите на плочките в „Материална база“.

   Четиринайсет файла, общо под 17 KB — рязки на всеки екран, нула растерни
   изображения. Върху рисунката минава мек светлинен ъгъл за обем, а надписите
   стоят над всичко.

   Мотивите: Прием — стъпки към отворена врата. Учебен процес — тетрадка,
   часовник и книга. За родители — преливащи форми и сърце. Проекти —
   съзвездие и глобус. Документи — наслоени листове с печат. Рубрики и Алеко ТВ
   — вълна с бутон за пускане и еквалайзер. Алекознайко — крушка и балон за
   реплика. Екип — редица фигури. Квалификации — стъпала и лавров венец.
   Материална база — план на сграда. Новини — колони на вестник. Визия —
   изгряващи дъги и компас. За ученици — раница, тетрадка и молив.
=========================================================================== */

.ed-cover{
  position:relative;
  overflow:hidden;
  background-image:url('art/cover-default.svg');
  background-size:cover;
  background-position:center;
}
.ed-cover-stack{ position:relative; z-index:3; }
.ed-cover-figures{ display:none; }   /* старите общи фигури вече не трябват */

[data-theme="priem"]        .ed-cover{ background-image:url('art/cover-priem.svg'); }
[data-theme="uchproc"]      .ed-cover{ background-image:url('art/cover-uchproc.svg'); }
[data-theme="roditeli"]     .ed-cover{ background-image:url('art/cover-roditeli.svg'); }
[data-theme="proekti"]      .ed-cover{ background-image:url('art/cover-proekti.svg'); }
[data-theme="info"]         .ed-cover{ background-image:url('art/cover-info.svg'); }
[data-theme="alekotv"]      .ed-cover{ background-image:url('art/cover-media.svg'); }
[data-theme="media"]        .ed-cover{ background-image:url('art/cover-media.svg'); }
[data-theme="alekoznaiko"]  .ed-cover{ background-image:url('art/cover-alekoznaiko.svg'); }
[data-theme="ekip"]         .ed-cover{ background-image:url('art/cover-ekip.svg'); }
[data-theme="kvalifikacii"] .ed-cover{ background-image:url('art/cover-kvalifikacii.svg'); }
[data-theme="baza"]         .ed-cover{ background-image:url('art/cover-baza.svg'); }
[data-theme="novini"]       .ed-cover{ background-image:url('art/cover-novini.svg'); }
[data-theme="vizia"]        .ed-cover{ background-image:url('art/cover-vizia.svg'); }
[data-theme="uchenici"]     .ed-cover{ background-image:url('art/cover-uchenici.svg'); }

/* лек тъмен воал в долния край — за да се чете заглавието върху рисунката */
.ed-cover::after{
  content:'';
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(36,30,25,.06) 0%, transparent 34%, rgba(26,18,14,.42) 100%);
}
.ed-cover-title{ position:relative; z-index:3; }
.ed-cover-icon{ position:relative; z-index:3; }

/* върху рисунката заглавието и иконата са светли — така се четат и на тъмно,
   и на светло място в кавъра */
.ed-cover-title{ color:#FFFDF7; text-shadow:0 2px 26px rgba(26,18,14,.5); }
.ed-cover-icon{ color:rgba(255,253,247,.94); }
.ed-cover .ed-kicker{ color:rgba(255,246,232,.82); }

/* ===========================================================================
   35. СКИН НА ЦЯЛАТА СТРАНИЦА
   Досега разделът се познаваше само по кавъра. Сега целият раздел носи своя
   характер: фонът на страницата е с лек оттенък от палитрата си, зад
   съдържанието минава едва видима шарка, повтаряща мотива от кавъра, а
   секциите, картите и връзките поемат акцентния цвят.

   Шарката е върху main::before — значи е на страницата, не на екрана, и не
   пречи при скролване. Държана е между 3 и 6 процента: трябва да се усеща,
   не да се вижда.
=========================================================================== */

[data-theme]{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--brick-bg) 55%, var(--cream)) 0%,
      var(--cream) 46%,
      color-mix(in srgb, var(--brick-bg) 35%, var(--cream)) 100%);
}
[data-theme] main{ position:relative; }
[data-theme] main::before{
  content:'';
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.05;
}
/* Прозорците за преглед (снимка, документ) са position:fixed и трябва да
   останат такива — затова не ги пипаме. Преди това правило ги правеше
   relative и те се отваряха някъде долу в страницата, вместо върху екрана. */
/* Прозорците за преглед са position:fixed и трябва да останат такива.
   Изключенията се изброяват по клас — ако утре се появи нов прозорец, добавя
   се и той, иначе ще се отваря в потока, някъде долу под съдържанието. */
[data-theme] main > *:not(.ed-doc-preview):not(.ed-video-preview){ position:relative; z-index:1; }

/* тънка акцентна черта над всяка секция — свързва страницата с кавъра */
[data-theme] .ed-section + .ed-section{
  border-top:1px solid color-mix(in srgb, var(--brick) 18%, transparent);
}
/* заглавията на секциите и надписите поемат цвета на раздела */
[data-theme] .ed-kicker{ color:var(--brick); }
[data-theme] .ed-page-title{ color:var(--brick-deep); }
/* картите и панелите — лек оттенък вместо голо бяло */
[data-theme] .ed-doc-cat-btn:hover,
[data-theme] .ed-sub-item:hover{
  background:linear-gradient(90deg, var(--brick-bg) 0%, transparent 76%);
}
[data-theme] .ed-doc-card{
  background:linear-gradient(170deg, #fff 0%, color-mix(in srgb, var(--brick-bg) 42%, #fff) 100%);
}
[data-theme] .ed-photo-tile{ box-shadow:0 14px 34px -20px color-mix(in srgb, var(--brick-deep) 55%, transparent); }

/* --- шарките: всяка повтаря мотива от своя кавър --- */

/* Прием — стъпки по път */
[data-theme="priem"] main::before{
  background:
    radial-gradient(circle at 12% 30%, var(--brick) 0 9px, transparent 10px),
    radial-gradient(circle at 32% 34%, var(--brick) 0 8px, transparent 9px),
    radial-gradient(circle at 52% 30%, var(--brick) 0 8px, transparent 9px),
    radial-gradient(circle at 72% 34%, var(--brick) 0 9px, transparent 10px);
  background-size:520px 520px;
}
/* Учебен процес — разграфена тетрадка */
[data-theme="uchproc"] main::before{
  background:
    linear-gradient(0deg, var(--brick) 0 1px, transparent 1px),
    linear-gradient(90deg, var(--brick) 0 1px, transparent 1px);
  background-size:34px 34px;
  opacity:.07;
}
/* За родители — преливащи форми */
[data-theme="roditeli"] main::before{
  background:
    radial-gradient(28% 22% at 18% 12%, var(--brick) 0 60%, transparent 62%),
    radial-gradient(24% 18% at 78% 42%, var(--brick) 0 60%, transparent 62%),
    radial-gradient(26% 20% at 38% 78%, var(--brick) 0 60%, transparent 62%);
  background-size:900px 900px;
  opacity:.06;
}
/* Проекти — съзвездие */
[data-theme="proekti"] main::before{
  background-image:
    radial-gradient(circle at 10% 20%, var(--brick) 0 4px, transparent 5px),
    radial-gradient(circle at 42% 8%, var(--brick) 0 5px, transparent 6px),
    radial-gradient(circle at 74% 26%, var(--brick) 0 4px, transparent 5px),
    radial-gradient(circle at 26% 62%, var(--brick) 0 4px, transparent 5px),
    radial-gradient(circle at 62% 76%, var(--brick) 0 5px, transparent 6px);
  background-size:640px 640px;
  opacity:.08;
}
/* Документи — наслоени листове */
[data-theme="info"] main::before{
  background:repeating-linear-gradient(104deg,
    transparent 0 60px, var(--brick) 60px 61px, transparent 61px 140px);
}
/* Рубрики и клубове — прожектор в ъгъла, чийто сноп осветява знаците на
   клубовете: камерата на Алеко ТВ, крушката на Алекознайко и два знака,
   оставени за клубовете, които предстоят. Рисунката е ЕДНА — не се повтаря
   и стои закована спрямо екрана, затова не се движи при скролване. */
[data-theme="media"] main::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 680 340' preserveAspectRatio='xMinYMin slice'%3E%3Cdefs%3E%3ClinearGradient id='snop' x1='0' y1='0' x2='1' y2='0.6'%3E%3Cstop offset='0' stop-color='%23B8863B' stop-opacity='0.22'/%3E%3Cstop offset='0.55' stop-color='%23B8863B' stop-opacity='0.10'/%3E%3Cstop offset='1' stop-color='%23B8863B' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M118 12 L680 240 L680 340 L420 340 L132 62 Z' fill='url(%23snop)'/%3E%3Cg opacity='0.16' fill='none' stroke='%232F6F66' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 14 L70 44'/%3E%3Cpath d='M60 26 L118 12 L132 62 L74 76 Z'/%3E%3Cpath d='M118 12 l14 -12 M132 62 l16 12'/%3E%3C/g%3E%3Cg opacity='0.15' fill='none' stroke='%232F6F66' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='220' y='137' width='40' height='26' rx='4'/%3E%3Ccircle cx='232' cy='150' r='7'/%3E%3Cpath d='M260 142 l14 -6 v20 l-14 -6 z'/%3E%3Ccircle cx='370' cy='196' r='13'/%3E%3Cpath d='M362 212 h16 M365 218 h10'/%3E%3Ccircle cx='462' cy='246' r='7'/%3E%3Cpath d='M469 246 v-26 l15 -5 v10'/%3E%3Cpath d='M330 254 l24 -24'/%3E%3Cpath d='M354 230 l12 -12 l9 9 l-12 12 z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left top;
  background-size:cover;
  background-attachment:fixed;
  opacity:1;
}
/* по телефоните заковаването се държи капризно — там рисунката просто стои
   най-горе на страницата и се плъзга с нея */
@media (max-width:760px){
  [data-theme="media"] main::before{ background-attachment:scroll; background-size:150% auto; }
}
/* Алеко ТВ — вълна (сигналът в ефир) */
[data-theme="alekotv"] main::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80'%3E%3Cpath d='M0 40 C 50 8 100 72 150 40 C 200 8 250 72 300 40 C 350 8 400 72 450 40' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E");
  background-size:400px 80px;
  opacity:.06;
}
/* Алекознайко — крушки */
[data-theme="alekoznaiko"] main::before{
  background:
    radial-gradient(circle at 20% 24%, var(--brick) 0 26px, transparent 27px),
    radial-gradient(circle at 70% 64%, var(--brick) 0 20px, transparent 21px);
  background-size:560px 560px;
  opacity:.05;
}
/* Екип — редица кръгове */
[data-theme="ekip"] main::before{
  background:radial-gradient(circle at 50% 40%, var(--brick) 0 22px, transparent 23px);
  background-size:150px 150px;
}
/* Квалификации — стъпала */
[data-theme="kvalifikacii"] main::before{
  background:
    linear-gradient(0deg, var(--brick) 0 22px, transparent 22px) 0% 100%/60px 22px repeat-x,
    linear-gradient(0deg, var(--brick) 0 44px, transparent 44px) 60px 100%/60px 44px repeat-x,
    linear-gradient(0deg, var(--brick) 0 66px, transparent 66px) 120px 100%/60px 66px repeat-x;
  opacity:.045;
}
/* Материална база — план на сграда */
[data-theme="baza"] main::before{
  background:
    linear-gradient(0deg, var(--brick) 0 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--brick) 0 1.5px, transparent 1.5px);
  background-size:180px 120px;
  opacity:.06;
}
/* Новини — колони на вестник */
[data-theme="novini"] main::before{
  background:
    repeating-linear-gradient(90deg, var(--brick) 0 1px, transparent 1px 220px),
    repeating-linear-gradient(0deg, var(--brick) 0 1px, transparent 1px 16px);
  opacity:.045;
}
/* Визия — изгряващи дъги */
[data-theme="vizia"] main::before{
  background:
    radial-gradient(120% 60% at 50% 104%, transparent 0 46%, var(--brick) 46% 47%, transparent 47%),
    radial-gradient(96% 48% at 50% 104%, transparent 0 46%, var(--brick) 46% 47%, transparent 47%),
    radial-gradient(72% 36% at 50% 104%, transparent 0 46%, var(--brick) 46% 47%, transparent 47%),
    radial-gradient(48% 24% at 50% 104%, transparent 0 46%, var(--brick) 46% 47%, transparent 47%);
  background-size:1200px 900px;
  background-repeat:repeat-x;
  opacity:.09;
}
/* За ученици — тетрадка на редове */
[data-theme="uchenici"] main::before{
  background:
    linear-gradient(0deg, var(--brick) 0 1px, transparent 1px),
    linear-gradient(90deg, var(--brick) 0 2px, transparent 2px);
  background-size:100% 26px, 90px 100%;
  opacity:.05;
}

@media (prefers-reduced-motion:reduce){
  [data-theme] main::before{ opacity:.03; }
}

/* ===========================================================================
   36. СТРАНИЦА НА ПУБЛИКАЦИЯ
   Дотук новините бяха само заглавия в списък — нямаше къде да се прочете
   самата новина. Тази страница е шаблонът: заглавна снимка, водещ абзац,
   текст в четима колона и галерия със снимки от деня.
=========================================================================== */

.ar-head{ max-width:760px; margin:0 auto 34px; text-align:center; }
.ar-head .ed-kicker{ display:block; margin-bottom:14px; }
.ar-lead{
  margin:18px auto 0; max-width:62ch;
  font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  font-size:clamp(17px,1.8vw,22px); line-height:1.55;
  color:var(--ink-soft);
}

.ar-hero{
  margin:0 auto 42px;
  max-width:1100px;
  border-radius:16px; overflow:hidden;
  box-shadow:0 26px 60px -30px rgba(36,30,25,.45);
}
.ar-hero img{ width:100%; height:auto; display:block; }

.ar-body{ max-width:68ch; margin:0 auto; }
.ar-p{
  margin:0 0 20px;
  font-family:'Manrope',sans-serif;
  font-size:15.5px; line-height:1.85;
  color:var(--ink-soft);
}
/* първият абзац започва с по-голяма буква — дава ритъм на текста */
.ar-p:first-child::first-letter{
  float:left;
  font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  font-size:64px; line-height:.82;
  margin:6px 12px 0 0;
  color:var(--brick);
}

/* галерията: палците са отделни файлове, големите се отварят в прегледа */
.ed-photo-grid{ grid-template-columns:repeat(auto-fill, minmax(min(100%,240px), 1fr)); }
.ed-photo-tile .pt-n{ opacity:.7; }

@media (max-width:640px){
  .ar-hero{ border-radius:12px; margin-bottom:30px; }
  .ar-p{ font-size:15px; }
  .ar-p:first-child::first-letter{ font-size:52px; }
}

/* връзки към социалните мрежи във футъра */
.f-soc{ display:inline-flex; align-items:center; gap:9px; }
.f-soc svg{ flex:0 0 auto; opacity:.8; transition:opacity .3s ease, transform .3s ease; }
.f-soc:hover svg{ opacity:1; transform:scale(1.12); }

/* ===========================================================================
   37. ПРЕЛИСТВАНЕ В ПРЕГЛЕДА НА СНИМКИ
   Дотук прегледът показваше една снимка и трябваше да се затваря, за да се
   види следващата. Сега има стрелки, брояч, клавиши със стрелките и плъзгане
   с пръст. Стрелките се създават от JS, затова работят на всяка страница с
   галерия, без да се пипа разметката ѝ.
=========================================================================== */

.ph-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5;
  width:52px; height:52px;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  cursor:pointer;
  background:rgba(251,248,241,.9);
  color:var(--ink);
  box-shadow:0 10px 26px -12px rgba(20,12,9,.5);
  transition:all .3s ease-in-out;
}
.ph-nav.prev{ left:14px; }
.ph-nav.next{ right:14px; }
.ph-nav:hover{ background:#fff; transform:translateY(-50%) scale(1.08); }
.ph-nav:focus-visible{ outline:2px solid var(--brick); outline-offset:3px; }

.ph-count{
  font-family:'Manrope',sans-serif;
  font-size:12px; font-weight:800;
  letter-spacing:.1em;
  color:var(--muted);
  margin-right:14px;
  white-space:nowrap;
}

@media (max-width:640px){
  .ph-nav{ width:44px; height:44px; }
  .ph-nav.prev{ left:8px; }
  .ph-nav.next{ right:8px; }
  .ph-count{ margin-right:10px; font-size:11px; }
}

/* ===========================================================================
   38. ЛЕНТИ — ПРОЕКТИ И МАТЕРИАЛНА БАЗА
   Кутийки една до друга не дават място за текст и всичко изглежда еднакво
   важно. Тук всяка тема има собствена лента през цялата ширина: рисунка от
   едната страна, текст от другата, голям номер и факти под него. Лентите се
   редуват — една с рисунка отляво, следващата отдясно — и всяка втора носи
   лек оттенък, за да се чете като отделно място.
=========================================================================== */

.pb{
  position:relative;
  left:50%; width:100vw; margin-left:-50vw;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:stretch;
  min-height:clamp(340px,42vw,520px);
}
.pb:nth-of-type(even){ background:color-mix(in srgb, var(--brick-bg) 46%, var(--cream)); }

.pb-art{
  background-size:cover; background-position:center;
  min-height:240px;
}
.pb-text{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:12px;
  padding:clamp(34px,4.6vw,72px) clamp(22px,5vw,90px);
  justify-content:center;
  max-width:820px;
}
/* редуване: при „right“ рисунката минава отдясно */
.pb-right .pb-art{ grid-column:2; grid-row:1; }
.pb-right .pb-text{ grid-column:1; grid-row:1; margin-left:auto; }

.pb-n{
  font-family:'Fraunces',serif; font-style:italic;
  font-size:clamp(30px,3.4vw,50px); line-height:.9;
  color:var(--brick); opacity:.32;
}
.pb-kick{
  font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brick);
}
.pb-t{
  margin:0; max-width:26ch;
  font-family:'Fraunces',serif; font-weight:400;
  font-size:clamp(22px,2.6vw,36px); line-height:1.16; color:var(--ink);
}
.pb-p{
  margin:0; max-width:62ch;
  font-family:'Manrope',sans-serif; font-size:14.5px; line-height:1.78;
  color:var(--ink-soft);
}
.pb-facts{
  display:flex; flex-wrap:wrap; gap:10px 28px;
  margin-top:8px; padding-top:16px;
  border-top:1px solid var(--line);
  width:100%;
}
.pb-fact{ display:flex; flex-direction:column; gap:3px; max-width:26ch; }
.pb-fact b{
  font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  font-size:18px; color:var(--brick-deep);
}
.pb-fact span{
  font-family:'Manrope',sans-serif; font-size:12.5px; line-height:1.5;
  color:var(--muted);
}
.pb-note{
  margin:6px 0 0;
  font-family:'Manrope',sans-serif; font-size:12px; line-height:1.6;
  color:var(--muted);
}
.pb-link{
  margin-top:10px;
  font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brick);
  border-bottom:1.5px solid var(--brick-bg); padding-bottom:3px;
  transition:all .3s ease-in-out;
}
.pb-link:hover{ border-bottom-color:var(--brick); }

/* архив — тънък списък, без кутии */
.pb-arch{ list-style:none; margin:0; padding:0; }
.pb-arch li{
  padding:15px 4px;
  border-top:1px solid var(--line);
  font-family:'Manrope',sans-serif; font-size:14.5px; color:var(--ink-soft);
}
.pb-arch li:last-child{ border-bottom:1px solid var(--line); }

@media (max-width:860px){
  .pb{ grid-template-columns:1fr; min-height:0; }
  /* На телефон рисунката се показва ЦЯЛА. Преди отворът беше 16:9, а рисунките
     са 4:3 — значи се изрязваха отгоре и отдолу, а „дишането“ ги уголемяваше и
     режеше още. Сега пропорцията съвпада, картинката се побира, а дишането
     спира: на малък екран то само мести кадъра, без да се усеща. */
  .pb-art{
    grid-column:1 !important; grid-row:1 !important;
    aspect-ratio:4/3; min-height:0;
    background-size:contain !important;
    background-repeat:no-repeat;
    background-position:center !important;
    animation:none !important;
  }
  .pb-text{ grid-column:1 !important; grid-row:2 !important; margin:0 !important; padding:26px 20px 34px; }
  .pb-t{ max-width:none; }
}

/* ===========================================================================
   39. НОРМАТИВНИ ДОКУМЕНТИ — ГРУПИ И ТЪРСАЧКА
   Девет затворени реда един под друг натежаваха. Сега категориите са в три
   групи по смисъл, а отгоре има търсачка, която филтрира по име на документ и
   отваря само категориите с попадения.
=========================================================================== */

.doc-group{ margin-bottom:clamp(30px,4vh,52px); }
.doc-group-t{
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:1px solid color-mix(in srgb, var(--brick) 22%, transparent);
  font-family:'Manrope',sans-serif; font-size:11px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brick);
}

.doc-search{ margin:0 0 clamp(24px,3.4vh,38px); }
.ds-lab{
  display:block; margin-bottom:8px;
  font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.ds-box{
  display:flex; align-items:center; gap:10px;
  padding:13px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.ds-box:focus-within{
  border-color:var(--brick);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brick) 12%, transparent);
}
.ds-box svg{ color:var(--muted); flex:0 0 auto; }
.ds-box input{
  flex:1; min-width:0;
  border:0; outline:none; background:none;
  font-family:'Manrope',sans-serif; font-size:14.5px; color:var(--ink);
}
.ds-box input::placeholder{ color:var(--muted); }
.ds-clear{
  border:0; background:none; cursor:pointer;
  font-size:14px; color:var(--muted); padding:2px 4px;
}
.ds-clear:hover{ color:var(--brick); }
.ds-hint{
  margin:10px 0 0;
  font-family:'Manrope',sans-serif; font-size:12.5px; color:var(--muted);
}
/* при търсене скриваме несъвпадащите карти и цели категории */
.ed-doc-card[hidden], .ed-doc-cat[hidden], .doc-group[hidden]{ display:none !important; }



/* ===========================================================================
   40. ПЛУВАЩИ ФИГУРИ ОТ РАЗДЕЛИТЕ
   Платното е закотвено за екрана, над фона на страницата и под съдържанието ѝ.
   Логиката е в figuri.js — там са и обясненията за дълбочината и формите.
=========================================================================== */
/* Платното стои над фона на страницата и под съдържанието ѝ.
   ВАЖНО: тук се пипа само main. Менюто, наслоеният панел и чатът са fixed по
   природа — направят ли се relative, влизат в потока и бутат страницата надолу.
   Точно това създаваше голямото разстояние над геройския кадър. */
.figuri{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
}
main{ position:relative; z-index:1; }
.ed-footer{ position:relative; z-index:1; }
/* снимката в „Нашата история“ се смекчава, за да не гаси фигурите под себе си */
.ed-about-wash{ opacity:.5; }

/* ===========================================================================
   41. ОЖИВЯВАНЕ НА КАВЪРИТЕ И ТАПЕТИТЕ
   Рисунките са SVG файлове, ползвани като фон. Вътрешните им анимации не се
   изпълняват, когато файлът е фон — браузърът го рисува като неподвижна
   картинка. Затова движението идва отвън, върху самия слой:

   1. ДИШАНЕ — рисунката много бавно се приближава и отдалечава, 26 секунди за
      цикъл. Достатъчно, за да не е замръзнала, недостатъчно, за да разсейва.
   2. СВЕТЛИНА — мека ивица минава косо през кавъра на всеки 9 секунди, като
      слънце през прозорец.
   3. ПАРАЛАКС — при скролиране рисунката се измества по-бавно от страницата,
      затова кавърът изглежда по-дълбок от текста върху него.
   4. ТАПЕТИТЕ на плочките се приближават при посочване и по тях минава блик.
=========================================================================== */

/* --- 1. дишане ---
   Важи само ако рисунката не е вградена (клас has-art). Когато е вградена,
   линиите ѝ се движат сами и дишането на целия слой е излишно. */
.ed-cover:not(.has-art){
  background-size:112% auto;
  animation:coverDishane 26s ease-in-out infinite alternate;
}
@keyframes coverDishane{
  0%   { background-size:112% auto; background-position:48% 42%; }
  100% { background-size:124% auto; background-position:52% 58%; }
}

/* --- 2. светлината през кавъра --- */
.ed-cover::before{
  content:'';
  position:absolute; z-index:2;
  top:-20%; bottom:-20%; left:-40%; width:34%;
  pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,252,242,.34) 46%, transparent);
  filter:blur(14px);
  transform:skewX(-12deg);
  animation:coverSvetlina 9s ease-in-out infinite;
}
@keyframes coverSvetlina{
  0%   { left:-40%; opacity:0; }
  18%  { opacity:1; }
  72%  { opacity:.9; }
  100% { left:112%; opacity:0; }
}

/* --- 3. паралакс при скролиране (стойността идва от JS) --- */
.ed-cover{ background-position-y:calc(42% + var(--cover-shift, 0px)); }

/* --- 4. тапетите на плочките --- */
.ed-photo-tile img{
  transition:transform 1.1s cubic-bezier(.16,.8,.3,1), filter .5s ease;
}
.ed-photo-tile:hover img{ transform:scale(1.07); filter:saturate(1.08); }
.ed-photo-tile::after{
  content:'';
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
  background:linear-gradient(104deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%);
  transform:translateX(-120%);
  transition:transform 1.1s cubic-bezier(.16,.8,.3,1);
}
.ed-photo-tile:hover::after{ transform:translateX(120%); }

/* лентите в проектите и материалната база — рисунката диша и там */
.pb-art{
  background-size:112% auto;
  animation:coverDishane 30s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion:reduce){
  .ed-cover, .pb-art{ animation:none; background-size:cover; }
  .ed-cover::before{ animation:none; opacity:0; }
  .ed-photo-tile:hover img{ transform:none; }
}

/* ===========================================================================
   42. ЖИВИ ЛИНИИ В КАВЪРА
   Рисунката вече е вградена в страницата (виж края на script-editorial.js),
   затова всяка линия и всяка форма могат да се движат поотделно:
   линиите се изчертават веднъж при отваряне, после дишат;
   формите пулсират много бавно и с различно закъснение.
   Ако вграждането не сработи, кавърът остава фон както преди — нищо не се чупи.
=========================================================================== */

.cover-art{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.cover-art svg{ width:100%; height:100%; display:block; }
/* когато рисунката е вградена, фонът на кавъра остава само за цвят */
.has-art{ background-size:cover; animation:none; }
.has-art::before{ z-index:2; }

/* линиите се изчертават, после дишат */
.la-linia{
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  animation:laChertane 2.4s cubic-bezier(.16,.8,.3,1) forwards,
            laDishane 7s ease-in-out infinite alternate 2.6s;
}
@keyframes laChertane{ to{ stroke-dashoffset:0; } }
@keyframes laDishane{
  0%   { opacity:.7; transform:translateY(0); }
  100% { opacity:1;  transform:translateY(-3px); }
}
/* формите пулсират бавно */
.la-forma{
  transform-box:fill-box;
  transform-origin:center;
  animation:laPulsirane 9s ease-in-out infinite alternate;
}
@keyframes laPulsirane{
  0%   { opacity:.78; transform:scale(1); }
  100% { opacity:1;   transform:scale(1.05); }
}

@media (prefers-reduced-motion:reduce){
  .la-linia, .la-forma{ animation:none; stroke-dashoffset:0; }
}

/* ===========================================================================
   43. СКИЦИ НА СЦЕНИ — АЛЕКО ТВ И ЗА РОДИТЕЛИ
   Повторението на един и същ кадър по страницата отпада: вместо това има две
   различни сцени — студиото горе и монтажната по-долу. Всяка се показва веднъж
   и всяка има свое движение.

   Същият подход е приложен и на „За родители“: портата на училището, родител и
   дете за ръка, тетрадка със съобщение и часовник за срещите.
=========================================================================== */

[data-theme="alekotv"]{
  background:linear-gradient(180deg,
    color-mix(in srgb, #DDEAE6 70%, var(--cream)) 0%,
    var(--cream) 30%,
    var(--cream) 62%,
    color-mix(in srgb, #DDEAE6 48%, var(--cream)) 100%);
}
[data-theme="roditeli"]{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--brick-bg) 62%, var(--cream)) 0%,
    var(--cream) 32%,
    var(--cream) 66%,
    color-mix(in srgb, var(--brick-bg) 44%, var(--cream)) 100%);
}
/* повтарящата се шарка на тези два раздела отпада — сцените я заместват */
[data-theme="alekotv"] main::before,
[data-theme="roditeli"] main::before{ display:none !important; }

/* Когато рисунката е вградена в кавъра, фоновото ѝ копие се маха. Без това
   едната се вижда през другата и всичко изглежда удвоено. */
.ed-cover.has-art{ background-image:none !important; animation:none; }
.ed-cover.has-art::before{ z-index:3; }

/* --- рамката на сцените --- */
.scena{
  position:relative;
  width:100vw; margin-left:calc(50% - 50vw);
  height:clamp(200px,24vw,340px);
  pointer-events:none;
  opacity:.92;
}
.scena svg{ width:100%; height:100%; display:block; }
.scena-gore{ margin-top:76px; }
.scena-dolu{ margin:clamp(24px,4vh,50px) 0 0; opacity:.8; }

/* ================= ДВИЖЕНИЕ В СТУДИОТО ================= */
.st-cam1{ transform-box:fill-box; transform-origin:70% 60%; animation:tvPan 14s ease-in-out infinite alternate; }
.st-cam2{ transform-box:fill-box; transform-origin:30% 60%; animation:tvPan2 18s ease-in-out infinite alternate; }
@keyframes tvPan{ 0%{ transform:rotate(-2.2deg); } 100%{ transform:rotate(2.6deg); } }
@keyframes tvPan2{ 0%{ transform:rotate(2deg); } 100%{ transform:rotate(-2.4deg); } }
.st-beam, .st-lamp{ transform-box:fill-box; transform-origin:top center; animation:tvLuch 6s ease-in-out infinite alternate; }
@keyframes tvLuch{ 0%{ opacity:.5; transform:rotate(-3deg); } 100%{ opacity:1; transform:rotate(3deg); } }
.st-tally{ animation:tvTally 2.4s steps(1,end) infinite; }
.st-tally2{ animation:tvTally 2.4s steps(1,end) infinite .8s; }
@keyframes tvTally{ 0%,55%{ opacity:1; } 56%,100%{ opacity:.15; } }
.st-boom{ transform-box:fill-box; transform-origin:0% 100%; animation:tvBoom 11s ease-in-out infinite alternate; }
@keyframes tvBoom{ 0%{ transform:rotate(-1.6deg); } 100%{ transform:rotate(2deg); } }
.st-mon path[stroke="#2F6F66"]{ stroke-dasharray:240; stroke-dashoffset:240; animation:tvSignal 3.2s linear infinite; }
@keyframes tvSignal{ to{ stroke-dashoffset:-240; } }
.st-sign{ animation:tvSign 5s ease-in-out infinite; }
@keyframes tvSign{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }

/* ================= ДВИЖЕНИЕ В МОНТАЖНАТА ================= */
/* курсорът на времевата линия минава напред-назад, както при монтаж */
.st-playhead{ transform-box:fill-box; animation:tvPlayhead 9s ease-in-out infinite alternate; }
@keyframes tvPlayhead{ 0%{ transform:translateX(-104px); } 100%{ transform:translateX(238px); } }
.st-clips rect{ animation:tvClip 5s ease-in-out infinite alternate; }
.st-clips rect:nth-child(2){ animation-delay:.6s; }
.st-clips rect:nth-child(3){ animation-delay:1.2s; }
.st-clips rect:nth-child(4){ animation-delay:1.8s; }
@keyframes tvClip{ 0%{ opacity:.55; } 100%{ opacity:1; } }
.st-clap{ transform-box:fill-box; transform-origin:0% 100%; animation:tvClap 7s ease-in-out infinite; }
@keyframes tvClap{ 0%,88%,100%{ transform:rotate(0); } 92%{ transform:rotate(-3deg); } 96%{ transform:rotate(1deg); } }
.st-wave{ stroke-dasharray:60 14; animation:tvWave 4s linear infinite; }
@keyframes tvWave{ to{ stroke-dashoffset:-148; } }
.st-screen{ transform-box:fill-box; transform-origin:center; animation:tvScreen 16s ease-in-out infinite alternate; }
@keyframes tvScreen{ 0%{ transform:translateY(0); } 100%{ transform:translateY(-5px); } }

/* ================= ДВИЖЕНИЕ ПРИ „ЗА РОДИТЕЛИ“ ================= */
/* двамата се полюляват, сякаш вървят */
.rd-pair{ transform-box:fill-box; transform-origin:50% 100%; animation:rdWalk 7s ease-in-out infinite alternate; }
@keyframes rdWalk{ 0%{ transform:translateX(-10px) rotate(-.6deg); } 100%{ transform:translateX(12px) rotate(.6deg); } }
.rd-child{ transform-box:fill-box; transform-origin:50% 100%; animation:rdSkok 2.6s ease-in-out infinite; }
@keyframes rdSkok{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
/* сърцето бие */
.rd-heart{ transform-box:fill-box; transform-origin:center; animation:rdHeart 2.2s ease-in-out infinite; }
@keyframes rdHeart{ 0%,100%{ transform:scale(1); opacity:.7; } 24%{ transform:scale(1.14); opacity:1; } 40%{ transform:scale(1.02); } }
/* стрелките на часовника се движат */
.rd-hand-m{ transform-box:fill-box; transform-origin:0% 0%; animation:rdMin 12s linear infinite; }
.rd-hand-h{ transform-box:fill-box; transform-origin:50% 100%; animation:rdChas 72s linear infinite; }
@keyframes rdMin{ to{ transform:rotate(360deg); } }
@keyframes rdChas{ to{ transform:rotate(360deg); } }
/* редовете в тетрадката се изписват */
.rd-note path{ stroke-dasharray:120; stroke-dashoffset:120; animation:rdPishe 9s ease-in-out infinite; }
.rd-note path:nth-of-type(2){ animation-delay:.9s; }
.rd-note path:nth-of-type(3){ animation-delay:1.8s; }
@keyframes rdPishe{ 0%{ stroke-dashoffset:120; } 40%,86%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:120; } }
/* портата леко се отваря */
.rd-gate{ transform-box:fill-box; transform-origin:50% 100%; animation:rdGate 18s ease-in-out infinite alternate; }
@keyframes rdGate{ 0%{ transform:scaleX(1); } 100%{ transform:scaleX(1.012); } }

@media (max-width:760px){
  .scena{ height:180px; }
  .scena-gore{ margin-top:64px; }
}
@media (prefers-reduced-motion:reduce){
  .scena *{ animation:none !important; }
  .rd-note path, .st-wave, .st-mon path[stroke="#2F6F66"]{ stroke-dashoffset:0; }
}

/* ===========================================================================
   44. РЕЧНИК НА ДВИЖЕНИЕТО В СКИЦИТЕ
   Всеки кавър е скица с цветни петна и линии. Частите ѝ носят класове от този
   речник, затова една и съща дума значи едно и също движение навсякъде:
   люлеене, подскок, изчертаване, пулс, бавно въртене, мигане, течение.
   Така кавърите се движат, без да има по един стил за всеки поотделно.
=========================================================================== */

.cover-art *{ transform-box:fill-box; }

.an-sway{ transform-origin:50% 100%; animation:anSway 7s ease-in-out infinite alternate; }
@keyframes anSway{ 0%{ transform:rotate(-1.8deg); } 100%{ transform:rotate(2deg); } }

.an-bob{ transform-origin:50% 100%; animation:anBob 5.5s ease-in-out infinite alternate; }
@keyframes anBob{ 0%{ transform:translateY(0); } 100%{ transform:translateY(-7px); } }

.an-walk{ transform-origin:50% 100%; animation:anWalk 6s ease-in-out infinite alternate; }
@keyframes anWalk{ 0%{ transform:translateX(-16px); } 100%{ transform:translateX(22px); } }

.an-draw{ stroke-dasharray:320; stroke-dashoffset:320; animation:anDraw 9s ease-in-out infinite; }
@keyframes anDraw{ 0%{ stroke-dashoffset:320; } 38%,84%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:320; } }

.an-pulse{ transform-origin:center; animation:anPulse 2.6s ease-in-out infinite; }
@keyframes anPulse{ 0%,100%{ transform:scale(1); opacity:.75; } 45%{ transform:scale(1.16); opacity:1; } }

.an-spin-slow{ transform-origin:center; animation:anSpin 60s linear infinite; }
@keyframes anSpin{ to{ transform:rotate(360deg); } }

.an-blink{ animation:anBlink 2.4s steps(1,end) infinite; }
@keyframes anBlink{ 0%,55%{ opacity:1; } 56%,100%{ opacity:.14; } }

.an-flow{ stroke-dasharray:56 16; animation:anFlow 4s linear infinite; }
@keyframes anFlow{ to{ stroke-dashoffset:-144; } }

.an-rise{ transform-origin:50% 100%; animation:anRise 12s ease-in-out infinite alternate; }
@keyframes anRise{ 0%{ transform:translateY(6px); opacity:.8; } 100%{ transform:translateY(-4px); opacity:1; } }

.an-sun{ transform-origin:center; animation:anSun 9s ease-in-out infinite alternate; }
@keyframes anSun{ 0%{ transform:translateY(10px) scale(.96); } 100%{ transform:translateY(-6px) scale(1.04); } }

.an-hand-m{ transform-origin:0% 0%; animation:anSpin 12s linear infinite; }
.an-hand-h{ transform-origin:50% 100%; animation:anSpin 72s linear infinite; }
.an-needle{ transform-origin:50% 100%; animation:anNeedle 14s ease-in-out infinite alternate; }
@keyframes anNeedle{ 0%{ transform:rotate(-16deg); } 100%{ transform:rotate(22deg); } }

.an-beam{ transform-origin:top center; animation:anBeam 6s ease-in-out infinite alternate; }
@keyframes anBeam{ 0%{ transform:rotate(-3deg); opacity:.7; } 100%{ transform:rotate(3deg); opacity:1; } }

.an-pan{ transform-origin:70% 60%; animation:anPan 13s ease-in-out infinite alternate; }
@keyframes anPan{ 0%{ transform:rotate(-2.4deg); } 100%{ transform:rotate(2.6deg); } }

.an-glow{ animation:anGlow 4.4s ease-in-out infinite alternate; }
@keyframes anGlow{ 0%{ opacity:.78; } 100%{ opacity:1; } }
.an-rays{ transform-origin:50% 120%; animation:anRays 4.4s ease-in-out infinite alternate; }
@keyframes anRays{ 0%{ transform:scale(.9); opacity:.5; } 100%{ transform:scale(1.08); opacity:1; } }

.an-shuffle > g:nth-child(1){ animation:anShuffle 8s ease-in-out infinite alternate; }
.an-shuffle > g:nth-child(2){ animation:anShuffle 8s ease-in-out infinite alternate .5s; }
.an-shuffle > g:nth-child(3){ animation:anShuffle 8s ease-in-out infinite alternate 1s; }
@keyframes anShuffle{ 0%{ transform:translateY(0) rotate(0); } 100%{ transform:translateY(-6px) rotate(-1deg); } }

.an-stamp{ transform-origin:center; animation:anStamp 6s ease-in-out infinite; }
@keyframes anStamp{ 0%,70%,100%{ transform:scale(1) rotate(0); } 78%{ transform:scale(.9) rotate(-4deg); } 86%{ transform:scale(1.04) rotate(2deg); } }

.an-ball{ transform-origin:50% 100%; animation:anBall 3.2s cubic-bezier(.3,0,.7,1) infinite; }
@keyframes anBall{ 0%,100%{ transform:translateY(0) scaleY(1); } 42%{ transform:translateY(-40px) scaleY(1.04); } 50%{ transform:translateY(-40px); } 96%{ transform:translateY(0) scaleY(.92); } }

.an-tree{ transform-origin:50% 100%; animation:anTree 8s ease-in-out infinite alternate; }
@keyframes anTree{ 0%{ transform:rotate(-1.2deg) scale(1); } 100%{ transform:rotate(1.4deg) scale(1.02); } }

.an-mic{ transform-origin:50% 100%; animation:anBob 4.6s ease-in-out infinite alternate; }
.an-flash{ animation:anFlash 5s steps(1,end) infinite; }
@keyframes anFlash{ 0%,86%{ opacity:.55; } 88%{ opacity:1; } 92%{ opacity:.4; } 94%{ opacity:1; } 96%,100%{ opacity:.55; } }

.an-pencil{ transform-origin:0% 100%; animation:anPencil 7s ease-in-out infinite alternate; }
@keyframes anPencil{ 0%{ transform:translate(0,0) rotate(0); } 100%{ transform:translate(-14px,10px) rotate(-2deg); } }

.an-ribbon{ transform-origin:50% 0%; animation:anSway 4s ease-in-out infinite alternate; }
.an-route{ stroke-dasharray:14 12; animation:anFlow 9s linear infinite; }
.an-plane{ offset-path:none; animation:anPlane 14s ease-in-out infinite alternate; }
@keyframes anPlane{
  0%   { transform:translate(140px, 196px) rotate(-16deg); }
  50%  { transform:translate(680px, 138px) rotate(-6deg); }
  100% { transform:translate(1090px, 98px) rotate(-10deg); }
}
.an-steps rect{ animation:anBob 6s ease-in-out infinite alternate; }
.an-steps rect:nth-child(2){ animation-delay:.3s; }
.an-steps rect:nth-child(3){ animation-delay:.6s; }
.an-steps rect:nth-child(4){ animation-delay:.9s; }
.an-clock{ transform-origin:center; animation:anBob 7s ease-in-out infinite alternate; }

@media (prefers-reduced-motion:reduce){
  .cover-art *{ animation:none !important; }
  .an-draw, .an-flow, .an-route{ stroke-dashoffset:0 !important; }
}

/* ===========================================================================
   45. ЧАСОВЕ НА УЧЕБНИЯ ДЕН
   Дневното разписание е най-търсеното нещо в първите седмици. Затова часовете
   стоят направо в страницата, в три колони по етапи, а не само като файл за
   сваляне. Голямото междучасие е обозначено, защото между третия и четвъртия
   час има 35 минути и това всеки родител го пита.
=========================================================================== */

.zv-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,240px), 1fr));
  gap:clamp(16px,2.4vw,30px);
}
.zv-col{
  padding:18px 20px 20px;
  border-radius:14px;
  background:linear-gradient(170deg, #fff 0%, color-mix(in srgb, var(--brick-bg) 40%, #fff) 100%);
  border:1px solid var(--line);
}
.zv-head{
  margin-bottom:12px; padding-bottom:10px;
  border-bottom:1px solid color-mix(in srgb, var(--brick) 20%, transparent);
  font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brick);
}
.zv-row{
  display:flex; align-items:baseline; gap:10px;
  padding:6px 0;
  font-family:'Manrope',sans-serif; font-size:13.5px; color:var(--ink-soft);
}
.zv-row b{
  flex:0 0 22px;
  font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  font-size:16px; color:var(--brick);
}
.zv-pauza{
  margin:4px 0;
  font-size:11.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.zv-pauza span{ border-top:1px dashed var(--line-2); padding-top:8px; width:100%; }

/* ===========================================================================
   46. ГРАФИЦИ В ТАБЛИЦА
   Графиците на консултациите, втория час на класа и приемното време са дълги
   списъци с учители. Като файл за сваляне са безполезни на телефон, затова
   стоят направо в страницата като таблица — и файлът остава за тези, които го
   искат. На тесен екран таблицата се плъзга хоризонтално сама.
=========================================================================== */

.gr-opis{
  margin:0 0 16px; max-width:70ch;
  font-family:'Manrope',sans-serif; font-size:13.5px; line-height:1.7;
  color:var(--ink-soft);
}
.gr-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.gr-tabl{
  width:100%; min-width:520px;
  border-collapse:collapse;
  font-family:'Manrope',sans-serif; font-size:13.5px;
}
.gr-tabl th{
  text-align:left; padding:10px 14px;
  border-bottom:1.5px solid color-mix(in srgb, var(--brick) 30%, transparent);
  font-size:10.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brick);
  white-space:nowrap;
}
.gr-tabl td{
  padding:11px 14px;
  border-bottom:1px solid var(--line);
  color:var(--ink-soft);
  vertical-align:top;
}
.gr-tabl tbody tr:hover td{ background:color-mix(in srgb, var(--brick-bg) 40%, transparent); }
.gr-ime{ font-weight:700; color:var(--ink); white-space:nowrap; }
.gr-chas{ font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--brick-deep); }
.gr-kab{ color:var(--muted); }

@media (max-width:640px){
  .gr-tabl{ font-size:12.5px; min-width:480px; }
  .gr-tabl th, .gr-tabl td{ padding:9px 10px; }
}

/* ===========================================================================
   47. КАВЪРИТЕ НА ТЕЛЕФОН
   Рисунките са в пропорция 5.33:1, а мястото на кавъра на телефон е около
   1.4:1. При запълване (slice) се показва само тясна ивица от средата — оттам
   идваше усещането, че кавърите не се зареждат: виждаше се едно уголемено
   парче без смисъл.

   На телефон рисунката се СВИВА ЦЯЛА (meet, задава се от JS), а фонът ѝ се
   скрива, защото не запълва цялата височина. Вместо него цветът идва от самия
   кавър — градиент по палитрата на раздела, който важи автоматично за всички.
=========================================================================== */

.ed-cover.has-art{
  background:linear-gradient(140deg,
    color-mix(in srgb, var(--brick-bg) 86%, #fff) 0%,
    color-mix(in srgb, var(--brick-bg) 54%, var(--cream)) 58%,
    color-mix(in srgb, var(--brick-bg) 72%, #fff) 100%) !important;
}

@media (max-width:760px){
  /* кавърът става по-нисък — рисунката така изглежда по-голяма */
  .ed-cover{ height:208px; }
  /* фоновият правоъгълник на рисунката се скрива: при свиване той не покрива
     цялата площ и се получава лента с друг цвят */
  .cover-art .scene-bg, .scena .scene-bg{ display:none; }
  /* сцените на Алеко ТВ също се свиват цели */
  .scena{ height:150px; }
}

/* ===========================================================================
   48. ОТБЕЛЯЗАНО ВАЖНО
   Неучебните дни са това, което родителят търси в графика, затова не стоят в
   общия текст, а в отделен блок с тухлен гръбнак и удебелени дати.
=========================================================================== */

.vazhno{
  display:block;
  margin:14px 0 4px;
  padding:14px 18px;
  border-left:3px solid var(--brick);
  border-radius:0 10px 10px 0;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--brick-bg) 70%, transparent) 0%,
    transparent 92%);
  font-family:'Manrope',sans-serif;
  font-size:13px; line-height:1.7; color:var(--ink-soft);
}
.vazhno > b{
  display:block; margin-bottom:10px;
  font-size:10.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brick);
}
.vazhno-dni{
  display:flex; flex-direction:column; gap:7px;
  margin-bottom:12px;
}
.vazhno-dni > span{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
  padding-bottom:7px;
  border-bottom:1px solid color-mix(in srgb, var(--brick) 14%, transparent);
}
.vazhno-dni > span:last-child{ border-bottom:0; padding-bottom:0; }
.vazhno-dni b{
  font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  font-size:16px; color:var(--brick-deep);
}

/* екскурзии: показва се само текущият месец */
.ek-red[hidden]{ display:none !important; }
.ek-bel{
  margin:14px 0 0; padding-top:12px;
  border-top:1px solid var(--line);
  font-family:'Manrope',sans-serif; font-size:12.5px; line-height:1.7;
  color:var(--muted);
}
.ek-prazno{
  margin:0; font-family:'Manrope',sans-serif; font-size:13.5px;
  line-height:1.7; color:var(--ink-soft);
}

/* подзаглавие и списък в статия */
.ar-pod{
  margin:34px 0 14px;
  font-family:'Fraunces',serif; font-weight:400;
  font-size:clamp(19px,2.1vw,25px); color:var(--ink);
}
.ar-spisak{ margin:0; padding:0; list-style:none; }
.ar-spisak li{
  position:relative;
  padding:11px 0 11px 26px;
  border-top:1px solid var(--line);
  font-family:'Manrope',sans-serif; font-size:14.5px; line-height:1.7;
  color:var(--ink-soft);
}
.ar-spisak li:last-child{ border-bottom:1px solid var(--line); }
.ar-spisak li::before{
  content:''; position:absolute; left:4px; top:21px;
  width:7px; height:7px; border-radius:50%;
  background:var(--brick);
}
.ar-prazno{
  margin:0; padding:26px 0;
  border-top:1px solid var(--line);
  text-align:center;
  font-family:'Manrope',sans-serif; font-size:13.5px; color:var(--muted);
}

/* ===========================================================================
   50. ГОДИНИТЕ СЕ УГОЛЕМЯВАТ ЕДНА СЛЕД ДРУГА
   Хронологията минава като поредица: годината се приближава леко, застоява се
   и отстъпва, а следващата поема. Стъпката е същата като на редовете, затова
   движението върви с появата им, а не отделно от нея.
=========================================================================== */

.ed-hl-year{
  display:inline-block;
  transform-origin:left center;
  will-change:transform;
}
.ed-hl-item.in .ed-hl-year{ animation:godinaFokus 4.6s cubic-bezier(.3,0,.3,1) both; }
.ed-hl-item:nth-of-type(1).in .ed-hl-year{ animation-delay:.2s; }
.ed-hl-item:nth-of-type(2).in .ed-hl-year{ animation-delay:.9s; }
.ed-hl-item:nth-of-type(3).in .ed-hl-year{ animation-delay:1.6s; }
.ed-hl-item:nth-of-type(4).in .ed-hl-year{ animation-delay:2.3s; }
@keyframes godinaFokus{
  0%   { transform:scale(1);    color:var(--brick); }
  14%  { transform:scale(1.16); color:var(--brick-deep); }
  46%  { transform:scale(1.16); color:var(--brick-deep); }
  100% { transform:scale(1);    color:var(--brick); }
}


@media (prefers-reduced-motion:reduce){
  .ed-hl-item.in .ed-hl-year{ animation:none; }
}


/* ===========================================================================
   49. ПРИЗРАКЪТ В ХРОНОЛОГИЯТА
   Един-единствен призрак за цялата хронология, а не по един на всяка година.
   Появява се ту при една дата, ту при друга, на случаен принцип, сменя портрета
   и изчезва. Никога не се виждат два наведнъж — така е и по-призрачно, и по-
   спокойно за окото.

   Движението и местата се задават от скрипта; тук е само видът: сиво, меко,
   с лек наклон и бавно плаване, докато е на екрана.
=========================================================================== */

.ed-history-hline{ position:relative; }
.hl-duh{
  position:absolute;
  left:0; top:0;
  width:clamp(104px,12vw,164px);
  height:clamp(128px,15vw,196px);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  filter:grayscale(1) contrast(1.06);
  opacity:0;
  pointer-events:none;
  z-index:0;
  transition:opacity 1.6s ease-in-out, transform 3.4s cubic-bezier(.25,.6,.3,1);
  will-change:opacity, transform;
}
.hl-duh.tuk{ opacity:.42; }
/* съдържанието на редовете стои над него */
.ed-hl-item{ position:relative; z-index:1; }

@media (max-width:860px){
  .hl-duh{ width:96px; height:120px; }
  .hl-duh.tuk{ opacity:.26; }
}
@media (prefers-reduced-motion:reduce){
  .hl-duh{ transition:opacity 1s ease; }
}

/* ===========================================================================
   51. НАЙ-СКОРОШНОТО СЪБИТИЕ
   Между заглавния кадър и историята остана въздух. Там стои картонче с
   най-новото събитие — закачено с кабарче, леко килнато, като бележка на
   дъска. Съдържанието идва от sadarzhanie.js, тоест не се пише втори път.

   Картончето е леко наклонено и се изправя при посочване; кабарчето хвърля
   своя сянка. Датата е изнесена отляво в едър шрифт — тя е първото, което
   родителят търси.
=========================================================================== */

.sabitie{
  position:relative;
  padding:clamp(34px,5vh,64px) 0 clamp(10px,2vh,24px);
}
.sab-wrap{ display:flex; justify-content:center; }

.sab-kart{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(18px,3vw,38px);
  width:min(980px, 100%);
  padding:clamp(20px,2.6vw,30px) clamp(22px,3vw,36px);
  border-radius:16px;
  background:linear-gradient(168deg, #fff 0%, color-mix(in srgb, var(--brick-bg) 46%, #fff) 100%);
  border:1px solid var(--line);
  box-shadow:0 30px 60px -34px rgba(36,30,25,.42);
  transform:rotate(-.7deg);
  transition:transform .5s cubic-bezier(.16,.8,.3,1), box-shadow .5s ease;
}
.sab-kart:hover{
  transform:rotate(0deg) translateY(-3px);
  box-shadow:0 38px 70px -34px rgba(36,30,25,.5);
}
/* кабарчето */
.sab-pin{
  position:absolute; left:50%; top:-11px;
  width:22px; height:22px; border-radius:50%;
  transform:translateX(-50%);
  background:radial-gradient(circle at 34% 30%, #E07A5F, var(--brick) 60%, var(--brick-deep));
  box-shadow:0 6px 12px -4px rgba(36,30,25,.5), inset 0 -2px 4px rgba(0,0,0,.25);
}
.sab-pin::after{
  content:''; position:absolute; left:50%; top:16px;
  width:2px; height:10px; transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(36,30,25,.35), transparent);
}

/* датата */
.sab-data{
  display:flex; flex-direction:column; align-items:center;
  padding-right:clamp(16px,2vw,26px);
  border-right:1px solid var(--line);
  min-width:78px;
}
.sab-den{
  font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  font-size:clamp(34px,4.4vw,52px); line-height:.9; color:var(--brick);
}
.sab-mes{
  margin-top:6px;
  font-family:'Manrope',sans-serif; font-style:normal;
  font-size:10.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}

.sab-kicker{
  font-family:'Manrope',sans-serif; font-size:10px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brick);
  margin-bottom:8px;
}
.sab-zagl{
  margin:0 0 8px;
  font-family:'Fraunces',serif; font-weight:400;
  font-size:clamp(19px,2.2vw,27px); line-height:1.2; color:var(--ink);
}
.sab-uvod{
  margin:0 0 12px; max-width:62ch;
  font-family:'Manrope',sans-serif; font-size:14px; line-height:1.7;
  color:var(--ink-soft);
}
.sab-cta{
  font-family:'Manrope',sans-serif; font-size:12px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brick);
  border-bottom:1.5px solid var(--brick-bg); padding-bottom:3px;
  transition:border-color .3s ease;
}
.sab-cta:hover{ border-bottom-color:var(--brick); }

.sab-snimka{
  width:clamp(92px,11vw,140px);
  aspect-ratio:1/1;
  border-radius:12px;
  background-size:cover; background-position:center;
  box-shadow:0 16px 30px -18px rgba(36,30,25,.5);
  transform:rotate(1.6deg);
  transition:transform .5s cubic-bezier(.16,.8,.3,1);
}
.sab-kart:hover .sab-snimka{ transform:rotate(0deg) scale(1.03); }

@media (max-width:760px){
  .sab-kart{
    grid-template-columns:auto 1fr;
    gap:14px 16px;
    transform:rotate(-.5deg);
  }
  .sab-snimka{ grid-column:1 / -1; width:100%; aspect-ratio:16/9; transform:none; }
  .sab-uvod{ font-size:13.5px; }
}
@media (prefers-reduced-motion:reduce){
  .sab-kart, .sab-snimka{ transition:none; }
}

/* ===========================================================================
   52. АЛЕКОЗНАЙКО — БЮРОТО НА МАЛКИЯ ИЗСЛЕДОВАТЕЛ
   Страницата на помощника получава своя сцена: бюро с отворена тетрадка, лупа,
   която обикаля над нея, крушка с лъчи и три балона с въпроси, които изникват
   един след друг — както в истински разговор.

   Движението ползва общия речник (секция 44) и добавя две свои думи: обикалящa
   лупа и балони, които се появяват последователно и се задържат.
=========================================================================== */

.znaiko-scena{ height:clamp(220px,26vw,360px); }

/* лупата обикаля над тетрадката и се приближава */
.an-lupa{
  transform-box:fill-box; transform-origin:center;
  animation:znLupa 11s ease-in-out infinite;
}
@keyframes znLupa{
  0%   { transform:translate(0,0) scale(1); }
  25%  { transform:translate(-90px,26px) scale(1.06); }
  50%  { transform:translate(-30px,52px) scale(1); }
  75%  { transform:translate(60px,20px) scale(1.04); }
  100% { transform:translate(0,0) scale(1); }
}

/* балоните с въпроси: изникват един след друг и остават, после се сменят */
.bal{ transform-box:fill-box; transform-origin:0% 100%; opacity:0; }
.bal-1{ animation:znBalon 13s ease-in-out infinite 0s; }
.bal-2{ animation:znBalon 13s ease-in-out infinite 3.4s; }
.bal-3{ animation:znBalon 13s ease-in-out infinite 6.8s; }
@keyframes znBalon{
  0%   { opacity:0; transform:scale(.86) translateY(10px); }
  6%   { opacity:1; transform:scale(1) translateY(0); }
  26%  { opacity:1; transform:scale(1) translateY(-3px); }
  33%  { opacity:0; transform:scale(.96) translateY(-12px); }
  100% { opacity:0; }
}

/* въпросителните плуват нагоре-надолу, всяка със свой ритъм */
.an-pitanki text{ transform-box:fill-box; transform-origin:center; }
.an-pitanki text:nth-child(1){ animation:znPluva 6s ease-in-out infinite alternate; }
.an-pitanki text:nth-child(2){ animation:znPluva 7.4s ease-in-out infinite alternate .8s; }
.an-pitanki text:nth-child(3){ animation:znPluva 5.6s ease-in-out infinite alternate 1.6s; }
@keyframes znPluva{
  0%   { transform:translateY(0) rotate(-3deg); opacity:.5; }
  100% { transform:translateY(-14px) rotate(4deg); opacity:.85; }
}

@media (prefers-reduced-motion:reduce){
  .an-lupa, .bal, .an-pitanki text{ animation:none; }
  .bal-1{ opacity:1; }
}

/* ===========================================================================
   53. АЛЕКОЗНАЙКО — СТРАНИЦАТА КАТО РАЗГОВОР
   Страницата на чат-помощника се чете като чат: въпросите отдясно, отговорите
   отляво, видеата прикачени в репликите. Формата съвпада със съдържанието —
   това е и разликата от обикновен списък с видеа.

   Репликите се появяват при скролване, а преди всеки отговор за миг светват
   трите точки „пиша“ — детайлът, който прави разговора жив.
=========================================================================== */

.razgovor{ max-width:820px; padding-bottom:clamp(30px,5vh,60px); }

.rz-red{
  display:flex; align-items:flex-end; gap:12px;
  margin:0 0 clamp(14px,2.2vh,22px);
}
.rz-red.rz-az{ justify-content:flex-end; }

.rz-mehur{
  position:relative;
  max-width:min(560px, 86%);
  padding:14px 18px;
  border-radius:18px;
  font-family:'Manrope',sans-serif; font-size:14.5px; line-height:1.68;
}
/* въпросите на децата */
.rz-az .rz-mehur{
  background:linear-gradient(160deg, var(--brick) 0%, var(--brick-deep) 100%);
  color:#FFF6EC;
  border-bottom-right-radius:6px;
  box-shadow:0 14px 28px -16px rgba(124,58,41,.6);
}
/* отговорите на Алекознайко */
.rz-ot .rz-mehur{
  background:#fff;
  color:var(--ink-soft);
  border:1px solid var(--line);
  border-bottom-left-radius:6px;
  box-shadow:0 16px 34px -22px rgba(36,30,25,.4);
}
.rz-tekst{ display:block; }

/* личицето до отговорите */
.rz-lice{
  flex:0 0 auto;
  width:42px; height:42px; border-radius:50%;
  overflow:hidden;
  background:var(--brick-bg);
  border:2px solid #fff;
  box-shadow:0 8px 18px -10px rgba(36,30,25,.5);
}
.rz-lice img{ width:100%; height:100%; object-fit:cover; display:block; }

/* трите точки „пиша“ — светват за миг преди текста */
.rz-pisha{
  display:flex; gap:5px; align-items:center;
  height:16px; margin-bottom:8px;
}
.rz-pisha i{
  width:6px; height:6px; border-radius:50%;
  background:var(--brick); opacity:.35;
  animation:rzTochka 1.2s ease-in-out infinite;
}
.rz-pisha i:nth-child(2){ animation-delay:.16s; }
.rz-pisha i:nth-child(3){ animation-delay:.32s; }
@keyframes rzTochka{
  0%,100%{ transform:translateY(0); opacity:.3; }
  40%    { transform:translateY(-4px); opacity:.9; }
}
/* щом репликата е дошла, точките си отиват */
.rz-red.in .rz-pisha{ animation:rzKrai .4s ease forwards 1.1s; }
@keyframes rzKrai{ to{ opacity:0; height:0; margin:0; } }
/* а текстът идва след тях */
.rz-red.rz-ot.in .rz-tekst,
.rz-red.rz-ot.in .rz-video,
.rz-red.rz-ot.in .rz-cta{ animation:rzTekst .5s ease both 1.2s; }
@keyframes rzTekst{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.rz-red.rz-ot .rz-tekst,
.rz-red.rz-ot .rz-video,
.rz-red.rz-ot .rz-cta{ opacity:0; }

/* прикаченото видео вътре в репликата */
.rz-video{
  margin-top:12px;
  border-radius:12px; overflow:hidden;
  background:#000;
  box-shadow:0 14px 30px -18px rgba(36,30,25,.55);
}
.rz-video video{ width:100%; display:block; aspect-ratio:16/9; object-fit:cover; background:#000; }
.rz-etiket{
  display:block; padding:9px 12px;
  background:color-mix(in srgb, var(--brick-bg) 60%, #fff);
  font-size:11.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--brick-deep);
}

.rz-cta{
  display:inline-block; margin-top:12px;
  padding:11px 20px; border:0; border-radius:999px; cursor:pointer;
  background:var(--brick); color:#fff;
  font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:800;
  letter-spacing:.08em;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.rz-cta:hover{
  background:var(--brick-deep);
  transform:translateY(-2px);
  box-shadow:0 14px 26px -14px rgba(124,58,41,.7);
}

@media (max-width:640px){
  .rz-mehur{ max-width:92%; font-size:14px; padding:12px 15px; }
  .rz-lice{ width:34px; height:34px; }
}
@media (prefers-reduced-motion:reduce){
  .rz-pisha{ display:none; }
  .rz-red.rz-ot .rz-tekst, .rz-red.rz-ot .rz-video, .rz-red.rz-ot .rz-cta{ opacity:1; animation:none; }
}

/* ===========================================================================
   54. СТЕНА ОТ МОНИТОРИ (Алеко ТВ)
   Големият банер се биеше със скицата на студиото — беше в друг мащаб и друг
   език. Сега същата картинка е вътре в три малки телевизора, всеки показва
   своя трета от нея. Така банерът се превръща в част от студиото, вместо да
   стои над него.

   Средният е малко по-голям и с лампичка „на ефир“. По екраните минават
   сканиращи линии и бавен отблясък, както по истинско стъкло.
=========================================================================== */

.tv-stena{
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(12px,2vw,26px);
  margin:clamp(6px,1.4vh,16px) auto clamp(18px,3vh,34px);
  padding:0 clamp(14px,3vw,30px);
  max-width:1100px;
}

.tv-set{
  position:relative;
  flex:1 1 0;
  max-width:340px;
  padding:12px 12px 20px;
  border-radius:16px;
  background:linear-gradient(168deg, #F3E3D6 0%, color-mix(in srgb, var(--brick-bg) 80%, #E8D5C6) 100%);
  border:1px solid rgba(124,58,41,.22);
  box-shadow:0 22px 44px -26px rgba(36,30,25,.55), inset 0 1px 0 rgba(255,255,255,.7);
  transform:rotate(-1deg);
  transition:transform .45s cubic-bezier(.16,.8,.3,1), box-shadow .45s ease;
}
.tv-set:nth-child(2){ transform:rotate(0deg) translateY(-14px); z-index:2; max-width:420px; }
.tv-set:nth-child(3){ transform:rotate(1.2deg); }
.tv-set:hover{ transform:rotate(0deg) translateY(-6px); box-shadow:0 30px 56px -26px rgba(36,30,25,.6); }

.tv-ekran{
  position:relative;
  aspect-ratio:5/4;
  border-radius:10px;
  /* Височината следва ширината (auto), затова картинката НЕ се разтяга.
     При 300% ширина всеки екран показва по една трета от кадъра, а излишната
     височина просто се изрязва — както е и при истински екран. */
  background-size:300% auto;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 2px rgba(36,30,25,.35), inset 0 10px 24px -14px rgba(0,0,0,.6);
  overflow:hidden;
}
.tv-1 .tv-ekran{ background-position:left center; }
.tv-2 .tv-ekran{ background-position:center center; }
.tv-3 .tv-ekran{ background-position:right center; }

/* сканиращи линии и отблясък по стъклото */
.tv-ekran::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
  opacity:.5;
}
.tv-ekran::after{
  content:''; position:absolute; top:-40%; bottom:-40%; left:-60%; width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28) 50%, transparent);
  transform:skewX(-14deg);
  animation:tvOtblqsak 9s ease-in-out infinite;
}
@keyframes tvOtblqsak{ 0%{ left:-60%; } 55%{ left:120%; } 100%{ left:120%; } }

/* копчетата под екрана */
.tv-kopcheta{
  position:absolute; left:16px; bottom:6px;
  display:flex; gap:7px;
}
.tv-kopcheta i{
  width:8px; height:8px; border-radius:50%;
  background:rgba(36,30,25,.3);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.35);
}
/* лампичката на средния */
.tv-lampa{
  position:absolute; right:16px; bottom:5px;
  width:9px; height:9px; border-radius:50%;
  background:#FF6B57;
  box-shadow:0 0 10px 2px rgba(255,107,87,.7);
  animation:tvLampa 2.4s steps(1,end) infinite;
}
@keyframes tvLampa{ 0%,55%{ opacity:1; } 56%,100%{ opacity:.25; } }

@media (max-width:760px){
  /* на телефон остава само средният — трите един до друг стават нечетими */
  .tv-stena{ gap:0; }
  .tv-1, .tv-3{ display:none; }
  .tv-set:nth-child(2){ transform:none; max-width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .tv-ekran::after, .tv-lampa{ animation:none; }
  .tv-lampa{ opacity:1; }
}

/* ===========================================================================
   55. ЗАВЕСАТА — ИЗПЛУВАНЕ НА ВСЯКА ДУМА
   Досега всяка дума изплуваше за 0.6 секунди. Проблемът не беше в паузата
   между думите, а в самото появяване: то е рязко и окото не успява да я хване,
   докато следващата вече светва.

   Тук изплуването е удвоено, с по-меко забавяне в края, и думата тръгва от
   по-далеч — така движението се усеща и се проследява, вместо да мигне.
=========================================================================== */

.cw-frag{
  transform:translateY(46px) scale(.86);
  filter:blur(9px);
  transition:
    opacity 2.1s cubic-bezier(.18,.72,.24,1),
    transform 2.3s cubic-bezier(.18,.72,.24,1),
    filter 1.9s ease-out;
}
.cw-frag.lit{ transform:none; filter:blur(0); }

/* излизането остава по-бързо — там няма какво да се чете */
.cw-frag.gone{ transition-duration:.6s; filter:blur(4px); }

/* ===========================================================================
   56. ЗАВЕСАТА — МАСТИЛО ВЪРХУ ХАРТИЯ
   Завесата вече не е тъмен екран с думи, а лист хартия, върху който се изписва
   изречението. Листът е от две половини, които накрая се разтварят настрани и
   показват сайта.

   Три неща, които бяха сгрешени по пътя и са решени тук:
   1. Нито една дума не стъпва на шева. Думите вляво са закотвени ОТ ШЕВА и
      растат наляво, тези вдясно — обратното. Затова колкото и дълга да е дума,
      не се разполовява при отварянето.
   2. „Добре дошли“ изчезва НАПЪЛНО, преди листът да тръгне. Анимацията, която
      го е изписала, се отменя изрично — иначе тя го държи видим и надписът
      остава върху отворената страница.
   3. Хартията е истинска: зърно, влакна и топла светлина, а не сив фон.
=========================================================================== */

.ed-curtain{ background:none; }

/* двете половини хартия */
.ed-hartia{
  position:absolute; top:0; bottom:0; width:50.4%;
  overflow:hidden; z-index:1;
  transition:transform 1.4s cubic-bezier(.76,0,.24,1);
}
.ed-hartia.l{ left:0; }
.ed-hartia.d{ right:0; }
.ed-hartia i{
  position:absolute; inset:0;
  background:
    radial-gradient(90% 70% at 22% 6%, rgba(255,250,240,.96), transparent 62%),
    linear-gradient(168deg, #FDF8EE 0%, #F4E9D7 52%, #EADCC6 100%);
}
.ed-hartia i::before,
.ed-hartia i::after{ content:''; position:absolute; inset:0; mix-blend-mode:multiply; }
.ed-hartia i::before{ filter:url(#zurno); opacity:.3; }
.ed-hartia i::after{ filter:url(#vlakna); opacity:.22; }
.ed-hartia.l i{ box-shadow:inset -26px 0 40px -26px rgba(92,66,44,.5); }
.ed-hartia.d i{ box-shadow:inset 26px 0 40px -26px rgba(92,66,44,.5); }

.ed-shev{
  position:absolute; left:50%; top:0; bottom:0; width:1px; z-index:2;
  background:linear-gradient(180deg, transparent, rgba(92,66,44,.18) 12%, rgba(92,66,44,.18) 88%, transparent);
}

/* мастилото */
.ed-curtain .cw-frag{
  font-family:'Marck Script', cursive;
  font-style:normal;
  color:#2B2119;
  z-index:3;
  filter:blur(15px) contrast(2.4);
  transform:scale(1.14);
  transition:
    opacity 2.1s cubic-bezier(.2,.72,.24,1),
    transform 2.2s cubic-bezier(.2,.72,.24,1),
    filter 1.9s ease-out;
}
.ed-curtain .cw-frag:nth-of-type(even){ color:#7C3A29; }
.ed-curtain .cw-frag:nth-of-type(5n){ color:#3F5A47; }
.ed-curtain .cw-frag.lit{ transform:none; filter:blur(0) contrast(1); }
/* попиването: мастилото потъва в листа */
.ed-curtain .cw-frag.gone{
  opacity:0; filter:blur(12px); transform:scale(.95);
  transition-duration:.9s;
}

/* „Добре дошли“ */
.ed-curtain .cw-frag.big{
  font-family:'Marck Script', cursive;
  /* Размерът се задава ТУК. При пренаписването на разметката той отпадна и
     надписът остана с обикновения шрифт на страницата — тоест дребен. */
  font-size:clamp(46px, 9.5vw, 120px);
  line-height:1.05;
  color:#7C3A29;
  z-index:4;
  top:50% !important; left:50% !important;
  transform:translate(-50%,-50%) scale(1.2);
  filter:blur(22px);
  transition:opacity 1.5s ease, transform 1.5s cubic-bezier(.2,.7,.2,1), filter 1.4s ease;
}
.ed-curtain .cw-frag.big.lit{ transform:translate(-50%,-50%) scale(1); filter:blur(0); }
/* изчезва НАПЪЛНО, преди листът да тръгне */
.ed-curtain .cw-frag.big.gone{
  opacity:0 !important;
  filter:blur(14px);
  transform:translate(-50%,-50%) scale(.96);
  transition-duration:.7s;
}

/* разтварянето */
.ed-curtain.open .ed-hartia.l{ transform:translateX(-101%); }
.ed-curtain.open .ed-hartia.d{ transform:translateX(101%); }
.ed-curtain.open .ed-shev{ opacity:0; transition:opacity .3s; }
.ed-curtain.open .cw-frag.big{ opacity:0 !important; }

@media (max-width:640px){
  .ed-curtain .cw-frag{ font-size:clamp(17px,4.6vw,30px) !important; }
  .ed-curtain .cw-frag.big{ font-size:clamp(38px,11vw,64px) !important; }
}

/* картата на Алекознайко носи сцената му: тя е рисунка, не снимка — затова се
   показва цяла, върху топъл фон, вместо да се изрязва */
.rb-znaiko .rb-img{
  background-size:cover;
  background-position:center 40%;
  background-color:#F7EAD2;
}


/* ===========================================================================
   57. РИСУНКИ ЗА ПЛОЧКИТЕ В „УЧИЛИЩЕТО ОТБЛИЗО“

   Шест рисунки в пропорцията на плочката (4:3). Правилото е писано така, че
   да оцелее при три обичайни спъвания:
     1) кой файл на коя плочка се казва ТУК, в стила, а не само в разметката —
        ако някой ден инлайн стилът на картата отпадне, рисунката остава;
     2) няма color-mix() — старите браузъри го изхвърлят заедно с цялото
        правило и плочката оставаше без рисунка. Светлият тон вече е готов цвят
        (--tint), не се смята в движение;
     3) селекторът е с раздела отпред (.ed-programs ...), значи е по-силен от
        цветовете със съкратеното background по-горе, които иначе изтриват
        картинката.
=========================================================================== */

/* Лентата върти дванайсет карти: шестте оригинала и копията им в същия ред,
   затова цикълът 6n+N улучва еднакво и двете групи. */
.ed-programs .ed-prog-card:nth-of-type(6n+1){ --plocha:url("art/plochki/za-nas.svg");    --tone:#A24C36; --tint:#F6E8E2; }
.ed-programs .ed-prog-card:nth-of-type(6n+2){ --plocha:url("art/plochki/uchproc.svg");   --tone:#2F6F66; --tint:#E2EFEC; }
.ed-programs .ed-prog-card:nth-of-type(6n+3){ --plocha:url("art/plochki/priem.svg");     --tone:#C06A4E; --tint:#FAEAE2; }
.ed-programs .ed-prog-card:nth-of-type(6n+4){ --plocha:url("art/plochki/proekti.svg");   --tone:#B8863B; --tint:#FAF0DE; }
.ed-programs .ed-prog-card:nth-of-type(6n+5){ --plocha:url("art/plochki/roditeli.svg");  --tone:#8C4B66; --tint:#F5E6EC; }
.ed-programs .ed-prog-card:nth-of-type(6n+6){ --plocha:url("art/plochki/dokumenti.svg"); --tone:#55708C; --tint:#E6ECF3; }

.ed-programs .ed-prog-card:nth-of-type(n){
  background-image:
    /* 1. тънък воал, само колкото текстът да остане четим */
    linear-gradient(165deg, rgba(255,253,247,.34), rgba(255,253,247,.12)),
    /* 2. самата рисунка */
    var(--plocha, none),
    /* 3. цветът на плочката */
    linear-gradient(165deg, #FFFFFF 0%, var(--tint, #F6E8E2) 100%);
  background-size:cover, cover, cover;
  background-position:center, center, center;
  background-repeat:no-repeat, no-repeat, no-repeat;
  /* ако рисунката по някаква причина не се зареди, отдолу пак стои цвят, а не бяло */
  background-color:var(--tint, #F6E8E2);
  transition:
    border-color .35s,
    box-shadow .45s cubic-bezier(.16,.8,.3,1),
    transform .45s cubic-bezier(.16,.8,.3,1),
    background-image .45s ease;
}
/* при посочване воалът си отива почти напълно */
.ed-programs .ed-prog-card:nth-of-type(n):hover{
  background-image:
    linear-gradient(165deg, rgba(255,253,247,.12), rgba(255,253,247,0)),
    var(--plocha, none),
    linear-gradient(165deg, #FFFFFF 0%, var(--tint, #F6E8E2) 100%);
}

/* ===========================================================================
   58. КЛУБ „ТВОРИЛНИЦА – СЛАДКО И СОЛЕНО“ (tvorilnica.html)
   Страницата е подредена като останалите раздели: рисуван кавър, лек скин
   и спокойни карти в цвета на клуба — не пренесен плакат.
=========================================================================== */
[data-theme="tvorilnica"]{ --brick:#A8385E; --brick-deep:#732440; --brick-bg:#F6DDE5; --tw-salt:#4C7A2E; --tw-salt-bg:#E3EED8; --tw-wood:#9A6B3F; }
[data-theme="tvorilnica"] .ed-cover{ background-image:url('art/cover-tvorilnica.svg'); }
/* скин: карирана покривка, почти незабележима */
[data-theme="tvorilnica"] main::before{
  background:
    repeating-linear-gradient(0deg, var(--brick) 0 18px, transparent 18px 36px),
    repeating-linear-gradient(90deg, var(--brick) 0 18px, transparent 18px 36px);
  opacity:.028;
}

/* логото в реда на „Рубрики и клубове“ */
.ed-rubric-row .rr-icon.rr-logo{ padding:0; background:#fff; overflow:hidden; }
.ed-rubric-row .rr-icon.rr-logo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* увод: текст вляво, логото на клуба вдясно като печат */
.tv-intro{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,4vw,56px); align-items:center; margin-bottom:clamp(36px,5vw,56px); }
.tv-intro p{ margin:0 0 14px; font-size:17px; line-height:1.75; color:var(--ink-soft); max-width:60ch; }
.tv-motto{ font-family:'Fraunces',serif; font-style:italic; font-size:clamp(22px,2.4vw,28px); color:var(--brick-deep); margin:0; }
.tv-badge{ width:clamp(130px,16vw,180px); aspect-ratio:1; border-radius:50%; display:block;
  box-shadow:0 0 0 6px var(--cream-3,#FBF8F1), 0 0 0 7px var(--line,#E7DDCD), 0 20px 40px -22px rgba(36,30,25,.5);
  transform:rotate(-4deg); transition:transform .5s cubic-bezier(.16,.8,.3,1); }
.tv-badge:hover{ transform:rotate(0) scale(1.03); }
@media (max-width:640px){ .tv-intro{ grid-template-columns:1fr; justify-items:center; text-align:center; } .tv-intro .tv-badge{ order:-1; } }

/* дейностите — в стила на картите на сайта */
.tv-acts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:clamp(14px,1.8vw,22px); }
.tv-act{ background:var(--cream-3,#FBF8F1); border:1px solid var(--line,#E7DDCD); border-radius:16px; padding:26px 22px 24px;
  box-shadow:0 10px 26px -20px rgba(36,30,25,.35);
  transition:transform .4s cubic-bezier(.16,.8,.3,1), border-color .3s, box-shadow .4s; }
.tv-act:hover{ transform:translateY(-5px); border-color:var(--brick); box-shadow:0 22px 44px -24px rgba(36,30,25,.42); }
.tv-act .tv-ic{ width:50px; height:50px; border-radius:50%; background:var(--brick-bg); color:var(--brick);
  display:flex; align-items:center; justify-content:center; padding:12px; margin-bottom:16px; }
.tv-act .tv-ic svg{ width:100%; height:100%; }
.tv-act h3{ margin:0 0 8px; font-family:'Fraunces',serif; font-weight:400; font-size:21px; line-height:1.2; color:var(--ink); }
.tv-act p{ margin:0; font-size:14px; line-height:1.65; color:var(--ink-soft); }

/* защо да дойдеш */
.tv-why{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,40px); margin-top:clamp(40px,5vw,60px); }
.tv-why div{ border-left:3px solid var(--brick); border-radius:0; padding:4px 0 4px 20px; }
.tv-why b{ display:block; font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--brick); margin-bottom:8px; }
.tv-why span{ font-size:16px; line-height:1.7; color:var(--ink); }
@media (max-width:640px){ .tv-why{ grid-template-columns:1fr; } }

/* призивът */
.tv-cta{ text-align:center; margin-top:clamp(40px,5vw,60px); }
.tv-cta p{ font-family:'Fraunces',serif; font-style:italic; font-size:clamp(24px,2.8vw,32px); line-height:1.3; color:var(--ink); margin:18px 0 6px; }
.tv-cta small{ display:block; font-size:15px; color:var(--brick-deep); margin-bottom:24px; }
.tv-btn{ display:inline-flex; align-items:center; gap:10px; padding:13px 26px; border-radius:999px; background:var(--brick); color:#fff;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:14px; text-decoration:none; transition:background .3s, transform .3s; }
.tv-btn:hover{ background:var(--brick-deep); transform:translateY(-2px); }

/* плакатът — скрит зад бутона, отваря се голям */
.tv-poster{ margin:clamp(40px,5vw,56px) auto 0; max-width:420px; }
.tv-poster a{ display:block; border-radius:14px; overflow:hidden; border:1px solid var(--line,#E7DDCD);
  box-shadow:0 18px 40px -24px rgba(36,30,25,.45); transition:transform .35s cubic-bezier(.16,.8,.3,1); }
.tv-poster a:hover{ transform:translateY(-4px); }
.tv-poster img{ width:100%; height:auto; display:block; }
.tv-poster figcaption{ text-align:center; margin-top:12px; font-size:13px; color:var(--ink-soft); }

/* ===========================================================================
   58б. ТВОРИЛНИЦА — СОБСТВЕНО ЛИЦЕ
   Тетрадка с рецепта, дъска с инструменти, превключвател „сладко/солено“,
   буркани и корково табло с плаката. Класовете са с представка tw-.
=========================================================================== */
.tw-block{ margin-top:clamp(56px,7vw,90px); }
.tw-h{ font-family:'Fraunces',serif; font-weight:400; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--ink); margin:6px 0 0; }
.tw-hand{ font-family:'Marck Script','Fraunces',cursive; }

/* ---- рецептата ---- */
.tw-recipe-wrap{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,64px); align-items:center; }
.tw-recipe{ position:relative; background:#FFFEFA; border-radius:6px; padding:34px 30px 30px 64px;
  background-image:linear-gradient(90deg, transparent 46px, rgba(200,60,80,.45) 46px 48px, transparent 48px),
                   repeating-linear-gradient(180deg, transparent 0 33px, rgba(80,130,190,.22) 33px 34px);
  box-shadow:0 24px 50px -28px rgba(60,30,20,.5), 0 0 0 1px rgba(0,0,0,.04);
  transform:rotate(-1.5deg); transition:transform .6s cubic-bezier(.16,.8,.3,1); }
.tw-recipe:hover{ transform:rotate(0); }
.tw-recipe::before, .tw-recipe::after{ content:''; position:absolute; width:110px; height:30px; top:-12px; background:rgba(232,200,119,.55);
  box-shadow:0 2px 4px rgba(0,0,0,.06); }
.tw-recipe::before{ left:-18px; transform:rotate(-24deg); }
.tw-recipe::after{ right:-18px; transform:rotate(20deg); background:rgba(168,56,94,.28); }
.tw-recipe h3{ font-family:'Marck Script',cursive; font-weight:400; font-size:clamp(34px,4vw,44px); line-height:1; color:var(--brick-deep); margin:0 0 4px; }
.tw-recipe .tw-meta{ font-size:13px; color:var(--ink-soft); margin:0 0 18px; }
.tw-recipe h4{ font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--brick); margin:18px 0 6px; }
.tw-recipe ul, .tw-recipe ol{ margin:0; padding-left:20px; font-family:'Marck Script',cursive; font-size:22px; line-height:34px; color:#2B3A55; }
.tw-recipe li::marker{ color:var(--brick); }
.tw-intro p{ margin:0 0 14px; font-size:18px; line-height:1.8; color:var(--ink-soft); }
.tw-intro .tw-logo{ width:clamp(120px,14vw,160px); aspect-ratio:1; border-radius:50%; display:block; margin:0 0 20px;
  box-shadow:0 0 0 6px #fff, 0 16px 34px -18px rgba(60,30,20,.5); transform:rotate(-6deg); }
.tw-intro .tw-motto{ font-family:'Marck Script',cursive; font-size:clamp(28px,3vw,36px); color:var(--brick-deep); margin:0; line-height:1.2; }
@media (max-width:760px){ .tw-recipe-wrap{ grid-template-columns:1fr; } .tw-intro{ order:-1; text-align:center; } .tw-intro .tw-logo{ margin:0 auto 18px; } .tw-recipe{ padding-left:58px; } }

/* ---- дъската с инструменти ---- */
.tw-board{ position:relative; margin-top:26px; border-radius:18px; padding:46px clamp(16px,3vw,40px) 40px;
  background-color:#C9A276;
  background-image:radial-gradient(circle, rgba(70,40,15,.35) 3.2px, transparent 3.6px),
                   linear-gradient(135deg, #D2AE84, #BE9468);
  background-size:30px 30px, cover;
  box-shadow:inset 0 0 0 10px #9A6B3F, inset 0 0 0 12px rgba(0,0,0,.08), 0 24px 50px -30px rgba(60,30,20,.6); }
.tw-tags{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(10px,1.6vw,20px); }
.tw-tag{ position:relative; padding-top:44px; perspective:900px; cursor:pointer; border:0; background:none; font:inherit; text-align:center; }
.tw-tag::before{ content:''; position:absolute; top:4px; left:50%; width:14px; height:14px; margin-left:-7px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #f3f3f3, #8a8a8a); box-shadow:0 2px 3px rgba(0,0,0,.35); z-index:2; }
.tw-tag::after{ content:''; position:absolute; top:12px; left:50%; width:2px; height:36px; margin-left:-1px; background:#6B4A2A; transform-origin:top; }
.tw-swing{ display:block; transform-origin:50% -34px; animation:twSwing 5s ease-in-out infinite alternate; }
.tw-tag:nth-child(2) .tw-swing{ animation-delay:-1.2s; } .tw-tag:nth-child(3) .tw-swing{ animation-delay:-2.4s; }
.tw-tag:nth-child(4) .tw-swing{ animation-delay:-.6s; } .tw-tag:nth-child(5) .tw-swing{ animation-delay:-3s; }
@keyframes twSwing{ from{ transform:rotate(-2.5deg); } to{ transform:rotate(2.5deg); } }
.tw-tag:hover .tw-swing{ animation-duration:1.2s; }
.tw-flip{ display:block; position:relative; min-height:230px; transform-style:preserve-3d; transition:transform .8s cubic-bezier(.3,1.3,.5,1); }
.tw-tag.open .tw-flip{ transform:rotateY(180deg); }
.tw-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:#FFF8EA; border-radius:10px 10px 16px 16px; padding:34px 14px 18px;
  clip-path:polygon(22% 0, 78% 0, 100% 14%, 100% 100%, 0 100%, 0 14%);
  box-shadow:0 14px 26px -16px rgba(40,20,5,.7); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.tw-face::before{ content:''; position:absolute; top:12px; left:50%; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:#C9A276; box-shadow:inset 0 1px 2px rgba(0,0,0,.4); }
.tw-face.back{ transform:rotateY(180deg); background:var(--c-bg,#F6DDE5); }
.tw-face .tw-ic{ width:54px; height:54px; border-radius:50%; background:var(--c-bg,#F6DDE5); color:var(--c,#A8385E); padding:12px; }
.tw-face .tw-ic svg{ width:100%; height:100%; display:block; }
.tw-face b{ font-family:'Fraunces',serif; font-weight:400; font-size:19px; line-height:1.2; color:var(--ink); }
.tw-face small{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; }
.tw-face.back p{ margin:0; font-size:14px; line-height:1.6; color:var(--c-deep,#732440); }
.tw-tag.t1{ --c:#A8385E; --c-deep:#732440; --c-bg:#F6DDE5; }
.tw-tag.t2{ --c:#9A6B3F; --c-deep:#5E3E20; --c-bg:#F1E2CF; }
.tw-tag.t3{ --c:#B5673C; --c-deep:#7A3F1E; --c-bg:#F6E3D3; }
.tw-tag.t4{ --c:#4F72A8; --c-deep:#2C4570; --c-bg:#E1E9F5; }
.tw-tag.t5{ --c:#4C7A2E; --c-deep:#2E4F18; --c-bg:#E3EED8; }
.tw-board-note{ text-align:center; margin:22px 0 0; font-family:'Marck Script',cursive; font-size:22px; color:#3A2410; opacity:.85; }
@media (max-width:1000px){ .tw-tags{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:26px; } }
@media (max-width:560px){ .tw-tags{ grid-template-columns:repeat(2,minmax(0,1fr)); } .tw-flip{ min-height:210px; } }

/* ---- сладко или солено ---- */
.tw-ss{ margin-top:26px; border-radius:24px; padding:clamp(26px,4vw,44px); background:var(--brick-bg); transition:background .7s ease;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; }
.tw-ss.salt{ background:var(--tw-salt-bg); }
.tw-switch{ display:inline-flex; position:relative; padding:6px; border-radius:999px; background:#fff; box-shadow:0 10px 24px -14px rgba(0,0,0,.35); }
.tw-switch button{ position:relative; z-index:1; border:0; background:none; cursor:pointer; padding:12px 26px; border-radius:999px;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:15px; color:var(--ink-soft); transition:color .4s; }
.tw-switch button.on{ color:#fff; }
.tw-switch i{ position:absolute; top:6px; bottom:6px; left:6px; width:calc(50% - 6px); border-radius:999px; background:var(--brick);
  transition:transform .55s cubic-bezier(.34,1.4,.5,1), background .5s; }
.tw-ss.salt .tw-switch i{ transform:translateX(100%); background:var(--tw-salt); }
.tw-ss h3{ font-family:'Fraunces',serif; font-weight:400; font-size:clamp(28px,3vw,38px); line-height:1.1; margin:24px 0 12px; color:var(--brick-deep); transition:color .5s; }
.tw-ss.salt h3{ color:#2E4F18; }
.tw-ss ul{ list-style:none; margin:0; padding:0; }
.tw-ss li{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px dashed rgba(0,0,0,.12); font-size:17px; color:var(--ink); }
.tw-ss li:last-child{ border-bottom:0; }
.tw-ss li span{ width:10px; height:10px; border-radius:50%; background:var(--brick); flex:0 0 auto; transition:background .5s; }
.tw-ss.salt li span{ background:var(--tw-salt); }
.tw-side[hidden]{ display:none !important; }
.tw-side{ animation:twIn .5s ease both; }
@keyframes twIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.tw-plate{ position:relative; width:100%; max-width:340px; aspect-ratio:1; margin:0 auto; }
.tw-plate svg{ width:100%; height:100%; display:block; }
.tw-plate .tw-art{ transition:opacity .5s, transform .6s cubic-bezier(.34,1.4,.5,1); transform-origin:50% 50%; }
.tw-ss .tw-art.salt, .tw-ss.salt .tw-art.sweet{ opacity:0; transform:scale(.6) rotate(-30deg); }
.tw-ss.salt .tw-art.salt{ opacity:1; transform:none; }
@media (max-width:760px){ .tw-ss{ grid-template-columns:1fr; text-align:center; } .tw-ss ul{ text-align:left; } .tw-plate{ max-width:240px; } }

/* ---- бурканите ---- */
.tw-jars{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,56px); max-width:820px; margin:30px auto 0; }
.tw-jar{ position:relative; padding:0 10px; }
.tw-lid{ height:34px; margin:0 14%; border-radius:10px 10px 4px 4px; background:repeating-linear-gradient(90deg, var(--jar-lid) 0 8px, rgba(255,255,255,.25) 8px 10px); box-shadow:0 4px 0 rgba(0,0,0,.1); }
.tw-glass{ position:relative; margin-top:4px; border-radius:26px 26px 38px 38px; padding:40px 20px 34px; min-height:250px;
  background:linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,.35) 30%, rgba(255,255,255,.55));
  box-shadow:inset 0 0 0 2px rgba(120,140,150,.28), inset 12px 0 0 rgba(255,255,255,.5), 0 24px 40px -26px rgba(60,30,20,.45); }
.tw-label{ background:#FFF8EA; border-radius:6px; padding:18px 18px 16px; text-align:center; box-shadow:0 2px 0 rgba(0,0,0,.06); border:1px dashed rgba(0,0,0,.18); transform:rotate(-1deg); }
.tw-jar:nth-child(2) .tw-label{ transform:rotate(1.2deg); }
.tw-label b{ display:block; font-family:'Marck Script',cursive; font-weight:400; font-size:30px; color:var(--jar-ink); margin-bottom:8px; }
.tw-label span{ font-size:15px; line-height:1.65; color:var(--ink); }
.tw-beads{ display:flex; justify-content:center; gap:6px; margin-top:18px; }
.tw-beads i{ width:14px; height:14px; border-radius:50%; background:var(--b); animation:twBob 3s ease-in-out infinite alternate; }
.tw-beads i:nth-child(2){ animation-delay:-.6s; } .tw-beads i:nth-child(3){ animation-delay:-1.2s; } .tw-beads i:nth-child(4){ animation-delay:-1.8s; } .tw-beads i:nth-child(5){ animation-delay:-2.4s; }
@keyframes twBob{ from{ transform:translateY(0); } to{ transform:translateY(-6px); } }
@media (max-width:640px){ .tw-jars{ grid-template-columns:1fr; } }

/* ---- корковото табло ---- */
.tw-cork{ margin-top:30px; border-radius:18px; padding:clamp(28px,4vw,48px);
  background-color:#C8A171;
  background-image:radial-gradient(rgba(90,55,20,.28) 1px, transparent 1.4px), radial-gradient(rgba(255,240,210,.35) 1px, transparent 1.4px);
  background-size:9px 9px, 13px 13px; background-position:0 0, 4px 6px;
  box-shadow:inset 0 0 0 10px #8E6238, 0 24px 50px -30px rgba(60,30,20,.6);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(24px,4vw,48px); align-items:center; }
.tw-pinned{ position:relative; background:#fff; padding:10px; border-radius:3px; transform:rotate(-2deg); box-shadow:0 20px 34px -18px rgba(40,20,5,.7); transition:transform .5s cubic-bezier(.16,.8,.3,1); max-width:440px; justify-self:center; }
.tw-pinned:hover{ transform:rotate(0) translateY(-4px); }
.tw-pinned img{ width:100%; height:auto; display:block; }
.tw-pin{ position:absolute; top:-12px; left:50%; width:26px; height:26px; margin-left:-13px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #F29AB3, #A8385E 60%, #6A1D38); box-shadow:0 6px 8px -2px rgba(0,0,0,.45); }
.tw-sticky{ background:#FFE98A; padding:26px 24px; transform:rotate(3deg); box-shadow:0 18px 30px -18px rgba(40,20,5,.7); position:relative; }
.tw-sticky::before{ content:''; position:absolute; top:-10px; left:50%; width:90px; height:24px; margin-left:-45px; background:rgba(255,255,255,.55); transform:rotate(-3deg); }
.tw-sticky p{ margin:0; font-family:'Marck Script',cursive; font-size:clamp(26px,2.8vw,32px); line-height:1.25; color:#3A2410; }
.tw-sticky small{ display:block; margin-top:14px; font-family:'Marck Script',cursive; font-size:22px; color:var(--brick-deep); }
.tw-cork figcaption{ text-align:center; margin-top:10px; font-size:12px; color:var(--ink-soft); }
@media (max-width:760px){ .tw-cork{ grid-template-columns:1fr; } .tw-sticky{ transform:rotate(1.5deg); } }
@media (prefers-reduced-motion:reduce){ .tw-swing, .tw-beads i{ animation:none; } }

/* ===========================================================================
   59. КЛУБ „ПЪТЕШЕСТВЕНИЦИ КЪМ ЗНАНИЕ“ (pateshestvenici.html)
   Страницата е пътешествие: бордна карта за часа и мястото, компас с
   посоките на клуба, игра със столици, легенда на картата и плакат-картичка.
   Всички класове са с представка pz-, за да не се бъркат с другите клубове.
=========================================================================== */
[data-theme="patesh"]{ --brick:#2E6E78; --brick-deep:#1F4A51; --brick-bg:#DCEBEB; --pz-brass:#B8863B; --pz-red:#B03A3A; --pz-paper:#FBF4E4; }
[data-theme="patesh"] .ed-cover{ background-image:url('art/cover-patesh.svg'); }
[data-theme="patesh"] main::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 220'%3E%3Cg fill='none' stroke='%232E6E78' stroke-width='1.6'%3E%3Cpath d='M0 55q160-26 320 0M0 165q160-26 320 0'/%3E%3Cpath d='M80 0q-24 110 0 220M240 0q24 110 0 220'/%3E%3C/g%3E%3C/svg%3E"); background-size:320px 220px; opacity:.06; }

.pz-h{ font-family:'Fraunces',serif; font-weight:400; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--ink); margin:6px 0 0; }
.pz-block{ margin-top:clamp(56px,7vw,90px); }

/* ---- 1. бордна карта ---- */
.pz-pass{ display:grid; grid-template-columns:minmax(0,1fr) 190px; max-width:860px; margin:0 auto;
  background:var(--pz-paper); border-radius:18px; position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 24px 50px -28px rgba(31,74,81,.55), 0 0 0 1px rgba(46,110,120,.16);
  transform:rotate(-1.2deg); transition:transform .6s cubic-bezier(.16,.8,.3,1); }
.pz-pass:hover{ transform:rotate(0); }
.pz-pass-main{ padding:26px 30px 24px; }
.pz-pass-top{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid rgba(46,110,120,.2); }
.pz-pass-brand{ display:flex; align-items:center; gap:10px; font-family:'Manrope',sans-serif; font-weight:800; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brick-deep); }
.pz-pass-brand svg{ width:26px; height:26px; color:var(--brick); }
.pz-pass-class{ font-family:'Manrope',sans-serif; font-weight:800; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:var(--brick); padding:6px 12px; border-radius:999px; }
.pz-route{ display:flex; align-items:center; gap:18px; margin-bottom:20px; }
.pz-route .pz-city b{ display:block; font-family:'Fraunces',serif; font-weight:500; font-size:clamp(30px,4vw,44px); line-height:1; color:var(--brick-deep); }
.pz-route .pz-city span{ font-size:12px; color:var(--ink-soft); }
.pz-route .pz-fly{ flex:1; position:relative; height:2px; background:repeating-linear-gradient(90deg, var(--brick) 0 6px, transparent 6px 12px); opacity:.6; }
.pz-route .pz-fly svg{ position:absolute; left:50%; top:50%; width:26px; height:26px; margin:-13px 0 0 -13px; color:var(--brick-deep); background:var(--pz-paper); padding:2px; animation:pzFly 6s ease-in-out infinite alternate; }
@keyframes pzFly{ from{ left:18%; } to{ left:82%; } }
.pz-fields{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.pz-fields b{ display:block; font-family:'Manrope',sans-serif; font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px; }
.pz-fields span{ font-family:'Fraunces',serif; font-size:18px; line-height:1.2; color:var(--ink); }
.pz-pass-stub{ position:relative; padding:26px 22px; border-left:2px dashed rgba(46,110,120,.35); display:flex; flex-direction:column; justify-content:space-between; gap:14px; text-align:center; }
.pz-pass-stub::before, .pz-pass-stub::after{ content:''; position:absolute; left:-13px; width:24px; height:24px; border-radius:50%; background:var(--cream,#F7F1E8); }
.pz-pass-stub::before{ top:-12px; } .pz-pass-stub::after{ bottom:-12px; }
.pz-gate b{ display:block; font-family:'Manrope',sans-serif; font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.pz-gate span{ font-family:'Fraunces',serif; font-size:40px; line-height:1.05; color:var(--brick-deep); }
.pz-barcode{ height:52px; border-radius:4px; background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); opacity:.75; }
@media (max-width:700px){
  .pz-pass{ grid-template-columns:1fr; transform:none; }
  .pz-pass-stub{ border-left:0; border-top:2px dashed rgba(46,110,120,.35); flex-direction:row; align-items:center; }
  .pz-pass-stub::before, .pz-pass-stub::after{ top:-13px; left:auto; bottom:auto; }
  .pz-pass-stub::before{ left:-12px; } .pz-pass-stub::after{ right:-12px; }
  .pz-barcode{ flex:1; }
  .pz-fields{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---- 2. дневник на пътешественика ---- */
.pz-diary{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; max-width:980px; margin-left:auto; margin-right:auto; }
.pz-stamp{ position:relative; width:clamp(150px,18vw,200px); aspect-ratio:1; }
.pz-stamp img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; filter:saturate(.9); }
.pz-stamp svg{ position:absolute; inset:-14px; width:calc(100% + 28px); height:calc(100% + 28px); color:var(--brick); animation:pzSpin 40s linear infinite; }
@keyframes pzSpin{ to{ transform:rotate(360deg); } }
.pz-diary p{ margin:0 0 14px; font-size:18px; line-height:1.8; color:var(--ink-soft); }
.pz-diary p:first-child::first-letter{ float:left; font-family:'Fraunces',serif; font-size:64px; line-height:.85; padding:6px 10px 0 0; color:var(--brick); }
.pz-diary .pz-motto{ font-family:'Fraunces',serif; font-style:italic; font-size:clamp(22px,2.4vw,28px); color:var(--brick-deep); margin:0; }
@media (max-width:700px){ .pz-diary{ grid-template-columns:1fr; justify-items:center; } }

/* ---- 3. компасът с посоките ---- */
.pz-compass-wrap{ display:grid; grid-template-columns:minmax(260px,420px) minmax(0,1fr); gap:clamp(28px,5vw,70px); align-items:center; margin-top:28px; }
.pz-compass{ position:relative; width:100%; aspect-ratio:1; }
.pz-compass svg.pz-dial{ width:100%; height:100%; display:block; }
.pz-needle{ position:absolute; inset:0; transition:transform 1.1s cubic-bezier(.34,1.4,.5,1); pointer-events:none; }
.pz-needle svg{ width:100%; height:100%; display:block; }
.pz-dir{ position:absolute; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; border:0; cursor:pointer;
  background:var(--pz-paper); color:var(--brick-deep); font-family:'Fraunces',serif; font-size:24px;
  box-shadow:0 0 0 1px rgba(46,110,120,.25), 0 10px 22px -12px rgba(31,74,81,.6); transition:background .3s, color .3s, transform .3s; }
.pz-dir:hover{ transform:scale(1.08); }
.pz-dir.on{ background:var(--brick); color:#fff; }
.pz-dir[data-d="0"]{ left:50%; top:7%; } .pz-dir[data-d="1"]{ left:93%; top:50%; }
.pz-dir[data-d="2"]{ left:50%; top:93%; } .pz-dir[data-d="3"]{ left:7%; top:50%; }
.pz-panel{ position:relative; min-height:240px; }
.pz-card{ position:absolute; inset:0 auto auto 0; width:100%; opacity:0; transform:translateY(14px); transition:opacity .45s, transform .45s; pointer-events:none; }
.pz-card.on{ position:relative; opacity:1; transform:none; pointer-events:auto; }
.pz-card .pz-ico{ width:56px; height:56px; border-radius:16px; background:var(--brick-bg); color:var(--brick); padding:13px; margin-bottom:18px; }
.pz-card .pz-ico svg{ width:100%; height:100%; display:block; }
.pz-card b{ display:block; font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--pz-brass); margin-bottom:8px; }
.pz-card h3{ margin:0 0 12px; font-family:'Fraunces',serif; font-weight:400; font-size:clamp(28px,3vw,38px); line-height:1.1; color:var(--ink); }
.pz-card p{ margin:0; font-size:17px; line-height:1.75; color:var(--ink-soft); max-width:46ch; }
.pz-goal{ margin-top:26px; display:flex; align-items:center; gap:14px; padding:16px 20px; border-radius:14px; background:var(--pz-paper); border:1px dashed rgba(184,134,59,.55); }
.pz-goal svg{ flex:0 0 auto; width:34px; height:34px; color:var(--pz-red); }
.pz-goal span{ font-size:15px; line-height:1.55; color:var(--ink); }
@media (max-width:760px){ .pz-compass-wrap{ grid-template-columns:1fr; } .pz-compass{ max-width:340px; margin:0 auto; } .pz-dir{ width:54px; height:54px; margin:-27px 0 0 -27px; font-size:20px; } }

/* ---- 4. играта ---- */
.pz-quiz{ max-width:760px; margin:26px auto 0; background:var(--pz-paper); border-radius:20px; padding:clamp(22px,3vw,34px);
  box-shadow:0 0 0 1px rgba(46,110,120,.16), 0 24px 50px -30px rgba(31,74,81,.5); position:relative; overflow:hidden; }
.pz-q-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.pz-q-top b{ font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--brick); }
.pz-dots{ display:flex; gap:6px; }
.pz-dots i{ width:22px; height:6px; border-radius:3px; background:rgba(46,110,120,.18); transition:background .3s; }
.pz-dots i.done{ background:var(--brick); } .pz-dots i.miss{ background:var(--pz-red); opacity:.6; }
.pz-q{ font-family:'Fraunces',serif; font-size:clamp(22px,2.6vw,30px); line-height:1.25; color:var(--ink); margin:0 0 20px; }
.pz-opts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.pz-opts button{ text-align:left; padding:15px 18px; border-radius:12px; border:1px solid rgba(46,110,120,.25); background:#fff; cursor:pointer;
  font-family:'Manrope',sans-serif; font-size:16px; font-weight:600; color:var(--ink); transition:border-color .2s, background .2s, transform .2s; }
.pz-opts button:hover:not(:disabled){ border-color:var(--brick); transform:translateY(-2px); }
.pz-opts button.ok{ background:#E2F0E6; border-color:#3E7A5A; color:#23543A; }
.pz-opts button.no{ background:#F7E1DF; border-color:var(--pz-red); color:#7A2626; }
.pz-opts button:disabled{ cursor:default; }
.pz-fb{ min-height:26px; margin:16px 0 0; font-size:15px; color:var(--ink-soft); }
.pz-next{ margin-top:10px; }
.pz-end{ text-align:center; padding:10px 0; }
.pz-end .pz-seal{ width:130px; height:130px; margin:0 auto 14px; color:var(--pz-red); animation:pzStamp .6s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes pzStamp{ from{ transform:scale(2.2) rotate(-24deg); opacity:0; } to{ transform:scale(1) rotate(-10deg); opacity:1; } }
.pz-end h3{ font-family:'Fraunces',serif; font-weight:400; font-size:30px; margin:0 0 6px; color:var(--ink); }
.pz-end p{ margin:0 0 18px; color:var(--ink-soft); }
@media (max-width:560px){ .pz-opts{ grid-template-columns:1fr; } }

/* ---- 5. легендата ---- */
.pz-legend{ max-width:760px; margin:26px auto 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:2px solid var(--ink); border-radius:4px; background:var(--pz-paper); }
.pz-legend > div{ padding:22px 20px; border-right:1px solid rgba(58,50,43,.25); }
.pz-legend > div:last-child{ border-right:0; }
.pz-legend svg{ width:30px; height:30px; margin-bottom:10px; }
.pz-legend b{ display:block; font-family:'Fraunces',serif; font-weight:500; font-size:20px; color:var(--ink); margin-bottom:6px; }
.pz-legend span{ font-size:14px; line-height:1.6; color:var(--ink-soft); }
.pz-legend-cap{ max-width:760px; margin:0 auto; display:flex; justify-content:space-between; font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); padding:0 4px 8px; }
@media (max-width:700px){ .pz-legend{ grid-template-columns:1fr; } .pz-legend > div{ border-right:0; border-bottom:1px solid rgba(58,50,43,.25); } .pz-legend > div:last-child{ border-bottom:0; } }

/* ---- 6. плакатът като пощенска картичка ---- */
.pz-card-post{ max-width:520px; margin:30px auto 0; position:relative; background:#fff; padding:14px; border-radius:6px;
  box-shadow:0 26px 50px -26px rgba(36,30,25,.55); transform:rotate(1.6deg); transition:transform .5s cubic-bezier(.16,.8,.3,1); }
.pz-card-post:hover{ transform:rotate(0) translateY(-4px); }
.pz-card-post img{ width:100%; height:auto; display:block; border-radius:2px; }
.pz-postmark{ position:absolute; right:-26px; top:-26px; width:128px; height:128px; color:var(--pz-red); transform:rotate(12deg); pointer-events:none; }
.pz-card-post figcaption{ text-align:center; margin-top:12px; font-size:13px; color:var(--ink-soft); }
@media (max-width:560px){ .pz-postmark{ right:-6px; top:-30px; width:100px; height:100px; } }
@media (prefers-reduced-motion:reduce){ .pz-stamp svg, .pz-route .pz-fly svg{ animation:none; } .pz-needle{ transition:none; } }

/* Начална страница — блокът „Нашите рубрики и клубове“ с три карти */
/* четири карти — две по две; на телефон една под друга */
.rb-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (max-width:760px){ .rb-grid{ grid-template-columns:1fr; } }
.rb-img-patesh{ background:#F1E4C8 url('art/rb-patesh.svg') center/cover no-repeat; display:grid; place-items:center; }
.rb-img-patesh img{ position:relative; width:30%; max-width:110px; height:auto; aspect-ratio:1; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 5px #fff, 0 12px 26px -8px rgba(40,50,40,.35); transition:transform .6s ease; }
.rb-patesh .rb-kick{ color:#2E6E78; }
.rb-patesh:hover{ border-color:#2E6E78; }
.rb-patesh:hover .rb-img-patesh img{ transform:rotate(18deg) scale(1.06); }
.rb-img-tvor{ background:#F6E9DD url('art/rb-tvorilnica.svg') center/cover no-repeat; display:grid; place-items:center; }
.rb-img-tvor img{ position:relative; width:30%; max-width:110px; height:auto; aspect-ratio:1; border-radius:50%;
  box-shadow:0 0 0 5px #fff, 0 12px 26px -8px rgba(60,30,20,.35); transition:transform .4s ease; }
.rb-tvor .rb-kick{ color:#A8385E; }
.rb-tvor:hover{ border-color:#A8385E; }
.rb-tvor:hover .rb-img-tvor img{ transform:scale(1.06) rotate(-4deg); }

/* Творилница — снимки и видео от заниманията */
.tv-media{ margin-top:clamp(48px,6vw,72px); }
.tv-empty{ aspect-ratio:16/10; border-radius:13px; border:2px dashed rgba(176,58,94,.3); background:var(--cream-3,#FBF8F1);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; padding:20px; }
.tv-empty-ic{ width:46px; height:46px; border-radius:50%; background:var(--brick-bg); color:var(--brick); padding:11px; margin-bottom:6px; }
.tv-empty-ic svg{ width:100%; height:100%; display:block; }
.tv-empty b{ font-family:'Fraunces',serif; font-weight:400; font-size:19px; color:var(--ink); }
.tv-empty span:last-child{ font-size:13px; line-height:1.55; color:var(--ink-soft); max-width:30ch; }
.tv-gallery:has(.ed-photo-tile) .tv-empty{ display:none; }

.pz-quiz [hidden]{ display:none !important; }

/* ===========================================================================
   60. АЛЕКО ТВ — ТЕЛЕВИЗИОННА СТАНЦИЯ (alekotv.html)
   Голям ретро телевизор, в който се пускат епизодите направо; епизодите са
   видеокасети на рафт; екипът е на клапи; накрая — бутон REC към канала.
   Класовете са с представка atv-.
=========================================================================== */
.atv-block{ margin-top:clamp(56px,7vw,90px); }
.atv-h{ font-family:'Fraunces',serif; font-weight:400; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--ink); margin:6px 0 0; }

/* ---- надписът „в ефир“ ---- */
.atv-onair{ display:flex; justify-content:center; margin-bottom:26px; }
.atv-onair span{ display:inline-flex; align-items:center; gap:12px; padding:10px 22px; border-radius:10px;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:14px; letter-spacing:.28em; text-transform:uppercase;
  color:#fff; background:#C8321E; box-shadow:0 0 0 3px #2A1A14, 0 0 28px rgba(200,50,30,.55); animation:atvOn 2.4s ease-in-out infinite; }
.atv-onair i{ width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 10px #fff; }
@keyframes atvOn{ 0%,100%{ opacity:1; } 50%{ opacity:.72; box-shadow:0 0 0 3px #2A1A14, 0 0 8px rgba(200,50,30,.25); } }

/* ---- телевизорът ---- */
.atv-tv{ position:relative; max-width:980px; margin:0 auto; padding-top:60px; }
.atv-ant{ position:absolute; top:0; left:50%; width:240px; height:70px; margin-left:-120px; pointer-events:none; }
.atv-ant::before, .atv-ant::after{ content:''; position:absolute; bottom:6px; left:50%; width:3px; height:78px; background:#3A2A22; border-radius:2px; transform-origin:bottom; }
.atv-ant::before{ transform:rotate(-34deg); } .atv-ant::after{ transform:rotate(30deg); }
.atv-ant i{ position:absolute; bottom:0; left:50%; width:44px; height:18px; margin-left:-22px; border-radius:22px 22px 4px 4px; background:#3A2A22; }
.atv-body{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:22px; padding:26px;
  border-radius:34px; background:linear-gradient(160deg, #7A4B33, #5B3525 55%, #4A2B1E);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18), inset 0 -6px 0 rgba(0,0,0,.25), 0 40px 70px -36px rgba(40,20,10,.8); }
.atv-body::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:repeating-linear-gradient(95deg, rgba(255,255,255,.035) 0 3px, transparent 3px 9px); }
.atv-bezel{ position:relative; border-radius:26px; padding:14px; background:#1E1714; box-shadow:inset 0 0 0 2px #0E0A08, inset 0 8px 20px rgba(0,0,0,.6); }
.atv-screen{ position:relative; aspect-ratio:16/9; border-radius:20px / 26px; overflow:hidden; background:#0C0C0C; }
.atv-screen img, .atv-screen iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; object-fit:cover; }
.atv-screen::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:3; border-radius:inherit;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
             radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.5); }
.atv-screen.playing::after{ opacity:.35; }
.atv-glare{ position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit;
  background:linear-gradient(125deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 32%); }
.atv-static{ position:absolute; inset:-20%; z-index:5; pointer-events:none; opacity:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-color:#222; }
.atv-screen.switching .atv-static{ animation:atvStatic .55s steps(6) both; }
@keyframes atvStatic{ 0%{ opacity:1; transform:translate(0,0); } 30%{ transform:translate(-6%,4%); } 60%{ transform:translate(5%,-3%); opacity:.9; } 100%{ opacity:0; transform:translate(0,0); } }
.atv-play{ position:absolute; left:50%; top:50%; z-index:6; width:92px; height:92px; margin:-46px 0 0 -46px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(200,50,30,.92); color:#fff; display:grid; place-items:center; box-shadow:0 0 0 8px rgba(255,255,255,.18), 0 16px 34px rgba(0,0,0,.5);
  transition:transform .3s cubic-bezier(.34,1.4,.5,1), background .3s; }
.atv-play:hover{ transform:scale(1.1); background:#D8391F; }
.atv-play svg{ width:34px; height:34px; margin-left:5px; }
.atv-osd{ position:absolute; left:18px; right:18px; bottom:14px; z-index:6; display:flex; justify-content:space-between; align-items:flex-end; gap:12px; pointer-events:none;
  font-family:'Manrope',sans-serif; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.8); }
.atv-osd b{ font-size:clamp(15px,1.8vw,20px); font-weight:800; }
.atv-osd span{ font-size:12px; font-weight:800; letter-spacing:.18em; color:#7CFF9B; font-variant-numeric:tabular-nums; }
.atv-screen.playing .atv-osd, .atv-screen.playing .atv-play{ display:none; }
.atv-panel{ position:relative; display:flex; flex-direction:column; align-items:center; gap:16px; padding:10px 0; }
.atv-led{ width:100%; padding:10px 8px; border-radius:10px; background:#0F1A12; box-shadow:inset 0 2px 8px rgba(0,0,0,.7);
  font-family:'Courier New',monospace; font-weight:700; font-size:26px; letter-spacing:.12em; text-align:center; color:#7CFF9B; text-shadow:0 0 10px rgba(124,255,155,.7); }
.atv-led small{ display:block; font-size:10px; letter-spacing:.2em; color:#4F9A64; text-shadow:none; }
.atv-knob{ position:relative; width:74px; height:74px; border-radius:50%; border:0; cursor:pointer;
  background:radial-gradient(circle at 35% 30%, #F0E2CC, #B79E7C 55%, #7E6647); box-shadow:0 8px 16px -6px rgba(0,0,0,.6), inset 0 -3px 6px rgba(0,0,0,.25);
  transition:transform .6s cubic-bezier(.34,1.4,.5,1); }
.atv-knob::after{ content:''; position:absolute; top:8px; left:50%; width:4px; height:20px; margin-left:-2px; border-radius:2px; background:#4A2B1E; }
.atv-knob span{ position:absolute; left:0; right:0; bottom:-22px; font-family:'Manrope',sans-serif; font-size:10px; font-weight:800; letter-spacing:.16em; color:#F3E4D0; text-transform:uppercase; }
.atv-knob-row{ display:flex; gap:12px; margin-top:6px; }
.atv-ch{ width:52px; height:40px; border-radius:10px; border:0; cursor:pointer; background:#2A1C16; color:#F3E4D0;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:13px; box-shadow:inset 0 -3px 0 rgba(0,0,0,.4), 0 4px 8px -4px rgba(0,0,0,.6); transition:transform .15s; }
.atv-ch:active{ transform:translateY(2px); box-shadow:inset 0 -1px 0 rgba(0,0,0,.4); }
.atv-grill{ width:100%; flex:1; min-height:60px; border-radius:10px; background:repeating-linear-gradient(0deg, #2A1C16 0 3px, transparent 3px 8px); opacity:.8; }
.atv-power{ width:12px; height:12px; border-radius:50%; background:#FF4A2E; box-shadow:0 0 10px #FF4A2E; animation:atvOn 2.4s ease-in-out infinite; }
.atv-legs{ display:flex; justify-content:space-between; padding:0 12%; }
.atv-legs i{ width:16px; height:34px; background:#3A2A22; border-radius:0 0 6px 6px; }
.atv-legs i:first-child{ transform:skewX(12deg); } .atv-legs i:last-child{ transform:skewX(-12deg); }
@media (max-width:760px){
  .atv-body{ grid-template-columns:1fr; padding:14px; border-radius:24px; gap:14px; }
  .atv-bezel{ padding:8px; border-radius:18px; }
  .atv-panel{ flex-direction:row; flex-wrap:wrap; justify-content:center; padding:0 0 6px; gap:12px; }
  .atv-led{ width:auto; font-size:20px; padding:8px 14px; }
  .atv-knob{ width:52px; height:52px; } .atv-knob span, .atv-grill{ display:none; }
  .atv-knob-row{ margin-top:0; }
  .atv-play{ width:66px; height:66px; margin:-33px 0 0 -33px; } .atv-play svg{ width:26px; height:26px; }
  .atv-ant{ transform:scale(.7); transform-origin:bottom; }
}

/* ---- рафтът с касети ---- */
.atv-shelf{ margin-top:26px; padding:28px clamp(16px,2.6vw,34px) 0; border-radius:16px 16px 0 0; background:linear-gradient(180deg, rgba(160,71,46,.06), rgba(160,71,46,.12)); }
.atv-tapes{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px) clamp(10px,1.4vw,18px); }
.atv-plank{ height:18px; border-radius:0 0 8px 8px; background:linear-gradient(180deg, #8C5A3C, #6B4128); box-shadow:0 14px 24px -14px rgba(40,20,10,.7); margin-bottom:6px; }
.atv-tape{ position:relative; display:block; width:100%; border:0; padding:0; background:none; cursor:pointer; text-align:left; font:inherit;
  transition:transform .4s cubic-bezier(.34,1.4,.5,1); }
.atv-tape:hover{ transform:translateY(-8px) rotate(-1.5deg); }
.atv-tape.on{ transform:translateY(-12px); }
.atv-case{ position:relative; display:block; aspect-ratio:1.75; border-radius:8px; background:linear-gradient(180deg, #2A2A2A, #161616);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 22px -14px rgba(0,0,0,.8); padding:8% 7% 0; }
.atv-tape.on .atv-case{ box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 3px #C8321E, 0 18px 26px -14px rgba(200,50,30,.7); }
.atv-label{ display:flex; align-items:center; gap:8px; height:46%; border-radius:4px; background:#FFF8EA; padding:4px 6px; overflow:hidden;
  background-image:linear-gradient(180deg, transparent 0 62%, rgba(160,71,46,.9) 62% 72%, transparent 72%); }
.atv-label img{ height:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px; flex:0 0 auto; background:#ddd; }
.atv-label b{ font-family:'Marck Script',cursive; font-weight:400; font-size:clamp(16px,1.6vw,21px); line-height:1; color:#2B2B2B; white-space:nowrap; }
.atv-window{ position:absolute; left:22%; right:22%; bottom:12%; height:26%; border-radius:6px; background:rgba(40,40,40,.9);
  box-shadow:inset 0 0 0 2px #3A3A3A; display:flex; justify-content:space-between; align-items:center; padding:0 8%; }
.atv-reel{ width:34%; aspect-ratio:1; border-radius:50%; max-height:90%;
  background:radial-gradient(circle, #EEE 0 18%, transparent 19%), conic-gradient(#CFCFCF 0 12%, #5A5A5A 12% 33%, #CFCFCF 33% 45%, #5A5A5A 45% 66%, #CFCFCF 66% 78%, #5A5A5A 78%); }
.atv-tape.on .atv-reel{ animation:atvReel 1.6s linear infinite; }
@keyframes atvReel{ to{ transform:rotate(360deg); } }
.atv-ep{ display:block; margin-top:10px; font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--brick); }
@media (max-width:1000px){ .atv-tapes{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:560px){ .atv-tapes{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---- екипът на клапи ---- */
.atv-crew{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,24px); margin-top:26px; }
.atv-clap{ position:relative; padding-top:34px; }
.atv-clap-top{ position:absolute; top:0; left:0; right:0; height:30px; border-radius:6px 6px 2px 2px; transform-origin:8px 100%;
  background:repeating-linear-gradient(-55deg, #1E1E1E 0 16px, #F3EADF 16px 32px); transform:rotate(-14deg);
  transition:transform .35s cubic-bezier(.5,-0.5,.3,1.6); box-shadow:0 4px 8px -4px rgba(0,0,0,.5); }
.atv-clap:hover .atv-clap-top, .atv-clap.snap .atv-clap-top{ transform:rotate(0); }
.atv-clap-body{ background:#1E1E1E; color:#F3EADF; border-radius:4px 4px 12px 12px; padding:22px 20px 22px; min-height:210px;
  box-shadow:0 22px 40px -24px rgba(0,0,0,.7); }
.atv-clap-body::before{ content:''; display:block; height:8px; margin:-22px -20px 18px; background:repeating-linear-gradient(-55deg, #1E1E1E 0 16px, #F3EADF 16px 32px); opacity:.9; }
.atv-clap-body small{ display:block; font-family:'Courier New',monospace; font-size:11px; letter-spacing:.14em; color:#9F9486; margin-bottom:8px; }
.atv-clap-body b{ display:block; font-family:'Marck Script',cursive; font-weight:400; font-size:34px; line-height:1; color:#fff; margin-bottom:10px; }
.atv-clap-body p{ margin:0; font-size:14px; line-height:1.6; color:#D8CEC1; }
@media (max-width:1000px){ .atv-crew{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:30px; } }
@media (max-width:520px){ .atv-crew{ grid-template-columns:1fr; } }

/* ---- REC ---- */
.atv-rec{ text-align:center; margin-top:clamp(56px,7vw,90px); }
.atv-rec a{ display:inline-flex; align-items:center; gap:16px; padding:18px 32px 18px 22px; border-radius:999px; text-decoration:none;
  background:#1E1E1E; color:#fff; font-family:'Manrope',sans-serif; font-weight:800; font-size:16px; letter-spacing:.04em;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.7); transition:transform .3s cubic-bezier(.34,1.4,.5,1); }
.atv-rec a:hover{ transform:translateY(-3px) scale(1.03); }
.atv-rec a i{ width:22px; height:22px; border-radius:50%; background:#E0341C; box-shadow:0 0 0 5px rgba(224,52,28,.25); animation:atvOn 1.4s ease-in-out infinite; }
.atv-rec a em{ font-style:normal; font-family:'Courier New',monospace; color:#E0341C; letter-spacing:.2em; }
.atv-rec p{ margin:16px 0 0; color:var(--ink-soft); font-size:14px; }
@media (prefers-reduced-motion:reduce){ .atv-onair span, .atv-power, .atv-rec a i, .atv-tape.on .atv-reel{ animation:none; } }

/* ===========================================================================
   61. АЛЕКОЗНАЙКО — КЛАСНАТА СТАЯ (alekoznaiko.html)
   Балон „Знаеше ли, че…“ с факти, черна дъска с уроците като полароидни
   снимки на магнити, прожекционен екран, който се спуска, и кутия „Питай ме“,
   която праща въпроса направо в чата. Класовете са с представка zk-.
=========================================================================== */
.zk-block{ margin-top:clamp(56px,7vw,90px); }
.zk-h{ font-family:'Fraunces',serif; font-weight:400; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--ink); margin:6px 0 0; }

/* ---- знаеше ли, че ---- */
.zk-hero{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,4vw,56px); align-items:end; max-width:1000px; margin:0 auto; }
.zk-me{ position:relative; width:clamp(130px,17vw,200px); }
.zk-me img{ width:100%; height:auto; display:block; position:relative; z-index:1; animation:zkBob 3.6s ease-in-out infinite; transform-origin:50% 100%; cursor:pointer; }
.zk-me::after{ content:''; position:absolute; left:12%; right:12%; bottom:-6px; height:16px; border-radius:50%; background:rgba(40,50,30,.22); filter:blur(3px); animation:zkShadow 3.6s ease-in-out infinite; }
@keyframes zkBob{ 0%,100%{ transform:translateY(0) rotate(-1deg); } 50%{ transform:translateY(-10px) rotate(1.5deg); } }
@keyframes zkShadow{ 0%,100%{ transform:scaleX(1); opacity:1; } 50%{ transform:scaleX(.8); opacity:.6; } }
.zk-me.hop img{ animation:zkHop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes zkHop{ 0%{ transform:translateY(0); } 40%{ transform:translateY(-34px) rotate(-6deg); } 100%{ transform:translateY(0); } }
.zk-bubble{ position:relative; background:#FFFEF8; border-radius:28px; padding:clamp(24px,3vw,36px) clamp(24px,3vw,40px);
  box-shadow:0 0 0 3px var(--ink), 8px 10px 0 0 var(--brick); margin-bottom:40px; }
.zk-bubble::before{ content:''; position:absolute; left:-26px; bottom:34px; width:40px; height:34px; background:#FFFEF8;
  clip-path:polygon(100% 0, 0 100%, 100% 70%); filter:drop-shadow(-3px 0 0 var(--ink)); }
.zk-bubble .zk-k{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--brick); margin-bottom:12px; }
.zk-bubble .zk-k span{ color:var(--ink-soft); letter-spacing:.1em; }
.zk-fact{ font-family:'Fraunces',serif; font-size:clamp(22px,2.6vw,32px); line-height:1.3; color:var(--ink); margin:0 0 20px; min-height:2.6em; transition:opacity .3s, transform .3s; }
.zk-fact.out{ opacity:0; transform:translateY(8px); }
.zk-more{ display:inline-flex; align-items:center; gap:10px; border:0; cursor:pointer; padding:12px 22px; border-radius:999px; background:var(--brick); color:#fff;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:14px; transition:transform .3s cubic-bezier(.34,1.4,.5,1), background .3s; }
.zk-more:hover{ transform:translateY(-2px); background:var(--brick-deep); }
.zk-more svg{ width:18px; height:18px; transition:transform .5s; }
.zk-more:hover svg{ transform:rotate(180deg); }
.zk-name{ font-family:'Fraunces',serif; font-weight:400; font-size:clamp(34px,4.4vw,54px); line-height:1; margin:0 0 10px; color:var(--ink); }
.zk-lead{ margin:0 0 26px; font-size:17px; line-height:1.7; color:var(--ink-soft); max-width:56ch; }
@media (max-width:700px){ .zk-hero{ grid-template-columns:1fr; justify-items:center; text-align:center; } .zk-bubble{ margin-bottom:0; text-align:left; } .zk-bubble::before{ left:50%; bottom:auto; top:-28px; transform:rotate(90deg); } .zk-me{ order:2; } }

/* ---- прожекционният екран ---- */
.zk-proj{ max-width:900px; margin:0 auto; position:relative; }
.zk-roller{ position:relative; z-index:2; height:22px; margin:0 -14px; border-radius:11px; background:linear-gradient(180deg, #5E5E5E, #2E2E2E); box-shadow:0 8px 14px -8px rgba(0,0,0,.6); }
.zk-roller::before, .zk-roller::after{ content:''; position:absolute; top:3px; width:16px; height:16px; border-radius:50%; background:#1E1E1E; }
.zk-roller::before{ left:4px; } .zk-roller::after{ right:4px; }
.zk-sheet{ position:relative; margin:0 6px; overflow:hidden; max-height:0; transition:max-height 1.1s cubic-bezier(.5,0,.2,1); }
.zk-proj.down .zk-sheet{ max-height:900px; }
.zk-sheet-in{ background:#FAFAF7; padding:18px 18px 34px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.zk-sheet video{ width:100%; aspect-ratio:16/9; display:block; background:#111; border-radius:4px; }
.zk-sheet-cap{ display:flex; justify-content:space-between; gap:12px; margin-top:12px; font-family:'Manrope',sans-serif; font-size:13px; color:var(--ink-soft); }
.zk-sheet-cap b{ color:var(--ink); }
.zk-pull{ position:absolute; left:50%; bottom:-30px; width:4px; height:30px; margin-left:-2px; background:#3A3A3A; }
.zk-pull::after{ content:''; position:absolute; bottom:-10px; left:50%; width:18px; height:14px; margin-left:-9px; border-radius:50% 50% 6px 6px; background:#3A3A3A; }
.zk-hint{ text-align:center; margin:18px 0 0; font-family:'Marck Script',cursive; font-size:24px; color:var(--brick-deep); transition:opacity .4s; }
.zk-proj.down + .zk-hint{ opacity:0; height:0; margin:0; overflow:hidden; }

/* ---- черната дъска ---- */
.zk-board{ position:relative; margin-top:60px; border-radius:10px; padding:clamp(26px,4vw,48px) clamp(20px,4vw,48px) clamp(56px,6vw,70px);
  background-color:#2F4A3A;
  background-image:radial-gradient(60% 40% at 25% 30%, rgba(255,255,255,.07), transparent 70%),
                   radial-gradient(40% 30% at 80% 70%, rgba(255,255,255,.05), transparent 70%),
                   radial-gradient(rgba(0,0,0,.18) 1px, transparent 1.4px);
  background-size:auto, auto, 5px 5px;
  box-shadow:inset 0 0 0 14px #8A5A34, inset 0 0 0 16px #6B4226, inset 0 0 40px rgba(0,0,0,.45), 0 30px 60px -34px rgba(20,30,20,.8); color:rgba(255,255,255,.9); }
.zk-chalk-title{ font-family:'Marck Script',cursive; font-weight:400; font-size:clamp(34px,4.6vw,56px); line-height:1.05; text-align:center; margin:6px 0 4px; color:rgba(255,255,255,.9);
  text-shadow:0 0 1px rgba(255,255,255,.6), 0 0 8px rgba(255,255,255,.12); }
.zk-chalk-sub{ text-align:center; font-family:'Marck Script',cursive; font-size:22px; color:rgba(255,236,160,.8); margin:0 0 30px; }
.zk-doodle{ position:absolute; pointer-events:none; color:rgba(255,255,255,.45); }
.zk-doodle.d1{ left:4%; top:12%; width:70px; } .zk-doodle.d2{ right:5%; top:10%; width:60px; } .zk-doodle.d3{ right:8%; bottom:16%; width:90px; }
.zk-pics{ position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,3vw,36px); max-width:880px; margin:0 auto; }
.zk-pic{ position:relative; display:block; border:0; cursor:pointer; background:#FFFEF8; padding:10px 10px 0; border-radius:3px; text-align:center; font:inherit;
  box-shadow:0 18px 30px -16px rgba(0,0,0,.7); transition:transform .45s cubic-bezier(.34,1.4,.5,1); }
.zk-pic:nth-child(1){ transform:rotate(-4deg); } .zk-pic:nth-child(2){ transform:rotate(2.5deg) translateY(12px); } .zk-pic:nth-child(3){ transform:rotate(-1.5deg); }
.zk-pic:hover{ transform:rotate(0) translateY(-8px) scale(1.03); z-index:2; }
.zk-pic.on{ box-shadow:0 0 0 4px #FFD95E, 0 18px 30px -16px rgba(0,0,0,.7); }
.zk-pic::before{ content:''; position:absolute; top:-10px; left:50%; width:26px; height:26px; margin-left:-13px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFE59A, #E0A930 60%, #9C6C12); box-shadow:0 5px 7px -2px rgba(0,0,0,.5); z-index:2; }
.zk-pic:nth-child(2)::before{ background:radial-gradient(circle at 35% 30%, #BFE4FF, #3E86C8 60%, #1D4E7C); }
.zk-pic:nth-child(3)::before{ background:radial-gradient(circle at 35% 30%, #FFC2B0, #D2553F 60%, #8A2A1A); }
.zk-pic img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:#ddd; }
.zk-pic .zk-play{ position:absolute; left:50%; top:calc(10px + (100% - 64px) / 2); width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%;
  background:rgba(255,254,248,.92); color:var(--brick-deep); display:grid; place-items:center; box-shadow:0 6px 16px rgba(0,0,0,.35); transition:transform .3s; }
.zk-pic:hover .zk-play{ transform:scale(1.12); }
.zk-pic .zk-play svg{ width:20px; height:20px; margin-left:3px; }
.zk-pic b{ display:block; font-family:'Marck Script',cursive; font-weight:400; font-size:22px; line-height:1.1; color:#2B2B2B; padding:10px 4px 4px; }
.zk-pic small{ display:block; font-family:'Manrope',sans-serif; font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#8A8A8A; padding-bottom:12px; }
.zk-tray{ position:absolute; left:6%; right:6%; bottom:14px; height:14px; border-radius:3px; background:#7A4E2C; box-shadow:0 4px 0 #5A3820; }
.zk-tray i{ position:absolute; bottom:12px; height:9px; border-radius:3px; background:#F4F1E8; }
.zk-tray i:nth-child(1){ left:18%; width:46px; transform:rotate(-4deg); } .zk-tray i:nth-child(2){ left:26%; width:30px; background:#FFD2D2; }
.zk-tray i:nth-child(3){ left:31%; width:26px; background:#FFF0A8; transform:rotate(5deg); }
.zk-tray b{ position:absolute; right:14%; bottom:12px; width:70px; height:22px; border-radius:4px; background:linear-gradient(180deg, #D9C4A0 0 55%, #3A3A3A 55%); }
@media (max-width:700px){ .zk-pics{ grid-template-columns:1fr; max-width:320px; } .zk-pic:nth-child(n){ transform:rotate(-1deg); } .zk-doodle{ display:none; } }

/* ---- питай ме ---- */
.zk-ask{ max-width:820px; margin:26px auto 0; }
.zk-ask form{ display:flex; gap:10px; background:#FFFEF8; border-radius:999px; padding:8px; box-shadow:0 0 0 3px var(--ink), 6px 8px 0 0 var(--brick); }
.zk-ask input{ flex:1; min-width:0; border:0; background:transparent; padding:12px 18px; font-family:'Fraunces',serif; font-size:clamp(18px,2vw,22px); color:var(--ink); outline:none; }
.zk-ask button[type="submit"]{ border:0; cursor:pointer; padding:12px 24px; border-radius:999px; background:var(--brick); color:#fff; font-family:'Manrope',sans-serif; font-weight:800; font-size:14px; white-space:nowrap; }
.zk-ask button[type="submit"]:hover{ background:var(--brick-deep); }
.zk-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:22px; }
.zk-chips button{ border:1px solid var(--line,#E7DDCD); background:var(--cream-3,#FBF8F1); cursor:pointer; padding:10px 16px; border-radius:999px;
  font-family:'Manrope',sans-serif; font-size:14px; font-weight:600; color:var(--ink); transition:border-color .2s, transform .2s, background .2s; }
.zk-chips button:hover{ border-color:var(--brick); background:#fff; transform:translateY(-2px); }
.zk-err{ min-height:20px; margin:10px 0 0; text-align:center; font-size:13px; color:#A0472E; }
@media (max-width:520px){ .zk-ask form{ border-radius:22px; flex-direction:column; } }
@media (prefers-reduced-motion:reduce){ .zk-me img, .zk-me::after{ animation:none; } .zk-sheet{ transition:none; } }

/* ===========================================================================
   62. ЗА РОДИТЕЛИ — ТАБЛО ЗА РОДИТЕЛЯ (roditeli.html)
   Първо полезното: търсачка, бързи бутони и „днес“. После разделите като
   папка с цветни разделители — всеки със своя цвят и своя начин да се
   намери нужното. Класовете са с представка rp-.
=========================================================================== */
[data-theme="roditeli"] .rp-sec{ scroll-margin-top:96px; }
.rp-h{ font-family:'Fraunces',serif; font-weight:400; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--ink); margin:0; }
.rp-lead{ margin:8px 0 0; font-size:16px; line-height:1.65; color:var(--ink-soft); max-width:62ch; }

/* ---- търсачката ---- */
.rp-search{ position:relative; max-width:780px; margin:0 auto; z-index:5; }
.rp-search-box{ display:flex; align-items:center; gap:12px; background:#fff; border-radius:18px; padding:8px 8px 8px 22px;
  box-shadow:0 0 0 1px var(--line,#E7DDCD), 0 20px 40px -26px rgba(107,54,80,.5); transition:box-shadow .25s; }
.rp-search-box:focus-within{ box-shadow:0 0 0 2px var(--brick), 0 20px 40px -26px rgba(107,54,80,.6); }
.rp-search-box svg{ width:22px; height:22px; color:var(--brick); flex:0 0 auto; }
.rp-search input{ flex:1; min-width:0; border:0; outline:none; background:transparent; padding:14px 0; font-family:'Fraunces',serif; font-size:clamp(17px,1.9vw,21px); color:var(--ink); }
.rp-search input::placeholder{ color:#A89C92; }
.rp-clear{ border:0; background:var(--brick-bg); color:var(--brick-deep); width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:16px; display:none; }
.rp-search.has .rp-clear{ display:block; }
.rp-results{ position:absolute; left:0; right:0; top:calc(100% + 8px); background:#fff; border-radius:16px; padding:8px; display:none;
  box-shadow:0 0 0 1px var(--line,#E7DDCD), 0 26px 50px -24px rgba(40,20,30,.45); max-height:420px; overflow:auto; }
.rp-search.has .rp-results{ display:block; }
.rp-results button{ display:flex; align-items:center; gap:12px; width:100%; border:0; background:none; text-align:left; cursor:pointer; padding:11px 12px; border-radius:10px; font:inherit; }
.rp-results button:hover, .rp-results button.sel{ background:var(--brick-bg); }
.rp-results .tag{ flex:0 0 auto; font-family:'Manrope',sans-serif; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:4px 8px; border-radius:6px; color:#fff; background:var(--tc,#8C4B66); }
.rp-results .txt{ font-size:15px; color:var(--ink); line-height:1.35; }
.rp-results .txt small{ display:block; color:var(--ink-soft); font-size:13px; }
.rp-results mark{ background:#FFE58A; color:inherit; border-radius:3px; padding:0 1px; }
.rp-none{ padding:14px; font-size:14px; color:var(--ink-soft); }
.rp-hint{ text-align:center; margin:12px 0 0; font-size:13px; color:var(--ink-soft); }
.rp-hint button{ border:0; background:none; color:var(--brick); font:inherit; font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:0 2px; }

/* ---- бързите бутони ---- */
.rp-quick{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; margin-top:34px; }
.rp-q{ position:relative; display:flex; flex-direction:column; gap:10px; padding:20px 16px 18px; border-radius:18px; text-decoration:none; color:var(--ink);
  background:var(--cream-3,#FBF8F1); border:1px solid var(--line,#E7DDCD); overflow:hidden;
  transition:transform .35s cubic-bezier(.34,1.4,.5,1), border-color .3s, box-shadow .35s; }
.rp-q::after{ content:''; position:absolute; left:0; right:0; top:0; height:5px; background:var(--tc); }
.rp-q:hover{ transform:translateY(-5px); border-color:var(--tc); box-shadow:0 20px 34px -22px rgba(40,20,30,.45); }
.rp-q .ic{ width:46px; height:46px; border-radius:14px; background:var(--tb); color:var(--tc); padding:11px; }
.rp-q .ic svg{ width:100%; height:100%; display:block; }
.rp-q b{ font-family:'Fraunces',serif; font-weight:400; font-size:18px; line-height:1.2; }
.rp-q small{ font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
.rp-q .ext{ position:absolute; right:12px; top:14px; font-size:13px; color:var(--tc); }
@media (max-width:1100px){ .rp-quick{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:560px){ .rp-quick{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .rp-q{ padding:16px 14px; } }

/* ---- лентата „днес“ ---- */
.rp-today{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:22px; }
.rp-today > div{ display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); }
.rp-today .big{ flex:0 0 auto; width:62px; height:62px; border-radius:16px; display:grid; place-items:center; text-align:center; line-height:1;
  background:var(--brick); color:#fff; font-family:'Fraunces',serif; font-size:26px; }
.rp-today .big small{ display:block; font-family:'Manrope',sans-serif; font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.85; margin-top:3px; }
.rp-today .big.b2{ background:#4F72A8; }
.rp-today b{ display:block; font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px; }
.rp-today span{ font-size:15.5px; line-height:1.45; color:var(--ink); }
.rp-today a{ color:var(--brick); font-weight:700; }
@media (max-width:760px){ .rp-today{ grid-template-columns:1fr; } }

/* ---- разделите като папка с разделители ---- */
.rp-sec{ position:relative; margin-top:clamp(64px,8vw,100px); padding-top:40px; border-top:2px solid var(--tc); }
.rp-tab{ position:absolute; top:-2px; left:0; transform:translateY(-100%); display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px 8px; border-radius:12px 12px 0 0; background:var(--tc); color:#fff;
  font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.rp-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:26px; }
.rp-dl{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; text-decoration:none; font-family:'Manrope',sans-serif; font-weight:700; font-size:13px;
  color:var(--tc); background:var(--tb); transition:transform .2s; white-space:nowrap; }
.rp-dl:hover{ transform:translateY(-2px); }
.rp-dl svg{ width:16px; height:16px; }

/* ---- срещи с учители ---- */
.rp-filter{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:18px; }
.rp-chip{ border:1px solid var(--line,#E7DDCD); background:#fff; cursor:pointer; padding:9px 15px; border-radius:999px;
  font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:700; color:var(--ink); transition:background .2s, color .2s, border-color .2s; }
.rp-chip:hover{ border-color:var(--tc); }
.rp-chip.on{ background:var(--tc); border-color:var(--tc); color:#fff; }
.rp-chip .n{ opacity:.6; font-weight:600; margin-left:4px; }
.rp-find{ flex:1; min-width:200px; border:1px solid var(--line,#E7DDCD); border-radius:999px; padding:10px 16px; font:inherit; font-size:14px; outline:none; background:#fff; }
.rp-find:focus{ border-color:var(--tc); }
.rp-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.rp-t{ position:relative; padding:16px 18px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); transition:box-shadow .25s, transform .25s; }
.rp-t:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px var(--tc), 0 14px 26px -18px rgba(40,20,30,.4); }
.rp-t b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:18px; line-height:1.2; color:var(--ink); margin-bottom:10px; padding-right:48px; }
.rp-t .row{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13.5px; color:var(--ink-soft); }
.rp-t .row span{ display:inline-flex; align-items:center; gap:6px; }
.rp-t .row svg{ width:14px; height:14px; color:var(--tc); }
.rp-t .today{ position:absolute; right:12px; top:12px; font-family:'Manrope',sans-serif; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:#3E7A5A; padding:4px 8px; border-radius:6px; }
.rp-t.flash, .rp-item.flash{ animation:rpFlash 1.8s ease; }
@keyframes rpFlash{ 0%,40%{ box-shadow:0 0 0 3px #FFD95E, 0 0 0 9px rgba(255,217,94,.35); } 100%{ box-shadow:0 0 0 1px var(--line,#E7DDCD); } }
.rp-empty{ padding:24px; text-align:center; color:var(--ink-soft); font-size:15px; display:none; }

/* ---- родителски срещи: линия на годината ---- */
.rp-year{ margin-top:40px; }
.rp-year h3{ font-family:'Fraunces',serif; font-weight:400; font-size:24px; margin:0 0 20px; color:var(--ink); }
.rp-line{ position:relative; display:grid; gap:14px; padding-left:34px; }
.rp-line::before{ content:''; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:repeating-linear-gradient(180deg, var(--tc) 0 6px, transparent 6px 12px); opacity:.5; }
.rp-m{ position:relative; padding:14px 18px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); }
.rp-m::before{ content:''; position:absolute; left:-29px; top:18px; width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--tc); }
.rp-m.past{ opacity:.55; } .rp-m.past::before{ background:var(--tc); }
.rp-m.next{ box-shadow:0 0 0 2px var(--tc), 0 16px 30px -20px rgba(40,20,30,.45); }
.rp-m.next::before{ background:#FFD95E; border-color:var(--tc); box-shadow:0 0 0 5px rgba(255,217,94,.35); }
.rp-m .when{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:6px; }
.rp-m .when b{ font-family:'Fraunces',serif; font-weight:500; font-size:17px; color:var(--ink); }
.rp-m .when i{ font-style:normal; font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; letter-spacing:.08em; padding:3px 8px; border-radius:6px; background:var(--tb); color:var(--tc); }
.rp-m .when em{ font-style:normal; font-family:'Manrope',sans-serif; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--tc); padding:3px 8px; border-radius:6px; }
.rp-m p{ margin:0; font-size:15px; line-height:1.6; color:var(--ink-soft); }
.rp-note{ margin-top:18px; padding:14px 18px; border-radius:12px; background:var(--tb); font-size:14px; line-height:1.6; color:var(--ink); }

/* ---- втори час на класа: избор на клас ---- */
.rp-classes{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.rp-classes button{ min-width:62px; }
.rp-pick{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:center; padding:24px 26px; border-radius:18px; background:var(--tb); margin-bottom:22px; }
.rp-pick .cls{ width:96px; height:96px; border-radius:24px; background:var(--tc); color:#fff; display:grid; place-items:center; font-family:'Fraunces',serif; font-size:34px; line-height:1; text-align:center; }
.rp-pick .cls small{ display:block; font-family:'Manrope',sans-serif; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.8; margin-top:4px; }
.rp-pick b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:24px; color:var(--ink); margin-bottom:6px; }
.rp-pick span{ font-size:16px; color:var(--ink); }
.rp-pick.empty{ grid-template-columns:1fr; text-align:center; color:var(--ink-soft); }
.rp-info{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:22px; }
.rp-info div{ padding:16px 18px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); }
.rp-info b{ display:block; font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--tc); margin-bottom:6px; }
.rp-info span{ font-size:14px; line-height:1.6; color:var(--ink-soft); }
.rp-more{ margin-top:18px; }
.rp-more summary{ cursor:pointer; font-family:'Manrope',sans-serif; font-weight:700; font-size:14px; color:var(--tc); padding:8px 0; }
@media (max-width:760px){ .rp-info{ grid-template-columns:1fr; } .rp-pick{ grid-template-columns:1fr; justify-items:center; text-align:center; } }

/* ---- бланки ---- */
.rp-rule{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:18px 22px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); margin-bottom:18px; }
.rp-rule .d{ display:flex; align-items:baseline; gap:8px; }
.rp-rule .d b{ font-family:'Fraunces',serif; font-weight:500; font-size:34px; color:var(--tc); line-height:1; }
.rp-rule .d span{ font-size:14px; color:var(--ink); line-height:1.3; }
.rp-rule .sep{ width:1px; align-self:stretch; background:var(--line,#E7DDCD); }
.rp-rule p{ margin:0; flex:1; min-width:200px; font-size:14px; color:var(--ink-soft); line-height:1.55; }
.rp-forms{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.rp-form{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; padding:20px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); transition:box-shadow .25s, transform .25s; }
.rp-form:hover{ transform:translateY(-3px); box-shadow:0 0 0 1px var(--tc), 0 18px 30px -22px rgba(40,20,30,.45); }
.rp-sheet{ position:relative; width:52px; height:64px; border-radius:6px; background:var(--tb); }
.rp-sheet::before{ content:''; position:absolute; right:0; top:0; width:16px; height:16px; background:linear-gradient(225deg, var(--cream,#F7F1E8) 50%, rgba(0,0,0,.12) 50%); border-radius:0 6px 0 4px; }
.rp-sheet i{ position:absolute; left:10px; right:12px; height:3px; border-radius:2px; background:var(--tc); opacity:.35; }
.rp-sheet i:nth-child(1){ top:22px; } .rp-sheet i:nth-child(2){ top:30px; } .rp-sheet i:nth-child(3){ top:38px; right:22px; }
.rp-sheet em{ position:absolute; left:-6px; bottom:6px; font-style:normal; font-family:'Manrope',sans-serif; font-size:9px; font-weight:800; letter-spacing:.06em; padding:2px 6px; border-radius:4px; background:var(--tc); color:#fff; }
.rp-form b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:18px; line-height:1.25; color:var(--ink); margin-bottom:6px; }
.rp-form p{ margin:0 0 12px; font-size:14px; line-height:1.55; color:var(--ink-soft); }
@media (max-width:760px){ .rp-forms{ grid-template-columns:1fr; } .rp-rule .sep{ display:none; } }

/* ---- униформи ---- */
.rp-uni{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
.rp-shop{ padding:24px; border-radius:18px; background:var(--tb); }
.rp-shop b.name{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:26px; color:var(--ink); margin-bottom:4px; }
.rp-shop p{ margin:0 0 6px; font-size:15px; line-height:1.55; color:var(--ink); }
.rp-shop a.tel{ display:inline-flex; margin-top:12px; padding:10px 18px; border-radius:999px; background:var(--tc); color:#fff; text-decoration:none; font-family:'Manrope',sans-serif; font-weight:800; font-size:14px; }
.rp-periods{ display:grid; gap:10px; }
.rp-period{ display:flex; gap:14px; align-items:center; padding:14px 16px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); }
.rp-period b{ display:block; font-size:14.5px; color:var(--ink); }
.rp-period span{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
.rp-period svg{ flex:0 0 auto; width:22px; height:22px; color:var(--tc); }
.rp-prices{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; align-items:center; }
.rp-price{ position:relative; padding:10px 16px 10px 28px; background:#fff; border-radius:6px 12px 12px 6px; box-shadow:0 0 0 1px var(--line,#E7DDCD); font-size:14px; color:var(--ink); }
.rp-price::before{ content:''; position:absolute; left:10px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--cream,#F7F1E8); box-shadow:inset 0 0 0 2px var(--tc); }
.rp-price b{ font-family:'Fraunces',serif; font-weight:500; color:var(--tc); margin-left:4px; }
.rp-pdf{ border:0; cursor:pointer; }
@media (max-width:760px){ .rp-uni{ grid-template-columns:1fr; } }

/* ---- учебници и е-дневник ---- */
.rp-duo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.rp-links{ display:grid; gap:10px; }
.rp-links a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-radius:14px; background:#fff; text-decoration:none; color:var(--ink);
  box-shadow:0 0 0 1px var(--line,#E7DDCD); font-size:15.5px; transition:transform .2s, box-shadow .2s; }
.rp-links a:hover{ transform:translateX(4px); box-shadow:0 0 0 1px var(--tc); }
.rp-links a.main{ background:var(--tc); color:#fff; box-shadow:none; font-weight:700; }
.rp-links a span{ color:var(--tc); } .rp-links a.main span{ color:#fff; }
.rp-soon{ padding:22px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); font-size:15px; line-height:1.65; color:var(--ink-soft); }
.rp-soon b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:20px; color:var(--ink); margin-bottom:6px; }
@media (max-width:760px){ .rp-duo{ grid-template-columns:1fr; } }

/* ===========================================================================
   63. ПРИЕМ — ПЪТЯТ ДО ПЪРВИЯ ЗВЪНЕЦ (priem.html)
   Стъпките на приема са квадратчета от дама, нарисувани с тебешир; до тях —
   калкулатор „кога тръгва детето“, списък с документи за отмятане, район и
   свободни места. Фактите са по Наредбата на Община Пловдив. Представка pq-.
=========================================================================== */
[data-theme="priem"] .pq-sec{ scroll-margin-top:96px; }
.pq-h{ font-family:'Fraunces',serif; font-weight:400; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--ink); margin:6px 0 0; }
.pq-lead{ margin:8px 0 0; font-size:16px; line-height:1.65; color:var(--ink-soft); max-width:64ch; }
.pq-sec{ margin-top:clamp(60px,8vw,96px); }

/* ---- превключвател 1. / 5. клас ---- */
.pq-switch{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.pq-switch a{ display:flex; align-items:center; gap:14px; padding:14px 22px 14px 14px; border-radius:18px; text-decoration:none; color:var(--ink);
  background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); transition:transform .3s cubic-bezier(.34,1.4,.5,1), box-shadow .3s; }
.pq-switch a:hover{ transform:translateY(-4px); box-shadow:0 0 0 2px var(--brick), 0 16px 30px -20px rgba(80,50,10,.45); }
.pq-switch .n{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:var(--brick); color:#fff; font-family:'Fraunces',serif; font-size:26px; }
.pq-switch .n.alt{ background:#4F72A8; } .pq-switch .n.z{ background:#3E7A5A; }
.pq-switch b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:19px; }
.pq-switch small{ font-size:12.5px; color:var(--ink-soft); }

/* ---- калкулаторът на годините ---- */
.pq-age{ margin-top:30px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(18px,3vw,36px); align-items:center;
  padding:clamp(22px,3vw,32px); border-radius:22px; background:var(--brick-bg); }
.pq-age label{ display:block; font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--brick-deep); margin-bottom:8px; }
.pq-age select{ font-family:'Fraunces',serif; font-size:30px; padding:8px 44px 8px 18px; border-radius:14px; border:2px solid var(--brick); background:#fff; color:var(--ink); cursor:pointer;
  appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--brick) 50%), linear-gradient(135deg, var(--brick) 50%, transparent 50%);
  background-position:calc(100% - 22px) 55%, calc(100% - 15px) 55%; background-size:7px 7px; background-repeat:no-repeat; }
.pq-age-out b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:clamp(20px,2.4vw,26px); line-height:1.3; color:var(--ink); margin-bottom:6px; }
.pq-age-out span{ font-size:15px; line-height:1.6; color:var(--ink-soft); }
.pq-age-out mark{ background:#fff; color:var(--brick-deep); padding:1px 8px; border-radius:6px; font-weight:700; }
@media (max-width:640px){ .pq-age{ grid-template-columns:1fr; } }

/* ---- дамата ---- */
.pq-court{ position:relative; margin-top:28px; padding:clamp(28px,4vw,48px) clamp(16px,3vw,36px); border-radius:22px;
  background-color:#5E6064;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px), radial-gradient(rgba(0,0,0,.18) 1px, transparent 1.6px);
  background-size:7px 7px, 11px 11px; background-position:0 0, 3px 5px;
  box-shadow:inset 0 0 60px rgba(0,0,0,.35), 0 26px 50px -30px rgba(30,30,30,.7); }
.pq-hop{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; max-width:880px; margin:0 auto; counter-reset:hop; }
.pq-sq{ position:relative; border:3px solid rgba(255,255,255,.82); border-radius:6px 10px 7px 12px; padding:22px 22px 20px 70px; color:#fff; min-height:150px;
  background:rgba(255,255,255,.03); cursor:pointer; text-align:left; font:inherit; transition:background .3s, transform .35s cubic-bezier(.34,1.4,.5,1);
  filter:drop-shadow(0 0 1px rgba(255,255,255,.3)); }
.pq-sq:nth-child(odd){ transform:rotate(-.6deg); } .pq-sq:nth-child(even){ transform:rotate(.7deg); }
.pq-sq.wide{ grid-column:1 / -1; }
.pq-sq:hover{ background:rgba(255,255,255,.08); }
.pq-sq.on{ background:rgba(255,217,94,.14); border-color:#FFD95E; }
.pq-sq .num{ position:absolute; left:16px; top:14px; font-family:'Marck Script',cursive; font-size:48px; line-height:1; color:var(--c,#FFD95E); }
.pq-sq b{ display:block; font-family:'Marck Script',cursive; font-weight:400; font-size:clamp(26px,2.8vw,32px); line-height:1.05; margin-bottom:8px; color:#fff; }
.pq-sq p{ margin:0; font-size:15px; line-height:1.6; color:rgba(255,255,255,.86); }
.pq-sq ul{ margin:10px 0 0; padding-left:18px; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.86); }
.pq-sq .more{ display:block; max-height:0; overflow:hidden; transition:max-height .5s ease; }
.pq-sq.on .more{ max-height:420px; }
.pq-sq .tap{ display:inline-block; margin-top:10px; font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#FFD95E; }
.pq-sq.on .tap{ display:none; }
.pq-stone{ position:absolute; width:26px; height:20px; border-radius:48% 52% 45% 55%; background:radial-gradient(circle at 35% 30%, #F4B45F, #B4741A 60%, #6E4308);
  box-shadow:0 6px 8px -2px rgba(0,0,0,.6); transition:left .7s cubic-bezier(.34,1.4,.5,1), top .7s cubic-bezier(.34,1.4,.5,1); pointer-events:none; z-index:3; left:-40px; top:-40px; }
.pq-bell{ grid-column:1 / -1; justify-self:center; text-align:center; padding:18px 30px; border:3px dashed rgba(255,217,94,.8); border-radius:50%/40%; color:#FFD95E; }
.pq-bell b{ display:block; font-family:'Marck Script',cursive; font-weight:400; font-size:clamp(30px,3.4vw,40px); line-height:1; }
.pq-bell span{ font-size:14px; color:rgba(255,255,255,.8); }
.pq-court-note{ text-align:center; margin:22px 0 0; font-family:'Marck Script',cursive; font-size:22px; color:rgba(255,255,255,.75); }
@media (max-width:700px){ .pq-hop{ grid-template-columns:1fr; } .pq-sq{ padding-left:62px; min-height:0; } }

/* ---- документите ---- */
.pq-docs{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:22px; align-items:start; margin-top:26px; }
.pq-list{ background:#fff; border-radius:20px; padding:10px 8px; box-shadow:0 0 0 1px var(--line,#E7DDCD); }
.pq-chk{ display:flex; gap:16px; align-items:flex-start; padding:16px 18px; border-radius:14px; cursor:pointer; transition:background .2s; }
.pq-chk:hover{ background:var(--brick-bg); }
.pq-chk input{ position:absolute; opacity:0; pointer-events:none; }
.pq-box{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; border:2px solid var(--brick); display:grid; place-items:center; transition:background .2s; margin-top:2px; }
.pq-box svg{ width:18px; height:18px; color:#fff; opacity:0; transform:scale(.4); transition:opacity .2s, transform .3s cubic-bezier(.34,1.6,.5,1); }
.pq-chk input:checked + .pq-box{ background:var(--brick); }
.pq-chk input:checked + .pq-box svg{ opacity:1; transform:none; }
.pq-chk input:focus-visible + .pq-box{ box-shadow:0 0 0 3px rgba(180,116,26,.35); }
.pq-chk b{ display:block; font-size:16px; color:var(--ink); line-height:1.35; }
.pq-chk small{ display:block; margin-top:3px; font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
.pq-chk input:checked ~ span b{ text-decoration:line-through; text-decoration-color:var(--brick); opacity:.6; }
.pq-prog{ position:sticky; top:100px; padding:24px; border-radius:20px; background:var(--brick-bg); text-align:center; }
.pq-ring{ width:140px; height:140px; margin:0 auto 12px; position:relative; }
.pq-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.pq-ring circle{ fill:none; stroke-width:12; }
.pq-ring .bg{ stroke:rgba(180,116,26,.18); } .pq-ring .fg{ stroke:var(--brick); stroke-linecap:round; transition:stroke-dashoffset .6s cubic-bezier(.34,1.2,.5,1); }
.pq-ring span{ position:absolute; inset:0; display:grid; place-items:center; font-family:'Fraunces',serif; font-size:34px; color:var(--brick-deep); }
.pq-prog b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:20px; color:var(--ink); margin-bottom:6px; }
.pq-prog p{ margin:0 0 14px; font-size:14px; line-height:1.55; color:var(--ink-soft); }
.pq-prog button{ border:0; background:none; color:var(--brick-deep); font:inherit; font-size:13px; font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:760px){ .pq-docs{ grid-template-columns:1fr; } .pq-prog{ position:static; } }

/* ---- карти: район, наредба, разширена подготовка ---- */
.pq-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:26px; }
.pq-card{ padding:22px; border-radius:18px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); display:flex; flex-direction:column; gap:10px; }
.pq-card .ic{ width:48px; height:48px; border-radius:14px; background:var(--brick-bg); color:var(--brick); padding:11px; }
.pq-card .ic svg{ width:100%; height:100%; display:block; }
.pq-card b{ font-family:'Fraunces',serif; font-weight:400; font-size:20px; line-height:1.2; color:var(--ink); }
.pq-card p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-soft); flex:1; }
.pq-btn{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; border:0; cursor:pointer; text-decoration:none;
  background:var(--brick); color:#fff; font-family:'Manrope',sans-serif; font-weight:800; font-size:13px; transition:background .2s, transform .2s; }
.pq-btn:hover{ background:var(--brick-deep); transform:translateY(-2px); }
.pq-btn svg{ width:15px; height:15px; }
.pq-duo{ display:flex; gap:8px; flex-wrap:wrap; }
.pq-duo span{ padding:8px 12px; border-radius:10px; background:var(--brick-bg); font-size:13.5px; font-weight:600; color:var(--brick-deep); }
@media (max-width:900px){ .pq-cards{ grid-template-columns:1fr; } }

/* ---- 5. клас и свободни места ---- */
.pq-pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.pq-five{ padding:26px; border-radius:20px; background:#E1E9F5; }
.pq-five b.t{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:24px; color:var(--ink); margin-bottom:8px; }
.pq-five p{ margin:0 0 14px; font-size:15px; line-height:1.65; color:var(--ink); }
.pq-five a{ color:#2C4570; font-weight:700; }
.pq-seats{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:center; padding:26px; border-radius:20px; background:#E3EED8; }
.pq-seats .big{ font-family:'Fraunces',serif; font-size:84px; line-height:.9; color:#2E4F18; }
.pq-seats b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:22px; color:var(--ink); margin-bottom:6px; }
.pq-seats p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
@media (max-width:760px){ .pq-pair{ grid-template-columns:1fr; } }

/* ===========================================================================
   64. УЧЕБЕН ПРОЦЕС — УЧИЛИЩНИЯТ ЧАСОВНИК И ГОДИНАТА (ucheben-proces.html)
   „Сега в училище“ с жив часовник и звънец, линийка на деня, годината в
   малки календарчета с ваканциите (по заповедта на МОН), обратно броене,
   контролни, консултации, екскурзии и НВО. Представка uc-.
=========================================================================== */
[data-theme="uchproc"] .uc-sec{ scroll-margin-top:96px; }
.uc-sec{ margin-top:clamp(60px,8vw,96px); }
.uc-h{ font-family:'Fraunces',serif; font-weight:400; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--ink); margin:6px 0 0; }
.uc-lead{ margin:8px 0 22px; font-size:16px; line-height:1.65; color:var(--ink-soft); max-width:64ch; }
.uc-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap; }
.uc-dl{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; text-decoration:none; font-family:'Manrope',sans-serif; font-weight:700; font-size:13px; color:var(--brick-deep); background:var(--brick-bg); white-space:nowrap; transition:transform .2s; }
.uc-dl:hover{ transform:translateY(-2px); } .uc-dl svg{ width:16px; height:16px; }

/* ---- избор на клас ---- */
.uc-stage{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin-bottom:18px; }
.uc-stage span{ font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-right:6px; }
.uc-stage button{ border:1px solid var(--line,#E7DDCD); background:#fff; cursor:pointer; padding:9px 16px; border-radius:999px; font-family:'Manrope',sans-serif; font-weight:700; font-size:14px; color:var(--ink); transition:all .2s; }
.uc-stage button.on{ background:var(--brick); border-color:var(--brick); color:#fff; }

/* ---- сега в училище ---- */
.uc-now{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:clamp(18px,3vw,36px); align-items:center;
  padding:clamp(22px,3vw,34px); border-radius:26px; background:linear-gradient(135deg, #1F4D46, #2F6F66); color:#fff; box-shadow:0 30px 60px -34px rgba(20,60,55,.8); }
.uc-clock{ position:relative; width:clamp(120px,14vw,150px); aspect-ratio:1; border-radius:50%; background:#FBF8F1; box-shadow:0 0 0 6px rgba(255,255,255,.18), inset 0 0 0 2px #1F4D46; }
.uc-clock i{ position:absolute; left:50%; bottom:50%; transform-origin:50% 100%; border-radius:3px; background:#1F2E2B; }
.uc-clock .hh{ width:6px; height:28%; margin-left:-3px; } .uc-clock .mm{ width:4px; height:38%; margin-left:-2px; } .uc-clock .ss{ width:2px; height:42%; margin-left:-1px; background:#D2553F; }
.uc-clock b{ position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:#D2553F; }
.uc-clock em{ position:absolute; left:50%; top:6px; width:2px; height:8px; margin-left:-1px; background:#1F4D46; transform-origin:50% calc(clamp(120px,14vw,150px)/2 - 6px); }
.uc-state small{ display:block; font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; opacity:.75; margin-bottom:6px; }
.uc-state b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:clamp(26px,3.2vw,40px); line-height:1.1; margin-bottom:8px; }
.uc-state span{ font-size:15.5px; opacity:.9; line-height:1.5; }
.uc-bar{ height:8px; border-radius:4px; background:rgba(255,255,255,.18); margin-top:14px; overflow:hidden; }
.uc-bar i{ display:block; height:100%; width:0; border-radius:4px; background:#FFD95E; transition:width 1s linear; }
.uc-bell{ text-align:center; min-width:130px; }
.uc-bell svg{ width:46px; height:46px; color:#FFD95E; }
.uc-bell.ring svg{ animation:ucRing 1s ease-in-out infinite; transform-origin:50% 10%; }
@keyframes ucRing{ 0%,100%{ transform:rotate(0); } 20%{ transform:rotate(14deg); } 40%{ transform:rotate(-12deg); } 60%{ transform:rotate(8deg); } 80%{ transform:rotate(-4deg); } }
.uc-bell b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:30px; line-height:1; margin-top:6px; font-variant-numeric:tabular-nums; }
.uc-bell span{ font-size:12px; opacity:.8; }
@media (max-width:760px){ .uc-now{ grid-template-columns:1fr; justify-items:center; text-align:center; } }

/* ---- линийката на деня ---- */
.uc-ruler{ position:relative; margin-top:22px; padding:16px 16px 34px; border-radius:18px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); overflow-x:auto; }
.uc-track{ position:relative; height:64px; min-width:760px; }
.uc-blk{ position:absolute; top:0; height:44px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:'Manrope',sans-serif; font-size:12px; font-weight:800; color:#fff; overflow:hidden; white-space:nowrap; cursor:default; }
.uc-blk.l{ background:#2F6F66; } .uc-blk.o{ background:#6E9C5C; } .uc-blk.s{ background:#4F72A8; } .uc-blk.i{ background:#B5673C; }
.uc-blk.now{ box-shadow:0 0 0 3px #FFD95E; z-index:2; }
.uc-tick{ position:absolute; top:50px; font-family:'Manrope',sans-serif; font-size:11px; color:var(--ink-soft); transform:translateX(-50%); }
.uc-tick::before{ content:''; position:absolute; left:50%; top:-6px; width:1px; height:5px; background:var(--ink-soft); }
.uc-needle{ position:absolute; top:-8px; bottom:6px; width:2px; background:#D2553F; z-index:3; display:none; }
.uc-needle::before{ content:''; position:absolute; top:-5px; left:-5px; width:12px; height:12px; border-radius:50%; background:#D2553F; }
.uc-legend{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-size:13px; color:var(--ink-soft); }
.uc-legend i{ display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.uc-hours{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; margin-top:16px; }
.uc-hours div{ padding:10px 12px; border-radius:10px; background:var(--brick-bg); font-size:13.5px; color:var(--ink); }
.uc-hours div b{ font-family:'Fraunces',serif; font-weight:500; margin-right:6px; color:var(--brick-deep); }
.uc-hours div.brk{ background:#FFF1BF; }
.uc-hours div.now{ box-shadow:0 0 0 2px var(--brick); }

/* ---- обратно броене ---- */
.uc-count{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:22px; }
.uc-count div{ padding:16px 18px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); }
.uc-count b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:38px; line-height:1; color:var(--c,#2F6F66); }
.uc-count b small{ font-size:15px; margin-left:4px; color:var(--ink-soft); }
.uc-count span{ display:block; margin-top:6px; font-size:13.5px; line-height:1.4; color:var(--ink-soft); }
@media (max-width:900px){ .uc-count{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---- годината ---- */
.uc-year{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.uc-mon{ padding:14px 14px 12px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); }
.uc-mon.cur{ box-shadow:0 0 0 2px var(--brick); }
.uc-mon h4{ margin:0 0 8px; display:flex; justify-content:space-between; font-family:'Fraunces',serif; font-weight:400; font-size:18px; color:var(--ink); }
.uc-mon h4 small{ font-family:'Manrope',sans-serif; font-size:11px; color:var(--ink-soft); font-weight:700; }
.uc-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; }
.uc-days span{ font-size:11.5px; line-height:24px; border-radius:6px; color:var(--ink); position:relative; font-variant-numeric:tabular-nums; }
.uc-days .wd{ font-family:'Manrope',sans-serif; font-size:9.5px; font-weight:800; color:var(--ink-soft); line-height:18px; }
.uc-days .we{ color:#B3A89E; }
.uc-days .vac{ background:#FFE8A8; color:#6E5200; }
.uc-days .off{ background:#F6D3DF; color:#732440; }
.uc-days .hol{ background:#F4C2B8; color:#7A2626; }
.uc-days .exam{ background:#D5E0F4; color:#2C4570; }
.uc-days .ev::after{ content:''; position:absolute; left:50%; bottom:1px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:#2F6F66; }
.uc-days .today{ box-shadow:inset 0 0 0 2px #D2553F; font-weight:800; }
.uc-days .out{ opacity:.35; }
.uc-days span[title]{ cursor:help; }
.uc-evs{ margin:10px 0 0; padding:0; list-style:none; font-size:12.5px; line-height:1.45; color:var(--ink-soft); }
.uc-evs li{ padding:4px 0 4px 12px; border-top:1px dashed var(--line,#E7DDCD); position:relative; }
.uc-evs li::before{ content:''; position:absolute; left:0; top:10px; width:5px; height:5px; border-radius:50%; background:var(--brick); }
.uc-key{ display:flex; flex-wrap:wrap; gap:14px; margin:0 0 16px; font-size:13px; color:var(--ink-soft); }
.uc-key i{ display:inline-block; width:14px; height:14px; border-radius:4px; margin-right:6px; vertical-align:-2px; }

/* ---- документи ---- */
.uc-docs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.uc-doc{ display:flex; flex-direction:column; gap:8px; padding:20px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); text-decoration:none; color:var(--ink); transition:transform .25s, box-shadow .25s; }
.uc-doc:hover{ transform:translateY(-3px); box-shadow:0 0 0 1px var(--brick), 0 18px 30px -22px rgba(20,60,55,.5); }
.uc-doc .ic{ width:44px; height:44px; border-radius:12px; background:var(--brick-bg); color:var(--brick); padding:10px; }
.uc-doc .ic svg{ width:100%; height:100%; display:block; }
.uc-doc b{ font-family:'Fraunces',serif; font-weight:400; font-size:19px; line-height:1.2; }
.uc-doc p{ margin:0; font-size:14px; line-height:1.55; color:var(--ink-soft); flex:1; }
.uc-doc em{ font-style:normal; font-family:'Manrope',sans-serif; font-size:12px; font-weight:800; color:var(--brick); }
.uc-offdays{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.uc-offdays span{ padding:9px 14px; border-radius:12px; background:#F6D3DF; font-size:13.5px; color:#732440; }
.uc-offdays b{ font-weight:800; margin-right:6px; }
.uc-soon{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.uc-soon span, .uc-soon a{ padding:10px 14px; border-radius:12px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); font-size:14px; color:var(--ink); text-decoration:none; }
.uc-soon span small{ color:var(--ink-soft); margin-left:6px; }
.uc-soon a{ box-shadow:0 0 0 2px var(--brick); font-weight:700; }

/* ---- контролни ---- */
.uc-tests{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.uc-test{ position:relative; padding:20px 20px 18px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); }
.uc-test .m{ display:inline-block; font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; border-radius:8px; background:var(--brick-bg); color:var(--brick-deep); margin-bottom:10px; }
.uc-test.cur{ box-shadow:0 0 0 2px var(--brick); } .uc-test.cur .m{ background:var(--brick); color:#fff; }
.uc-test.past{ opacity:.55; }
.uc-test b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:19px; margin-bottom:6px; }
.uc-test p{ margin:0 0 12px; font-size:14px; line-height:1.55; color:var(--ink-soft); }
@media (max-width:900px){ .uc-tests{ grid-template-columns:1fr; } }

/* ---- екскурзии ---- */
.uc-trips{ display:grid; gap:12px; }
.uc-trips .ek-red{ display:grid; grid-template-columns:auto minmax(0,1fr); background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 0 0 1px var(--line,#E7DDCD); }
.uc-trips .ek-red[hidden]{ display:none; }
.uc-trips .ek-red .t{ display:flex; align-items:center; padding:18px 22px; background:var(--brick); color:#fff; font-family:'Fraunces',serif; font-size:18px; border-right:2px dashed rgba(255,255,255,.6); }
.uc-trips .ek-red .d{ padding:18px 22px; font-size:15px; line-height:1.55; color:var(--ink); }
.uc-trips .ek-prazno{ margin:0; padding:26px; border-radius:16px; text-align:center; background:var(--brick-bg); font-size:15.5px; line-height:1.6; color:var(--ink); }
.uc-trips .ek-bel{ margin:4px 0 0; font-size:13.5px; color:var(--ink-soft); display:flex; gap:10px; align-items:flex-start; }
.uc-trips .ek-bel::before{ content:'🔒'; }
@media (max-width:560px){ .uc-trips .ek-red{ grid-template-columns:1fr; } .uc-trips .ek-red .t{ border-right:0; border-bottom:2px dashed rgba(255,255,255,.6); } }

/* ---- НВО ---- */
.uc-nvo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.uc-nv{ padding:26px; border-radius:22px; background:var(--c-bg); }
.uc-nv .top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px; }
.uc-nv .top b{ font-family:'Fraunces',serif; font-weight:400; font-size:28px; color:var(--ink); }
.uc-nv .left{ text-align:right; }
.uc-nv .left strong{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:44px; line-height:1; color:var(--c); }
.uc-nv .left span{ font-size:12px; color:var(--ink-soft); }
.uc-ex{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:12px; background:#fff; margin-top:8px; }
.uc-ex .d{ width:54px; text-align:center; font-family:'Fraunces',serif; font-size:24px; line-height:1; color:var(--c); }
.uc-ex .d small{ display:block; font-family:'Manrope',sans-serif; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.uc-ex b{ font-size:15px; color:var(--ink); } .uc-ex span{ display:block; font-size:12.5px; color:var(--ink-soft); }
@media (max-width:760px){ .uc-nvo{ grid-template-columns:1fr; } }

/* ===========================================================================
   65. ДОКУМЕНТИ — КАРТОТЕКАТА (dokumenti.html)
   Дървен шкаф с чекмеджета за всяка категория, търсачка във всички
   документи, учебните планове като таблица с класове и бюджетът по години и
   тримесечия. Преглед на PDF в прозореца на сайта. Представка dk-.
=========================================================================== */
[data-theme="info"] .dk-cat{ scroll-margin-top:96px; }
.dk-h{ font-family:'Fraunces',serif; font-weight:400; font-size:clamp(24px,2.8vw,32px); line-height:1.15; color:var(--ink); margin:0; }

/* ---- търсачка ---- */
.dk-search{ display:flex; align-items:center; gap:12px; max-width:780px; margin:0 auto; background:#fff; border-radius:18px; padding:8px 8px 8px 22px;
  box-shadow:0 0 0 1px var(--line,#E7DDCD), 0 20px 40px -26px rgba(50,65,82,.55); }
.dk-search:focus-within{ box-shadow:0 0 0 2px var(--brick), 0 20px 40px -26px rgba(50,65,82,.6); }
.dk-search svg{ width:22px; height:22px; color:var(--brick); flex:0 0 auto; }
.dk-search input{ flex:1; min-width:0; border:0; outline:none; background:transparent; padding:14px 0; font-family:'Fraunces',serif; font-size:clamp(17px,1.9vw,21px); color:var(--ink); }
.dk-count{ font-family:'Manrope',sans-serif; font-size:12px; font-weight:800; color:var(--brick-deep); background:var(--brick-bg); padding:8px 12px; border-radius:10px; white-space:nowrap; }

/* ---- шкафът ---- */
.dk-cabinet{ margin:34px auto 0; max-width:1080px; padding:18px; border-radius:18px;
  background:linear-gradient(180deg, #8C6440, #6E4C2E); box-shadow:inset 0 2px 0 rgba(255,255,255,.18), 0 30px 60px -34px rgba(40,25,10,.8); }
.dk-cabinet::before{ content:''; display:block; height:10px; margin:-18px -18px 14px; border-radius:18px 18px 0 0; background:#5A3C22; }
.dk-plates{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.dk-col b.plate{ display:block; margin:0 0 10px; text-align:center; font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:#F3E2C4; opacity:.85; }
.dk-drawers{ display:grid; gap:10px; }
.dk-drawer{ position:relative; display:flex; align-items:center; gap:12px; width:100%; border:0; cursor:pointer; text-align:left; font:inherit;
  padding:14px 14px 14px 16px; border-radius:8px; background:linear-gradient(180deg, #B08256, #9A6E45); color:#2A1A0C;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.18), 0 4px 0 #4E331C;
  transition:transform .35s cubic-bezier(.34,1.4,.5,1), box-shadow .3s; }
.dk-drawer:hover{ transform:translateY(-2px) scale(1.015); }
.dk-drawer.on{ transform:translateY(6px) scale(1.03); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 22px -10px rgba(0,0,0,.55), 0 0 0 3px #FFD95E; z-index:2; }
.dk-card-holder{ flex:1; min-width:0; background:#FBF4E4; border-radius:3px; padding:6px 10px; box-shadow:inset 0 0 0 2px #C9A46A, 0 1px 0 rgba(0,0,0,.2); }
.dk-card-holder b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:15.5px; line-height:1.2; color:#2A1A0C; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dk-card-holder small{ font-family:'Manrope',sans-serif; font-size:11px; font-weight:700; color:#7A5A32; }
.dk-handle{ flex:0 0 auto; width:34px; height:14px; border-radius:7px; background:radial-gradient(circle at 50% 30%, #F3D58C, #B98A2E 70%); box-shadow:0 2px 0 rgba(0,0,0,.35); }
.dk-all{ display:flex; justify-content:center; margin-top:14px; }
.dk-all button{ border:0; cursor:pointer; padding:10px 20px; border-radius:999px; background:#FBF4E4; color:#4E331C; font-family:'Manrope',sans-serif; font-weight:800; font-size:13px; }
.dk-all button.on{ background:#FFD95E; }
@media (max-width:900px){ .dk-plates{ grid-template-columns:1fr; } }

/* ---- категориите ---- */
.dk-cat{ margin-top:clamp(48px,6vw,72px); }
.dk-cat[hidden]{ display:none; }
.dk-cat-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.dk-cat-head .n{ font-family:'Manrope',sans-serif; font-size:12px; font-weight:800; color:var(--brick-deep); background:var(--brick-bg); padding:5px 10px; border-radius:8px; }
.dk-list{ display:grid; gap:10px; }
.dk-doc{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center; padding:14px 16px; border-radius:14px; background:#fff;
  box-shadow:0 0 0 1px var(--line,#E7DDCD); transition:box-shadow .2s, transform .2s; }
.dk-doc:hover{ box-shadow:0 0 0 1px var(--brick), 0 14px 26px -20px rgba(50,65,82,.5); transform:translateX(3px); }
.dk-doc[hidden]{ display:none; }
.dk-type{ width:44px; height:52px; border-radius:5px; position:relative; display:grid; place-items:end center; padding-bottom:7px;
  font-family:'Manrope',sans-serif; font-size:9.5px; font-weight:800; letter-spacing:.06em; color:#fff; background:#C0503C; }
.dk-type::before{ content:''; position:absolute; right:0; top:0; width:13px; height:13px; background:linear-gradient(225deg, var(--cream,#F7F1E8) 50%, rgba(0,0,0,.2) 50%); border-radius:0 5px 0 3px; }
.dk-type.docx{ background:#3E6FB0; }
.dk-doc b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:17px; line-height:1.3; color:var(--ink); }
.dk-doc p{ margin:3px 0 0; font-size:13.5px; line-height:1.5; color:var(--ink-soft); }
.dk-doc mark{ background:#FFE58A; color:inherit; border-radius:3px; padding:0 1px; }
.dk-acts{ display:flex; gap:6px; }
.dk-acts button, .dk-acts a{ display:inline-flex; align-items:center; gap:6px; border:0; cursor:pointer; padding:9px 13px; border-radius:10px; text-decoration:none;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5px; background:var(--brick-bg); color:var(--brick-deep); transition:background .2s; white-space:nowrap; }
.dk-acts button:hover, .dk-acts a:hover{ background:var(--brick); color:#fff; }
.dk-acts svg{ width:14px; height:14px; }
.dk-soon{ font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); background:#EFEAE2; padding:8px 12px; border-radius:10px; }
@media (max-width:640px){ .dk-doc{ grid-template-columns:auto minmax(0,1fr); } .dk-acts{ grid-column:1 / -1; } }

/* ---- учебни планове ---- */
.dk-uup{ display:grid; gap:10px; }
.dk-grade{ display:grid; grid-template-columns:90px repeat(4,minmax(0,1fr)); gap:8px; align-items:center; }
.dk-grade > b{ font-family:'Fraunces',serif; font-weight:400; font-size:20px; color:var(--ink); }
.dk-grade button{ border:0; cursor:pointer; padding:16px 8px; border-radius:12px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD);
  font-family:'Fraunces',serif; font-size:22px; color:var(--brick-deep); transition:transform .25s cubic-bezier(.34,1.4,.5,1), background .2s, color .2s; }
.dk-grade button small{ display:block; font-family:'Manrope',sans-serif; font-size:10px; font-weight:800; letter-spacing:.1em; color:var(--ink-soft); margin-top:2px; }
.dk-grade button:hover{ transform:translateY(-3px); background:var(--brick); color:#fff; }
.dk-grade button:hover small{ color:rgba(255,255,255,.8); }
.dk-grade button[hidden]{ display:none; }
@media (max-width:560px){ .dk-grade{ grid-template-columns:60px repeat(4,minmax(0,1fr)); } .dk-grade button{ padding:12px 4px; font-size:18px; } }

/* ---- бюджет ---- */
.dk-years{ display:grid; gap:12px; }
.dk-year{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:14px; align-items:center; padding:16px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); }
.dk-year > b{ font-family:'Fraunces',serif; font-weight:400; font-size:30px; color:var(--brick-deep); }
.dk-qs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.dk-q{ border:0; cursor:pointer; padding:14px 10px; border-radius:12px; background:var(--brick-bg); color:var(--brick-deep); font-family:'Manrope',sans-serif; font-weight:800; font-size:14px; transition:background .2s, color .2s; }
.dk-q small{ display:block; font-weight:600; font-size:11px; opacity:.75; margin-top:2px; }
.dk-q:hover{ background:var(--brick); color:#fff; }
.dk-q.empty{ background:transparent; box-shadow:inset 0 0 0 1px dashed; color:var(--ink-soft); cursor:default; border:1px dashed var(--line,#E7DDCD); }
@media (max-width:560px){ .dk-year{ grid-template-columns:1fr; } .dk-qs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.dk-person{ margin-top:12px; padding:16px 18px; border-radius:14px; background:var(--brick-bg); font-size:14.5px; line-height:1.6; color:var(--ink); }
.dk-person a{ color:var(--brick-deep); font-weight:700; }
.dk-none{ display:none; text-align:center; padding:30px; font-size:15px; color:var(--ink-soft); }
.dk-grade[hidden], .dk-year[hidden]{ display:none; }

/* ===========================================================================
   66. ЕКИП — УЧИЛИЩНИЯТ АЛБУМ (ekip.html)
   Портрети като снимки от албум (с инициали, докато няма снимки), търсачка
   и филтри по групи, „Кой учи моето дете?“ за началния етап и предметите в
   прогимназията като цветни ленти. Представка ek-.
=========================================================================== */
.ek-h{ font-family:'Fraunces',serif; font-weight:400; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--ink); margin:6px 0 18px; }
.ek-sec{ margin-top:clamp(56px,7vw,86px); scroll-margin-top:96px; }
.ek-sec[hidden], .ek-card[hidden], .ek-subj[hidden], .ek-class[hidden], .ek-grade[hidden]{ display:none; }

/* ---- търсене и филтри ---- */
.ek-tools{ position:sticky; top:74px; z-index:6; padding:12px; margin:0 -12px; border-radius:18px; background:rgba(247,241,232,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.ek-search{ display:flex; align-items:center; gap:12px; background:#fff; border-radius:16px; padding:6px 6px 6px 18px; box-shadow:0 0 0 1px var(--line,#E7DDCD); }
.ek-search:focus-within{ box-shadow:0 0 0 2px var(--brick); }
.ek-search svg{ width:20px; height:20px; color:var(--brick); flex:0 0 auto; }
.ek-search input{ flex:1; min-width:0; border:0; outline:none; background:transparent; padding:12px 0; font-family:'Fraunces',serif; font-size:19px; color:var(--ink); }
.ek-search span{ font-family:'Manrope',sans-serif; font-size:12px; font-weight:800; color:var(--brick-deep); background:var(--brick-bg); padding:8px 12px; border-radius:10px; white-space:nowrap; }
.ek-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ek-chips button{ border:1px solid var(--line,#E7DDCD); background:#fff; cursor:pointer; padding:8px 14px; border-radius:999px; font-family:'Manrope',sans-serif; font-weight:700; font-size:13.5px; color:var(--ink); transition:all .2s; }
.ek-chips button i{ font-style:normal; opacity:.55; margin-left:4px; }
.ek-chips button.on{ background:var(--brick); border-color:var(--brick); color:#fff; }

/* ---- портрет ---- */
.ek-pic{ position:relative; width:72px; height:84px; flex:0 0 auto; background:#fff; padding:5px 5px 14px; border-radius:3px; box-shadow:0 8px 16px -10px rgba(40,30,20,.55), 0 0 0 1px rgba(0,0,0,.05); transform:rotate(var(--rot,-2deg)); }
.ek-pic span{ display:grid; place-items:center; width:100%; height:100%; border-radius:2px; background:var(--pc,#46586B); color:#fff; font-family:'Fraunces',serif; font-size:24px; letter-spacing:.02em;
  background-image:radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.28), transparent 60%); }
.ek-card{ display:flex; gap:16px; align-items:center; padding:14px 16px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); transition:transform .25s, box-shadow .25s; }
.ek-card:hover{ transform:translateY(-3px); box-shadow:0 0 0 1px var(--brick), 0 16px 28px -20px rgba(40,30,20,.5); }
.ek-card:hover .ek-pic{ transform:rotate(0) scale(1.04); }
.ek-card b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:18px; line-height:1.2; color:var(--ink); }
.ek-card small{ display:block; margin-top:3px; font-size:13px; color:var(--ink-soft); line-height:1.4; }
.ek-card mark{ background:#FFE58A; color:inherit; border-radius:3px; padding:0 1px; }
.ek-links{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ek-links a{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; background:var(--brick-bg); color:var(--brick-deep); text-decoration:none; font-family:'Manrope',sans-serif; font-weight:700; font-size:12px; }
.ek-links a:hover{ background:var(--brick); color:#fff; }
.ek-links svg{ width:13px; height:13px; }
.ek-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:12px; }

/* ---- ръководство ---- */
.ek-lead{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.ek-lead .ek-card{ flex-direction:column; text-align:center; padding:24px 16px 18px; }
.ek-lead .ek-pic{ width:110px; height:128px; padding:7px 7px 20px; }
.ek-lead .ek-pic span{ font-size:36px; }
.ek-lead .ek-links{ justify-content:center; }
@media (max-width:1000px){ .ek-lead{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---- кой учи моето дете ---- */
.ek-who{ padding:clamp(20px,3vw,30px); border-radius:22px; background:var(--brick-bg); }
.ek-who-pick{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ek-who-pick button{ border:0; cursor:pointer; width:52px; padding:10px 0; border-radius:12px; background:#fff; font-family:'Fraunces',serif; font-size:19px; color:var(--brick-deep); transition:all .2s; }
.ek-who-pick button.on{ background:var(--brick); color:#fff; transform:translateY(-2px); }
.ek-who-pick .sep{ width:1px; height:30px; background:rgba(0,0,0,.12); margin:0 4px; }
.ek-who-out{ margin-top:18px; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.ek-who-out p{ margin:0; font-size:15px; color:var(--ink-soft); }

/* ---- класове в началния етап ---- */
.ek-grade{ margin-bottom:22px; }
.ek-grade > b{ display:block; font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px; }
.ek-classes{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.ek-class{ position:relative; padding:40px 14px 14px; border-radius:18px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); display:grid; gap:10px; }
.ek-class .tag{ position:absolute; left:14px; top:-12px; padding:6px 14px; border-radius:10px; background:var(--brick); color:#fff; font-family:'Fraunces',serif; font-size:20px; box-shadow:0 8px 14px -8px rgba(0,0,0,.4); }
.ek-class .ek-card{ box-shadow:none; padding:4px; }
.ek-class .ek-card:hover{ transform:none; box-shadow:none; }
.ek-class .ek-pic{ width:56px; height:66px; padding:4px 4px 11px; } .ek-class .ek-pic span{ font-size:19px; }
.ek-class .ek-card b{ font-size:16px; }
@media (max-width:1000px){ .ek-classes{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .ek-classes{ grid-template-columns:1fr; } }

/* ---- предмети ---- */
.ek-subjects{ display:grid; gap:14px; }
.ek-subj{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:14px; align-items:start; }
.ek-ribbon{ position:sticky; top:190px; padding:14px 16px; border-radius:12px 4px 4px 12px; background:var(--sc,#46586B); color:#fff; clip-path:polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%); padding-right:30px; }
.ek-ribbon b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:17px; line-height:1.25; }
.ek-ribbon small{ font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.8; }
@media (max-width:760px){ .ek-subj{ grid-template-columns:1fr; } .ek-ribbon{ position:static; } }
.ek-none{ display:none; text-align:center; padding:30px; color:var(--ink-soft); }

/* ===========================================================================
   67. МАТЕРИАЛНА БАЗА — РАЗХОДКА ИЗ УЧИЛИЩЕТО (materialna-baza.html)
   Обиколка със спирки: вляво голяма рисувана сцена на мястото, вдясно
   маршрутът с пунктир. Не е точен план на сградата. Представка mb-.
=========================================================================== */
.mb-tour{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(18px,3vw,34px); align-items:start; }
.mb-stage{ position:relative; border-radius:24px; overflow:hidden; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD), 0 30px 60px -36px rgba(60,30,45,.55); }
.mb-scene{ position:relative; aspect-ratio:16/9; background:linear-gradient(160deg, var(--brick-bg), #FBF4EA); overflow:hidden; }
.mb-scene img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04); transition:opacity .5s, transform .8s cubic-bezier(.34,1.3,.5,1); }
.mb-scene img.on{ opacity:1; transform:none; }
.mb-num{ position:absolute; left:20px; top:18px; font-family:'Fraunces',serif; font-size:64px; line-height:1; color:var(--brick); opacity:.18; }
.mb-text{ padding:clamp(20px,3vw,30px); }
.mb-text small{ font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--brick); }
.mb-text h3{ margin:6px 0 10px; font-family:'Fraunces',serif; font-weight:400; font-size:clamp(26px,3vw,36px); line-height:1.1; color:var(--ink); }
.mb-text p{ margin:0; font-size:16.5px; line-height:1.7; color:var(--ink-soft); max-width:62ch; }
.mb-badge{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:9px 14px; border-radius:12px; background:#E1E9F5; color:#2C4570; font-size:14px; font-weight:600; }
.mb-nav{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:0 clamp(20px,3vw,30px) clamp(20px,3vw,26px); }
.mb-nav button{ border:0; cursor:pointer; padding:11px 18px; border-radius:999px; background:var(--brick-bg); color:var(--brick-deep); font-family:'Manrope',sans-serif; font-weight:800; font-size:13.5px; transition:background .2s, color .2s; }
.mb-nav button:hover{ background:var(--brick); color:#fff; }
.mb-nav span{ font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.mb-route{ position:relative; display:grid; gap:6px; padding-left:28px; }
.mb-route::before{ content:''; position:absolute; left:11px; top:18px; bottom:18px; width:2px; background:repeating-linear-gradient(180deg, var(--brick) 0 5px, transparent 5px 11px); opacity:.45; }
.mb-stop{ position:relative; display:flex; align-items:center; gap:12px; width:100%; border:0; cursor:pointer; text-align:left; font:inherit; padding:12px 14px; border-radius:14px; background:transparent; transition:background .2s; }
.mb-stop::before{ content:''; position:absolute; left:-23px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:#fff; border:3px solid var(--brick); transition:transform .3s; }
.mb-stop:hover{ background:#fff; }
.mb-stop.on{ background:#fff; box-shadow:0 0 0 2px var(--brick); }
.mb-stop.on::before{ background:#FFD95E; transform:scale(1.35); }
.mb-stop.seen::before{ background:var(--brick); }
.mb-stop b{ font-family:'Fraunces',serif; font-weight:400; font-size:17px; color:var(--ink); line-height:1.2; }
.mb-stop small{ display:block; font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.mb-note{ margin-top:14px; font-size:12.5px; color:var(--ink-soft); }
@media (max-width:860px){ .mb-tour{ grid-template-columns:1fr; } .mb-route{ order:-1; grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; padding:0 0 8px; }
  .mb-route::before{ display:none; } .mb-stop{ background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); } .mb-stop::before{ display:none; } }

/* ===========================================================================
   68. ВИЗИЯ — ДЪРВОТО НА ЦЕННОСТИТЕ (vizia.html)
   Голям цитат, после ствол, по който растат клони с ценностите — листата
   разлистват при скролване. Представка vz-.
=========================================================================== */
.vz-quote{ max-width:900px; margin:0 auto; text-align:center; }
.vz-quote p{ margin:0; font-family:'Fraunces',serif; font-style:italic; font-size:clamp(26px,3.4vw,42px); line-height:1.3; color:var(--ink); }
.vz-quote p::before{ content:'„'; color:var(--brick); } .vz-quote p::after{ content:'“'; color:var(--brick); }
.vz-quote span{ display:block; margin-top:18px; font-size:17px; line-height:1.7; color:var(--ink-soft); }
.vz-tree{ position:relative; max-width:980px; margin:clamp(50px,7vw,80px) auto 0; padding:20px 0 120px; }
.vz-trunk{ position:absolute; left:50%; top:0; bottom:60px; width:14px; margin-left:-7px; border-radius:7px; background:linear-gradient(90deg, #7A5226, #9A6B34 50%, #7A5226); }
.vz-roots{ position:absolute; left:50%; bottom:0; width:260px; height:80px; margin-left:-130px; }
.vz-branch{ position:relative; display:flex; margin-bottom:34px; }
.vz-branch:nth-child(odd){ justify-content:flex-start; } .vz-branch:nth-child(even){ justify-content:flex-end; }
.vz-card{ position:relative; width:calc(50% - 60px); padding:22px 24px; border-radius:20px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD), 0 20px 40px -30px rgba(80,60,20,.5); }
.vz-card::before{ content:''; position:absolute; top:34px; width:58px; height:3px; background:#8A5E2C; border-radius:2px; }
.vz-branch:nth-child(odd) .vz-card::before{ right:-58px; } .vz-branch:nth-child(even) .vz-card::before{ left:-58px; }
.vz-leaf{ position:absolute; top:12px; width:46px; height:46px; transform:scale(0) rotate(-40deg); transition:transform .8s cubic-bezier(.34,1.6,.5,1) .15s; }
.vz-branch:nth-child(odd) .vz-leaf{ right:-48px; } .vz-branch:nth-child(even) .vz-leaf{ left:-48px; }
.vz-branch.grown .vz-leaf{ transform:scale(1) rotate(0); }
.vz-card small{ font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--brick); }
.vz-card h3{ margin:6px 0 8px; font-family:'Fraunces',serif; font-weight:400; font-size:24px; line-height:1.2; color:var(--ink); }
.vz-card p{ margin:0; font-size:15.5px; line-height:1.7; color:var(--ink-soft); }
@media (max-width:760px){
  .vz-trunk{ left:22px; } .vz-roots{ display:none; }
  .vz-branch, .vz-branch:nth-child(even){ justify-content:flex-end; }
  .vz-card{ width:calc(100% - 64px); } .vz-branch .vz-card::before, .vz-branch:nth-child(even) .vz-card::before{ left:-34px; right:auto; width:34px; }
  .vz-branch .vz-leaf, .vz-branch:nth-child(even) .vz-leaf{ left:-58px; right:auto; width:36px; height:36px; }
}

/* ===========================================================================
   69. КОНТАКТИ — КОГО ДА ТЪРСЯ ЗА КАКВО (kontakti.html)
   Три големи бутона (обади се, пиши, ела), помощник „какво ви трябва?“,
   карта и телефоните на ръководството. Представка kt-.
=========================================================================== */
.kt-big{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.kt-b{ position:relative; display:flex; flex-direction:column; gap:10px; padding:26px 24px; border-radius:22px; text-decoration:none; color:#fff; overflow:hidden;
  background:var(--c); box-shadow:0 26px 46px -30px rgba(30,40,55,.8); transition:transform .35s cubic-bezier(.34,1.4,.5,1); }
.kt-b:hover{ transform:translateY(-5px); }
.kt-b::after{ content:''; position:absolute; right:-40px; bottom:-40px; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.1); }
.kt-b .ic{ width:50px; height:50px; border-radius:14px; background:rgba(255,255,255,.18); padding:12px; }
.kt-b .ic svg{ width:100%; height:100%; display:block; }
.kt-b small{ font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; opacity:.8; }
.kt-b b{ font-family:'Fraunces',serif; font-weight:400; font-size:clamp(20px,2.2vw,26px); line-height:1.25; }
.kt-b span.sub{ font-size:14px; opacity:.85; }
.kt-b .row{ display:flex; flex-wrap:wrap; gap:8px; position:relative; z-index:1; }
.kt-b .row a, .kt-b .row button{ border:0; cursor:pointer; padding:9px 14px; border-radius:10px; background:rgba(255,255,255,.2); color:#fff; font-family:'Manrope',sans-serif; font-weight:800; font-size:13.5px; text-decoration:none; }
.kt-b .row a:hover, .kt-b .row button:hover{ background:rgba(255,255,255,.32); }
@media (max-width:900px){ .kt-big{ grid-template-columns:1fr; } }
.kt-sec{ margin-top:clamp(56px,7vw,86px); }
.kt-h{ font-family:'Fraunces',serif; font-weight:400; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--ink); margin:6px 0 18px; }
.kt-need{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.kt-need button{ display:flex; align-items:center; gap:12px; border:0; cursor:pointer; text-align:left; font:inherit; padding:16px 18px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); transition:all .2s; }
.kt-need button:hover{ box-shadow:0 0 0 1px var(--brick); transform:translateY(-2px); }
.kt-need button.on{ background:var(--brick); box-shadow:none; }
.kt-need button.on b{ color:#fff; }
.kt-need button span{ font-size:24px; }
.kt-need b{ font-family:'Fraunces',serif; font-weight:400; font-size:17px; color:var(--ink); line-height:1.25; }
@media (max-width:760px){ .kt-need{ grid-template-columns:1fr; } }
.kt-ans{ margin-top:14px; padding:22px 24px; border-radius:20px; background:var(--brick-bg); display:none; }
.kt-ans.on{ display:block; animation:ktIn .4s ease; }
@keyframes ktIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.kt-ans b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:22px; color:var(--ink); margin-bottom:8px; }
.kt-ans p{ margin:0 0 12px; font-size:15.5px; line-height:1.65; color:var(--ink); }
.kt-ans .acts{ display:flex; flex-wrap:wrap; gap:8px; }
.kt-ans .acts a{ padding:10px 16px; border-radius:999px; background:var(--brick); color:#fff; text-decoration:none; font-family:'Manrope',sans-serif; font-weight:800; font-size:13.5px; }
.kt-ans .acts a.alt{ background:#fff; color:var(--brick-deep); }
.kt-map{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:16px; }
.kt-frame{ position:relative; border-radius:20px; overflow:hidden; min-height:320px; background:var(--brick-bg); box-shadow:0 0 0 1px var(--line,#E7DDCD); }
.kt-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.kt-frame .fb{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:20px; font-size:14px; color:var(--ink-soft); }
.kt-people{ display:grid; gap:10px; align-content:start; }
.kt-p{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); }
.kt-p b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:17px; color:var(--ink); }
.kt-p small{ font-size:12.5px; color:var(--ink-soft); }
.kt-p a{ white-space:nowrap; padding:9px 12px; border-radius:10px; background:var(--brick-bg); color:var(--brick-deep); text-decoration:none; font-family:'Manrope',sans-serif; font-weight:800; font-size:13px; }
@media (max-width:860px){ .kt-map{ grid-template-columns:1fr; } }
.kt-toast{ position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translate(-50%, 20px); opacity:0; pointer-events:none; z-index:50;
  padding:12px 20px; border-radius:999px; background:#1E2A36; color:#fff; font-family:'Manrope',sans-serif; font-weight:700; font-size:14px; transition:all .3s; }
.kt-toast.on{ opacity:1; transform:translate(-50%, 0); }

/* ===========================================================================
   70. ПРОЕКТИ И ПРОГРАМИ — ИЗЛОЖБАТА (proekti-programi.html)
   Активните проекти са постери на стена с живи броячи и лента на периода;
   националните програми — табелки; архивът — рафт с папки. Представка pp-.
=========================================================================== */
.pp-wall{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.4vw,26px); }
.pp-poster{ position:relative; display:flex; flex-direction:column; border-radius:6px; background:#fff; padding:26px 24px 22px; text-decoration:none; color:var(--ink);
  box-shadow:0 1px 0 rgba(0,0,0,.05), 0 30px 50px -34px rgba(40,30,20,.6); transform:rotate(var(--r,0deg)); transition:transform .45s cubic-bezier(.34,1.4,.5,1), box-shadow .3s; }
.pp-poster:hover{ transform:rotate(0) translateY(-6px); box-shadow:0 36px 60px -34px rgba(40,30,20,.7); }
.pp-poster::before{ content:''; position:absolute; top:-9px; left:50%; width:90px; height:22px; margin-left:-45px; background:rgba(232,200,119,.6); transform:rotate(-2deg); }
.pp-band{ height:8px; margin:-26px -24px 20px; border-radius:6px 6px 0 0; background:var(--pc,#2F6F66); }
.pp-poster .no{ font-family:'Fraunces',serif; font-size:48px; line-height:1; color:var(--pc); opacity:.25; position:absolute; right:18px; top:22px; }
.pp-poster small{ font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--pc); padding-right:50px; }
.pp-poster h3{ margin:8px 0 12px; font-family:'Fraunces',serif; font-weight:400; font-size:23px; line-height:1.2; }
.pp-poster p{ margin:0 0 12px; font-size:14.5px; line-height:1.65; color:var(--ink-soft); }
.pp-stats{ display:grid; gap:8px; margin:6px 0 14px; }
.pp-stat{ display:flex; gap:12px; align-items:baseline; padding:10px 12px; border-radius:10px; background:var(--pb,#E3EEE9); }
.pp-stat b{ font-family:'Fraunces',serif; font-weight:400; font-size:28px; line-height:1; color:var(--pc); min-width:52px; }
.pp-stat span{ font-size:13px; line-height:1.4; color:var(--ink); }
.pp-period{ margin:4px 0 14px; }
.pp-period .bar{ height:8px; border-radius:4px; background:rgba(0,0,0,.08); overflow:hidden; }
.pp-period .bar i{ display:block; height:100%; width:0; border-radius:4px; background:var(--pc); transition:width 1.4s cubic-bezier(.3,1,.4,1); }
.pp-period .lbl{ display:flex; justify-content:space-between; margin-top:6px; font-size:12px; color:var(--ink-soft); }
.pp-code{ display:inline-block; font-family:'Courier New',monospace; font-size:12px; padding:5px 8px; border-radius:6px; background:#F1ECE4; color:var(--ink); word-break:break-all; margin-bottom:12px; }
.pp-eu{ display:flex; align-items:center; gap:10px; margin:auto 0 12px; font-size:12px; color:var(--ink-soft); }
.pp-eu svg{ width:40px; height:27px; flex:0 0 auto; }
.pp-more{ margin-top:auto; align-self:flex-start; font-family:'Manrope',sans-serif; font-weight:800; font-size:13.5px; color:var(--pc); }
@media (max-width:1000px){ .pp-wall{ grid-template-columns:1fr; } .pp-poster{ transform:none; } }
.pp-plates{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:clamp(40px,5vw,60px); }
.pp-plate{ padding:24px; border-radius:18px; background:linear-gradient(135deg,#FBF4E4,#F3E6CC); box-shadow:inset 0 0 0 2px #D9C29A, 0 20px 40px -30px rgba(80,60,20,.5); position:relative; }
.pp-plate::before, .pp-plate::after{ content:''; position:absolute; top:12px; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #F3D58C, #9C7A2E); }
.pp-plate::before{ left:12px; } .pp-plate::after{ right:12px; }
.pp-plate small{ font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#8F6420; }
.pp-plate h3{ margin:6px 0 10px; font-family:'Fraunces',serif; font-weight:400; font-size:23px; color:var(--ink); }
.pp-plate p{ margin:0 0 10px; font-size:14.5px; line-height:1.65; color:var(--ink-soft); }
.pp-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.pp-tags span{ padding:6px 10px; border-radius:8px; background:#fff; font-size:12.5px; color:var(--ink); box-shadow:0 0 0 1px #E7D7B8; }
@media (max-width:760px){ .pp-plates{ grid-template-columns:1fr; } }
.pp-shelf{ margin-top:clamp(48px,6vw,70px); }
.pp-folders{ display:flex; gap:10px; overflow-x:auto; padding:22px 6px 0; border-bottom:14px solid #8C6440; box-shadow:0 20px 30px -24px rgba(40,25,10,.6); }
.pp-folder{ flex:0 0 190px; min-height:170px; padding:26px 14px 14px; border-radius:6px 6px 0 0; position:relative; background:var(--fc); color:#fff;
  font-family:'Fraunces',serif; font-size:16px; line-height:1.3; box-shadow:inset 0 -6px 0 rgba(0,0,0,.12); transition:transform .3s; }
.pp-folder:hover{ transform:translateY(-10px); }
.pp-folder::before{ content:''; position:absolute; top:-12px; left:14px; width:70px; height:14px; border-radius:6px 6px 0 0; background:var(--fc); }
.pp-folder small{ display:block; margin-top:10px; font-family:'Manrope',sans-serif; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.75; }

/* ===========================================================================
   71. КВАЛИФИКАЦИИ — СТЕНАТА СЪС СЕРТИФИКАТИ (kvalifikacii.html)
   Броячи за всички години, филтър по година и всяко обучение като
   сертификат с печат. Представка kv-.
=========================================================================== */
.kv-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.kv-stat{ padding:20px; border-radius:18px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); text-align:center; }
.kv-stat b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:44px; line-height:1; color:var(--brick); }
.kv-stat span{ display:block; margin-top:6px; font-size:13.5px; color:var(--ink-soft); }
@media (max-width:760px){ .kv-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.kv-years{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:30px 0 26px; }
.kv-years button{ border:1px solid var(--line,#E7DDCD); background:#fff; cursor:pointer; padding:9px 16px; border-radius:999px; font-family:'Manrope',sans-serif; font-weight:800; font-size:14px; color:var(--ink); }
.kv-years button.on{ background:var(--brick); border-color:var(--brick); color:#fff; }
.kv-wall{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.4vw,26px); }
.kv-cert{ position:relative; padding:26px 26px 22px; background:#FFFDF6; border-radius:4px;
  box-shadow:inset 0 0 0 8px #FFFDF6, inset 0 0 0 9px var(--brick), inset 0 0 0 12px #FFFDF6, inset 0 0 0 13px rgba(0,0,0,.08), 0 24px 40px -30px rgba(40,30,20,.6);
  transform:rotate(var(--r,0deg)); transition:transform .4s cubic-bezier(.34,1.4,.5,1); }
.kv-cert:hover{ transform:rotate(0) translateY(-4px); }
.kv-cert[hidden]{ display:none; }
.kv-cert .when{ font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--brick); }
.kv-cert h3{ margin:8px 0 14px; font-family:'Fraunces',serif; font-weight:400; font-size:20px; line-height:1.3; color:var(--ink); padding-right:70px; }
.kv-cert dl{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 12px; margin:0; font-size:13.5px; line-height:1.45; }
.kv-cert dt{ color:var(--ink-soft); } .kv-cert dd{ margin:0; color:var(--ink); }
.kv-seal{ position:absolute; right:18px; top:18px; width:62px; height:62px; border-radius:50%; display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle, var(--brick) 0 58%, transparent 60%), repeating-conic-gradient(var(--brick) 0 8deg, transparent 8deg 16deg);
  color:#fff; font-family:'Fraunces',serif; font-size:17px; line-height:1; }
.kv-seal small{ display:block; font-family:'Manrope',sans-serif; font-size:8px; font-weight:800; letter-spacing:.08em; }
@media (max-width:760px){ .kv-wall{ grid-template-columns:1fr; } .kv-cert{ transform:none; } }

/* ===========================================================================
   72. ОБЩЕСТВЕН СЪВЕТ, ЗЗЛД, Е-ДНЕВНИК
   Представки os-, zz-, ed2-.
=========================================================================== */
.os-table{ position:relative; max-width:760px; margin:0 auto; aspect-ratio:2.2; }
.os-table svg{ width:100%; height:100%; display:block; }
.os-duo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:22px; }
.os-card{ padding:24px; border-radius:20px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); }
.os-card .ic{ width:50px; height:50px; border-radius:14px; background:var(--brick-bg); color:var(--brick); padding:12px; margin-bottom:12px; }
.os-card .ic svg{ width:100%; height:100%; display:block; }
.os-card h3{ margin:0 0 8px; font-family:'Fraunces',serif; font-weight:400; font-size:22px; color:var(--ink); }
.os-card p{ margin:0; font-size:15px; line-height:1.65; color:var(--ink-soft); }
.os-ex{ margin-top:16px; padding:18px 22px; border-radius:16px; background:var(--brick-bg); font-size:15px; line-height:1.65; color:var(--ink); }
.os-ex a{ color:var(--brick-deep); font-weight:700; }
@media (max-width:760px){ .os-duo{ grid-template-columns:1fr; } }

.zz-dpo{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:center; padding:clamp(22px,3vw,32px); border-radius:24px; color:#fff;
  background:linear-gradient(140deg,#324152,#1E2A36); box-shadow:0 30px 60px -34px rgba(20,30,45,.8); }
.zz-lock{ width:92px; height:92px; border-radius:24px; background:rgba(255,255,255,.1); display:grid; place-items:center; }
.zz-lock svg{ width:52px; height:52px; color:#FFD95E; }
.zz-dpo small{ font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; opacity:.75; }
.zz-dpo b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:clamp(24px,2.8vw,32px); margin:6px 0 12px; }
.zz-dpo .row{ display:flex; flex-wrap:wrap; gap:8px; }
.zz-dpo .row a{ padding:10px 16px; border-radius:10px; background:rgba(255,255,255,.14); color:#fff; text-decoration:none; font-family:'Manrope',sans-serif; font-weight:800; font-size:14px; }
.zz-dpo .row a:hover{ background:rgba(255,255,255,.26); }
@media (max-width:560px){ .zz-dpo{ grid-template-columns:1fr; } }
.zz-env{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:26px; }
.zz-e{ position:relative; padding:60px 20px 20px; border-radius:10px; background:#FBF6EC; box-shadow:0 0 0 1px #E7DCC6, 0 20px 36px -28px rgba(40,30,20,.55); overflow:hidden; }
.zz-e::before{ content:''; position:absolute; left:0; right:0; top:0; height:56px; background:linear-gradient(to bottom right, #EFE4CF 49.5%, transparent 50%) left/50% 100% no-repeat, linear-gradient(to bottom left, #EFE4CF 49.5%, transparent 50%) right/50% 100% no-repeat; }
.zz-e .wax{ position:absolute; left:50%; top:30px; width:40px; height:40px; margin-left:-20px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #E07A6A, #A8322A 65%); box-shadow:0 4px 8px rgba(0,0,0,.25); display:grid; place-items:center; color:#fff; font-family:'Fraunces',serif; font-size:15px; }
.zz-e b{ display:block; margin-top:14px; font-family:'Fraunces',serif; font-weight:400; font-size:18px; line-height:1.3; color:var(--ink); min-height:3.9em; }
.zz-e .acts{ display:flex; gap:6px; margin-top:12px; }
.zz-e .acts button, .zz-e .acts a{ border:0; cursor:pointer; padding:9px 13px; border-radius:10px; background:var(--brick-bg); color:var(--brick-deep); text-decoration:none; font-family:'Manrope',sans-serif; font-weight:800; font-size:12.5px; }
.zz-e .acts button:hover, .zz-e .acts a:hover{ background:var(--brick); color:#fff; }
@media (max-width:860px){ .zz-env{ grid-template-columns:1fr; } }
.zz-rights{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:18px; }
.zz-rights div{ padding:16px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); }
.zz-rights b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:17px; color:var(--ink); margin-bottom:4px; }
.zz-rights span{ font-size:13px; line-height:1.5; color:var(--ink-soft); }
@media (max-width:900px){ .zz-rights{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.ed2-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(24px,5vw,60px); align-items:center; }
.ed2-steps{ display:grid; gap:14px; counter-reset:st; }
.ed2-step{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start; padding:20px; border-radius:18px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); }
.ed2-step .n{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--brick); color:#fff; font-family:'Fraunces',serif; font-size:24px; }
.ed2-step b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:21px; color:var(--ink); margin-bottom:4px; }
.ed2-step p{ margin:0 0 10px; font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
.ed2-step a{ display:inline-flex; padding:9px 14px; border-radius:10px; background:var(--brick-bg); color:var(--brick-deep); text-decoration:none; font-family:'Manrope',sans-serif; font-weight:800; font-size:13px; }
.ed2-step a.main{ background:var(--brick); color:#fff; }
.ed2-phone{ position:relative; width:260px; height:520px; margin:0 auto; border-radius:40px; background:#1E1E22; padding:14px; box-shadow:0 40px 70px -40px rgba(0,0,0,.7); }
.ed2-phone::before{ content:''; position:absolute; top:22px; left:50%; width:80px; height:18px; margin-left:-40px; border-radius:10px; background:#000; z-index:2; }
.ed2-screen{ width:100%; height:100%; border-radius:28px; background:#F4F6FA; overflow:hidden; padding:50px 14px 14px; display:grid; gap:10px; align-content:start; }
.ed2-screen .hd{ font-family:'Manrope',sans-serif; font-weight:800; font-size:15px; color:#1E2A36; }
.ed2-row{ display:flex; justify-content:space-between; align-items:center; padding:12px; border-radius:14px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.05); font-family:'Manrope',sans-serif; font-size:13px; color:#1E2A36; opacity:0; transform:translateY(10px); animation:ed2In .5s ease forwards; }
.ed2-row:nth-child(2){ animation-delay:.3s; } .ed2-row:nth-child(3){ animation-delay:.6s; } .ed2-row:nth-child(4){ animation-delay:.9s; } .ed2-row:nth-child(5){ animation-delay:1.2s; } .ed2-row:nth-child(6){ animation-delay:1.5s; }
@keyframes ed2In{ to{ opacity:1; transform:none; } }
.ed2-row i{ font-style:normal; font-weight:800; padding:4px 10px; border-radius:8px; background:#E3EED8; color:#2E4F18; }
.ed2-row i.b{ background:#E1E9F5; color:#2C4570; } .ed2-row i.r{ background:#F6D3DF; color:#732440; }
@media (max-width:860px){ .ed2-wrap{ grid-template-columns:1fr; } .ed2-phone{ transform:scale(.85); margin:-30px auto; } }

/* Обществен съвет — ясна версия: кой е в съвета и какво решава (os2-) */
.os2-who{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.os2-p{ display:flex; gap:16px; align-items:center; padding:20px; border-radius:18px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); }
.os2-p .ic{ flex:0 0 auto; width:58px; height:58px; border-radius:16px; display:grid; place-items:center; font-size:30px; background:var(--b); }
.os2-p b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:19px; color:var(--ink); margin-bottom:3px; }
.os2-p span{ font-size:13.5px; line-height:1.5; color:var(--ink-soft); }
@media (max-width:860px){ .os2-who{ grid-template-columns:1fr; } }
.os2-does{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.os2-d{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start; padding:18px 20px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); }
.os2-d .v{ font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:6px 10px; border-radius:8px; white-space:nowrap; background:var(--vb); color:var(--vc); }
.os2-d b{ display:block; font-family:'Fraunces',serif; font-weight:400; font-size:18px; line-height:1.3; color:var(--ink); }
.os2-d a{ display:inline-block; margin-top:8px; font-family:'Manrope',sans-serif; font-weight:800; font-size:13px; color:var(--brick-deep); text-decoration:none; }
.os2-d a:hover{ text-decoration:underline; }
@media (max-width:860px){ .os2-does{ grid-template-columns:1fr; } }
.os2-key{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px; font-size:13.5px; color:var(--ink-soft); }
.os2-key span{ display:inline-flex; align-items:center; gap:6px; }
.os2-key i{ font-style:normal; font-family:'Manrope',sans-serif; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; border-radius:6px; }
.os2-sec{ margin-top:clamp(48px,6vw,72px); }
.os2-src{ margin-top:14px; font-size:13px; color:var(--ink-soft); }

/* Менюто: първият ред във всяка лента води към целия раздел */
.ed-ov-panel a.ed-ov-all{ color:var(--brick); font-weight:800; }
.ed-ov-panel a.ed-ov-all:hover{ color:var(--brick-deep); }
.ed-ov-item[data-href]{ cursor:pointer; }

/* За родители — втори час на класа: един и същ избор за всички класове */
.rp-vpick{ display:grid; gap:12px; margin-bottom:18px; }
.rp-vrow{ display:grid; grid-template-columns:170px minmax(0,1fr); gap:14px; align-items:start; padding:16px 18px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--line,#E7DDCD); }
.rp-vrow > b{ font-family:'Fraunces',serif; font-weight:400; font-size:19px; color:var(--ink); padding-top:6px; }
.rp-vrow > b small{ display:block; font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-top:3px; }
.rp-vrow .rp-classes{ margin:0; }
.rp-chip.rp-name{ font-size:13px; }
.rp-pick .cls{ font-size:30px; }
@media (max-width:640px){ .rp-vrow{ grid-template-columns:1fr; } }

/* ===========================================================================
   73. ПОПРАВКИ СЛЕД ПРОВЕРКАТА НА ТЕЛЕФОН
=========================================================================== */
/* Материална база: маршрутът с копчетата разпъваше колоната до 1100px и
   рисунката излизаше огромна и изрязана. Колоната вече не може да расте. */
@media (max-width:860px){
  .mb-tour{ grid-template-columns:minmax(0,1fr); }
  .mb-tour > *{ min-width:0; }
  .mb-route{ max-width:100%; }
}
/* Алеко ТВ: на тесен екран заглавието и „СЕЗОН 1 · КАНАЛ 01“ се застъпваха */
@media (max-width:560px){
  .atv-osd{ left:12px; right:12px; bottom:10px; flex-direction:column; align-items:flex-start; gap:2px; }
  .atv-osd b{ font-size:13px; }
  .atv-osd span{ font-size:9.5px; }
  .atv-play{ top:42%; }
}
/* Дребните надписи с главни букви стават поне 11px на телефон */
@media (max-width:640px){
  .rp-t .today, .kv-cert .when, .ek-ribbon small, .atv-ep, .os2-d .v, .pp-folder small, .rb-kick,
  .dk-col b.plate, .pp-poster small, .pp-plate small, .uc-state small, .ed2-row, .zz-dpo small,
  .kt-b small, .rp-today b, .mb-stop small, .pq-sq .tap{ font-size:11px; }
}

/* ===========================================================================
   74. КЛУБ „МАЖОРЕТЕН СЪСТАВ“ (mazhoretki.html)
   Страницата е с отделна, модерна визия: светъл градиент, едра типография,
   бенто мрежа, викторина и табло на изявите. Класовете са с представка mzh-.
=========================================================================== */
[data-theme="mazhoretki"]{ --brick:#D6334A; --brick-deep:#8E1F30; --brick-bg:#FBE3E6; --mz-gold:#C9982F; }
[data-theme="mazhoretki"] .ed-cover{ background-image:url('art/cover-mazhoretki.svg'); }

/* ---- Мажоретки, вариант Ж: модерна, но светла (mzh-) ---- */
.mzh{ --hot:#D6334A; --hot2:#8E1F30; --gold:#C9982F; --ink:#241B1E; --dim:#6E6168; --line:rgba(36,27,30,.1); --soft:#FFF7F3;
  margin:0 calc(50% - 50vw); padding:0 0 clamp(50px,7vw,90px); background:linear-gradient(180deg,#FFF7F3 0%, #FDF1EC 45%, #F9EDE6 100%); color:var(--ink); overflow:hidden; position:relative; }
.mzh::before, .mzh::after{ content:''; position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; pointer-events:none; }
.mzh::before{ width:420px; height:420px; background:rgba(214,51,74,.22); top:8%; right:-120px; animation:mzhFloat 18s ease-in-out infinite alternate; }
.mzh::after{ width:380px; height:380px; background:rgba(201,152,47,.26); bottom:12%; left:-130px; animation:mzhFloat 22s ease-in-out infinite alternate-reverse; }
@keyframes mzhFloat{ from{ transform:translate(0,0); } to{ transform:translate(-40px,50px); } }
.mzh-wrap{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 clamp(18px,4vw,48px); }
.mzh h1,.mzh h2,.mzh h3{ font-family:'Manrope',sans-serif; letter-spacing:-.025em; }

.mzh-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px); align-items:center; padding:clamp(34px,6vw,74px) 0 clamp(26px,4vw,48px); }
.mzh-tag{ display:inline-flex; align-items:center; gap:10px; padding:8px 15px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--line);
  font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--hot2); }
.mzh-tag i{ width:7px; height:7px; border-radius:50%; background:var(--hot); animation:mzhBlink 2s ease-in-out infinite; }
@keyframes mzhBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
.mzh-h1{ margin:20px 0 0; font-weight:800; font-size:clamp(40px,7vw,92px); line-height:.95; color:var(--ink); }
.mzh-h1 em{ font-style:normal; background:linear-gradient(120deg,var(--hot),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mzh-lead{ margin:20px 0 0; font-size:clamp(16px,1.7vw,19px); line-height:1.75; color:var(--dim); max-width:46ch; }
.mzh-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.mzh-meta span{ padding:10px 16px; border-radius:12px; background:#fff; box-shadow:0 0 0 1px var(--line); font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:700; }
.mzh-meta b{ color:var(--hot); margin-right:6px; }
.mzh-shot{ position:relative; border-radius:26px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 30px 60px -34px rgba(90,30,40,.5); cursor:pointer; }
.mzh-shot img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s cubic-bezier(.2,.8,.3,1); }
.mzh-shot:hover img{ transform:scale(1.06); }
.mzh-shot figcaption{ position:absolute; left:16px; bottom:14px; z-index:2; font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:700; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.6); }
@media (max-width:860px){ .mzh-hero{ grid-template-columns:1fr; } .mzh-shot{ aspect-ratio:16/11; } }

.mzh-ticker{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:12px 0; overflow:hidden; background:#fff; }
.mzh-track{ display:flex; gap:40px; width:max-content; animation:mzhRun 28s linear infinite; }
.mzh-track span{ font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(17px,2.2vw,26px); color:rgba(36,27,30,.16); white-space:nowrap; }
.mzh-track i{ font-style:normal; color:var(--hot); }
@keyframes mzhRun{ to{ transform:translateX(-50%); } }

.mzh-bento{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:clamp(34px,5vw,60px); }
.mzh-card{ position:relative; border-radius:22px; background:#fff; box-shadow:0 0 0 1px var(--line), 0 18px 34px -28px rgba(90,40,50,.5); padding:24px; overflow:hidden;
  opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1), box-shadow .3s; }
.mzh-card.in{ opacity:1; transform:none; }
.mzh-card:hover{ box-shadow:0 0 0 1px rgba(214,51,74,.35), 0 26px 44px -26px rgba(90,40,50,.55); }
.mzh-card .no{ font-family:'Manrope',sans-serif; font-size:12px; font-weight:800; letter-spacing:.18em; color:var(--hot); }
.mzh-card h3{ margin:12px 0 8px; font-size:20px; font-weight:800; }
.mzh-card p{ margin:0; font-size:14.5px; line-height:1.65; color:var(--dim); }
.mzh-card.wide{ grid-column:span 2; }
.mzh-card.accent{ background:linear-gradient(140deg,var(--hot),var(--hot2)); color:#fff; }
.mzh-card.accent h3{ font-size:25px; } .mzh-card.accent p{ color:rgba(255,255,255,.85); }
.mzh-card.photo{ padding:0; min-height:220px; cursor:pointer; }
.mzh-card.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.2,.8,.3,1); }
.mzh-card.photo:hover img{ transform:scale(1.05); }
.mzh-card.photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%, rgba(20,10,14,.75)); }
.mzh-card.photo figcaption{ position:absolute; left:16px; bottom:14px; z-index:2; font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:700; color:#fff; }
@media (max-width:900px){ .mzh-bento{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .mzh-bento{ grid-template-columns:1fr; } .mzh-card.wide{ grid-column:span 1; } }

.mzh-beat{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(24px,4vw,52px); align-items:center; margin-top:14px;
  padding:clamp(24px,4vw,40px); border-radius:26px; background:#fff; box-shadow:0 0 0 1px var(--line), 0 22px 40px -32px rgba(90,40,50,.5); }
.mzh-pad{ position:relative; width:clamp(140px,18vw,190px); aspect-ratio:1; border-radius:50%; border:0; cursor:pointer; color:var(--hot2);
  background:radial-gradient(circle at 40% 34%, #fff, #F3E4DC); box-shadow:0 0 0 10px rgba(214,51,74,.12), inset 0 -8px 20px rgba(90,40,50,.12);
  font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(34px,4.6vw,52px); transition:transform .12s, box-shadow .25s; }
.mzh-pad:active{ transform:scale(.97); }
.mzh-pad.hit{ box-shadow:0 0 0 16px rgba(214,51,74,.16), 0 0 44px rgba(214,51,74,.3); }
.mzh-pad small{ display:block; font-size:11px; letter-spacing:.2em; color:var(--dim); }
.mzh-beat h3{ font-size:clamp(22px,2.6vw,30px); font-weight:800; margin:12px 0 10px; }
.mzh-beat p{ margin:0 0 18px; font-size:16px; line-height:1.7; color:var(--dim); max-width:44ch; }
.mzh-keys{ display:flex; flex-wrap:wrap; gap:8px; }
.mzh-key{ width:52px; height:52px; border-radius:14px; border:0; cursor:pointer; background:#F6ECE7; color:var(--ink); font-family:'Manrope',sans-serif; font-weight:800; font-size:17px; transition:all .2s; }
.mzh-key.on{ background:var(--hot); color:#fff; }
.mzh-run{ height:52px; padding:0 22px; border-radius:14px; border:0; cursor:pointer; background:var(--gold); color:#2A1F06; font-family:'Manrope',sans-serif; font-weight:800; font-size:14px; }
@media (max-width:640px){ .mzh-beat{ grid-template-columns:1fr; justify-items:center; text-align:center; } .mzh-keys{ justify-content:center; } }

/* викторина */
.mzh-quiz{ margin-top:14px; padding:clamp(24px,4vw,40px); border-radius:26px; background:#fff; box-shadow:0 0 0 1px var(--line), 0 22px 40px -32px rgba(90,40,50,.5); }
.mzh-qtop{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-family:'Manrope',sans-serif; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--hot); }
.mzh-qdots{ display:flex; gap:6px; }
.mzh-qdots i{ width:22px; height:6px; border-radius:3px; background:rgba(36,27,30,.14); }
.mzh-qdots i.ok{ background:#3FA96A; } .mzh-qdots i.no{ background:var(--hot); opacity:.55; }
.mzh-q{ font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(20px,2.4vw,27px); line-height:1.3; margin:0 0 18px; }
.mzh-opts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.mzh-opts button{ text-align:left; padding:15px 18px; border-radius:14px; border:0; cursor:pointer; background:#F7EFEA; color:var(--ink);
  font-family:'Manrope',sans-serif; font-size:16px; font-weight:700; transition:transform .2s, background .2s; }
.mzh-opts button:hover:not(:disabled){ transform:translateY(-2px); background:#F3E4DC; }
.mzh-opts button.ok{ background:#E2F3E8; color:#1F6B3F; } .mzh-opts button.no{ background:#FBE3E6; color:#8E1F30; }
.mzh-fb{ min-height:26px; margin:16px 0 0; font-size:15.5px; line-height:1.6; color:var(--dim); }
.mzh-next{ margin-top:12px; height:48px; padding:0 22px; border-radius:14px; border:0; cursor:pointer; background:var(--hot); color:#fff; font-family:'Manrope',sans-serif; font-weight:800; font-size:14.5px; }
.mzh-end{ text-align:center; padding:8px 0; }
.mzh-end b{ display:block; font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(22px,2.6vw,30px); }
.mzh-end span{ display:block; margin:8px 0 16px; color:var(--dim); }
@media (max-width:560px){ .mzh-opts{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .mzh::before,.mzh::after,.mzh-track,.mzh-tag i{ animation:none; } .mzh-card{ opacity:1; transform:none; } }

/* Мажоретки — табло на изявите (снимки и видеа) */
.mzh-board{ margin-top:14px; padding:clamp(24px,4vw,40px); border-radius:26px; background:#fff; box-shadow:0 0 0 1px var(--line), 0 22px 40px -32px rgba(90,40,50,.5); }
.mzh-bhead{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.mzh-bhead h3{ margin:6px 0 0; font-size:clamp(22px,2.6vw,30px); font-weight:800; }
.mzh-bhead .no{ font-family:'Manrope',sans-serif; font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--hot); }
.mzh-bhead span.count{ font-family:'Manrope',sans-serif; font-size:13px; font-weight:700; color:var(--dim); }
.mzh-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.mzh-tile{ position:relative; border:0; padding:0; border-radius:16px; overflow:hidden; cursor:pointer; background:#F3E4DC; aspect-ratio:4/3;
  box-shadow:0 0 0 1px var(--line); transition:transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .3s; }
.mzh-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.8,.3,1); }
.mzh-tile:hover{ transform:translateY(-4px); box-shadow:0 0 0 1px rgba(214,51,74,.4), 0 18px 30px -20px rgba(90,40,50,.5); }
.mzh-tile:hover img{ transform:scale(1.06); }
.mzh-tile figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px 12px 10px; text-align:left;
  background:linear-gradient(180deg, transparent, rgba(20,10,14,.8)); color:#fff; font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:700; }
.mzh-tile .kind{ position:absolute; left:10px; top:10px; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:8px;
  background:rgba(255,255,255,.92); color:var(--hot2); font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.mzh-tile .play{ position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px; z-index:2; border-radius:50%; background:rgba(214,51,74,.94); color:#fff;
  display:grid; place-items:center; box-shadow:0 8px 20px rgba(0,0,0,.35); transition:transform .3s; }
.mzh-tile:hover .play{ transform:scale(1.12); }
.mzh-tile .play svg{ width:20px; height:20px; margin-left:3px; }
.mzh-board .note{ margin:16px 0 0; font-size:14px; line-height:1.6; color:var(--dim); }
.mzh-player{ margin-top:14px; border-radius:18px; overflow:hidden; background:#000; display:none; }
.mzh-player.on{ display:block; }
.mzh-player video, .mzh-player iframe{ width:100%; aspect-ratio:16/9; display:block; border:0; }
@media (max-width:900px){ .mzh-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .mzh-tiles{ grid-template-columns:1fr; } }

/* Началната — картата на мажоретния състав: рисувана сцена и знак в средата,
   както при Творилница и Пътешественици */
.rb-img-mazh{ background:#F6E7E0 url('art/rb-mazhoretki.svg') center/cover no-repeat; display:grid; place-items:center; }
.rb-img-mazh img{ position:relative; width:30%; max-width:110px; height:auto; aspect-ratio:1; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 5px #fff, 0 12px 26px -8px rgba(90,30,40,.4); transition:transform .5s ease; }
.rb-mazh .rb-kick{ color:#C02A42; }
.rb-mazh:hover{ border-color:#C02A42; }
.rb-mazh:hover .rb-img-mazh img{ transform:scale(1.06) rotate(-4deg); }

/* ===========================================================================
   75. „РУБРИКИ И КЛУБОВЕ“ — ГРУПИ (rubriki.html)
   Клубовете вече не са в един дълъг списък, а са подредени по вид (медии,
   клубове по интереси, спорт и изкуство), всеки в решетка от карти (rb-*,
   същите класове като на началната страница). Новите класове тук имат
   представка rk-.
=========================================================================== */
.rk-grp{ margin:0 0 clamp(34px,5vw,54px); }
.rk-grp-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.rk-grp-head h2{ font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  font-size:clamp(19px,2.4vw,24px); color:var(--ink); margin:0; }
.rk-grp-head span{ font-size:11.5px; color:var(--muted); white-space:nowrap; }