/* ===== SHANTI LIGHT - UNIFIED DESIGN SYSTEM ===== */
/* 
   Унифицированные стили на основе паттернов shanti-yoga-club.html
   Применяется единая типографика, отступы и компоненты
*/

/* === SHANTI LIGHT OVERRIDES === */
/* Переопределяем только необходимые стили для унификации с yoga-club */

/* === HERO SECTION SPECIFIC === */
/* Унифицированный hero padding - mobile-first */
.course-hero {
    padding-top: calc(var(--header-height-mobile, 70px) + 16px);
    padding-bottom: 32px;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    overflow: hidden;
    min-height: auto; /* Mobile: контент определяет высоту */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: var(--color-white);
}

@media (min-width: 768px) {
    .course-hero {
        min-height: 100vh;
        min-height: 100dvh;
        padding-bottom: 40px;
    }
}

/* === MOBILE HERO IMAGE WRAPPER === */
/* Унифицировано с главной страницей: 60vh изображение + контент ниже */
.hero-image-wrapper-mobile {
    display: none;
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 400px;
    max-height: 600px;
    overflow: hidden;
    z-index: 0;
}

@media (max-width: 767px) {
    .hero-image-wrapper-mobile {
        display: block;
    }
}

/* Mobile layout - poster design like index.html */
@media (max-width: 767px) {
    .course-hero {
        padding-top: 0 !important;
        padding-bottom: 40px !important;
        min-height: auto !important;
        height: auto !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        background: white !important;
    }
    
    /* Show mobile content container */
    .course-hero > .container {
        display: block;
        position: relative;
        padding: 24px 24px 0 24px;
    }
    
    /* Hide desktop-only elements */
    .course-hero .desktop-only,
    .course-hero .hero-content-right {
        display: none !important;
    }
}

.hero-image-wrapper-mobile .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    animation: luxuryFadeIn 1s ease-out;
}

/* Premium gradient overlay - унифицировано с index.html (светлый градиент сверху) */
.hero-image-wrapper-mobile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.15) 40%,
        rgba(0, 0, 0, 0.05) 70%,
        transparent 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Hero Overlay for Mobile - унифицировано с index.html (белый градиент) */
.hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 24px 20px;
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(255, 255, 255, 0.92) 40%,
        rgba(255, 255, 255, 0.7) 70%,
        transparent 100%
    );
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hero-overlay .course-hero-title-mobile {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 6vw, 2.5rem);
    text-align: center;
    margin: 0;
    max-width: 320px;
    animation: luxuryFadeIn 0.8s ease-out forwards;
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--color-primary, #1a1a1a);
}

