/**
 * Sborisov Psy Blocks - Frontend Styles
 * 
 * @package sborisov-psy-blocks
 * @version 1.0.0
 * 
 * Структура файла:
 * 1. CSS Custom Properties
 * 2. Базовые стили
 * 3. Блок NOTE
 * 4. Блок QUOTE
 * 5. Блок STYLED-TEXT
 * 6. Блок CARD
 * 7. Блок CARDS-GRID
 * 8. Блок CTA
 * 9. Адаптивность
 */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
    /* Основные цвета */
    --sb-color-primary: #667eea;
    --sb-color-primary-hover: #5a6fd6;
    --sb-color-secondary: #764ba2;
    --sb-color-secondary-hover: #6a4292;
    
    /* Нейтральные цвета */
    --sb-color-white: #ffffff;
    --sb-color-background: #f8f9fa;
    --sb-color-background-alt: #f0f4f8;
    --sb-color-border: #e0e0e0;
    --sb-color-border-light: #eaeaea;
    
    /* Текст */
    --sb-color-text: #333333;
    --sb-color-text-light: #666666;
    --sb-color-text-muted: #999999;
    
    /* Акцентные цвета */
    --sb-color-accent: #e8f4f8;
    --sb-color-warm: #fff5f5;
    --sb-color-warm-border: #ffcccc;
    --sb-color-cool: #f0f7ff;
    --sb-color-cool-border: #cce0ff;
    --sb-color-highlight: #fff8e6;
    --sb-color-highlight-border: #ffd966;
    
    /* Отступы */
    --sb-spacing-xs: 8px;
    --sb-spacing-sm: 12px;
    --sb-spacing-md: 20px;
    --sb-spacing-lg: 30px;
    --sb-spacing-xl: 40px;
    
    /* Скругление */
    --sb-radius-none: 0;
    --sb-radius-sm: 4px;
    --sb-radius-md: 8px;
    --sb-radius-lg: 12px;
    --sb-radius-xl: 20px;
    --sb-radius-full: 50px;
    
    /* Тени */
    --sb-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --sb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --sb-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --sb-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.1);
    
    /* Типографика */
    --sb-font-family: inherit;
    --sb-font-size-sm: 14px;
    --sb-font-size-base: 16px;
    --sb-font-size-md: 18px;
    --sb-font-size-lg: 20px;
    --sb-font-size-xl: 24px;
    --sb-font-size-2xl: 28px;
    --sb-line-height: 1.6;
    --sb-line-height-tight: 1.3;
    
    /* Анимации */
    --sb-transition: 0.25s ease;
    --sb-transition-slow: 0.4s ease;
}

/* ==========================================================================
   2. БАЗОВЫЕ СТИЛИ
   ========================================================================== */

[class^="sb-"],
[class*=" sb-"] {
    box-sizing: border-box;
    line-height: var(--sb-line-height);
}

[class^="sb-"] *,
[class*=" sb-"] * {
    box-sizing: border-box;
}

/* Сброс отступов для вложенных элементов */
[class^="sb-"] p:first-child,
[class*=" sb-"] p:first-child {
    margin-top: 0;
}

[class^="sb-"] p:last-child,
[class*=" sb-"] p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   3. БЛОК NOTE (Из практики)
   
   DOM: <div class="sb-note sb-note--with-label">
            <span class="sb-note__label"><svg>...</svg>Текст</span>
            <div class="sb-note__content"><p>...</p></div>
        </div>
   ========================================================================== */

.sb-note {
    position: relative;
    padding: var(--sb-note-padding, var(--sb-spacing-md));
    padding-top: calc(var(--sb-note-padding, var(--sb-spacing-md)) + 8px);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-white);
    border: 2px solid var(--sb-note-border-color, #d68b45);
    color: var(--sb-color-text);
    font-size: var(--sb-font-size-base);
}

/* Переопределение старых стилей вариаций */
.sb-note--therapist,
.sb-note--moscow,
.sb-note--highlight,
.sb-note--warm {
    border-left: none;
    border: 2px solid var(--sb-note-border-color, #d68b45);
    background-color: var(--sb-color-white);
}

/* Метка */
.sb-note__label {
    position: absolute;
    top: -12px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    background-color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sb-note-border-color, #d68b45);
    line-height: 1.4;
}

.sb-note__label-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* Контент */
.sb-note__content {
    line-height: var(--sb-line-height);
}

.sb-note__content p {
    margin: 0;
}

.sb-note__content p + p {
    margin-top: var(--sb-spacing-sm);
}

/* ==========================================================================
   6. БЛОК CARD (Карточка)
   
   DOM с изображением:
   <figure class="sb-card sb-card--{variant}">
       <img src="..." alt="...">
       <figcaption>
           <h4>...</h4>
           <p>...</p>
       </figcaption>
   </figure>
   
   DOM без изображения:
   <article class="sb-card sb-card--{variant}">
       <h4>...</h4>
       <p>...</p>
   </article>
   ========================================================================== */

.sb-card {
    margin: 0;
    padding: 0;
    background-color: var(--sb-color-white);
    border-radius: var(--sb-radius-md);
    overflow: hidden;
    transition: transform var(--sb-transition), box-shadow var(--sb-transition);
}

.sb-card:hover {
    transform: translateY(-2px);
}

/* Изображение карточки */
.sb-card > img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 10;
}

