/* =============================================================================
 * Spotidesign-2 — spokojny skin siatek (Moje kursy / Ścieżki / Dashboard).
 *
 * Wyłącznie NADPISANIA wyglądu. Zero zmian markupu i zachowania. Cały arkusz
 * jest pod `body.mssu-skin-spotidesign2`, więc obowiązuje tylko gdy admin włączy
 * skin (Konfiguracja Spoti → Strony (shortcode'y) → Wygląd kafelek). Specyficzność
 * `body.<skin> .msat-*` bije reguły bazowe z msat_shortcodes_css() (account-tabs.php).
 *
 * Cel: odwzorować spokój siatki BuddyBoss + LearnDash (devspoti) — przy dużej
 * liczbie kafelek redukuje rozproszenie uwagi:
 *   - hover BEZ skoku (bez translateY), tylko miękki, rozmyty cień,
 *   - hairline ramka bez zmiany koloru na hover,
 *   - meta jako wyblakły tekst (zamiast pigułki z tłem),
 *   - stonowany stos miniatur na karcie ścieżki (bez „wachlarza"),
 *   - akcent = kolor marki platformy (var(--mssu-brand), z msat_shortcodes_css()).
 * ========================================================================== */

body.mssu-skin-spotidesign2 {
    --sd2-radius: 10px;
    --sd2-border: #D6D9DD;
    --sd2-hover-shadow: 0 4px 28px rgba(18, 43, 70, 0.10);
    --sd2-title: #122b46;
    --sd2-meta: #98a2b3;
    --sd2-grid-max: 1440px;
}

/* --- Siatki: węższy obszar (jak BuddyBoss) + więcej oddechu ------------------ */
/* Bazowy grid robi break-out na 100vw → kafelki rozciągają się za szeroko.
   Ograniczamy szerokość (dosunięte do lewej, za paskiem bocznym) + toolbar/greeting
   trzymamy w tej samej szerokości, żeby tytuł/wyszukiwarka równały się z gridem. */
body.mssu-skin-spotidesign2 .msat-my-courses,
body.mssu-skin-spotidesign2 .msat-dashboard,
body.mssu-skin-spotidesign2 .msat-paths {
    gap: 24px;
    max-width: var(--sd2-grid-max);
}
body.mssu-skin-spotidesign2 .msat-my-courses-toolbar,
body.mssu-skin-spotidesign2 .msat-dashboard__greeting-wrap {
    max-width: var(--sd2-grid-max);
}
/* Widok „kursy w ścieżce" (/sciezka/<slug>/): tu break-out i padding paska bocznego
   siedzą na wrapperze .msat-path-single, a wewnętrzny grid jest width:100%. Cap nakładamy
   więc na wrapper — inaczej kafelki rozjeżdżają się szerzej niż na siatce głównej. */
body.mssu-skin-spotidesign2 .msat-path-single {
    max-width: var(--sd2-grid-max);
}

/* --- Niższa grafika: proporcje zbliżone do BuddyBoss (~52% wys. = 1.9:1) ----- */
body.mssu-skin-spotidesign2 .msat-course-card__image,
body.mssu-skin-spotidesign2 .msat-dashboard__tile-image {
    aspect-ratio: 1.9 / 1;
}

/* --- Karty (kurs / kafelek dashboardu / ścieżka): płaskie w spoczynku -------- */
body.mssu-skin-spotidesign2 .msat-course-card,
body.mssu-skin-spotidesign2 .msat-dashboard__tile,
body.mssu-skin-spotidesign2 .msat-path-card {
    border-radius: var(--sd2-radius);
    border-color: var(--sd2-border);
    box-shadow: none;
    transition: box-shadow 0.2s ease;
}

/* Hover = TYLKO miękki cień. Bez skoku (transform), bez zmiany koloru ramki. */
body.mssu-skin-spotidesign2 .msat-course-card:hover,
body.mssu-skin-spotidesign2 .msat-dashboard__tile:hover,
body.mssu-skin-spotidesign2 .msat-path-card:hover {
    transform: none;
    border-color: var(--sd2-border);
    box-shadow: var(--sd2-hover-shadow);
}

/* --- Tytuł: navy, stały. Na hover karty tytuł NIE zmienia koloru — jedynym
       efektem hover jest miękki cień karty (reguła wyżej). --------------------- */