.course-hero-title-mobile em {
    font-style: italic;
    color: var(--color-accent, #CFA15B);
}

.hero-label-mobile {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: var(--fs-mobile-xs, 12px);
    font-weight: var(--fw-mobile-light, 300);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: var(--ls-mobile-widest, 0.12em);
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

/* Hero Wave - скрываем волну, так как используем белый градиент */
.hero-image-wrapper-mobile .hero-wave,
.hero-wave {
    display: none;
}

/* === MOBILE CONTENT SECTION === */
/* Контент под изображением - унифицировано с index.html */
@media (max-width: 767px) {
    .course-hero .hero-description-section {
        text-align: center;
        padding: 0;
        margin-bottom: 24px;
    }
    
    .course-hero .course-hero-description {
        font-family: var(--font-primary);
        font-size: var(--fs-mobile-base, 16px);
        line-height: var(--lh-mobile-relaxed, 1.65);
        font-weight: var(--fw-mobile-light, 300);
        color: var(--color-text-light, #666);
        margin: 0;
        text-align: center;
        animation: luxuryFadeIn 1s ease-out 0.3s forwards;
        opacity: 0;
    }
    
    .course-hero .course-hero-description strong {
        color: var(--color-primary, #1a1a1a);
        font-weight: var(--fw-mobile-medium, 500);
    }
    
    /* CTA кнопка - черный стиль как на главной */
    .course-hero .hero-cta-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
        width: 100%;
    }
    
    .course-hero .hero-cta-group .btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 16px 48px;
        border-radius: 999px;
        font-family: var(--font-primary);
        font-size: 0.9375rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-decoration: none;
        background: #000000;
        color: #FFFFFF;
        border: none;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        white-space: nowrap;
        width: 100%;
        max-width: 320px;
    }
    
    .course-hero .hero-cta-group .btn-primary:hover,
    .course-hero .hero-cta-group .btn-primary:active {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    }
    
    .course-hero .hero-cta-group .btn-secondary {
        font-family: var(--font-primary);
        font-size: var(--fs-mobile-sm, 14px);
        color: var(--color-text-light, #666);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        transition: color 0.2s ease;
    }
    
    .course-hero .hero-cta-group .btn-secondary:hover {
        color: var(--color-accent, #CFA15B);
    }
}

/* Subtle gradient overlay */
.course-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: radial-gradient(ellipse at center top, 
        rgba(249, 250, 240, 0.1) 0%, 
        transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* === КОНТЕЙНЕР === */
/* Базовые стили .container управляются через main.css и unified-responsive.css */
.course-hero .container {
    position: relative;
    z-index: 2;
    /* padding и max-width наследуются из unified-responsive.css */
}

/* === HERO CONTENT GRID - MOBILE FIRST === */
.hero-content-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    /* opacity animated via data-animate in JS */
}

/* === LEFT CONTENT COLUMN === */
.hero-content-left {
    text-align: center;
    max-width: 100%;
    order: 1;
}

/* === RIGHT CONTENT COLUMN === */
.hero-content-right {
    width: 100%;
    max-width: 450px;
    order: 2;
    display: none; /* Hidden by default on mobile */
    /* opacity animated via data-animate in JS */
}

/* Hero Image Wrapper для десктопа */
.hero-image-wrapper {
    position: relative;
    width: 100%;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-luxury-card);
}

.hero-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile: скрываем правую колонку */
@media (max-width: 767px) {
    .hero-content-right {
        display: none !important;
    }
}

/* Старые стили hero-content-wrapper удалены - используется hero-content-grid */

/* === ЗАГОЛОВКИ === */
.hero-title-section {
    text-align: center;
    margin-bottom: 12px; /* Reduced for mobile space optimization */
    margin-top: 20px; /* Добавлен отступ сверху для мобильных - унификация с yoga-club */
    opacity: 0;
    animation: luxuryFadeIn 1s ease-out forwards;
    position: relative;
}

/* course-hero-title управляется через unified-responsive.css */

/* Hero Label - Unified with private-sessions */
.hero-label {
    margin-top: 12px;
    margin-bottom: 0;
    opacity: 0;
    animation: luxuryFadeIn 1.2s ease-out 0.3s forwards;
}

.hero-label-text {
    font-family: var(--font-primary);
    font-size: var(--fs-mobile-xs); /* 12px - delicate and unified */
    font-weight: var(--fw-mobile-light); /* 300 */
    color: var(--color-text); /* Changed from muted to text for consistency */
    text-transform: uppercase;
    letter-spacing: var(--ls-mobile-widest); /* 0.12em ultra wide */
    padding: 0;
    background: transparent;
    border-radius: 0;
    display: inline-block;
    position: relative;
}

/* === ОПИСАТЕЛЬНЫЙ ТЕКСТ === */
.hero-description-section {
    width: 100%;
    max-width: 720px;
    text-align: center;
    margin: 0 auto;
}

/* course-hero-description базовая типографика управляется через typography.css */
/* strong стили также в typography.css */

.course-hero-description {
    /* Unified mobile-first typography matching private-sessions */
    font-family: var(--font-primary);
    font-size: var(--fs-mobile-base); /* 16px for mobile - comfortable reading */
    line-height: var(--lh-mobile-relaxed); /* 1.65 */
    font-weight: var(--fw-mobile-light); /* 300 */
    color: var(--color-text-light);
    /* Page-specific layout */
    margin: 0;
    text-align: center;
    padding: 0 10px;
    /* Animation */
    opacity: 0;
    animation: luxuryFadeIn 1s ease-out 0.2s forwards;
}

.course-hero-description strong {
    color: var(--color-primary);
    font-weight: var(--fw-mobile-medium); /* 500 */
}

/* === HERO IMAGE SECTION === */
.hero-image-section {
    margin-top: 12px;
    margin-bottom: 4px;
    position: relative;
    width: 92%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.hero-banner {
    width: 100%;
    height: 40vh;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.hero-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Old benefits styles removed - now using for-you-section from yoga-club */

/* === CTA BUTTON === */
.hero-cta {
    margin-top: var(--spacing-lg);
    text-align: center;
}

.cta-button {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-white);
    background: var(--color-accent);
    padding: 16px 48px;
    border-radius: 2px;
    border: none;
    cursor: pointer;
    transition: var(--transition-base);
    text-transform: none;
    letter-spacing: 0.02em;
    display: inline-block;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(253, 167, 0, 0.2);
}

.cta-button:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(253, 167, 0, 0.3);
}

/* === СЕКЦИИ КОНТЕНТА === */
/* Общие стили секций */
.course-program,
.how-classes-work,
.course-results,
.final-pricing {
    padding: var(--spacing-xl) 0;
    background: var(--color-white);
}

/* Стили .container наследуются из main.css */

/* === PROGRAM SECTION === */
.course-program {
    background: var(--color-background-light);
}

/* === LUXURY WELLNESS COURSE PROGRAM SECTION === */
/* Refined mobile-first design following luxury wellness principles */
/* Based on JSON specifications: calm, airy, understated elegance */

.course-program {
    /* Unified mobile section padding */
    padding: var(--spacing-section-mobile) 0; /* 48px - unified with for-you-section */
    background: var(--color-background);
    position: relative;
    overflow: hidden;
}

/* Subtle luxury background enhancement */
.course-program::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(253, 167, 0, 0.02) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0.8;
}

/* Стили .container наследуются из main.css */
.course-program .container {
    position: relative;
    z-index: 1;
}

/* Refined header spacing */
.course-program .section-header {
    text-align: center;
    margin-bottom: var(--lw-header-margin-mobile);
}

.course-program .section-title {
    font-family: var(--font-heading);
    font-size: var(--lw-title-mobile);
    font-weight: var(--lw-title-weight);
    letter-spacing: var(--lw-title-spacing);
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

/* Program Details - Capsules */
.hero-program-details {
    margin-bottom: var(--space-xl);
    text-align: center;
}

.program-intro {
    margin-bottom: var(--space-sm);
    text-align: center;
}

.program-label {
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-ultra);
    margin-bottom: var(--space-sm);
    display: block;
}

/* Luxury capsules row */
.caps-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.cap {
    padding: 8px 20px;
    font-family: var(--font-primary);
    font-size: var(--fs-mobile-sm); /* 14px - unified mobile token */
    font-weight: var(--fw-mobile-normal); /* 400 - unified token */
    line-height: 1;
    color: var(--color-text);
    background: rgba(249, 250, 244, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 9999px;
    white-space: nowrap;
    transition: background var(--transition-base);
}

/* Program Content Wrapper */
.program-content {
    margin-top: var(--spacing-section-gap-mobile); /* 32px gap after caps-row */
}

/* Practices Section */
.practices-section {
    margin-bottom: var(--spacing-section-gap-mobile); /* 32px gap before wellness photo */
}

/* Practices Title ("ОСНОВИ:") - Mobile First */
/* Выровнен по левому краю как и контент в карточках */
.practices-title {
    font-family: var(--font-primary);
    font-size: var(--fs-mobile-sm); /* 14px - small caps style */
    font-weight: var(--fw-mobile-medium); /* 500 */
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-mobile-wider); /* 0.08em */
    margin-top: 0;
    margin-bottom: 20px;
    text-align: left;
    padding-left: 4px; /* Визуальное выравнивание с контентом карточек */
}

/* Mobile-first luxury grid */
.practices-grid {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Refined tight spacing for luxury card flow */
}

/* Luxury wellness cards - mobile first (AloYoga inspired) */
/* Унифицированный padding карточек: 24px */
.practice-item {
    /* Clean white card with subtle cream tint */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px) saturate(100%);
    -webkit-backdrop-filter: blur(10px) saturate(100%); /* Safari support */
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--border-radius-lg); /* 16px - luxury rounded corners */
    padding: 24px; /* Унифицировано */
    position: relative;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    
    /* Soft luxury shadow */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04), 
                0 1px 3px rgba(0, 0, 0, 0.02);
    
    /* Luxury entrance animation with stagger */
    opacity: 0;
    transform: translateY(20px);
    animation: luxuryFadeIn var(--lw-appear-duration) var(--lw-appear-easing) calc(var(--card-index, 1) * 0.08s) both;
}

