/* =========================================================================
   ТАКТ И ПАРКЕТ  (asenovec.com)
   Речник на класовете: танцова зала и паркет, префикс tkt- (такт).
   Произход на формата: скелет "galerie-visuelle", изцяло преоблечен.
   Целият облик се управлява от променливите по-долу.
   ========================================================================= */

:root {

  /* ---- 1. ЦВЯТ ---------------------------------------------------------- */
  --fon:            #bfa898;   /* стената: топла глина, среден тон           */
  --fon-vdlabnat:   #b09a89;   /* вдлъбнатини, ленти, подиум                 */
  --fon-svetal:     #d5c6ba;   /* светли резерви, плаваща табела             */
  --mastilo:        #1c1512;   /* заглавия и основен текст                   */
  --mastilo-meko:   #40302a;   /* легенди, бележки, второстепенен текст      */
  --akcent:         #0f3941;   /* връзки, опорни нишки, фокус (петрол)       */
  --akcent-tamen:   #082429;   /* при посочване: ВИНАГИ по-тъмен от акцента  */
  --nishka:         #655343;   /* косъмни линии върху стената (3,2:1 на фона)*/
  --prazno:         #e6dbd1;   /* фон на дългите текстови резерви            */

  /* ---- 2. ТИПОГРАФИЯ (системни редици, нула външни файлове) ------------- */
  --shrift-zaglavie: "Sitka Text", Constantia, "Palatino Linotype", "Noto Serif", Georgia, serif;
  --shrift-tekst:    Tahoma, "Segoe UI", "Noto Sans", "DejaVu Sans", Verdana, sans-serif;
  --shrift-znak:     "Arial Narrow", "PT Sans Narrow", "Liberation Sans Narrow", Tahoma, sans-serif;

  --zaglavie-debelina: 600;
  --zaglavie-razredka: -0.006em;
  --znak-razredka:     0.16em;   /* малките капители на номерата и надслова */

  --tekst-razmer:    clamp(1.02rem, 0.98rem + 0.24vw, 1.14rem);
  --tekst-vodach:    1.7;

  /* ---- 3. РИТЪМ И МЕРКИ ------------------------------------------------- */
  --myarka:          58ch;                          /* ширина на четене     */
  --myarka-shiroka:  1180px;                        /* ширина на стената    */
  --pole:            clamp(1.15rem, 4.6vw, 3.6rem);
  --otstoyanie:      clamp(1.1rem, 3vw, 3.2rem);    /* между фигурите       */
  --dishane:         clamp(3rem, 6.5vw, 6rem);      /* между туровете       */
  --izmestvane:      clamp(2rem, 5.5vw, 6rem);      /* разместване в мозайка*/

  /* ---- 4. ПОДРОБНОСТИ --------------------------------------------------- */
  --radius:      0;      /* залата е с остри ъгли; 0 е част от формата      */
  --linia:       1px solid var(--nishka);
  --prehod:      170ms ease;
}

/* =========================================================================
   ОСНОВА
   ========================================================================= */

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

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

body {
  margin: 0;
  background: var(--fon);
  color: var(--mastilo);
  font-family: var(--shrift-tekst);
  font-size: var(--tekst-razmer);
  line-height: var(--tekst-vodach);
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4 {
  font-family: var(--shrift-zaglavie);
  font-weight: var(--zaglavie-debelina);
  letter-spacing: var(--zaglavie-razredka);
  line-height: 1.14;
  margin: 0;
}

h1 { font-size: clamp(1.95rem, 1.25rem + 2.7vw, 3.2rem); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.35vw, 2.05rem); }
h3 { font-size: clamp(1.12rem, 1rem + 0.55vw, 1.4rem); }
h4 { font-size: 1.02rem; }

p, ul, ol { margin: 0 0 1.2em; }

a { color: var(--akcent); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--akcent-tamen); }

:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 3px;
}

hr {
  border: 0;
  border-top: var(--linia);
  margin: var(--dishane) 0;
}

