/* ============================================================
   СТРАНИЦА „КРЪЩЕНЕ" — krashtene.php
   ============================================================
   Написана на 06.08.2026 при преработката ѝ от текстова в
   снимкова, ден след същото за рождените дни.

   ⚠️ ВСИЧКО Е С ПРЕДСТАВКА `kr-`. Файлът се зарежда САМО от
   krashtene.php.

   ⚠️ НИЩО ТУК НЕ ПИПА `.bk-*` (календарчето) и `.review-*`
   (отзивите). Те си носят своите листове, в които `hidden` крие
   каквото трябва. Правилото от 05.08.2026: авторско `display:`
   побеждава атрибута `hidden` и страницата се чупи мълчаливо.

   ───────────────────────────────────────────────────────────
   ЗАЩО НЕ Е ЕДИН ФАЙЛ С rd.css (рождените дни)

   Двете страници са с НАРОЧНО различен характер: рожденият ден
   е цветен и подвижен, кръщенето — спокойно, с повече бяло и
   бледи повърхности. Общото между двата листа е около трийсет
   реда (появяването), а те няма да се менят повече.

   Изнасянето им в трети файл значеше да се пипа страница,
   качена преди час и още непрегледана на живо. Не си струва.
   Предпазителят при появяването е ЕДНАКЪВ на двете места и това
   е единственото, което не бива да се разминава — виж kr.js.
   ───────────────────────────────────────────────────────────

   Цветовете, шрифтовете и бутоните идват от style.css и
   index.css. Тук няма нито един нов цвят — само по-бледи
   повърхности от съществуващите.
*/

/* ------------------------------------------------------------
   ОБЩИ ЧАСТИ
   ------------------------------------------------------------ */

.kr-sekciya {
  width: 100%;
  /* По-широки отстъпи от рождените дни — оттам идва спокойствието,
     не от друг цвят. */
  padding: clamp(60px, 8vw, 120px) 20px;
  display: flex;
  justify-content: center;
}

.kr-sekciya.kr-krem {
  background-color: var(--background-beige-01);
}

.kr-sekciya.kr-blyah {
  background-color: var(--background-pink);
}

/* Същата ширина като секцията с отзиви и като началната страница. */
.kr-sredishte {
  width: 100%;
  max-width: var(--shirina-v-sekciya);

  /* Точка О18 — един разлят наследник разпъва цялата страница. */
  min-width: 0;
}

.kr-glava {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(32px, 4.5vw, 56px);
  text-align: center;
}

.kr-glava .section-title {
  max-width: 790px; /* същата ширина като заглавните блокове на началната */
}

.kr-glava-uvod {
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.7;
  max-width: 60ch;
  color: var(--text-03);
}

/* Акцентната дума. Четимият вариант, не фоновият. */
.kr-akcent {
  color: var(--accent-pink-text);
}

/* Тънка украса: едно сърчице до заглавието. Нищо повече —
   църковна клипарт графика няма да има. */
.kr-serce {
  color: var(--accent-pink);
  font-size: 0.6em;
  vertical-align: middle;
  margin-left: 8px;
}

