/* ============================================================================
 * H-LIFE Main Stylesheet
 * ============================================================================
 *
 * Архитектура CSS Layers:
 *   @layer reset      — самый низкий приоритет (но reset.css уже подключён отдельно)
 *   @layer base       — базовые стили (typography, layout)
 *   @layer components — компоненты (button, card, badge)
 *   @layer utilities  — утилитарные классы (имеют приоритет над компонентами)
 *   @layer overrides  — специфичные переопределения (для админ-баров и т.п.)
 *
 * Использование @layer гарантирует предсказуемый порядок без !important.
 *
 * @package HLife\Theme
 * ========================================================================= */

@layer base, components, utilities, overrides;

/* ============================================================================
 * @layer base — фундаментальная типография и layout
 * ========================================================================= */

@layer base {

    /* === Типография ====================================================== */
    p {
        margin-block-end: var(--hlife-space-4);
    }

    p:last-child {
        margin-block-end: 0;
    }

    h1, h2, h3, h4, h5, h6 {
        margin-block-end: var(--hlife-space-4);
    }

    h2 + h3, h3 + h4 {
        margin-block-start: var(--hlife-space-6);
    }

    /* === Layout — main containers ======================================== */
    .container {
        width: 100%;
        max-width: var(--hlife-container-max);
        margin-inline: auto;
        padding-inline: var(--hlife-container-padding);
    }

    .container--wide {
        max-width: var(--hlife-container-wide);
    }

    .container--narrow {
        max-width: 720px;
    }

    /* === Site shell ====================================================== */
    .site-main {
        min-height: 60vh;
        padding-block: var(--hlife-space-12);
    }

    /* Хороший вертикальный ритм между секциями */
    .site-main > * + * {
        margin-block-start: var(--hlife-space-12);
    }

    /* === Site header ===================================================== */
    .site-header {
        position: sticky;
        top: 0;
        z-index: var(--hlife-z-sticky);
        background-color: var(--hlife-bg-primary);
        border-block-end: 1px solid var(--hlife-border-subtle);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .site-header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--hlife-space-8);
        min-height: var(--hlife-header-main-h);
    }

    .site-branding {
        display: flex;
        align-items: center;
    }

    .site-title {
        font-family: var(--hlife-font-serif);
        font-size: 1.5rem;
        font-weight: var(--hlife-fw-semibold);
        color: var(--hlife-color-navy);
        letter-spacing: var(--hlife-tracking-tight);
        line-height: 1;
        margin: 0;
    }

    .site-title-link {
        color: inherit;
        text-decoration: none;
    }

    .site-title-link:hover {
        color: var(--hlife-color-emerald);
    }

    /* === Primary navigation ============================================== */
    .primary-navigation {
        display: flex;
    }

    .primary-menu {
        display: flex;
        gap: var(--hlife-space-6);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .primary-menu li {
        position: relative;
    }

    .primary-menu a {
        color: var(--hlife-text-primary);
        text-decoration: none;
        font-weight: var(--hlife-fw-medium);
        font-size: var(--hlife-text-sm);
        letter-spacing: var(--hlife-tracking-wide);
        text-transform: uppercase;
        padding-block: var(--hlife-space-2);
        transition: var(--hlife-transition-colors);
    }

    .primary-menu a:hover,
    .primary-menu .current-menu-item a {
        color: var(--hlife-color-emerald);
    }

    /* На мобильных меню скрыто (toggle будет в Части 3) */
    @media (max-width: 768px) {
        .primary-navigation {
            display: none;
        }
    }

    /* === Site footer ===================================================== */
    .site-footer {
        background-color: var(--hlife-bg-tertiary);
        color: var(--hlife-text-secondary);
        padding-block: var(--hlife-space-16) var(--hlife-space-8);
        margin-block-start: var(--hlife-space-24);
    }

    .site-info {
        font-size: var(--hlife-text-sm);
        color: var(--hlife-text-tertiary);
    }

    /* === Article (single content) ======================================== */
    .entry-header {
        margin-block-end: var(--hlife-space-8);
    }

    .entry-title {
        font-size: var(--hlife-text-4xl);
        font-weight: var(--hlife-fw-semibold);
    }

    .entry-content {
        max-width: var(--hlife-content-max);
    }

    .entry-content > * + * {
        margin-block-start: var(--hlife-space-4);
    }

    .entry-content h2 {
        margin-block-start: var(--hlife-space-12);
    }

    .entry-content h3 {
        margin-block-start: var(--hlife-space-8);
    }

    .entry-content img {
        border-radius: var(--hlife-radius-lg);
        margin-block: var(--hlife-space-6);
    }

    .entry-content blockquote {
        border-inline-start: 4px solid var(--hlife-color-gold);
        padding-inline-start: var(--hlife-space-6);
        font-style: italic;
        color: var(--hlife-text-secondary);
        margin-block: var(--hlife-space-6);
    }
}

