/**
 * Lifestyle Tiles — Sprint S8 (Warm-Platinum).
 *
 * [sk_lifestyle_tiles]: 6 tile-карточек IA-gateway главной страницы.
 * Каждая tile — full-bleed фото + gradient overlay + редакционная подпись снизу.
 *
 * Источник: docs/s8/moodboard.md §4.2
 */

/* ===== Section ===== */
.sk-lifestyle {
    padding: var(--section-padding-y) var(--section-padding-x);
    background: var(--color-bg-primary);
    position: relative;
}

.sk-lifestyle__container {
    max-width: var(--container-max);
    margin: 0 auto;
}

.sk-lifestyle__header {
    max-width: 42rem;
    margin: 0 0 var(--sp-12);
}

/* ===== Grid ===== */
.sk-lifestyle__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}

@media (min-width: 768px) {
    .sk-lifestyle__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-4);
    }
}

@media (min-width: 1024px) {
    .sk-lifestyle__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-6);
    }
}

/* ===== Tile (ссылка) ===== */
.sk-lifestyle__tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    background: var(--color-navy-900);
    border-radius: var(--radius-none);
    transition: transform var(--dur-base) var(--ease-out);
}

.sk-lifestyle__tile:hover {
    transform: translateY(-4px);
}

.sk-lifestyle__tile:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* ===== Media ===== */
.sk-lifestyle__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.sk-lifestyle__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-slow) var(--ease-out);
}

.sk-lifestyle__tile:hover .sk-lifestyle__media img {
    transform: scale(1.03);
}

/* ===== Overlay (gradient navy-900 для читаемости текста) ===== */
.sk-lifestyle__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* navy-900 @ 85% → 30% → 0% (gradient строим на лету, opacity на navy-900) */
    background: linear-gradient(
        to top,
        rgba(26, 46, 95, 0.85) 0%,
        rgba(26, 46, 95, 0.30) 50%,
        rgba(26, 46, 95, 0.00) 100%
    );
    transition: background var(--dur-base) var(--ease-out);
}

.sk-lifestyle__tile:hover .sk-lifestyle__overlay {
    background: linear-gradient(
        to top,
        rgba(26, 46, 95, 0.92) 0%,
        rgba(26, 46, 95, 0.45) 50%,
        rgba(26, 46, 95, 0.05) 100%
    );
}

/* ===== Body (текстовый блок снизу) ===== */
.sk-lifestyle__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: var(--sp-6);
    color: var(--color-white);
}

.sk-lifestyle__eyebrow {
    display: block;
    font-family: var(--ff-body);
    font-size: var(--fs-12);
    font-weight: 600;
    letter-spacing: var(--ls-ultra);
    text-transform: uppercase;
    color: var(--color-platinum-300);
    margin-bottom: var(--sp-3);
}

.sk-lifestyle__divider {
    display: block;
    width: 32px;
    height: 2px;
    background: var(--color-terracotta-600);
    margin-bottom: var(--sp-3);
    transition: width var(--dur-base) var(--ease-out);
}

.sk-lifestyle__tile:hover .sk-lifestyle__divider {
    width: 72px;
}

.sk-lifestyle__title {
    font-family: var(--ff-display);
    font-size: var(--fs-24);
    font-weight: 700;
    line-height: var(--lh-snug);
    color: var(--color-white);
    margin: 0 0 var(--sp-2);
}

.sk-lifestyle__meta {
    font-family: var(--ff-body);
    font-size: var(--fs-14);
    line-height: var(--lh-normal);
    color: var(--color-platinum-300);
    margin: 0;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .sk-lifestyle__tile,
    .sk-lifestyle__tile:hover,
    .sk-lifestyle__media img,
    .sk-lifestyle__tile:hover .sk-lifestyle__media img,
    .sk-lifestyle__overlay,
    .sk-lifestyle__tile:hover .sk-lifestyle__overlay,
    .sk-lifestyle__divider,
    .sk-lifestyle__tile:hover .sk-lifestyle__divider {
        transition: none;
        transform: none;
    }
}