/* ------------------------------------------------------------
   ДВИЖЕНИЕ
   ------------------------------------------------------------
   ⚠️ СЪДЪРЖАНИЕТО Е ВИДИМО ПО ПОДРАЗБИРАНЕ.

   Скриването се включва само когато `kr-js` стои на <html>, а
   той се слага от вграден скрипт. Без скрипт — няма скриване и
   няма празна страница.

   Движението тук е по-малко и по-бавно от това при рождените
   дни: 14px вместо 20px и 0.7s вместо 0.55s.
*/
.kr-js .kr-anim {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.kr-js .kr-anim.kr-vidim {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .kr-js .kr-anim,
  .kr-js .kr-anim.kr-vidim {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------
   ЗАГЛАВЕН ЕКРАН
   ------------------------------------------------------------ */

.kr-hero {
  width: 100%;
  /* 140px отгоре прескачат фиксираната лента (80px), както прави
     .page-intro в pages.css. Махне ли се, заглавието влиза под нея. */
  padding: 140px 20px clamp(56px, 6vw, 96px);
  display: flex;
  justify-content: center;
  overflow: hidden;

  /* Бледо розово, което избледнява към бяло. И двата цвята са от
     style.css — това не е нова палитра, а по-тиха повърхност. */
  background: linear-gradient(
    175deg,
    var(--background-pink) 0%,
    var(--background-beige-01) 62%,
    var(--white) 100%
  );
}

.kr-hero-inner {
  width: 100%;
  max-width: var(--shirina-v-sekciya);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.kr-hero-tekst {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;

  animation: kr-vlizane 0.8s ease-out both;
}

/* Надредът над заглавието. Не е цветно балонче като при
   рождените дни — само тънък текст с малко сърчице. */
.kr-nadred {
  font-size: 15px;
  font-weight: var(--semiBold);
  color: var(--accent-pink-text);
  letter-spacing: 0.02em;
}

.kr-h1 {
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.18;
  font-weight: var(--bold); /* по-леко от 800 при рождените дни */
  margin: 0;
}

.kr-lead {
  font-size: clamp(16px, 2.1vw, 19px);
  line-height: 1.7;
  max-width: 48ch;
  color: var(--text-03);
}

/* --- четирите бързи факта --- */

.kr-fakti {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  padding: 0;
  margin: 4px 0 0;
  list-style: none;
}

.kr-fakt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 1.35;
  font-weight: var(--semiBold);
}

/* Бледо кръгче с иконка — същият похват като .schedule-polza-znak
   в booking.css, само кръгло. Спокойно, без наситени петна. */
.kr-znak {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--white);
  border: 1px solid rgba(233, 99, 175, 0.22);
}

.kr-znak img {
  width: 24px;
  height: 24px;
}

.kr-butoni {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}

/* Вторичният бутон е контурен — правилото „един тежък бутон на
   екран" от style.css. Не се ползва .secondary-button: той е
   дребен и заоблен за подпис ПОД главния, а тук стои РЕДОМ. */
.kr-buton-vtori {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 2px solid var(--text-01);
  background-color: var(--white);
  color: var(--text-02);
  font-size: 16px;
  font-weight: var(--semiBold);
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.kr-buton-vtori:is(:hover, :focus-visible) {
  background-color: var(--accent-pink);
  border-color: var(--accent-pink);
}

.kr-vruzka-red {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 14px;
  color: var(--text-03);
}

.kr-vruzka-red a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--accent-orange-text);
  font-weight: var(--semiBold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kr-vruzka-red img {
  width: 18px;
  height: 18px;
}

/* --- снимковата половина --- */

.kr-hero-foto {
  position: relative;
  min-width: 0;
  max-width: 440px;
  margin-inline: auto;
  animation: kr-vlizane 0.8s ease-out 0.14s both;
}

.kr-foto-glavna {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 46px rgba(49, 47, 48, 0.13);
}

.kr-foto-glavna picture,
.kr-foto-malka picture {
  display: block;
}

/* Изправена снимка, а не легнала. Това е и разликата с
   рождените дни, и правилното за самата снимка — тя е 1200×1600. */
.kr-foto-glavna img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.kr-foto-malka {
  position: absolute;
  right: -26px;
  bottom: -30px;
  width: 46%;
  max-width: 190px;
  border-radius: 18px;
  overflow: hidden;
  border: 6px solid var(--white);
  box-shadow: 0 12px 28px rgba(49, 47, 48, 0.15);
}

.kr-foto-malka img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.kr-znak-google {
  position: absolute;
  left: -22px;
  top: -20px;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  border-radius: 18px;
  background-color: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(49, 47, 48, 0.1);
  text-decoration: none;
  text-align: center;
}

.kr-znak-google:is(:hover, :focus-visible) {
  border-color: var(--accent-pink);
}

.kr-znak-chislo {
  font-size: 22px;
  font-weight: var(--bold);
  line-height: 1;
}

.kr-znak-zvezdi {
  color: var(--accent-yellow-star);
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
}

.kr-znak-tekst {
  font-size: 12px;
  color: var(--text-03);
  line-height: 1.2;
}

@keyframes kr-vlizane {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kr-hero-tekst,
  .kr-hero-foto {
    animation: none;
  }
}

/* ------------------------------------------------------------
   ТРИ ПОКОЛЕНИЯ
   ------------------------------------------------------------ */

.kr-pokoleniya {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.kr-pokolenie {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  border-radius: 24px;
  background-color: var(--white);
  border: 1px solid var(--beige-03);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.kr-pokolenie:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(49, 47, 48, 0.07);
}

@media (prefers-reduced-motion: reduce) {
  .kr-pokolenie:hover {
    transform: none;
  }
}

/* Височина, не ширина: „балончетата" са с различни съотношения
   (61×72, 66×72, 72×74) и фиксирана ширина ги прави с три
   различни височини в един ред. */
.kr-pokolenie img {
  height: 54px;
  width: auto;
}

.kr-pokolenie-ime {
  font-size: 18px;
  line-height: 1.3;
  font-weight: var(--bold);
  margin-top: 4px;
}

.kr-pokolenie-tekst {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-03);
}

/* ------------------------------------------------------------
   КАК МОЖЕ ДА ПРОТЕЧЕ ПРАЗНИКЪТ — водоравна лента на голям екран
   ------------------------------------------------------------ */

.kr-hod {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.kr-stapka {
  position: relative;
  padding-top: 76px;
}

/* Кръгчето с номера. */
.kr-stapka-nomer {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--white);
  border: 1px solid var(--beige-04);
  font-size: 17px;
  font-weight: var(--bold);
  color: var(--accent-pink-text);
}

/*
 * Тънката нишка между стъпките. Прекъсната, за да не изглежда
 * като схема на процес от корпоративен сайт.
 *
 * Няма я след последната — линия, която виси в нищото, обърква.
 */
.kr-stapka:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 68px;
  right: -24px;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    var(--beige-05) 0 6px,
    transparent 6px 13px
  );
}

.kr-stapka-ime {
  font-size: 18px;
  line-height: 1.3;
  font-weight: var(--bold);
  margin-bottom: 8px;
}

.kr-stapka-tekst {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-03);
}