/* ============================================================================
 * @layer components — переиспользуемые UI-компоненты
 * ========================================================================= */

@layer components {

    /* === Button ========================================================== */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--hlife-space-2);
        font-family: var(--hlife-font-sans);
        font-size: var(--hlife-text-sm);
        font-weight: var(--hlife-fw-medium);
        line-height: 1;
        letter-spacing: var(--hlife-tracking-wide);
        text-decoration: none;
        text-align: center;
        white-space: nowrap;
        padding: var(--hlife-space-3) var(--hlife-space-6);
        border-radius: var(--hlife-radius-md);
        border: 1px solid transparent;
        cursor: pointer;
        transition: var(--hlife-transition-colors), var(--hlife-transition-transform);
        user-select: none;
    }

    .btn:hover {
        transform: translateY(-1px);
    }

    .btn:active {
        transform: translateY(0);
    }

    /* Variants */
    .btn--primary {
        background-color: var(--hlife-color-cta);
        color: var(--hlife-color-white);
    }

    .btn--primary:hover {
        background-color: var(--hlife-color-cta-hover);
        color: var(--hlife-color-white);
    }

    .btn--secondary {
        background-color: var(--hlife-color-navy);
        color: var(--hlife-color-white);
    }

    .btn--secondary:hover {
        background-color: var(--hlife-color-navy-90);
        color: var(--hlife-color-white);
    }

    .btn--ghost {
        background-color: transparent;
        color: var(--hlife-color-navy);
        border-color: var(--hlife-border-default);
    }

    .btn--ghost:hover {
        background-color: var(--hlife-color-sand-light);
        border-color: var(--hlife-color-navy);
    }

    .btn--link {
        background: transparent;
        color: var(--hlife-color-link);
        padding: var(--hlife-space-1) var(--hlife-space-2);
    }

    /* Sizes */
    .btn--sm {
        padding: var(--hlife-space-2) var(--hlife-space-4);
        font-size: var(--hlife-text-xs);
    }

    .btn--lg {
        padding: var(--hlife-space-4) var(--hlife-space-8);
        font-size: var(--hlife-text-base);
    }

    .btn--full {
        width: 100%;
    }

    /* === Card ============================================================ */
    .card {
        background-color: var(--hlife-bg-primary);
        border: 1px solid var(--hlife-border-subtle);
        border-radius: var(--hlife-radius-lg);
        overflow: hidden;
        transition: var(--hlife-transition-default);
    }

    .card:hover {
        border-color: var(--hlife-border-default);
        box-shadow: var(--hlife-shadow-md);
    }

    .card__media {
        position: relative;
        aspect-ratio: 4/3;
        overflow: hidden;
        background-color: var(--hlife-color-gray-100);
    }

    .card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--hlife-transition-transform);
    }

    .card:hover .card__media img {
        transform: scale(1.04);
    }

    .card__body {
        padding: var(--hlife-space-6);
    }

    .card__title {
        font-size: var(--hlife-text-xl);
        font-weight: var(--hlife-fw-semibold);
        margin-block-end: var(--hlife-space-2);
        color: var(--hlife-text-brand);
    }

    .card__excerpt {
        color: var(--hlife-text-secondary);
        font-size: var(--hlife-text-sm);
    }

    .card__footer {
        padding: var(--hlife-space-4) var(--hlife-space-6);
        border-block-start: 1px solid var(--hlife-border-subtle);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--hlife-space-4);
    }

    /* === Badge =========================================================== */
    .badge {
        display: inline-flex;
        align-items: center;
        gap: var(--hlife-space-1);
        padding: var(--hlife-space-1) var(--hlife-space-3);
        font-size: var(--hlife-text-xs);
        font-weight: var(--hlife-fw-medium);
        letter-spacing: var(--hlife-tracking-wide);
        text-transform: uppercase;
        border-radius: var(--hlife-radius-pill);
        background-color: var(--hlife-color-sand);
        color: var(--hlife-color-navy);
        line-height: 1;
    }

    .badge--gold {
        background-color: var(--hlife-color-gold-light);
        color: #8B6914;
    }

    .badge--emerald {
        background-color: var(--hlife-color-emerald-light);
        color: var(--hlife-color-emerald);
    }

    .badge--terracotta {
        background-color: #FCE5D8;
        color: var(--hlife-color-terracotta-hover);
    }

    /* === Trust badge ("без накруток") ==================================== */
    .trust-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--hlife-space-2);
        padding: var(--hlife-space-2) var(--hlife-space-4);
        background-color: var(--hlife-color-emerald-light);
        color: var(--hlife-color-emerald);
        border-radius: var(--hlife-radius-md);
        font-size: var(--hlife-text-sm);
        font-weight: var(--hlife-fw-medium);
        line-height: 1.3;
    }

    .trust-badge::before {
        content: '✓';
        font-weight: var(--hlife-fw-bold);
    }
}