/* Контент карточки (figcaption или прямые дочерние элементы) */
.sb-card figcaption,
article.sb-card {
    padding-top: var(--sb-card-pt, var(--sb-spacing-md));
    padding-right: var(--sb-card-pr, var(--sb-spacing-md));
    padding-bottom: var(--sb-card-pb, var(--sb-spacing-md));
    padding-left: var(--sb-card-pl, var(--sb-spacing-md));
}

/* Заголовок карточки */
.sb-card h4 {
    margin: 0 0 var(--sb-spacing-sm) 0;
    font-size: var(--sb-card-title-size, var(--sb-font-size-md));
    font-weight: 600;
    color: var(--sb-card-title-color, var(--sb-color-text));
    line-height: var(--sb-line-height-tight);
}

/* Описание карточки */
.sb-card p {
    margin: 0;
    font-size: var(--sb-card-desc-size, var(--sb-font-size-base));
    color: var(--sb-card-desc-color, var(--sb-color-text-light));
}

/* Вариация: Стандартная */
.sb-card--default {
    box-shadow: var(--sb-shadow-sm);
}

.sb-card--default:hover {
    box-shadow: var(--sb-shadow-md);
}

/* Вариация: С границей */
.sb-card--bordered {
    border: 1px solid var(--sb-color-border);
    box-shadow: none;
}

.sb-card--bordered:hover {
    border-color: var(--sb-color-primary);
    box-shadow: var(--sb-shadow-sm);
}

/* Вариация: С тенью */
.sb-card--shadow {
    box-shadow: var(--sb-shadow-md);
}

.sb-card--shadow:hover {
    box-shadow: var(--sb-shadow-lg);
}

/* ==========================================================================
   7. БЛОК CARDS-GRID (Сетка карточек)
   
   DOM: <div class="sb-cards-grid" style="
            --sb-columns: 3; 
            --sb-gap: 20px;
            --sb-card-title-color: #333;
            --sb-card-title-size: 18px;
            --sb-card-desc-color: #666;
            --sb-card-desc-size: 16px;
            --sb-card-pt: 20px;
            --sb-card-pr: 20px;
            --sb-card-pb: 20px;
            --sb-card-pl: 20px;
        ">
            <!-- InnerBlocks: cards -->
        </div>
   ========================================================================== */

.sb-cards-grid {
    display: grid;
    grid-template-columns: repeat(var(--sb-columns, 3), 1fr);
    gap: var(--sb-gap, var(--sb-spacing-md));
    align-items: var(--sb-align, start);
}

/* ==========================================================================
   8. БЛОК CTA (Call to Action)
   
   DOM: <div class="sb-cta" style="
            --sb-cta-title-size: 28px;
            --sb-cta-title-weight: 600;
            --sb-cta-desc-size: 16px;
            --sb-cta-desc-weight: 400;
            --sb-cta-btn-size: 16px;
            --sb-cta-btn-weight: 500;
        ">
            <h3 class="sb-cta__title">...</h3>
            <p class="sb-cta__description">...</p>
            <div class="sb-cta__buttons">
                <a class="sb-cta__btn sb-cta__btn--primary">...</a>
                <a class="sb-cta__btn sb-cta__btn--secondary">...</a>
            </div>
        </div>
   ========================================================================== */

.sb-cta {
    padding: var(--sb-spacing-xl);
    background-color: var(--sb-color-background);
    border-radius: var(--sb-radius-lg);
    text-align: center;
}

/* Заголовок CTA - используем только теги для правильного наследования шрифтов темы */
.sb-cta h1,
.sb-cta h2,
.sb-cta h3,
.sb-cta h4,
.sb-cta h5,
.sb-cta h6 {
    margin: 0 0 var(--sb-spacing-sm) 0;
    font-size: var(--sb-cta-title-size, var(--sb-font-size-xl));
    font-weight: var(--sb-cta-title-weight, 600);
    color: inherit;
    line-height: var(--sb-line-height-tight);
}

/* Описание CTA */
.sb-cta__description,
.sb-cta > p {
    margin: 0 0 var(--sb-spacing-lg) 0;
    font-size: var(--sb-cta-desc-size, var(--sb-font-size-base));
    font-weight: var(--sb-cta-desc-weight, 400);
    color: inherit;
    opacity: 0.85;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Контейнер для кнопок */
.sb-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sb-spacing-sm);
}

