/* ===========================================================================
 * Блок "Избранное" — слайдер формата 2 (асимметрия)
 * Гамма взята из оригинального slider-pro.css:
 *   фон #fff8d3, рамки rgba(182,130,18,...).
 * Заголовок героя — Playfair Display (локально, см. functions.php).
 * =========================================================================== */

.fs-slider {
    position: relative;
    max-width: 660px;
    margin: 0 auto;
    padding: 6px;
    box-sizing: border-box;
    background: #fff8d3;                          /* кремовый из оригинала */
    border: 4px solid rgba(182, 130, 18, 0.13);  /* рамка блока из оригинала */
    font-family: Verdana, Arial, sans-serif;
}

/* Сетка: большой кадр + колонка навигации */
.fs-grid {
    display: grid;
    grid-template-columns: 1fr 210px;
    grid-auto-rows: 250px;        /* высота строки = высота кадра */
    gap: 6px;
    align-items: stretch;         /* колонка плиток тянется на те же 250px */
}

/* ---------- Большой кадр ---------- */
.fs-stage {
    position: relative;
    height: 250px;                /* фиксированная высота, как в старом слайдере */
    overflow: hidden;
    background: #3a2a1a;          /* фон, пока грузится картинка */
    border: 2px solid #c9a24a;    /* золотая рамка кадра (пока оставлена) */
    box-sizing: border-box;
}

.fs-stage-slide {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.fs-stage-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.fs-stage-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Плашка "Избранное" — единственное место со скруглением */
.fs-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    background: #8a1e33;
    color: #f0d98a;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 0.3px;
    padding: 3px 11px;
    border-radius: 5px;
}

.fs-stage-overlay {
    position: absolute;
    left: 0;
    right: 0;
    padding: 20px 22px 22px;
}

/* Позиция снизу (по умолчанию): градиент вверх */
.fs-stage-overlay.fs-pos-bottom {
    bottom: 0;
    background: linear-gradient(0deg,
        rgba(35, 10, 14, 0.94) 0%,
        rgba(35, 10, 14, 0.40) 55%,
        transparent 100%);
}

/* Позиция сверху: градиент вниз */
.fs-stage-overlay.fs-pos-top {
    top: 0;
    background: linear-gradient(180deg,
        rgba(35, 10, 14, 0.94) 0%,
        rgba(35, 10, 14, 0.40) 55%,
        transparent 100%);
}

/* Позиция по центру: плашка-градиент в обе стороны */
.fs-stage-overlay.fs-pos-center {
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(0deg,
        rgba(35, 10, 14, 0.85) 0%,
        rgba(35, 10, 14, 0.85) 100%);
    padding: 18px 22px;
}

.fs-stage-title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    color: #f0d98a;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 7px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);  /* тень из оригинала sp-black */
}

.fs-stage-text {
    color: #ece0c8;
    font-size: 13px;
    line-height: 1.4;
    max-width: 440px;
}

/* ---------- Колонка навигации: превью на всю высоту слева + текст справа ---------- */
.fs-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;                 /* на всю высоту строки грида (250px) */
    min-height: 0;
}

.fs-nav-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-height: 0;
    padding: 4px;
    box-sizing: border-box;
    background: #fff8d3;
    border: 1px solid rgba(182, 130, 18, 0.43);   /* рамка превью из оригинала */
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.fs-nav-card:hover {
    background: #fdf3c4;
}

/* Активная плитка: серая подсветка + тень + треугольник-указатель */
.fs-nav-card.is-active {
    background: #e8e8e8;
    box-shadow: 0 2px 7px rgba(90, 60, 20, 0.4);
}

.fs-nav-card.is-active::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    margin-top: -7px;
    width: 0;
    height: 0;
    border-right: 8px solid #e8e8e8;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.fs-nav-img {
    width: 78px;
    height: 100%;
    flex-shrink: 0;
    object-fit: cover;
    display: block;
    border: 2px solid transparent;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

/* Превью активной плитки "высвечивается" золотисто-коричневой рамкой */
.fs-nav-card.is-active .fs-nav-img {
    border-color: #b68212;
}

.fs-nav-label {
    color: #4a3520;
    font-size: 11px;
    font-weight: normal;
    line-height: 1.3;
}

/* ===========================================================================
 * ПЛАНШЕТ  640–1023px
 * =========================================================================== */
@media (max-width: 1023px) {
    .fs-grid {
        grid-template-columns: 1fr 180px;
    }
    .fs-stage-title { font-size: 22px; }
    .fs-nav-img     { width: 64px; }
    .fs-nav-label   { font-size: 10px; }
}

/* ===========================================================================
 * ТЕЛЕФОН  <640px  —  большой кадр сверху, плитки лентой снизу
 * =========================================================================== */
@media (max-width: 639px) {
    .fs-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;         /* сброс фикс-высоты строк */
    }
    .fs-stage {
        height: auto;                 /* высота по пропорции картинки */
        aspect-ratio: 400 / 250;
    }
    .fs-nav {
        flex-direction: row;
        height: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        scrollbar-width: none;        /* Firefox: скрыть полосу прокрутки */
        -ms-overflow-style: none;     /* старый Edge/IE */
    }
    .fs-nav::-webkit-scrollbar {
        display: none;                /* Chrome/Safari: скрыть полосу */
    }
    .fs-nav-card {
        flex: 0 0 auto;
        width: 210px;
        height: 66px;
    }
    /* На телефоне треугольник-указатель не нужен (плитки в ряд) */
    .fs-nav-card.is-active::before {
        display: none;
    }
    .fs-stage-title { font-size: 20px; }
    .fs-stage-text  { font-size: 12px; }
}