/* Card index variables for stagger effect */
.practice-item:nth-child(1) { --card-index: 1;
}
.practice-item:nth-child(2) { --card-index: 2;
}
.practice-item:nth-child(3) { --card-index: 3;
}
.practice-item:nth-child(4) { --card-index: 4;
}
.practice-item:nth-child(5) { --card-index: 5;
}
.practice-item:nth-child(6) { --card-index: 6;
}
.practice-item:nth-child(7) { --card-index: 7;
}
.practice-item:nth-child(8) { --card-index: 8;
}
.practice-item:nth-child(9) { --card-index: 9;
}
.practice-item:nth-child(10) { --card-index: 10;
}

/* Luxury mobile tap feedback - AloYoga style */
.practice-item:active {
    background: rgba(249, 250, 240, 0.98); /* Soft cream on tap */
    transform: scale(0.98);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06),
                0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Luxury number styling - AloYoga inspired */
.practice-number {
    font-family: var(--font-primary);
    font-size: var(--fs-mobile-sm); /* 14px - refined visible size */
    font-weight: var(--fw-mobile-medium); /* 500 - medium weight for presence */
    color: var(--gold-luxe); /* Luxury gold accent */
    letter-spacing: var(--ls-mobile-widest); /* 0.12em - luxury wide spacing */
    text-transform: uppercase;
    display: block;
    margin: 0 0 14px 0; /* Refined spacing */
    line-height: 1;
    opacity: 0.9; /* Subtle sophistication */
}