/* ------------------------------------------------------------
   РЕДУВАЩИ СЕ СНИМКА И ТЕКСТ
   ------------------------------------------------------------
   Ползва се от три секции: „Децата играят", „Малките удобства"
   и „Трапезата". Една подредба, три пълнежа — вместо три почти
   еднакви набора правила.
*/

.kr-red {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}

/* Обръщането е САМО визуално: в разметката снимката винаги е
   първа, за да се чете в един и същ ред на телефон. */
.kr-red.kr-obratno .kr-red-foto {
  order: 2;
}

.kr-red-foto {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(49, 47, 48, 0.11);
  min-width: 0;
}

.kr-red-foto picture {
  display: block;
}

.kr-red-foto img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.kr-red-foto:hover img {
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .kr-red-foto:hover img {
    transform: none;
  }
}

.kr-red-tekst {
  min-width: 0;
}

.kr-red-ime {
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.25;
  font-weight: var(--bold);
  margin-bottom: 14px;
}

.kr-red-tekst > p {
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 14px;
  max-width: 52ch;
  color: var(--text-03);
}

/* Трите реда с удобства вдясно от снимката. */
.kr-redove-malki {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 20px 0 0;
  list-style: none;
}

.kr-red-malak {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 18px;
  background-color: var(--white);
  border: 1px solid var(--beige-03);
}

