/* ===================================================================
   HOME WELLNESS CSS - INDEX.HTML LUXURY DESIGN SYSTEM
   Mobile-first wellness design inspired by Alo Yoga & private-sessions
   
   УНИФИЦИРОВАННАЯ СИСТЕМА:
   - Использует переменные из shared-variables.css
   - Секционные отступы: 56px mobile / 80px tablet / 100px desktop
   - Карточки: 24px padding mobile / 32px tablet / 40px desktop
   ================================================================== */

/* === WELLNESS VARIABLES EXTENSION === */
/* Дополнительные переменные, которых нет в shared-variables.css */
:root {
    /* Wellness Accent - золотистый оттенок для luxury эффекта */
    --color-wellness-accent: #CFA15B;
    --color-wellness-accent-soft: rgba(207, 161, 91, 0.1);
    
    /* Wellness-specific shadows (расширение системы из shared-variables) */
    --shadow-wellness-soft: var(--shadow-sm);
    --shadow-wellness-card: var(--shadow-md);
    --shadow-wellness-elevated: var(--shadow-lg);
    --shadow-wellness-luxury: var(--shadow-xl);
    
    /* Wellness Transitions - luxury easing */
    --transition-wellness-fast: 0.2s cubic-bezier(0.23, 1, 0.32, 1);
    --transition-wellness-medium: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    --transition-wellness-smooth: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    
    /* Алиасы для совместимости со старым кодом */
    --color-wellness-primary: var(--color-primary);
    --color-wellness-text: var(--color-text);
    --color-wellness-text-light: var(--color-text-light);
    --color-wellness-text-muted: var(--color-text-muted);
    --color-wellness-bg: var(--color-bg-sand);
    --color-wellness-card: var(--color-background-card);
    --color-wellness-surface: var(--color-surface);
}

/* === WELLNESS SECTION WRAPPER === */
/* Унифицированные отступы: mobile 56px / tablet 80px / desktop 100px */
.wellness-section {
    padding: var(--spacing-section-mobile, 56px) 0;
    background: var(--color-wellness-bg);
    position: relative;
}

@media (min-width: 768px) {
    .wellness-section {
        padding: 80px 0;
    }
}

@media (min-width: 1024px) {
    .wellness-section {
        padding: 100px 0;
    }
}

/* === WELLNESS CARD COMPONENT === */
/* Унифицированный padding: 24px mobile / 32px tablet / 40px desktop */
.wellness-card {
    background: var(--color-wellness-surface);
    border-radius: var(--border-radius-2xl);
    padding: var(--lw-card-padding-mobile, 24px);
    box-shadow: var(--shadow-wellness-card);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all var(--transition-wellness-medium);
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .wellness-card {
        padding: var(--lw-card-padding-tablet, 32px);
    }
}

@media (min-width: 1024px) {
    .wellness-card {
        padding: var(--lw-card-padding-desktop, 40px);
    }
}

.wellness-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-wellness-elevated);
    border-color: rgba(0, 0, 0, 0.06);
}

/* Mobile tap feedback */
.wellness-card:active {
    transform: translateY(-2px);
}

/* === WELLNESS ICON BADGE === */
.wellness-icon-badge {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--color-wellness-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-wellness-fast);
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--color-wellness-text);
    margin-bottom: 16px;
}

.wellness-icon-badge svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

.wellness-card:hover .wellness-icon-badge {
    background: var(--color-wellness-accent-soft);
    border-color: rgba(207, 161, 91, 0.15);
    transform: scale(1.05);
}

/* === WELLNESS GRID LAYOUTS === */
/* Унифицированные gaps: 20px mobile / 28px tablet / 32px desktop */
.wellness-grid {
    display: flex;
    flex-direction: column;
    gap: var(--lw-grid-gap-mobile, 20px);
}

@media (min-width: 768px) {
    .wellness-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--lw-grid-gap-tablet, 28px);
    }
}

@media (min-width: 1024px) {
    .wellness-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--lw-grid-gap-desktop, 32px);
    }
}

/* === HERO WELLNESS ENHANCEMENTS === */
/* Hero Section Base - Override main.css */
.hero {
    position: relative;
    height: auto !important; /* Override main.css fixed height */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--color-wellness-surface);
}