/* =========================================================================
   СКЕЛЕТ НА СТРАНИЦАТА
   ========================================================================= */

/* Връзка за прескачане (достъпност). ДА НЕ СЕ МАХА. */
.tkt-preskok {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--mastilo);
  color: var(--fon-svetal);
  padding: 0.7rem 1.1rem;
  z-index: 50;
}
.tkt-preskok:focus { left: 0.6rem; top: 0.6rem; }

/* Рамка: полезната ширина на всяка съдържателна зона. */
.tkt-ramka {
  width: 100%;
  max-width: var(--myarka-shiroka);
  margin-inline: auto;
  padding-inline: var(--pole);
}

/* Залата: вертикалната редица на страницата. */
.tkt-zala { display: block; }

/* --- Шапка --------------------------------------------------------------- */
.tkt-shapka {
  border-bottom: var(--linia);
  padding-block: clamp(1rem, 2.2vw, 1.7rem);
}
.tkt-shapka__red {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem 1.6rem;
}
.tkt-znak {
  font-family: var(--shrift-zaglavie);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  color: var(--mastilo);
  text-decoration: none;
}
.tkt-znak span {
  display: block;
  font-family: var(--shrift-znak);
  font-size: 0.74rem;
  letter-spacing: var(--znak-razredka);
  text-transform: uppercase;
  color: var(--mastilo-meko);
  margin-top: 0.3rem;
}
.tkt-obhod ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tkt-obhod a {
  font-family: var(--shrift-znak);
  font-size: 0.88rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mastilo);
  text-decoration: none;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
}
.tkt-obhod a:hover,
.tkt-obhod [aria-current="page"] {
  border-bottom-color: var(--akcent);
  color: var(--akcent);
}

/* --- Диря (път на навигация) --------------------------------------------- */
.tkt-diriya {
  font-family: var(--shrift-znak);
  font-size: 0.85rem;
  color: var(--mastilo-meko);
  padding-block: 1.1rem;
}
.tkt-diriya ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tkt-diriya li + li::before { content: "\203A"; margin-right: 0.5rem; color: var(--nishka); }

/* =========================================================================
   УВОД: началният образ води страницата
   ========================================================================= */

.tkt-uvod {
  position: relative;
  margin-top: clamp(1.2rem, 3vw, 2.4rem);
}
.tkt-uvod__obraz {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--fon-vdlabnat);
}
/* Плаващата табела: плътен блок, никога текст върху гол образ. */
.tkt-tabela {
  background: var(--fon-svetal);
  color: var(--mastilo);
  padding: clamp(1.3rem, 3vw, 2.4rem);
  max-width: 44rem;
  border-left: 4px solid var(--akcent);
}
.tkt-tabela p {
  margin: 0.85rem 0 0;
  color: var(--mastilo-meko);
  max-width: 50ch;
}

@media (min-width: 900px) {
  .tkt-uvod__obraz { aspect-ratio: 21 / 9; }
  .tkt-tabela {
    position: absolute;
    left: max(var(--pole), calc((100% - var(--myarka-shiroka)) / 2 + var(--pole)));
    bottom: 0;
    transform: translateY(26%);
    width: min(44rem, 64%);
  }
  .tkt-uvod { margin-bottom: 5rem; }
}

/* =========================================================================
   ТУР: една секция от страницата
   ========================================================================= */

.tkt-tur { margin-top: var(--dishane); }

.tkt-tur__greda {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.7rem 2rem;
  border-top: 2px solid var(--mastilo);
  padding-top: 0.85rem;
  margin-bottom: clamp(1.5rem, 3.2vw, 2.6rem);
}
.tkt-tur__zaglavie { max-width: 32ch; }
.tkt-tur__belezhka {
  font-family: var(--shrift-znak);
  font-size: 0.88rem;
  color: var(--mastilo-meko);
  max-width: 42ch;
  margin: 0;
}