.kr-sekciya.kr-krem .kr-red-malak,
.kr-sekciya.kr-blyah .kr-red-malak {
  border-color: rgba(49, 47, 48, 0.08);
}

/* Двата реда са <span> в <span> — без `display: block` биха се
   слепили на един ред. */
.kr-red-malak-ime {
  display: block;
  font-size: 16px;
  font-weight: var(--bold);
  margin-bottom: 2px;
}

.kr-red-malak-tekst {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-03);
}

/* Списък с отметки — ползва се в „Трапезата". */
.kr-spisak {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 20px 0 0;
  list-style: none;
}

.kr-spisak li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 15px;
  line-height: 1.6;
}

.kr-spisak li img {
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.kr-belejka {
  margin-top: 20px;
  padding: 16px 18px;
  border-left: 4px solid var(--accent-pink);
  border-radius: 0 14px 14px 0;
  background-color: var(--background-beige-01);
  font-size: 14px;
  line-height: 1.65;
}

.kr-sekciya.kr-krem .kr-belejka {
  background-color: var(--white);
}

.kr-pod-tekst {
  margin-top: 24px;
}

/* ------------------------------------------------------------
   ЧАСТНО СЪБИТИЕ — широка лента без снимка
   ------------------------------------------------------------
   Нарочно БЕЗ снимка: дотук страницата има четири снимкови
   блока подред и още един би я направила еднообразна.
*/

.kr-lenta {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 28px;
  background-color: var(--white);
  border: 1px solid var(--beige-03);
}

.kr-lenta img {
  height: 80px;
  width: auto;
}

.kr-lenta-ime {
  font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.25;
  font-weight: var(--bold);
  margin-bottom: 10px;
}

.kr-lenta p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-03);
  max-width: 62ch;
}

/* ------------------------------------------------------------
   ГАЛЕРИЯ — редакционна решетка, не еднакви квадрати
   ------------------------------------------------------------ */

.kr-mreja {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 196px;
  gap: 16px;
}

.kr-snimka {
  border-radius: 22px;
  overflow: hidden;
  min-width: 0;
}

.kr-snimka picture {
  display: block;
  width: 100%;
  height: 100%;
}

.kr-snimka img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.kr-snimka:hover img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .kr-snimka:hover img {
    transform: none;
  }
}

/* Голямата вляво заема половината решетка; вдясно две една над
   друга и една широка отдолу. */
.kr-snimka.kr-golyama {
  grid-column: span 2;
  grid-row: span 2;
}

.kr-snimka.kr-shiroka {
  grid-column: span 2;
}

.kr-pod-mrejata {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* ------------------------------------------------------------
   ОРГАНИЗАЦИЯ И ЦЕНИ
   ------------------------------------------------------------ */

.kr-uslugi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.kr-usluga {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 26px;
  border-radius: 24px;
  background-color: var(--white);
  border: 1px solid var(--beige-03);
  /* Цветът е тънка линия отгоре, не цял фон. Три плътно оцветени
     карти една до друга се бият и никоя не печели. */
  border-top: 5px solid var(--beige-04);
}

.kr-usluga.kr-rozova {
  border-top-color: var(--accent-pink);
}
.kr-usluga.kr-sinya {
  border-top-color: var(--accent-blue);
}
.kr-usluga.kr-jalta {
  border-top-color: var(--accent-yellow);
}

.kr-usluga-ime {
  font-size: 20px;
  line-height: 1.25;
  font-weight: var(--bold);
}

.kr-usluga-cena {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: var(--text-03);
}

.kr-usluga-cena strong {
  font-size: 30px;
  font-weight: var(--extraBold);
  color: var(--text-01);
}

.kr-usluga-vodach {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-03);
}

/* Картата е колона с `gap` — собственият отстъп на списъка би се
   добавил отгоре му и щеше да зее. */