/* Mobile Hero Image Wrapper (Poster Design) */
.hero-image-wrapper-mobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60vh;
    min-height: 400px;
    max-height: 600px;
    overflow: hidden;
    display: none;
    z-index: 0;
}

@media (max-width: 767px) {
    .hero-image-wrapper-mobile {
        display: block;
        position: relative; /* Меняем с absolute на relative */
    }
}

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

/* Premium gradient overlay */
.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 with title */
.hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 24px 20px; /* Отступ снизу от заголовка */
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.95) 30%,
        rgba(255, 255, 255, 0.6) 55%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 90%
    );
    z-index: 4; /* Выше волны, чтобы текст не обрезался */
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-overlay .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-wellness-primary);
}

.hero-title-mobile em {
    font-style: italic;
    color: var(--color-wellness-accent);
}

/* Hero Content Positioning */
.hero .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 600px;
    padding: 0 20px;
    opacity: 0;
    animation: luxuryFadeIn 1s ease-out forwards;
    animation-delay: 0.3s;
}

/* Mobile: push content below hero image */
@media (max-width: 767px) {
    .hero {
        min-height: auto !important; /* Убираем фиксированную высоту */
        height: auto !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 0 0 40px 0 !important; /* Убираем боковые отступы, оставляем только снизу */
        background: white !important; /* Override main.css gradient for poster design */
    }
    
    .hero .hero-content {
        position: relative;
        padding: 24px 24px 0 24px; /* Отступ сверху (от заголовка) и по бокам */
        margin-top: 0;
    }
    
    /* Отступ между описанием и кнопкой */
    .hero .hero-description {
        margin-bottom: 24px;
    }
    
    .hero .hero-content h1 {
        display: none;
    }
}

/* Еще меньше на маленьких экранах */
@media (max-width: 375px) {
    .hero .hero-content {
        padding-top: 4px;
    }
}

/* Desktop: standard centered layout */
@media (min-width: 768px) {
    .hero .hero-content {
        padding-top: 80px;
    }
    
    .hero-title-mobile {
        display: none;
    }
    
    /* Desktop hero background image */
    .hero::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        background: url('../assets/images/gallery/balanceroth.jpg') center center / cover no-repeat;
        opacity: 0.4;
        z-index: 0;
        pointer-events: none;
    }
    
    /* Gradient overlay for smooth blend */
    .hero::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 60%;
        height: 100%;
        background: linear-gradient(90deg, var(--color-wellness-surface) 20%, rgba(255,255,255,0.7) 60%, transparent 100%);
        z-index: 1;
        pointer-events: none;
    }
}

/* Large desktop - more visible image */
@media (min-width: 1024px) {
    .hero::before {
        opacity: 0.55;
        width: 50%;
    }
    
    .hero::after {
        width: 55%;
        background: linear-gradient(90deg, var(--color-wellness-surface) 15%, rgba(255,255,255,0.6) 50%, transparent 100%);
    }
}

@media (min-width: 1440px) {
    .hero::before {
        opacity: 0.7;
        width: 45%;
    }
    
    .hero::after {
        width: 50%;
        background: linear-gradient(90deg, var(--color-wellness-surface) 10%, rgba(255,255,255,0.5) 45%, transparent 100%);
    }
}

/* Decorative Wave Transition */
.hero-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8vh; /* Уменьшена высота для более деликатного эффекта */
    min-height: 40px;
    max-height: 80px;
    pointer-events: none;
    overflow: hidden;
    display: none;
    z-index: 2; /* Ниже overlay, чтобы не перекрывать текст */
}

.hero-image-wrapper-mobile .hero-wave {
    display: none; /* removed decorative half-circle */
}

/* Меньше волна на маленьких экранах */
@media (max-width: 375px) {
    .hero-wave {
        height: 6vh;
        min-height: 32px;
    }
}

.wave-css {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 100% 100% 0 0 / 100% 100% 0 0;
    animation: luxuryFadeIn 1s ease 0.3s forwards;
    opacity: 0;
}

/* === TIMELINE STYLE COMPONENT === */
/* Luxury timeline для списка проблем */
.timeline {
    margin: 0 0 var(--spacing-lg, 32px);
    padding: 0 0 0 28px;
    list-style: none;
    position: relative;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(207, 161, 91, 0.2);
}

.timeline li {
    position: relative;
    margin: 0 0 var(--spacing-md, 24px);
}