/* Кнопки CTA */
.sb-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sb-spacing-sm) var(--sb-spacing-lg);
    font-size: var(--sb-cta-btn-size, var(--sb-font-size-base));
    font-weight: var(--sb-cta-btn-weight, 500);
    text-decoration: none;
    border-radius: var(--sb-radius-full);
    transition: all var(--sb-transition);
    cursor: pointer;
    border: 2px solid transparent;
    min-width: 160px;
}

.sb-cta__btn:focus {
    outline: 2px solid var(--sb-color-primary);
    outline-offset: 2px;
}

/* Кнопка: Основная */
.sb-cta__btn--primary {
    background-color: var(--sb-color-primary);
    color: var(--sb-color-white);
    border-color: var(--sb-color-primary);
}

.sb-cta__btn--primary:hover {
    background-color: var(--sb-color-primary-hover);
    border-color: var(--sb-color-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--sb-shadow-md);
}

/* Кнопка: Вторичная */
.sb-cta__btn--secondary {
    background-color: transparent;
    color: var(--sb-color-primary);
    border-color: var(--sb-color-primary);
}

.sb-cta__btn--secondary:hover {
    background-color: var(--sb-color-primary);
    color: var(--sb-color-white);
    transform: translateY(-2px);
}

/* Кнопка: Мягкая */
.sb-cta__btn--soft {
    background-color: var(--sb-color-accent);
    color: var(--sb-color-primary);
    border-color: transparent;
}

.sb-cta__btn--soft:hover {
    background-color: var(--sb-color-primary);
    color: var(--sb-color-white);
}

/* Кнопка: Градиент */
.sb-cta__btn--gradient {
    background: linear-gradient(135deg, var(--sb-color-primary) 0%, var(--sb-color-secondary) 100%);
    color: var(--sb-color-white);
    border-color: transparent;
}

.sb-cta__btn--gradient:hover {
    transform: translateY(-2px);
    box-shadow: var(--sb-shadow-lg);
}

/* Кнопка: Тёплая (оранжевая) */
.sb-cta__btn--warm {
    background-color: #d68b45;
    color: #ffffff;
    border-color: #d68b45;
}

.sb-cta__btn--warm:hover {
    background-color: #c47a35;
    border-color: #c47a35;
    transform: translateY(-2px);
    box-shadow: var(--sb-shadow-md);
}

/* Кнопки в ряд */
.sb-cta__btn + .sb-cta__btn {
    margin-left: var(--sb-spacing-sm);
}

/* Выравнивание CTA */
.sb-cta--left {
    text-align: left;
}

.sb-cta--left > p {
    margin-left: 0;
    margin-right: 0;
}

.sb-cta--left .sb-cta__buttons,
.sb-cta--left .sb-cta__btn:first-of-type {
    justify-content: flex-start;
}

.sb-cta--right {
    text-align: right;
}

.sb-cta--right .sb-cta__buttons {
    justify-content: flex-end;
}

/* ==========================================================================
   9. АДАПТИВНОСТЬ (Mobile-First)
   ========================================================================== */

/* Планшеты и ниже */
@media (max-width: 1024px) {
    :root {
        --sb-spacing-xl: 32px;
        --sb-spacing-lg: 24px;
    }
    
    .sb-cards-grid {
        grid-template-columns: repeat(min(var(--sb-columns, 3), 2), 1fr);
    }
}

/* Мобильные устройства */
@media (max-width: 768px) {
    :root {
        --sb-spacing-xl: 24px;
        --sb-spacing-lg: 20px;
        --sb-spacing-md: 16px;
        --sb-font-size-xl: 22px;
        --sb-font-size-lg: 18px;
        --sb-font-size-md: 16px;
    }
    
    /* NOTE */
    .sb-note {
        padding: var(--sb-spacing-md);
    }
    
    /* QUOTE */
    .sb-quote {
        padding: var(--sb-spacing-lg) var(--sb-spacing-md);
    }
    
    .sb-quote::before {
        font-size: 36px;
    }
    
    .sb-quote--intro,
    .sb-quote--centered {
        padding: var(--sb-spacing-lg);
    }
    
    /* CARDS-GRID: 1 колонка на мобильных */
    .sb-cards-grid {
        grid-template-columns: 1fr;
    }
    
    /* CTA */
    .sb-cta {
        padding: var(--sb-spacing-lg);
    }
    
    .sb-cta__btn {
        width: 100%;
        min-width: unset;
    }
    
    .sb-cta__btn + .sb-cta__btn {
        margin-left: 0;
        margin-top: var(--sb-spacing-sm);
    }
    
    .sb-cta__buttons {
        flex-direction: column;
    }
}

/* Маленькие мобильные */
@media (max-width: 480px) {
    :root {
        --sb-spacing-lg: 16px;
        --sb-spacing-md: 12px;
        --sb-font-size-xl: 20px;
    }
    
    .sb-quote::before {
        font-size: 28px;
        top: var(--sb-spacing-xs);
        left: var(--sb-spacing-sm);
    }
}