.kr-usluga .kr-spisak {
  margin-top: 0;
}

/* Ред „нещо — цена". */
.kr-cenoraz {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 4px 0 0;
  list-style: none;
  font-size: 14px;
}

.kr-cenoraz li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  line-height: 1.4;
  border-bottom: 1px dashed var(--beige-04);
}

.kr-cenoraz li:last-child {
  border-bottom: none;
}

.kr-cenoraz strong {
  flex: none;
  font-weight: var(--bold);
}

.kr-usluga-belejka {
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--neutral-13);
}

/* Комплиментът към всяко събитие. */
.kr-kompliment {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}

.kr-kompliment li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 100px;
  background-color: var(--white);
  border: 1px solid var(--beige-03);
  font-size: 14px;
  line-height: 1.3;
}

.kr-kompliment img {
  height: 30px;
  width: auto;
}

/* ------------------------------------------------------------
   СВОБОДНИ ДАТИ
   ------------------------------------------------------------ */

.kr-data-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
}

.kr-data-tekst {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.kr-data-ime {
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.22;
  font-weight: var(--bold);
  max-width: 20ch;
}

.kr-data-uvod {
  font-size: 16px;
  line-height: 1.75;
  max-width: 48ch;
  color: var(--text-03);
}

/*
 * ⚠️ САМО КУТИЯТА. Вътре живее sections/booking-calendar.php със
 * своя booking.css. Нито едно правило тук не влиза в `.bk-*` —
 * там `hidden` крие трите неактивни месеца и панела с часовете.
 *
 * И границата по ширина НЕ Е ТУК: `.bk` в booking.css носи
 * max-width: 560px и не е закачено за .schedule- родител, тоест
 * важи и в тази кутия. Втора граница само би се разминала с
 * онази при бъдеща промяна.
 */
.kr-kalendar {
  min-width: 0;
}

/* ------------------------------------------------------------
   ЧЕСТИ ВЪПРОСИ
   ------------------------------------------------------------ */

.kr-faq {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.kr-faq-red {
  border-radius: 18px;
  background-color: var(--white);
  border: 1px solid var(--beige-03);
  overflow: hidden;
}

.kr-faq-vupros {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  min-height: 44px;
  font-size: 15px;
  font-weight: var(--semiBold);
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}

/* Стандартният триъгълник се маха, за да остане само стрелката. */
.kr-faq-vupros::-webkit-details-marker {
  display: none;
}

.kr-faq-vupros::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--accent-pink-text);
  border-bottom: 2px solid var(--accent-pink-text);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s ease;
}

.kr-faq-red[open] .kr-faq-vupros::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.kr-faq-vupros:focus-visible {
  outline: 2px solid var(--accent-pink);
  outline-offset: -2px;
}

.kr-faq-otgovor {
  padding: 0 22px 20px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-03);
}

