/* ==============================================
   AULA VISUAL POLISH — light-mode refinement layer
   Зарежда се СЛЕД style.css (виж layouts/_styles.php).
   Само геометрия (радиуси/отстояния), елевация (сенки =
   rgba opacity варианти на --color-bg-dark) и движение.
   БЕЗ нови цветове — само vars от colors.css.
   Цветово-зависимите правила са scope-нати към light mode
   (body:not(.dark-mode)) — dark mode се полира отделно.
   ============================================== */

/* Elevation токените (--shadow-*) живеят в colors.css при
   останалите дизайн токени (radius scale, цветове). */

/* Плавен anchor scroll (in-page навигацията на salespages) */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Селекция на текст в бранд цвят */
body:not(.dark-mode) ::selection {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* ----------------------------------------------
   1. Инфо-боксове: wireframe рамки → меки карти
   (стат броячи на home/kurs-*, стъпки, методи за
   плащане). Тежката 2px плътна рамка става тънка +
   мека сянка; радиусът се прибира от 20px към скалата.
   ---------------------------------------------- */
.counter-item,
.step-item,
.payment-options-item {
    border-radius: 16px;
}

body:not(.dark-mode) .counter-item,
body:not(.dark-mode) .step-item,
body:not(.dark-mode) .payment-options-item {
    border: 1px solid var(--color-border-light);
    background-color: var(--color-bg-surface);
    box-shadow: var(--shadow-base);
}

/* Лога на компании (home/firmi carousel) — сваляме тежката
   2px teal рамка до тънка неутрална + мека сянка */
body:not(.dark-mode) .ilogos-carousel-slide .logo-thumb,
body:not(.dark-mode) .swiper-slide .logo-thumb {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
}

/* ----------------------------------------------
   2. Course карти
   Каталогът рендерира <div class="courses-item"> (thumb +
   бяло info тяло) → пълна карта с елевация. Home/grid
   мини-картите са <a class="courses-item"> с прозрачен фон
   → само hover lift + сянка на thumbnail-а (сянка върху
   прозрачния <a> рисува "призрачен" панел).
   margin-ът се мести от вътрешния .courses-info върху
   самата карта, за да не "виси" сянката под нея.
   ---------------------------------------------- */
.courses-item {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
div.courses-item {
    border-radius: var(--radius-lg);
    margin-bottom: 30px;
}
div.courses-item .courses-info {
    margin-bottom: 0;
}
.swiper-slide div.courses-item {
    margin-bottom: 0;
}

body:not(.dark-mode) div.courses-item {
    background-color: var(--color-bg-surface);
    box-shadow: var(--shadow-sm);
}
body:not(.dark-mode) div.courses-item:hover {
    box-shadow: var(--shadow-hover);
}

/* Thumbnail-ите не се затъмняват в покой — само лек hover hint
   (light only; dark mode пази оригиналния overlay контраст) */
body:not(.dark-mode) .courses-item .courses-thumb::before {
    background-color: transparent;
}
body:not(.dark-mode) .courses-item:hover .courses-thumb::before {
    background-color: var(--overlay-thumb-hover);
}

/* Home/grid мини карти (_courseGrid: home, firmi, abonament) —
   сянката е директно върху thumbnail-а (без бяла рамка/повърхност);
   --shadow-base, за да се чете и върху пъстри изображения. */
.courses-homepage img {
    transition: box-shadow 0.18s ease;
}
body:not(.dark-mode) .courses-homepage img {
    box-shadow: var(--shadow-base);
}
body:not(.dark-mode) a.courses-item:hover .courses-homepage img {
    box-shadow: var(--shadow-hover);
}

@media (prefers-reduced-motion: no-preference) {
    .courses-item:hover {
        transform: translateY(-3px);
    }
}

/* ----------------------------------------------
   3. Бутони — унифициран радиус + micro-lift
   ---------------------------------------------- */
.aula-price-button {
    border-radius: var(--radius-base);
}

.btn,
.btn-aula {
    transition: background-color 0.18s ease, border-color 0.18s ease,
        color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

body:not(.dark-mode) .btn-aula.primary,
body:not(.dark-mode) .btn-aula.secondary {
    box-shadow: var(--shadow-sm);
}
body:not(.dark-mode) .btn-aula.primary:hover:not(:disabled):not(.disabled),
body:not(.dark-mode) .btn-aula.secondary:hover:not(:disabled):not(.disabled) {
    box-shadow: var(--shadow-hover);
}

/* Големите CTA бутони (btn-lg = основните конверсионни
   бутони по salespages) — по-щедър padding + елевация */
.btn-lg {
    padding: 10px 24px;
    border-radius: var(--radius-base);
}
body:not(.dark-mode) .btn-lg.btn-warning,
body:not(.dark-mode) .btn-lg.btn-secondary {
    box-shadow: var(--shadow-sm);
}
body:not(.dark-mode) .btn-lg.btn-warning:hover:not(:disabled):not(.disabled),
body:not(.dark-mode) .btn-lg.btn-secondary:hover:not(:disabled):not(.disabled) {
    box-shadow: var(--shadow-hover);
}

@media (prefers-reduced-motion: no-preference) {
    /* .plyr-video-action е позициониран с translateX(-50%) (style.css) —
       изключваме го, иначе micro-lift-ът замества центрирането и бутонът
       подскача настрани при hover (locked-lesson CTA за гости).
       .aula-price-button има същото transform-базирано центриране и собствен
       hover lift в price-widget.css, затова също остава извън общото правило.
       :not(:disabled):not(.disabled) — Bootstrap конвенцията: изключените
       бутони (напр. „Плати" при празна количка) не бива да се държат
       като кликаеми при hover. */
    .btn-aula:hover:not(.plyr-video-action):not(.aula-price-button):not(:disabled):not(.disabled),
    .btn-lg:hover:not(.plyr-video-action):not(.aula-price-button):not(:disabled):not(.disabled) {
        transform: translateY(-1px);
    }
    .btn-aula:active:not(.plyr-video-action):not(.aula-price-button):not(:disabled):not(.disabled),
    .btn-lg:active:not(.plyr-video-action):not(.aula-price-button):not(:disabled):not(.disabled) {
        transform: translateY(0);
    }

    /* Плаващият кръгъл бутон „Създай нов трик" (/page/guides) е .btn.btn-lg и
       има собствен scale(1.1) hover в guide.css. Общото правило по-горе е
       по-специфично от него и би заменило увеличаването с translateY, затова
       го възстановяваме тук — същата специфичност, но по-късно в реда.
       :active също е scale, иначе бутонът се смалява при клик. */
    .sticky-create-button .btn.btn-lg:hover:not(:disabled):not(.disabled),
    .sticky-create-button .btn.btn-lg:active:not(:disabled):not(.disabled) {
        transform: scale(1.1);
    }
}

/* Видим keyboard focus за интерактивните елементи */
.btn:focus-visible,
.btn-aula:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* ----------------------------------------------
   4. Pricing боксове — по-мека рамка на обикновените,
   акцентният (popular) запазва teal рамката си
   ---------------------------------------------- */
body:not(.dark-mode) .aula-price-box:not(.aula-price-box--popular) {
    border-width: 1px;
    border-color: var(--color-border-light);
}

/* ----------------------------------------------
   5. Reduced-motion reset
   Transition декларациите по-горе (.courses-item, .courses-homepage
   img, .btn/.btn-aula) стоят извън no-preference guard-а и пребиват
   Bootstrap-овия `transition: none`. Transform lift-овете вече са
   guard-нати; тук гасим и оставащите цвят/сянка fade-ове, за да е
   „reduced-motion уважен навсякъде" (както описва PR-ът).
   ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html,
    body {
        scroll-behavior: auto;
    }

    .courses-item,
    .courses-homepage img,
    .btn,
    .btn-aula {
        transition: none;
    }
}