.timeline li:last-child {
    margin-bottom: 0;
}

.timeline .dot {
    position: absolute;
    left: -28px;
    top: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: var(--border-radius-full);
    background: var(--color-wellness-accent);
    color: var(--color-white);
    font-family: var(--font-primary);
    font-size: var(--fs-mobile-xs, 12px);
    font-weight: var(--fw-mobile-semibold, 600);
    text-align: center;
    box-shadow: var(--shadow-wellness-soft);
}

.timeline p {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-mobile-sm, 14px);
    font-weight: var(--fw-mobile-light, 300);
    line-height: var(--lh-mobile-relaxed, 1.65);
    color: var(--color-wellness-text);
}

@media (min-width: 768px) {
    .timeline p {
        font-size: 1rem;
    }
}

.timeline strong {
    color: var(--color-wellness-primary);
    font-weight: var(--fw-mobile-medium, 500);
}

/* === PROBLEM STATS SECTION === */
/* Карточка со статистикой - luxury wellness стиль */
/* Унифицированный padding: 32px на mobile */
.problem-stats {
    text-align: center;
    padding: 32px;
    margin-top: var(--spacing-lg, 32px);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    background: var(--color-wellness-surface);
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
}

/* Декоративная линия сверху */
.problem-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: var(--color-wellness-accent);
    border-radius: 2px;
}

@media (min-width: 768px) {
    .problem-stats {
        padding: 40px;
        max-width: 650px;
    }
}

@media (min-width: 1024px) {
    .problem-stats {
        padding: 48px;
        max-width: 700px;
    }
}

.problem-stats .stats-text {
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 300;
    color: var(--color-wellness-text-light);
    line-height: 1.7;
    margin: 0 0 20px 0;
}

@media (min-width: 768px) {
    .problem-stats .stats-text {
        font-size: 1rem;
    }
}

.problem-stats .stats-text strong {
    font-weight: 500;
    color: var(--color-wellness-primary);
}

.problem-stats .stats-conclusion {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 400;
    font-style: italic;
    color: var(--color-wellness-primary);
    line-height: 1.35;
    letter-spacing: -0.02em;
    margin: 0;
}

@media (min-width: 768px) {
    .problem-stats .stats-conclusion {
        font-size: 1.25rem;
    }
}

/* === YOGA BALANCE SECTION === */
.yoga-balance {
    background: var(--color-wellness-surface);
}

.yoga-balance-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg, 32px);
}

@media (min-width: 768px) {
    .yoga-balance-grid {
        gap: var(--spacing-xl, 48px);
    }
}