/* Premium practice text - unified mobile tokens */
.practice-text {
    font-family: var(--font-primary);
    font-size: var(--fs-mobile-base); /* 16px - unified mobile token */
    font-weight: var(--fw-mobile-normal); /* 400 - unified token */
    line-height: var(--lh-mobile-relaxed); /* 1.65 - unified token */
    color: var(--lw-text-color);
    margin: 0;
}

/* Accessibility enhancements */
.practice-item:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.practice-item:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* High contrast support */

/* Reduced motion accessibility */

/* === LUXURY WELLNESS TABLET & DESKTOP STYLES === */

/* Tablet enhancement (768px+) */

/* Desktop luxury enhancement (1024px+) */

/* Wide desktop refinements (1200px+) */

/* section-title и section-label стили управляются через main.css */

/* === RESPONSIVE DESIGN === */
/* Все медиа-запросы управляются через unified-responsive.css */
/* Здесь только уникальные стили для компонентов страницы */

/* Планшеты - только уникальные стили */

/* Десктоп - только уникальные стили */

/* ================================================== */
/* === HOW CLASSES WORK SECTION === */
/* Стили определены в shared-sections.css */

/* === TABLET STYLES FOR HOW CLASSES WORK === */

/* === DESKTOP STYLES FOR HOW CLASSES WORK === */

/* === LARGE DESKTOP STYLES === */

/* === FOR YOU SECTION - MOBILE-FIRST LUXURY === */
.for-you-section {
    /* Mobile-first padding - unified with course-program */
    padding: var(--spacing-section-mobile) 0; /* 48px - matches course-program */
    background: var(--color-background);
    position: relative;
    overflow: hidden;
}

/* Subtle mobile gradient */
.for-you-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(253, 167, 0, 0.03) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0.5;
}

.for-you-section .container {
    position: relative;
    z-index: 1;
}

/* Mobile-first header */
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-subtitle-mobile); /* 32px - unified */
}

/* Mobile-optimized grid */
.benefits-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-card-mobile); /* 20px - unified card gap */
}