/* Номер: малкият каталожен надслов, стилов белег на страниците. */
.tkt-nomer {
  display: block;
  font-family: var(--shrift-znak);
  font-size: 0.76rem;
  letter-spacing: var(--znak-razredka);
  text-transform: uppercase;
  color: var(--mastilo-meko);
  margin-bottom: 0.5rem;
}

/* =========================================================================
   ПАРКЕТ: неравномерната мозайка (сърцето на формата)
   6 колони; всяка фигура избира своя размах.
   ========================================================================= */

.tkt-parket {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--otstoyanie);
  align-items: start;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tkt-figura { grid-column: span 3; margin: 0; position: relative; }
.tkt-figura--tsyal   { grid-column: span 6; }
.tkt-figura--shirok  { grid-column: span 4; }
.tkt-figura--sreden  { grid-column: span 3; }
.tkt-figura--malak   { grid-column: span 2; }

/* Вертикално разместване: то чупи правилната решетка. */
.tkt-figura--izmestena  { margin-top: var(--izmestvane); }
.tkt-figura--izmestena2 { margin-top: calc(var(--izmestvane) * 2); }

.tkt-figura__kadar {
  overflow: hidden;
  background: var(--fon-vdlabnat);
  border-radius: var(--radius);
}
.tkt-figura__obraz {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--prehod), filter var(--prehod);
}

/* Формати на кадъра */
.tkt-figura__kadar--izpraven { aspect-ratio: 3 / 4; }
.tkt-figura__kadar--legnal   { aspect-ratio: 4 / 3; }
.tkt-figura__kadar--kvadrat  { aspect-ratio: 1 / 1; }
.tkt-figura__kadar--panorama { aspect-ratio: 21 / 9; }
.tkt-figura__kadar--visok    { aspect-ratio: 2 / 3; }

/* Надпис: сдържаната легенда под образа. Кратък текст, никога блок. */
.tkt-figura__nadpis {
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: var(--linia);
}
.tkt-figura__ime {
  font-family: var(--shrift-zaglavie);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.32rem);
  line-height: 1.18;
  margin: 0;
}
.tkt-figura--tsyal .tkt-figura__ime,
.tkt-figura--shirok .tkt-figura__ime { font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); }

.tkt-figura__vrazka {
  color: var(--mastilo);
  text-decoration: none;
}
.tkt-figura__vrazka:hover { color: var(--akcent); }
.tkt-figura__vrazka::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tkt-figura:hover .tkt-figura__obraz { transform: scale(1.02); }

.tkt-figura__red {
  margin: 0.5rem 0 0;
  color: var(--mastilo-meko);
  font-size: 0.9rem;
  max-width: 46ch;
}
.tkt-figura__znak {
  margin: 0.5rem 0 0;
  font-family: var(--shrift-znak);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mastilo-meko);
}

/* Гъста разновидност: мозайка без дълга легенда. */
.tkt-parket--gast { --otstoyanie: clamp(0.8rem, 1.8vw, 1.6rem); }

/* =========================================================================
   РЕГИСТЪР: списък от раздели в малки квадратни образи
   ========================================================================= */

.tkt-registar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--otstoyanie);
  list-style: none;
  margin: 0;
  padding: 0;
}
.tkt-registar__vpis { position: relative; }
.tkt-registar__obraz {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--fon-vdlabnat);
}
.tkt-registar__ime {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--shrift-zaglavie);
  font-size: 1.12rem;
  color: var(--mastilo);
  text-decoration: none;
}
.tkt-registar__ime::after { content: ""; position: absolute; inset: 0; }
.tkt-registar__vpis:hover .tkt-registar__ime { color: var(--akcent); }
.tkt-registar__broy {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--shrift-znak);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mastilo-meko);
}

/* =========================================================================
   СЪДЪРЖАТЕЛНА СТРАНИЦА: образът води, текстът следва
   ========================================================================= */