/* ============================================================================
 * @layer utilities — утилитарные классы
 * ========================================================================= */

@layer utilities {

    /* Display */
    .u-hidden { display: none !important; }
    .u-block  { display: block !important; }
    .u-flex   { display: flex !important; }
    .u-grid   { display: grid !important; }
    .u-inline-block { display: inline-block !important; }

    /* Flex */
    .u-flex-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .u-flex-between {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .u-flex-col {
        display: flex;
        flex-direction: column;
    }

    .u-gap-2 { gap: var(--hlife-space-2); }
    .u-gap-4 { gap: var(--hlife-space-4); }
    .u-gap-6 { gap: var(--hlife-space-6); }

    /* Spacing */
    .u-mt-0  { margin-block-start: 0; }
    .u-mt-2  { margin-block-start: var(--hlife-space-2); }
    .u-mt-4  { margin-block-start: var(--hlife-space-4); }
    .u-mt-8  { margin-block-start: var(--hlife-space-8); }
    .u-mt-12 { margin-block-start: var(--hlife-space-12); }

    .u-mb-0  { margin-block-end: 0; }
    .u-mb-2  { margin-block-end: var(--hlife-space-2); }
    .u-mb-4  { margin-block-end: var(--hlife-space-4); }
    .u-mb-8  { margin-block-end: var(--hlife-space-8); }

    /* Text */
    .u-text-center { text-align: center; }
    .u-text-left   { text-align: left; }
    .u-text-right  { text-align: right; }

    .u-text-xs   { font-size: var(--hlife-text-xs); }
    .u-text-sm   { font-size: var(--hlife-text-sm); }
    .u-text-base { font-size: var(--hlife-text-base); }
    .u-text-lg   { font-size: var(--hlife-text-lg); }
    .u-text-xl   { font-size: var(--hlife-text-xl); }

    .u-fw-medium   { font-weight: var(--hlife-fw-medium); }
    .u-fw-semibold { font-weight: var(--hlife-fw-semibold); }
    .u-fw-bold     { font-weight: var(--hlife-fw-bold); }

    .u-text-muted   { color: var(--hlife-text-tertiary); }
    .u-text-brand   { color: var(--hlife-text-brand); }
    .u-text-emerald { color: var(--hlife-color-emerald); }
    .u-text-gold    { color: var(--hlife-color-gold); }

    /* Visibility on breakpoints */
    @media (max-width: 767px) {
        .u-hide-mobile { display: none !important; }
    }

    @media (min-width: 768px) {
        .u-hide-desktop { display: none !important; }
    }

    /* Truncate text */
    .u-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .u-truncate-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        overflow: hidden;
    }

    .u-truncate-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        line-clamp: 3;
        overflow: hidden;
    }

    /* Aspect ratios */
    .u-ratio-square { aspect-ratio: 1 / 1; }
    .u-ratio-4-3    { aspect-ratio: 4 / 3; }
    .u-ratio-16-9   { aspect-ratio: 16 / 9; }
    .u-ratio-3-2    { aspect-ratio: 3 / 2; }

    /* Borders */
    .u-rounded-sm { border-radius: var(--hlife-radius-sm); }
    .u-rounded    { border-radius: var(--hlife-radius-md); }
    .u-rounded-lg { border-radius: var(--hlife-radius-lg); }
    .u-rounded-xl { border-radius: var(--hlife-radius-xl); }

    /* Shadows */
    .u-shadow-sm { box-shadow: var(--hlife-shadow-sm); }
    .u-shadow-md { box-shadow: var(--hlife-shadow-md); }
    .u-shadow-lg { box-shadow: var(--hlife-shadow-lg); }
}

/* ============================================================================
 * @layer overrides — специфичные переопределения
 * ========================================================================= */

@layer overrides {

    /* Когда залогинен — есть admin bar (32px desktop / 46px mobile) */
    body.admin-bar .site-header {
        top: 32px;
    }

    @media (max-width: 782px) {
        body.admin-bar .site-header {
            top: 46px;
        }
    }
}