@media (min-width: 1024px) {
    .yoga-balance-grid {
        display: grid;
        grid-template-columns: minmax(380px, 420px) 1fr;
        gap: 48px;
        align-items: stretch;
    }
    
    /* Override wellness-grid inside yoga-benefits for desktop */
    .yoga-benefits.wellness-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    
    .yoga-benefits .benefit-item {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        padding: 20px 24px;
        background: var(--color-bg-sand, #FAF6F1);
        border-radius: 12px;
        box-shadow: none;
        border: none;
    }
    
    .yoga-benefits .benefit-item:hover {
        transform: none;
        box-shadow: none;
    }
    
    .yoga-benefits .benefit-item .wellness-icon-badge {
        margin-bottom: 0;
        flex-shrink: 0;
        width: 48px;
        height: 48px;
    }
    
    .yoga-benefits .benefit-item .benefit-content {
        flex: 1;
    }
    
    .yoga-benefits .benefit-item .benefit-title {
        font-size: 1rem;
        margin-bottom: 4px;
    }
    
    .yoga-benefits .benefit-item .benefit-text {
        font-size: 0.875rem;
        line-height: 1.55;
    }
    
    /* Unique approach on desktop */
    .unique-approach {
        margin-top: 24px;
    }
}

@media (min-width: 1280px) {
    .yoga-balance-grid {
        grid-template-columns: minmax(420px, 480px) 1fr;
        gap: 64px;
    }
    
    .yoga-benefits .benefit-item {
        padding: 24px 28px;
    }
    
    .yoga-benefits .benefit-item .benefit-title {
        font-size: 1.0625rem;
    }
    
    .yoga-benefits .benefit-item .benefit-text {
        font-size: 0.9375rem;
        line-height: 1.6;
    }
}

@media (min-width: 1440px) {
    .yoga-balance-grid {
        grid-template-columns: minmax(460px, 520px) 1fr;
        gap: 80px;
    }
}

/* Section Header - заголовок и подзаголовок по центру */
.yoga-balance .section-header {
    text-align: center;
    margin-bottom: var(--spacing-lg, 32px);
}

@media (min-width: 768px) {
    .yoga-balance .section-header {
        margin-bottom: var(--spacing-xl, 48px);
    }
}

@media (min-width: 1024px) {
    .yoga-balance .section-header {
        margin-bottom: 56px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
}

.yoga-title {
    font-family: var(--font-heading);
    font-size: var(--fs-mobile-2xl, 2rem);
    font-weight: var(--fw-mobile-normal, 400);
    color: var(--color-wellness-primary);
    text-align: center;
    margin-bottom: var(--spacing-sm, 16px);
    letter-spacing: var(--ls-mobile-tight, -0.02em);
    line-height: var(--lh-mobile-tight, 1.2);
}

@media (min-width: 768px) {
    .yoga-title {
        font-size: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .yoga-title {
        font-size: 2.75rem;
    }
}

.yoga-subtitle {
    font-family: var(--font-primary);
    font-size: var(--fs-mobile-sm, 14px);
    font-weight: var(--fw-mobile-light, 300);
    color: var(--color-wellness-text-light);
    text-align: center;
    line-height: var(--lh-mobile-relaxed, 1.65);
    margin-bottom: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .yoga-subtitle {
        font-size: 1rem;
    }
}

@media (min-width: 1024px) {
    .yoga-subtitle {
        font-size: 1.0625rem;
    }
}

.yoga-benefits {
    margin-bottom: var(--spacing-lg, 32px);
}

@media (min-width: 768px) {
    .yoga-benefits {
        margin-bottom: var(--spacing-xl, 48px);
    }
}

.benefit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .benefit-item {
        align-items: flex-start;
        text-align: left;
    }
}

.benefit-content {
    width: 100%;
}

.benefit-title {
    font-family: var(--font-heading);
    font-size: var(--fs-mobile-md, 18px);
    font-weight: var(--fw-mobile-normal, 400);
    color: var(--color-wellness-primary);
    margin-bottom: var(--space-mobile-text-sm, 8px);
    letter-spacing: var(--ls-mobile-tight, -0.02em);
    line-height: 1.3;
}

@media (min-width: 768px) {
    .benefit-title {
        font-size: 1.25rem;
    }
}

.benefit-text {
    font-family: var(--font-primary);
    font-size: var(--fs-mobile-sm, 14px);
    font-weight: var(--fw-mobile-light, 300);
    color: var(--color-wellness-text-light);
    line-height: var(--lh-mobile-relaxed, 1.65);
    letter-spacing: 0.01em;
    margin: 0;
}

@media (min-width: 768px) {
    .benefit-text {
        font-size: 1rem;
    }
}

/* Unique Approach */
/* Карточка с уникальным подходом - унифицированный padding: 32px */
.unique-approach {
    text-align: center;
    padding: 32px;
    margin-top: var(--spacing-lg, 32px);
    background: var(--color-wellness-bg);
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

@media (min-width: 768px) {
    .unique-approach {
        text-align: left;
        padding: 40px;
    }
}

@media (min-width: 1024px) {
    .unique-approach {
        padding: 48px;
    }
}

.approach-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 400;
    color: var(--color-wellness-primary);
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .approach-title {
        font-size: 1.5rem;
    }
}

.approach-text {
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 300;
    color: var(--color-wellness-text-light);
    line-height: 1.7;
    letter-spacing: 0.01em;
    margin: 0;
}

@media (min-width: 768px) {
    .approach-text {
        font-size: 1rem;
    }
}

/* Yoga Image */
.yoga-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    border-radius: 24px;
    box-shadow: var(--shadow-wellness-elevated);
    transition: transform var(--transition-wellness-smooth);
}

.yoga-image img:hover {
    transform: scale(1.02);
}

@media (min-width: 1024px) {
    .yoga-image {
        height: 100%;
    }
    
    .yoga-image img {
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }
}

/* === SCROLL INDICATOR === */
.scroll-indicator {
    position: absolute;
    bottom: var(--spacing-xl, 48px);
    left: 50%;
    transform: translateX(-50%);
    display: none; /* Hidden on mobile by default */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 1s;
    z-index: 10;
    /* Compact pill with text + arrow */
    padding: 12px;
    background: rgba(255, 255, 255, 0.86);
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--color-wellness-text-light);
    gap: 8px;
}