.tkt-nachalo {
  padding-block: clamp(1.4rem, 3.6vw, 3rem) clamp(1.4rem, 2.8vw, 2.3rem);
  max-width: 50rem;
}
.tkt-nachalo__uvodka {
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.28rem);
  color: var(--mastilo-meko);
  margin-top: 1.05rem;
  max-width: 56ch;
}
.tkt-danni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  font-family: var(--shrift-znak);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mastilo-meko);
}

/* Площ: образ извън рамката, на ширината на прозореца.
   Стои като ПРЯК НАСЛЕДНИК на <article>, без 100vw, значи без
   никаква възможност за хоризонтално преливане. */
.tkt-plosht { margin: 0; }
.tkt-plosht__obraz {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--fon-vdlabnat);
}
.tkt-plosht__obraz--visok { aspect-ratio: 4 / 3; }
.tkt-plosht__nadpis {
  max-width: var(--myarka-shiroka);
  margin-inline: auto;
  padding: 0.75rem var(--pole) 0;
  font-family: var(--shrift-znak);
  font-size: 0.85rem;
  color: var(--mastilo-meko);
}

/* Двойка: два образа един до друг. */
.tkt-dvoyka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--otstoyanie);
  margin: var(--dishane) 0 0;
}
.tkt-dvoyka figure { margin: 0; }
.tkt-dvoyka img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--fon-vdlabnat);
}
.tkt-dvoyka figcaption {
  margin-top: 0.7rem;
  font-family: var(--shrift-znak);
  font-size: 0.85rem;
  color: var(--mastilo-meko);
}

/* Колонка за четене: тясна, центрирана или подравнена вляво. */
.tkt-kolonka {
  max-width: var(--myarka);
  margin-top: var(--dishane);
}
.tkt-kolonka--sredna { margin-inline: auto; }
.tkt-kolonka h2 { margin-top: 2.5rem; }
.tkt-kolonka h3 { margin-top: 1.9rem; }
.tkt-kolonka h2:first-child,
.tkt-kolonka h3:first-child { margin-top: 0; }
.tkt-kolonka ul, .tkt-kolonka ol { padding-left: 1.2rem; }
.tkt-kolonka li { margin-bottom: 0.5em; }

.tkt-pauza {
  margin: 2.2rem 0;
  padding-left: 1.2rem;
  border-left: 4px solid var(--akcent);
  font-family: var(--shrift-zaglavie);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
  line-height: 1.34;
}
.tkt-pauza cite {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--shrift-znak);
  font-size: 0.85rem;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mastilo-meko);
}

/* Огледало: къс блок върху светъл фон. */
.tkt-ogledalo {
  background: var(--prazno);
  padding: clamp(1.2rem, 3vw, 1.9rem);
  margin: 2.4rem 0;
  border-top: 3px solid var(--akcent);
}
.tkt-ogledalo > :last-child { margin-bottom: 0; }

/* Таблица: винаги вътре в плъзгач. */
.tkt-plaz {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 2.2rem 0;
  border-top: 2px solid var(--mastilo);
  border-bottom: 2px solid var(--mastilo);
}
.tkt-plaz table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
  font-size: 0.94rem;
}
.tkt-plaz th, .tkt-plaz td {
  text-align: left;
  padding: 0.62rem 1rem 0.62rem 0;
  border-bottom: 1px solid var(--nishka);
  vertical-align: top;
}
.tkt-plaz th {
  font-family: var(--shrift-znak);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mastilo-meko);
}
.tkt-plaz tr:last-child td { border-bottom: 0; }

/* =========================================================================
   ЛЕТОПИС: хронологичен списък от актуализации (дата + страница)
   ========================================================================= */

