/* ============================================================
   akademiya.css — специфични стилове САМО за akademiya.html
   Зарежда се СЛЕД base.css.

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

/* ── 0. Локални токени ───────────────────────────────────
   Страницата стои върху видео фон. Полупрозрачният --surface
   от base.css пропуска видеото през текста, затова тук
   панелите са почти плътни, а текстът — по-наситен.
   ──────────────────────────────────────────────────────── */
:root {
  --ak-panel:   rgba(255, 252, 248, .93);   /* фон на панелите */
  --ak-panel-2: rgba(252, 246, 238, .96);   /* акцентен панел */
  --ak-head:    rgba(240, 230, 218, .95);   /* шапка на таблицата */
  --ak-text:    rgba(36, 22, 16, .88);      /* основен текст, по-тъмен (29 юли 2026) */
}

/* ── Едва видима снимка от обученията зад уводния блок ──── */
.page-hero--academy{
  position:relative;
}
.page-hero--academy::before{
  content:"";
  position:absolute;
  top:-24px; right:-24px; bottom:-24px; left:-24px;
  z-index:-1;
  background-image:url(../images/kurs.jpg);
  background-size:cover;
  background-position:center 30%;
  opacity:.28;
  border-radius:var(--radius);
  pointer-events:none;
}

/* ── 1. Каталог с курсове ─────────────────────────────── */
.course-table-wrap {
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--ak-panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.course-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}

.course-table thead th {
  text-align: left;
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: var(--ak-head);
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-gold);
  white-space: nowrap;
}

.course-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ak-text);
  vertical-align: top;
}

.course-table tbody tr:last-child td {
  border-bottom: 0;
}

/* редуващи се редове — по-лесно се проследява реда с поглед */
.course-table tbody tr:nth-child(even) td {
  background: rgba(196, 165, 144, .07);
}

.course-table tbody tr:hover td {
  background: rgba(201, 168, 118, .16);
}

/* първата колона — името на курса */
.course-table td:first-child {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--espresso);
  line-height: 1.35;
}

/* колоната с общата продължителност — леко подчертана */
.course-table td:nth-child(2) {
  color: var(--gold-dark);
  font-weight: 500;
  white-space: nowrap;
}

/* ── 2. Мобилен изглед: редовете стават картички ─────── */
@media (max-width: 719px) {
  .course-table-wrap {
    border: 0;
    background: none;
    border-radius: 0;
  }

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

  .course-table,
  .course-table tbody,
  .course-table tr,
  .course-table td {
    display: block;
  }

  .course-table tr {
    background: var(--ak-panel);
    box-shadow: var(--shadow);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 10px;
  }

  .course-table tbody tr:hover td {
    background: none;
  }

  .course-table td {
    padding: 5px 0;
    border-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
  }

  /* името на курса — заглавен ред на картичката */
  .course-table td:first-child {
    display: block;
    font-size: 1rem;
    padding: 0 0 9px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
  }

  /* етикетите идват от data-label в HTML-а */
  .course-table td[data-label]::before {
    content: attr(data-label);
    color: var(--text-mute);
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex: 0 0 auto;
  }

  .course-table td[data-label] {
    font-size: .92rem;
    text-align: right;
  }
}

/* ── 3. Акордеон с учебна програма ───────────────────── */
.acc {
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--ak-panel);
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  overflow: hidden;
}

.acc summary {
  cursor: pointer;
  padding: 15px 18px;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--espresso);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  list-style: none;
  transition: background .2s ease;
}

/* маха стрелката по подразбиране в Safari/Chrome */
.acc summary::-webkit-details-marker { display: none; }
.acc summary::marker { content: ''; }

.acc summary:hover {
  background: var(--surface-2);
}

.acc summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

/* знакът + / − отдясно */
.acc summary::after {
  content: '';
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-gold);
  background:
    linear-gradient(var(--gold-dark), var(--gold-dark)) center/9px 1.5px no-repeat,
    linear-gradient(var(--gold-dark), var(--gold-dark)) center/1.5px 9px no-repeat;
  transition: transform .25s ease, background-size .25s ease;
}

/* при отваряне вертикалната черта се свива → „+“ става „−“.
   Въртенето е на 180°, за да остане хоризонтална. */
.acc[open] summary::after {
  transform: rotate(180deg);
  background:
    linear-gradient(var(--gold-dark), var(--gold-dark)) center/9px 1.5px no-repeat,
    linear-gradient(var(--gold-dark), var(--gold-dark)) center/1.5px 0 no-repeat;
}

.acc-body {
  padding: 2px 18px 18px;
  border-top: 1px solid var(--line);
}