/* Mobile-first luxury cards - Redesigned with large numbers */
.benefit-card {
    background: var(--color-bg-sand, #FAF6F1);
    border: none;
    border-radius: 24px;
    padding: 48px 32px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Mobile entrance animation */
    opacity: 0;
    transform: translateY(16px);
    animation: mobileReveal 0.5s ease-out forwards;
    animation-delay: calc(var(--card-index, 1) * 0.08s);
}

/* Hover effect */
.benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

@keyframes mobileReveal {
    to {
        opacity: 1;
        transform: translateY(0);
}
}

.benefit-card:nth-child(1) { --card-index: 1;
}
.benefit-card:nth-child(2) { --card-index: 2;
}
.benefit-card:nth-child(3) { --card-index: 3;
}
.benefit-card:nth-child(4) { --card-index: 4;
}

/* Remove unused pseudo-elements for mobile */
.benefit-card::before,
.benefit-card::after,
.benefit-card-inner {
    display: none;
}

/* Mobile tap feedback */
.benefit-card:active {
    background: var(--color-background-soft);
    transform: scale(0.98);
}

/* Large decorative number - Playfair Display italic */
.benefit-number {
    position: static;
    display: block;
    width: auto;
    height: auto;
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: clamp(4rem, 12vw, 6rem); /* Большая красивая цифра */
    font-weight: 400;
    font-style: italic;
    color: var(--color-accent, #FDA700);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 24px;
    border: none;
    background: none;
}

/* Centered content wrapper */
.benefit-content {
    text-align: center;
    max-width: 280px;
    width: 100%;
}

/* Elegant text styling */
.benefit-text {
    font-family: var(--font-primary);
    font-size: 1.0625rem; /* 17px */
    line-height: 1.6;
    color: var(--color-text, #1a1a1a);
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* Remove strong styling - unified elegant look */
.benefit-text strong {
    color: inherit;
    font-weight: inherit;
    background: none;
    padding-bottom: 0;
}

/* Accessibility for mobile */
.benefit-card:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* High contrast support */

/* Reduced motion */

/* === TABLET STYLES === */

/* === DESKTOP STYLES === */

/* -------------------------------------------------- */
/* Hero CTA Buttons - unify with club page styles */
/* -------------------------------------------------- */

.hero-cta .btn-primary {
    background: var(--color-primary, #FDA700);
    color: var(--color-background, #FFFDEF);
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-weight: 300;
}

.hero-cta .btn-primary:hover {
    background: var(--color-accent, #FDC560);
    transform: translateY(-1px);
}

/* Accent outline variant */
.hero-cta .btn-outline {
    background: transparent;
    color: var(--color-accent, #FDA700);
    border: 1px solid var(--color-accent, #FDA700);
    font-weight: 300;
}

.hero-cta .btn-outline:hover {
    background: rgba(253, 167, 0, 0.05);
    border-color: var(--color-accent, #FDC560);
    color: var(--color-accent, #FDC560);
    transform: translateY(-1px);
}

.hero-cta .btn-primary svg,
.hero-cta .btn-outline svg {
    transition: transform var(--transition-fast, 0.2s ease-out);
}

.hero-cta .btn-primary:hover svg,
.hero-cta .btn-outline:hover svg {
    transform: translateX(2px);
    animation: iconFloat 1s ease-in-out infinite;
}

/* -------------------------------------------------- */
/* Hero CTA Layout (match Yoga Club sizing & spacing) */
/* -------------------------------------------------- */

.hero-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: stretch;
    margin: 12px auto 0;
    max-width: 360px; /* keep neat on mobile */
}

/* Стили .btn управляются через main.css */
/* hero-cta специфичные стили управляются через main.css строки 3257-3275 */

/* Adjust hero-cta width: full container on mobile */
.hero-cta {
    width: 100%; /* stretch to container like yoga-club */
    max-width: none; /* remove earlier limit */
}

/* Update hero-cta spacing to mirror club */
.hero-cta {
    margin-top: 24px;
    gap: 10px;
}

/* ================================================== */
/* Mobile Styles for Capsules */
/* ================================================== */

/* ==================================================
   LUXURY WELLNESS PHOTO BLOCK (Дихання / Медитації)
   Mobile-first premium styling
   ================================================== */

.program-wellness-photo {
    padding: var(--lw-section-padding-mobile);
    padding-bottom: 0;
}

/* Image wrapper - clean without overlays */
.wellness-image-wrapper {
    position: relative;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 24px;
    overflow: hidden;
}

/* Bonus section styles removed - using elegant overlay instead */

.wellness-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 75vh; /* portrait-friendly: shows full body on mobile */
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    object-fit: cover;
    object-position: center;
}

/* ===== MOBILE OVERLAY CARDS ===== */
.mobile-overlay-categories {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Refined tight gap for luxury stacking */
    padding: 20px;
    background: linear-gradient(to top, 
        rgba(0, 0, 0, 0.15) 0%, 
        transparent 100%); /* Subtle gradient backdrop */
}

/* OLD: Overlay wellness cards - deprecated */
.wellness-category,
.mobile-overlay-categories,
.desktop-overlay-cards {
    display: none !important;
}

/* === ELEGANT TEXT OVERLAY - 2026 TREND === */
/* Minimal, human, intentional typography */

.elegant-overlay {
    position: absolute;
    bottom: 24px;
    left: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 5;
}

.overlay-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Thin accent line - minimal elegance */
.label-line {
    width: 2px;
    height: 100%;
    min-height: 40px;
    background: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
    border-radius: 1px;
}

.label-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.label-title {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 1.25rem;
    font-weight: 400;
    color: #FFFFFF;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.label-subtitle {
    font-family: var(--font-primary, 'Inter', sans-serif);
    font-size: 0.8125rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Dark gradient at bottom for text readability */
.wellness-image-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.2) 40%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 2;
    border-radius: 0 0 24px 24px;
}

/* Tablet+ elegant overlay */
@media (min-width: 768px) {
    .elegant-overlay {
        bottom: 32px;
        left: 32px;
        right: auto;
        max-width: 320px;
        gap: 20px;
    }
    
    .label-line {
        width: 3px;
        min-height: 48px;
    }
    
    .label-title {
        font-size: 1.5rem;
    }
    
    .label-subtitle {
        font-size: 0.9375rem;
    }

    .wellness-image {
        max-height: 50vh; /* desktop: keep image contained */
    }
}

/* Luxury wellness card title */
.category-title {
    font-family: var(--font-heading);
    font-size: 1.25rem; /* 20px - refined readable */
    font-weight: 400; /* Light elegance */
    letter-spacing: -0.01em; /* Subtle tightening */
    margin: 0 0 10px 0; /* Refined spacing */
    color: var(--color-text);
    line-height: 1.3;
}

/* Luxury wellness card description */
.category-desc {
    font-family: var(--font-primary);
    font-size: 0.9375rem; /* 15px - comfortable reading */
    line-height: 1.6; /* Spacious reading */
    margin: 0;
    color: var(--color-text-light); /* Subtle hierarchy */
    font-weight: 400;
}

/* Mobile tap feedback for wellness cards */
.wellness-category:active {
    background: rgba(249, 250, 240, 0.95); /* Soft cream on tap */
    transform: scale(0.98);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1),
                0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Desktop overlay cards hidden by default (mobile-first) */
.desktop-overlay-cards {
    display: none;
}

/* ===== DESKTOP / TABLET VERSION ===== */

/* === COURSE RESULTS SECTION === */
/* Унифицированные отступы секции - как в index.html */
.course-results {
    padding: var(--spacing-section-mobile, 56px) 0;
    background: var(--color-surface);
    position: relative;
}

@media (min-width: 768px) {
    .course-results {
        padding: var(--spacing-section-tablet, 80px) 0;
    }
}

@media (min-width: 1024px) {
    .course-results {
        padding: var(--spacing-section-desktop, 100px) 0;
    }
}

.course-results .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.course-results .section-header {
    text-align: center;
    margin-bottom: 48px;
}

.course-results .section-title {
    position: relative;
    display: inline-block;
    /* font-family, font-size, font-weight, letter-spacing наследуются из main.css */
}

.course-results .section-title::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--color-accent);
    border-radius: 2px;
}

.results-intro {
    max-width: 780px;
    margin: 0 auto 56px auto;
}

.results-description {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-text);
    text-align: center;
    margin: 0;
    letter-spacing: 0.01em;
}

/* Results grid стили -- определены в shared-sections.css */

/* Result item/card стили -- определены в shared-sections.css */

/* Mobile-first enhancements */

/* Dark theme adjustments */
[data-theme="dark"] .result-item {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    border-color: rgba(253, 167, 0, 0.1);
}

[data-theme="dark"] .result-item:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(253, 167, 0, 0.2);
}

[data-theme="dark"] .result-title {
    color: var(--color-text-light);
}

[data-theme="dark"] .result-text {
    opacity: 0.8;
}

[data-theme="dark"] .result-number {
    color: var(--color-accent);
    opacity: 0.05;
}

/* === ACCESSIBILITY: REDUCED TRANSPARENCY === */
/* Для пользователей с предпочтением непрозрачных элементов */

/* === COURSE PRICING SECTION === */
.course-pricing {
    background: linear-gradient(180deg, #faf9f4 0%, #f3efdc 100%);
    padding-block: 72px 64px;
    color: #111;
    position: relative;
}

.course-pricing .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Pricing Glass Container */
.pricing-glass-container {
    max-width: 88%;
    margin: 0 auto;
    border-radius: 16px;
    padding: 48px 24px;
    border: 1px solid rgba(255, 209, 100, .35);
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

.course-pricing .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.course-pricing .section-title {
    /* font-family, font-size, font-weight наследуются из main.css */
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

.pricing-intro {
    display: flex;
    justify-content: center;
    margin-bottom: 48px;
}

.payment-method {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(253, 167, 0, 0.08);
    border-radius: 999px;
    padding: 16px 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.payment-title {
    font-family: var(--font-primary);
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin: 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
}

/* Single pricing plan for course */
.pricing-single-plan {
    position: relative;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 40px 32px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: all var(--transition-medium) ease;
    max-width: 500px;
    margin: 0 auto;
}

.plan-duration {
    display: flex;
    align-items: center;
    justify-content: center;
}

.duration-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-primary);
    letter-spacing: -0.01em;
}

.plan-pricing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.price-uah, .price-usd {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.price-amount {
    font-family: var(--font-primary);
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: -0.01em;
}

.price-usd .price-amount {
    font-size: 1.5rem;
    opacity: 0.7;
}

.price-currency {
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--color-text-light);
    font-weight: 400;
}

.price-divider {
    color: var(--color-text-light);
    opacity: 0.3;
    font-weight: 300;
}

.plan-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.plan-feature {
    font-family: var(--font-primary);
    font-size: var(--fs-mobile-base); /* 16px - unified mobile token */
    color: var(--color-text);
    padding-left: 24px;
    position: relative;
}

.plan-feature::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: 600;
}

.pricing-footer {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 48px;
    padding: 0 20px;
}

.language-info {
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: center;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    color: var(--color-text-light);
}

.language-label {
    text-transform: lowercase;
    font-size: 0.875rem;
    opacity: 0.7;
}

.language-value {
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--color-primary);
    font-weight: 500;
}

/* .pricing-cta-button наследует стили от .btn-primary в main.css */
.pricing-cta-button {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 18px 40px;
    background: var(--color-primary);
    color: var(--color-background);
    border: none;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.pricing-cta-button:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(253, 167, 0, 0.15);
}

.pricing-cta-button svg {
    transition: transform var(--transition-fast);
}

.pricing-cta-button:hover svg {
    transform: translateX(2px);
    animation: iconFloat 1s ease-in-out infinite;
}

/* Mobile optimizations */

/* Tablet styles */

/* Desktop styles */

/* Dark theme pricing styles */
[data-theme="dark"] .course-pricing {
    background: rgba(25, 28, 32, 0.95);
}

[data-theme="dark"] .payment-method {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-color: rgba(253, 167, 0, 0.15);
}

[data-theme="dark"] .pricing-single-plan {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .plan-pricing {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .price-divider {
    opacity: 0.2;
}

[data-theme="dark"] .pricing-cta-button {
    background: var(--color-primary);
    color: var(--color-background);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .pricing-cta-button:hover {
    background: var(--color-secondary);
}

/* === MOBILE PRICING REDESIGN === */
/* Mobile styles for max-width: 600px */

/* Legacy sticky CTA is deprecated on this page (use .smart-cta only). */
.mobile-sticky-cta {
    display: none !important;
}

/* === MOBILE: HIDE HERO CTA (use sticky CTA instead) === */
@media (max-width: 767px) {
    .hero-cta.desktop-only {
        display: none !important; /* Override display: flex with !important */
    }
}

/* === DESKTOP ALIGNMENT WITH INDEX STYLE === */
@media (min-width: 1024px) {
    /* Desktop: hide sticky CTA bars */
    .smart-cta,
    .mobile-sticky-cta {
        display: none !important;
    }

    /* Desktop: unify vertical rhythm between sections */
    .for-you-section,
    .course-program,
    .how-classes-work,
    .course-results,
    .course-pricing {
        padding: var(--spacing-section-desktop, 100px) 0;
    }

    /* Hero layout: two-column balance */
    .course-hero {
        background: var(--color-background);
        padding-top: var(--header-height-desktop);
    }

    .course-hero .container {
        padding: var(--header-height-desktop) 60px 60px;
        max-width: var(--container-max);
    }

    .hero-content-grid {
        flex-direction: row;
        gap: var(--space-2xl);
        align-items: flex-start;
    }

    .hero-content-left {
        text-align: left;
        flex: 1;
        max-width: 600px;
    }

    .hero-content-right {
        flex: 0 0 auto;
        width: 45%;
        max-width: 500px;
        display: block !important;
    }

    .hero-title-section {
        text-align: left;
        max-width: 100%;
        margin-left: 0;
    }

    .hero-label {
        margin-top: 12px;
    }

    .hero-description-main {
        margin-top: 24px;
        margin-bottom: 32px;
    }

    .course-hero-description {
        text-align: left;
        padding: 0;
        font-size: 1.0625rem;
        line-height: 1.7;
    }

    .hero-cta {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .hero-cta .luxury-button {
        min-width: 0;
        white-space: nowrap;
    }

    /* For-you section: grid layout */
    .for-you-section .section-header {
        margin-bottom: 56px;
    }

    .benefits-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(260px, 1fr));
        gap: 32px;
    }

    .benefit-card {
        text-align: left;
        align-items: flex-start;
        padding: 40px 36px;
    }

    .benefit-number {
        margin-bottom: 16px;
        font-size: 4.5rem;
    }

    /* Course results: 2-column cards like index */
    .course-results .section-header {
        margin-bottom: 56px;
    }

    .course-results .section-title {
        font-size: 2.25rem;
    }

    .results-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    /* Course program: spacing and capsule row alignment */
    .course-program .section-header {
        margin-bottom: 56px;
    }

    .course-program .section-title {
        font-size: 2.25rem;
        font-weight: 300;
        letter-spacing: -0.02em;
        color: var(--color-primary);
    }

    .caps-row {
        gap: 12px;
        margin-top: 12px;
        justify-content: center;
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
    }

    .cap {
        padding: 10px 24px;
        min-height: 36px;
        border-radius: 999px;
        font-size: 0.9375rem;
        letter-spacing: 0.04em;
        border: 1px solid rgba(0, 0, 0, 0.06);
        background: rgba(255, 255, 255, 0.9);
    }

    .practices-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(280px, 1fr));
        gap: 32px;
    }

    .practice-item {
        padding: 32px 32px;
        border-radius: 20px;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    }

    /* How classes work: 4 cards in a row */
    .how-classes-work .container {
        max-width: 1200px;
    }

    .classes-process-grid {
        grid-template-columns: repeat(4, minmax(200px, 1fr));
        gap: 24px;
    }

    .process-step {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 28px 22px;
    }

    .step-icon {
        margin: 0 auto 16px;
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }

    .step-title {
        font-size: 1.125rem;
        margin-bottom: 8px;
    }

    .step-description {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* Pricing: align with index card style */
    .course-pricing .section-header {
        margin-bottom: 56px;
    }

    .pricing-glass-container {
        max-width: 760px;
        padding: 56px 48px;
        border-radius: 24px;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
    }

    .pricing-single-plan {
        padding: 48px 40px;
        border-radius: 28px;
        max-width: 560px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    }

    .pricing-cta-button {
        min-width: 260px;
        padding: 16px 36px;
        font-size: 0.95rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
}