.kr-faq-otgovor a {
  color: var(--accent-orange-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------
   ПОСЛЕДЕН ПРИЗИВ
   ------------------------------------------------------------ */

.kr-krai-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.kr-krai-ime {
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.25;
  font-weight: var(--bold);
  max-width: 24ch;
}

.kr-krai-uvod {
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.7;
  max-width: 56ch;
  color: var(--text-03);
}

.kr-krai .kr-butoni,
.kr-krai .kr-vruzka-red {
  justify-content: center;
}

/* Връзките към другите страници идват от pages.css. Тук само се
   центрират — блокът наоколо е центриран. */
.kr-krai .page-links {
  justify-content: center;
  width: 100%;
  margin-top: 26px;
  border-top-color: rgba(49, 47, 48, 0.12);
}

/* ============================================================
   ТАБЛЕТ
   ============================================================ */

@media (max-width: 1024px) {
  .kr-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  /* Снимката слиза под бутоните: на тесен екран първо трябва да
     се види какво предлагаме и как се проверява дата. */
  .kr-hero-foto {
    order: 2;
    max-width: 420px;
    width: 100%;
  }

  .kr-pokoleniya {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Водоравната лента става 2×2. Нишката отпада — на два реда тя
     сочи от края на единия към началото на другия и обърква. */
  .kr-hod {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }

  .kr-stapka:not(:last-child)::before {
    display: none;
  }

  .kr-red,
  .kr-data-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* На една колона няма ляво и дясно: обръщането само би
     разместило всеки втори ред. Еднакво е по-добре от почти
     еднакво. */
  .kr-red.kr-obratno .kr-red-foto {
    order: 0;
  }

  .kr-mreja {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 172px;
  }

  .kr-uslugi {
    grid-template-columns: minmax(0, 1fr);
  }

  .kr-usluga-belejka {
    margin-top: 12px;
  }

  .kr-faq {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   ТЕЛЕФОН
   ============================================================ */

@media (max-width: 767px) {
  .kr-hero {
    padding-top: 110px; /* лентата е по-ниска — както в pages.css */
  }

  .kr-hero-tekst {
    gap: 16px;
  }

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

  .kr-znak {
    width: 44px;
    height: 44px;
  }

  .kr-znak img {
    width: 20px;
    height: 20px;
  }

  /* Малката снимка и знакът на Google се махат: на тесен екран
     трите заедно стават каша, а голямата казва същото. */
  .kr-foto-malka {
    display: none;
  }

  .kr-znak-google {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
    box-shadow: none;
    width: fit-content;
  }

  .kr-butoni {
    width: 100%;
  }

  .kr-butoni .main-button,
  .kr-butoni .kr-buton-vtori {
    flex: 1 1 100%;
  }

  .kr-pokoleniya {
    gap: 12px;
  }

  .kr-pokolenie {
    padding: 20px 18px;
    border-radius: 20px;
  }

  .kr-pokolenie img {
    height: 44px;
  }

  .kr-pokolenie-ime {
    font-size: 16px;
  }

  .kr-pokolenie-tekst {
    font-size: 14px;
  }

  /* Стъпките стават една под друга — водоравно на 360px не се чете. */
  .kr-hod {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .kr-stapka {
    padding-top: 0;
    padding-left: 62px;
    min-height: 48px;
  }

  .kr-stapka-nomer {
    width: 48px;
    height: 48px;
    font-size: 15px;
  }

  .kr-lenta {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 22px 20px;
  }

  .kr-mreja {
    grid-auto-rows: 136px;
    gap: 10px;
  }

  .kr-faq-vupros {
    padding: 16px 18px;
    font-size: 15px;
  }

  .kr-faq-otgovor {
    padding: 0 18px 18px;
  }

  .kr-kompliment li {
    width: 100%;
  }
}

@media (max-width: 460px) {
  /* Под 460px две колони карти стават по 150px и заглавието се
     чупи на пет реда. Една колона е по-четимо от две тесни. */
  .kr-pokoleniya {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ══ ЛЕКОТО ПОЛЮШВАНЕ ═════════════════════════════════════════════════════
 * Движението и спирането му при „по-малко движение" стоят на едно място —
 * `--plavane` в style.css. Тук се казва само КОИ карти го правят.
 *
 * Съседните не бива да плуват в такт, иначе цялата решетка се люлее като
 * един блок. Отрицателното забавяне ги пуска вече започнали, вместо да
 * чакат реда си.
 * ═══════════════════════════════════════════════════════════════════════ */

.kr-pokolenie,
.kr-usluga {
  animation: var(--plavane);
}

.kr-pokolenie:nth-child(3n + 2),
.kr-usluga:nth-child(3n + 2) {
  animation-duration: 8.1s;
  animation-delay: -2.4s;
}

.kr-pokolenie:nth-child(3n + 3),
.kr-usluga:nth-child(3n + 3) {
  animation-duration: 6.6s;
  animation-delay: -4.9s;
}