.acc-body p {
  font-size: .93rem;
  color: var(--ak-text);
  line-height: 1.6;
  margin: 14px 0 8px;
}

.acc-body .acc-label {
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 500;
  margin: 18px 0 8px;
}

.acc-body ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.acc-body li {
  position: relative;
  padding: 0 0 9px 20px;
  margin-bottom: 9px;
  font-size: .93rem;
  color: var(--ak-text);
  line-height: 1.55;
  border-bottom: 1px dashed var(--line-2);
}

.acc-body li:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.acc-body li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* вложен списък (напр. видовете терапии за лице) */
.acc-body li ul {
  margin: 8px 0 0;
}

.acc-body li li {
  font-size: .89rem;
  border-bottom: 0;
  padding-bottom: 4px;
  margin-bottom: 4px;
}

.acc-body li li::before {
  background: var(--line-2);
  width: 5px;
  height: 5px;
}

/* ── 4. Акцентен блок със статистика ─────────────────── */
.hl-stat {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border-radius: var(--radius-sm);
  background: var(--ak-panel-2);
  border: 1px solid var(--line-gold);
  box-shadow: var(--shadow);
}

.hl-stat-num {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--gold-dark);
  flex: 0 0 auto;
}

.hl-stat-text {
  font-size: .95rem;
  color: var(--ak-text);
  line-height: 1.6;
}

.hl-stat-text strong {
  color: var(--espresso);
  font-weight: 500;
}

/* ── 5. Двата варианта на редовно/задочно обучение ───── */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
}

@media (min-width: 720px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

.form-opt {
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--ak-panel);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}

.form-opt h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1rem;
  color: var(--espresso);
  margin: 0 0 6px;
}

.form-opt p {
  font-size: .9rem;
  color: var(--ak-text);
  margin: 0;
  line-height: 1.55;
}

.form-opt .form-price {
  margin-top: 10px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--blue);
}


/* ── 7. Вариант „без панел“ (.course-table--plain) ────────
   Само редове и тънки линии — перата от видеото остават
   видими. Четливостта идва от размера и наситеността на
   буквите, не от плътен фон.

   Измерен контраст върху този фон (WCAG AA иска 4.5:1):
     #3D2A23 имена ....... 9.17:1  → AAA
     #8A3402 часове ...... 5.54:1  → AA
   ──────────────────────────────────────────────────────── */
.course-table-wrap--plain {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  border-top: 1px solid var(--line-gold);
}

.course-table--plain thead th {
  background: none;
  color: #7A2C02;
  font-size: .84rem;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line-gold);
}

.course-table--plain tbody td {
  font-size: 1.02rem;
  padding: 16px 16px;
  border-bottom: 1px solid rgba(138, 52, 2, .18);
}

/* имената на курсовете — най-тъмни */
.course-table--plain td:first-child {
  color: #241610;
  font-size: 1.14rem;
  font-weight: 500;
}

/* продължителност — акцент в твоя цвят, леко потъмнен */
.course-table--plain td:nth-child(2) {
  color: #7A2C02;
  font-weight: 500;
}

/* теория и практика */
.course-table--plain td:nth-child(3),
.course-table--plain td:nth-child(4) {
  color: #2E1F18;
}

/* ── ширини: без тях името изяжда мястото и „12 ч. онлайн“
   се пречупва на два реда ─────────────────────────────── */
@media (min-width: 720px) {
  .course-table--plain td:first-child,
  .course-table--plain th:first-child { width: 46%; }

  .course-table--plain td:nth-child(2),
  .course-table--plain th:nth-child(2) { width: 20%; }

  .course-table--plain td:nth-child(3),
  .course-table--plain td:nth-child(4),
  .course-table--plain th:nth-child(3),
  .course-table--plain th:nth-child(4) {
    width: 17%;
    white-space: nowrap;
  }
}

/* заглавието на секцията — по-едро и наситено */
.section-title {
  color: #241610;
  font-size: 1.5rem;
}

@media (min-width: 720px) {
  .section-title { font-size: 1.72rem; }
}

/* без райета и без плътен hover — само лек топъл отенък */
.course-table--plain tbody tr:nth-child(even) td {
  background: none;
}

.course-table--plain tbody tr:hover td {
  background: rgba(138, 52, 2, .06);
}

@media (max-width: 719px) {
  .course-table--plain tr {
    background: none;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid rgba(138, 52, 2, .22);
    border-radius: 0;
    padding: 16px 4px;
    margin-bottom: 0;
  }

  .course-table--plain td:first-child {
    font-size: 1.14rem;
    border-bottom: 0;
    padding-bottom: 4px;
    margin-bottom: 2px;
  }

  .course-table--plain td[data-label] {
    font-size: .98rem;
  }

  .course-table--plain td[data-label]::before {
    font-size: .82rem;
    color: rgba(138, 52, 2, .75);
  }
}