body.mssu-skin-spotidesign2 .msat-course-card__title,
body.mssu-skin-spotidesign2 .msat-dashboard__tile-title {
    color: var(--sd2-title);
    line-height: 1.25;
}

/* --- Meta „liczba lekcji" / „czas kursu": pigułka → wyblakły tekst ----------- */
body.mssu-skin-spotidesign2 .msat-course-card__lessons,
body.mssu-skin-spotidesign2 .msat-course-card__duration {
    background: transparent;
    padding: 0;
    color: var(--sd2-meta);
}

/* --- Przycisk CTA — 3 warianty wybierane w ustawieniach ---------------------- */

/* Wspólne: radius spójny ze skinem + niższy (smuklejszy) przycisk. */
body.mssu-skin-spotidesign2 .msat-course-card__cta {
    border-radius: var(--sd2-radius);
    padding: 7px 14px;
}

/* GHOST — w spoczynku obrys + tekst w kolorze marki; wypełnia się na hover karty.
   Najspokojniejszy przy wielu kafelkach (brak ściany kolorowych pasków). */
body.mssu-skin-spotidesign2.mssu-cta-ghost .msat-course-card__cta {
    /* !important na background/border, bo bazowa reguła kart katalogowych
       (.msat-course-card--catalog .msat-course-card__cta) wymusza pełne tło marki
       przez !important. Bez tego karty „Zobacz kurs" zostawały wypełnione (tło marki),
       a tekst — wygrywający na specyficzności — też był w kolorze marki → napis niewidoczny. */
    background: transparent !important;
    color: var(--mssu-brand, #1e40af) !important;
    border: 1px solid var(--mssu-brand, #1e40af) !important;
    transition: background 0.2s ease, color 0.2s ease;
}
/* Na hover karty przycisk-obrys NIE wypełnia się kolorem — wystarczy cień karty.
   Neutralizujemy tylko bazowy brightness(.88), żeby obrys został czysty. */
body.mssu-skin-spotidesign2.mssu-cta-ghost .msat-course-card:hover .msat-course-card__cta,
body.mssu-skin-spotidesign2.mssu-cta-ghost .msat-path-card:hover .msat-course-card__cta {
    filter: none;
}

/* SOLID — jak dotychczas (pełny kolor marki), tylko z radiusem skinu. */
/* (bez dodatkowych reguł — baza już renderuje pełny przycisk) */

/* --- Karta ścieżki: stonowany stos miniatur zamiast rozłożonego „wachlarza" -- */
/* Mniej szarego marginesu wokół miniatur: niższy kontener, miniatura wyżej i szersza
   (baza: stack 16/11, item top:30px width:82% → dużo pustego tła wokół). */
body.mssu-skin-spotidesign2 .msat-path-card__stack {
    aspect-ratio: 16 / 10;
}
body.mssu-skin-spotidesign2 .msat-path-card__stack-item {
    top: 14px;
    width: 90%;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);
    transition: transform 0.25s ease;
}
body.mssu-skin-spotidesign2 .msat-path-card__stack-item[data-idx="0"] {
    transform: translateX(-50%) rotate(0deg);
}
body.mssu-skin-spotidesign2 .msat-path-card__stack-item[data-idx="1"] {
    transform: translateX(-52%) rotate(-1.5deg);
}
body.mssu-skin-spotidesign2 .msat-path-card__stack-item[data-idx="2"] {
    transform: translateX(-48%) rotate(1.5deg);
}
body.mssu-skin-spotidesign2 .msat-path-card__stack-item[data-idx="3"] {
    transform: translateX(-50%) rotate(-0.5deg) translateY(3px);
}
/* Hover = wspólny, delikatny lift (bez rozsuwania na boki). */
body.mssu-skin-spotidesign2 .msat-path-card:hover .msat-path-card__stack-item[data-idx="0"] {
    transform: translateX(-50%) rotate(0deg) translateY(-2px);
}
body.mssu-skin-spotidesign2 .msat-path-card:hover .msat-path-card__stack-item[data-idx="1"] {
    transform: translateX(-52%) rotate(-2deg) translateY(-2px);
}
body.mssu-skin-spotidesign2 .msat-path-card:hover .msat-path-card__stack-item[data-idx="2"] {
    transform: translateX(-48%) rotate(2deg) translateY(-2px);
}
body.mssu-skin-spotidesign2 .msat-path-card:hover .msat-path-card__stack-item[data-idx="3"] {
    transform: translateX(-50%) rotate(-1deg) translateY(1px);
}