.tkt-letopis {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--linia);
}
.tkt-letopis__zapis {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.4rem 1.6rem;
  padding-block: clamp(1rem, 2.4vw, 1.5rem);
  border-bottom: var(--linia);
}
.tkt-letopis__data {
  font-family: var(--shrift-znak);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--mastilo-meko);
  padding-top: 0.25rem;
}
.tkt-letopis__syd { position: relative; }
.tkt-letopis__znak {
  display: block;
  font-family: var(--shrift-znak);
  font-size: 0.74rem;
  letter-spacing: var(--znak-razredka);
  text-transform: uppercase;
  color: var(--akcent);
  margin-bottom: 0.3rem;
}
.tkt-letopis__zaglavie { font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.2rem); }
.tkt-letopis__vrazka {
  color: var(--mastilo);
  text-decoration: none;
}
.tkt-letopis__vrazka:hover { color: var(--akcent); }
.tkt-letopis__vrazka::after { content: ""; position: absolute; inset: 0; }
.tkt-letopis__red {
  margin: 0.4rem 0 0;
  color: var(--mastilo-meko);
  font-size: 0.92rem;
  max-width: 60ch;
}

@media (max-width: 620px) {
  .tkt-letopis__zapis { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
}

/* =========================================================================
   ОПОРИ: връзки и бутони
   ========================================================================= */

.tkt-napred {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--shrift-znak);
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--akcent);
  text-decoration: none;
  border-bottom: 2px solid var(--akcent);
  padding-bottom: 0.22rem;
}
.tkt-napred::after { content: "\203A"; font-size: 1.1em; line-height: 1; }
.tkt-napred:hover { color: var(--mastilo); border-bottom-color: var(--mastilo); }

/* =========================================================================
   ПОДИУМ (долна част на страницата)
   ========================================================================= */

.tkt-podium {
  margin-top: var(--dishane);
  background: var(--fon-vdlabnat);
  border-top: 2px solid var(--mastilo);
  padding-block: clamp(2.2rem, 5.5vw, 4rem);
}
.tkt-podium__red {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.6rem, 4vw, 3.2rem);
}
.tkt-podium h2 { font-size: 1.15rem; margin-bottom: 0.85rem; }
.tkt-podium ul { list-style: none; margin: 0; padding: 0; }
.tkt-podium li { margin-bottom: 0.5rem; }
.tkt-podium a { color: var(--mastilo); text-decoration: none; border-bottom: 1px solid transparent; }
.tkt-podium a:hover { border-bottom-color: var(--akcent); color: var(--akcent); }
.tkt-podium p { color: var(--mastilo-meko); font-size: 0.94rem; }
.tkt-podium__dolu {
  margin-top: clamp(1.8rem, 4.5vw, 3rem);
  padding-top: 1.1rem;
  border-top: var(--linia);
  font-family: var(--shrift-znak);
  font-size: 0.82rem;
  color: var(--mastilo-meko);
}

/* =========================================================================
   ПРИСПОСОБЯВАНЕ: решетката се сгъва, никога хоризонтално преливане
   ========================================================================= */

@media (max-width: 960px) {
  .tkt-parket { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tkt-figura,
  .tkt-figura--sreden,
  .tkt-figura--malak { grid-column: span 2; }
  .tkt-figura--shirok,
  .tkt-figura--tsyal { grid-column: span 4; }
  .tkt-figura--izmestena  { margin-top: calc(var(--izmestvane) / 2); }
  .tkt-figura--izmestena2 { margin-top: calc(var(--izmestvane) / 2); }
}

@media (max-width: 620px) {
  .tkt-parket { grid-template-columns: minmax(0, 1fr); }
  .tkt-figura,
  .tkt-figura--malak,
  .tkt-figura--sreden,
  .tkt-figura--shirok,
  .tkt-figura--tsyal { grid-column: span 1; }
  .tkt-figura--izmestena,
  .tkt-figura--izmestena2 { margin-top: 0; }
  .tkt-dvoyka { grid-template-columns: minmax(0, 1fr); }
  .tkt-figura__kadar--visok { aspect-ratio: 3 / 4; }
  .tkt-uvod__obraz { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .tkt-figura:hover .tkt-figura__obraz { transform: none; }
}