.scroll-indicator:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
    transform: translateX(-50%) translateY(-6px);
    text-decoration: none;
    color: var(--color-wellness-text);
}

@media (min-width: 768px) {
    .scroll-indicator {
        display: flex;
    }
}

.scroll-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-accent, #FDA700);
    border-radius: 50%;
    color: white;
    animation: floatIcon 2s ease-in-out infinite;
    transition: all var(--transition-wellness-fast);
}

.scroll-text {
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}

.scroll-arrow svg {
    width: 16px;
    height: 16px;
}

.scroll-indicator:hover .scroll-arrow {
    background: var(--color-accent-hover, #E89600);
    transform: scale(1.1);
}

.scroll-indicator:focus-visible {
    outline: 2px solid var(--color-accent, #FDA700);
    outline-offset: 3px;
}

/* === WELLNESS ANIMATIONS === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes floatIcon {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes luxuryFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes luxuryReveal {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
    .wellness-card,
    .wellness-icon-badge,
    .scroll-indicator,
    .scroll-arrow {
        animation: none;
        transition: none;
    }
}

/* High contrast support */
@media (prefers-contrast: high) {
    .wellness-card {
        border: 2px solid var(--color-wellness-text);
        box-shadow: none;
    }
    
    .wellness-icon-badge {
        border: 2px solid var(--color-wellness-text);
    }
}

/* === UTILITY CLASSES === */
.mobile-only {
    display: block;
}

.desktop-only {
    display: none;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none;
    }
    
    .desktop-only {
        display: block;
    }
}

/* === SECTION TITLES === */
/* Унифицированные заголовки секций */
.wellness-section .section-title,
.problems .section-title,
.yoga-balance .section-title {
    font-family: var(--font-heading);
    font-size: var(--fs-mobile-2xl, 2rem);
    font-weight: var(--fw-mobile-light, 300);
    color: var(--color-wellness-primary);
    text-align: center;
    margin-bottom: var(--spacing-sm, 16px);
    letter-spacing: var(--ls-mobile-tight, -0.02em);
    line-height: var(--lh-mobile-tight, 1.2);
}

@media (min-width: 768px) {
    .wellness-section .section-title,
    .problems .section-title,
    .yoga-balance .section-title {
        font-size: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .wellness-section .section-title,
    .problems .section-title,
    .yoga-balance .section-title {
        font-size: 2.75rem;
    }
}

.wellness-section .section-subtitle,
.problems .section-subtitle,
.yoga-balance .section-subtitle {
    font-family: var(--font-primary);
    font-size: var(--fs-mobile-sm, 14px);
    font-weight: var(--fw-mobile-light, 300);
    color: var(--color-wellness-text-light);
    text-align: center;
    line-height: var(--lh-mobile-relaxed, 1.65);
    margin-bottom: var(--spacing-lg, 32px);
    padding: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .wellness-section .section-subtitle,
    .problems .section-subtitle,
    .yoga-balance .section-subtitle {
        font-size: 1rem;
        margin-bottom: var(--spacing-xl, 48px);
    }
}

/* === MOBILE OPTIMIZATIONS === */
@media (max-width: 767px) {
    /* Center-aligned cards on mobile */
    .wellness-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    /* Унифицированный spacing для мобильных */
    .wellness-section {
        padding: var(--spacing-section-mobile, 56px) 0;
    }
    
    /* Timeline mobile adjustments */
    .timeline {
        padding-left: 24px;
    }
    
    .timeline::before {
        left: 10px;
    }
    
    .timeline .dot {
        left: -24px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: var(--fs-mobile-2xs, 10px);
    }
    
}

/* === TABLET & DESKTOP OPTIMIZATIONS === */
@media (min-width: 768px) {
    .section-subtitle {
        padding: 0;
    }
    
    /* Cards aligned left on desktop */
    .wellness-card {
        text-align: left;
        align-items: flex-start;
    }
}

/* === LARGE DESKTOP === */
@media (min-width: 1024px) {
    .wellness-section {
        padding: 100px 0;
    }
}