/* ── 8. Reduced motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .acc summary,
  .acc summary::after {
    transition: none;
  }
}

/* ============================================================
   9. ЕДИНЕН „БЕЗ ПАНЕЛ“ ИЗГЛЕД ЗА ЦЯЛАТА СТРАНИЦА
   Същият принцип като таблицата с надграждащите обучения:
   никакви плътни панели — фонът (перата от видеото) остава
   видим, а четливостта идва от размера и наситеността на
   буквите и от тънките златни линии.
   Всички правила са ограничени в .page, за да не пипат
   хедъра, футъра и мобилното меню.

   ⚠ ПРЕПРАВЕНО (29 юли 2026): преди тук имаше ДВЕ отделни, почти
   еднакви версии на този блок (една от по-стар кръг преработки,
   после втора — по-нова — която го препокриваше отгоре). И двете
   пипаха едни и същи елементи с леко различни числа, зависеше от
   реда в файла кое печели. Обединени в един ред тук — стойностите
   по-долу са точно тези, които се виждат в момента на живия сайт
   (проверено с before/after снимки), просто вече на едно място.
   ============================================================ */
:root{
  --ak-ink:      #241610;   /* заглавия */
  --ak-body:     #2E1F18;   /* основен текст */
  --ak-accent:   #7A2C02;   /* акцент */
  --ak-hair:     rgba(138, 52, 2, .18);   /* тънка линия */
  --ak-hair-2:   rgba(138, 52, 2, .30);
}

/* ── общо: махаме панелите ───────────────────────────── */
.page .info-box,
.page .sub-list,
.page ul.sub-list,
.page .sub-list li,
.page .card,
.page .form-opt,
.page .acc,
.page .hl-stat,
.page .course-table-wrap,
.page .course-table tr{
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* ── типография на страницата ────────────────────────── */
.page .page-lead{
  color:var(--ak-body);
  font-size:1.1rem;
  line-height:1.65;
  max-width:70ch;
}
.page .eyebrow{color:var(--ak-accent);}
.page .page-title{color:var(--ak-ink);}
.page .section-note{
  color:#4A342A;
  font-size:1rem;
}
.page .section-title{
  border-bottom:1px solid var(--ak-hair-2);
  padding-bottom:12px;
}

/* ── инфо кутия → блок с акцентна лява линия ─────────── */
.page .info-box{
  border-left:2px solid var(--gold);
  padding:4px 0 4px 18px;
  gap:14px;
}
.page .info-box > .ic{color:var(--ak-accent);}
.page .info-box-body{
  font-size:1.02rem;
  line-height:1.65;
  color:var(--ak-body);
}
.page .info-box-body strong{color:var(--ak-ink);font-weight:600;}

/* ── списъци с отметки → редове с тънка линия ────────── */
.page .sub-list,
.page ul.sub-list{
  padding:0;
  border-top:1px solid var(--ak-hair-2);
  gap:0;
}
.page .sub-list li{
  border-bottom:1px solid var(--ak-hair);
  padding:13px 2px;
  font-size:1.04rem;
  line-height:1.5;
  color:var(--ak-body);
}
.page .sub-list li:last-child{border-bottom:0;}
.page .sub-list li:first-child{border-top:1px solid var(--line-gold);}
.page .sub-list .ic{color:var(--ak-accent);}

/* ── карти → без фон, само тънка линия отгоре ────────── */
.page .cards{gap:26px 30px;}
.page .card,
.page .card--academy{
  border-top:1px solid var(--line-gold);
  padding:18px 0 0;
}
.page .card:hover,
.page .card--academy:hover{
  transform:none;
  background:none;
  box-shadow:none;
}
.page .card-icon{
  width:38px;height:38px;border-radius:10px;
  background:none;border:1px solid var(--line-gold);
  box-shadow:none;color:var(--ak-accent);
  font-size:1.5rem;
  justify-content:flex-start;
  margin-bottom:14px;
}
.page .card--academy .card-icon{
  background:none;
  border-color:rgba(74, 115, 136, .45);
  color:var(--blue);
}
.page .card-title{
  color:var(--ak-ink);
  font-size:1.22rem;
  margin-bottom:8px;
}
.page .card-desc{
  color:var(--ak-body);
  font-size:1rem;
  line-height:1.6;
}
.page .card-desc strong{color:var(--ak-ink);font-weight:600;}
.page .card-price{
  color:var(--ak-accent);
  font-size:1.05rem;
  font-weight:600;
}

/* ── редовно / задочно обучение ────────────────────────
   margin-top намален от 26px на 14px (1 авг. 2026, по молба на
   Станислава) — блокът е по-опростен вече (без часове/практика),
   затова стои по-близо до картите със степените над него. */
.page .form-row{gap:26px 30px;margin-top:14px;}
.page .form-opt{
  border-top:1px solid var(--line-gold);
  padding:16px 0 0;
}
.page .form-opt h4{
  font-size:1.14rem;
  color:var(--ak-ink);
  margin-bottom:8px;
}
.page .form-opt p{
  font-size:1rem;
  line-height:1.6;
  color:var(--ak-body);
}
.page .form-opt .form-price{
  color:var(--ak-accent);
  font-size:.98rem;
  font-weight:600;
  margin-top:12px;
}

/* ── акордеони → само линии ──────────────────────────── */
.page .acc{
  border-bottom:1px solid var(--ak-hair);
  margin-bottom:0;
}
.page .acc:first-of-type{border-top:1px solid var(--ak-hair-2);}
.page .acc summary{
  padding:17px 4px;
  font-size:1.14rem;
  color:var(--ak-ink);
}
.page .acc summary:hover{background:rgba(201, 168, 118, .10);}
.page .acc summary::after{
  border-color:var(--ak-hair-2);
  background:
    linear-gradient(var(--ak-accent), var(--ak-accent)) center/10px 1.6px no-repeat,
    linear-gradient(var(--ak-accent), var(--ak-accent)) center/1.6px 10px no-repeat;
}
.page .acc[open] summary::after{
  background:
    linear-gradient(var(--ak-accent), var(--ak-accent)) center/10px 1.6px no-repeat,
    linear-gradient(var(--ak-accent), var(--ak-accent)) center/1.6px 0 no-repeat;
}
.page .acc-body{
  border-top:0;
  padding:0 4px 20px;
}
.page .acc-body p,
.page .acc-body li{
  color:var(--ak-body);
  font-size:1rem;
  line-height:1.6;
}
.page .acc-body li li{font-size:.96rem;}
.page .acc-body .acc-label{color:var(--ak-accent);font-size:.86rem;}
.page .acc-body li::before{background:var(--ak-accent);}
.page .acc-body li{border-bottom:1px dashed var(--ak-hair);}

/* ── акцентен блок със статистика ────────────────────── */
.page .hl-stat{
  border-top:1px solid var(--line-gold);
  padding:18px 0 0;
}
.page .hl-stat-num{color:var(--ak-accent);font-size:2.4rem;}
.page .hl-stat-text{color:var(--ak-body);font-size:1.02rem;}
.page .hl-stat-text strong{color:var(--ak-ink);font-weight:600;}

/* ── и втората таблица става „без панел“ (border:0 идва
   от общия „без панели“ реgет по-горе) ────────────────── */
.page .course-table thead th{
  background:none;
  color:var(--ak-accent);
  font-size:.84rem;
  padding:14px 16px 12px;
  border-bottom:1px solid var(--line-gold);
}
.page .course-table tbody td{
  font-size:1.02rem;
  padding:16px;
  border-bottom:1px solid var(--ak-hair);
  color:var(--ak-body);
}
.page .course-table td:first-child{
  color:var(--ak-ink);
  font-size:1.14rem;
  font-weight:500;
}
.page .course-table td:nth-child(2){color:var(--ak-accent);font-weight:500;}
.page .course-table tbody tr:nth-child(even) td{background:none;}
.page .course-table tbody tr:hover td{background:rgba(138, 52, 2, .06);}

@media(min-width:720px){
  .page .course-table td:first-child,
  .page .course-table th:first-child{width:46%;}
  .page .course-table td:nth-child(2),
  .page .course-table th:nth-child(2){width:20%;}
  .page .course-table td:nth-child(3),
  .page .course-table td:nth-child(4),
  .page .course-table th:nth-child(3),
  .page .course-table th:nth-child(4){width:17%;white-space:nowrap;}
}

@media(max-width:719px){
  .page .course-table tr{
    padding:14px 2px;
    margin-bottom:0;
  }
  .page .course-table td:first-child{
    font-size:1.14rem;border-bottom:0;padding-bottom:4px;margin-bottom:2px;
  }
  .page .course-table td[data-label]{font-size:.98rem;}
  .page .course-table td[data-label]::before{
    font-size:.82rem;color:rgba(138, 52, 2, .75);
  }
}