/* Поля партнёров | Seyfinity 2.6
   Мета-колонка, раскладка карточки и галерея.
   Устанавливается плагином в /media/plg_system_seyfields/css/.
   Цвета заданы прямыми значениями, а не переменными, — чтобы блок не зависел
   от Custom CSS шаблона и не ломался при его правках.

   Классы sf-flow и sf-nodate плагин ставит на .sp-simpleportfolio-view-item
   сам, по настройкам. Без них этот файл ничего в раскладке не меняет. */

/* ---------- 0. Оформление карточки ----------
   Перенесено из Custom CSS шаблона, чтобы правки жили вместе с плагином.
   Включается классом sf-style (настройка «Оформлять карточку»).
   Раскладка здесь не задаётся — ею занимается блок 1. */

.sp-simpleportfolio-view-item.sf-style .sp-simpleportfolio-image img {
    width: 100%;
    min-height: 360px;
    max-height: 560px;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

.sp-simpleportfolio-view-item.sf-style .sp-simpleportfolio-description h2 {
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 0 0 18px;
    color: #0a201c;
}

.sp-simpleportfolio-view-item.sf-style .sp-simpleportfolio-description {
    font-size: 17px;
    line-height: 1.75;
    color: #5f7169;
}

.sp-simpleportfolio-view-item.sf-style .sp-simpleportfolio-description h4 {
    color: #0a201c;
    font-size: 17px;
    margin: 26px 0 8px;
}

.sp-simpleportfolio-view-item.sf-style .sp-simpleportfolio-meta {
    background: #eef2ef;
    border-radius: 18px;
    padding: 24px;
}

.sp-simpleportfolio-view-item.sf-style .sp-simpleportfolio-meta > div {
    padding: 13px 0;
    border-bottom: 1px solid rgba(7, 24, 27, .12);
}

.sp-simpleportfolio-view-item.sf-style .sp-simpleportfolio-meta > div:first-child {
    padding-top: 0;
}

/* Подписи строк: и собственные h4 компонента, и безклассовые обёртки. */
.sp-simpleportfolio-view-item.sf-style .sp-simpleportfolio-meta > div:not([class]),
.sp-simpleportfolio-view-item.sf-style .sp-simpleportfolio-meta h4 {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6f9d8d;
    margin: 0 0 4px;
    font-weight: 500;
    padding-bottom: 0;
    border-bottom: 0;
}

.sp-simpleportfolio-view-item.sf-style .sp-simpleportfolio-client,
.sp-simpleportfolio-view-item.sf-style .sp-simpleportfolio-created,
.sp-simpleportfolio-view-item.sf-style .sp-simpleportfolio-tags {
    font-size: 15px;
    color: #0a201c;
    text-transform: none;
    letter-spacing: 0;
    background: none;
    padding-left: 0;
    padding-right: 0;
}

/* Блок своих полей сам рисует разделители — вторая линия была бы лишней. */
.sp-simpleportfolio-view-item.sf-style .sp-simpleportfolio-meta > .sf-fields {
    border-bottom: 0;
    padding: 16px 0 0;
}

.sp-simpleportfolio-view-item.sf-style .sp-simpleportfolio-link {
    border-bottom: 0;
    padding-bottom: 0;
    padding-top: 18px;
}

.sp-simpleportfolio-view-item.sf-style .sp-simpleportfolio-link .btn,
.sp-simpleportfolio-view-item.sf-style .sp-simpleportfolio-link .btn-primary {
    display: block;
    width: 100%;
    text-align: center;
    background: #0a201c;
    border: 0;
    border-radius: 999px;
    padding: 14px 22px;
    font-size: 15px;
    color: #ffffff;
    transition: background .2s;
}

.sp-simpleportfolio-view-item.sf-style .sp-simpleportfolio-link .btn-primary:hover {
    background: #3f8d7a;
    color: #ffffff;
}

@media (max-width: 860px) {
    .sp-simpleportfolio-view-item.sf-style .sp-simpleportfolio-image img {
        min-height: 260px;
    }
}

/* ---------- 1. Раскладка: фото слева, колонка справа, описание обтекает ---------- */

.sp-simpleportfolio-view-item.sf-flow {
    display: block;
}

.sp-simpleportfolio-view-item.sf-flow::after {
    content: "";
    display: block;
    clear: both;
}

/* Блок с описанием становится обычным: при display:contents его содержимое
   разложила бы сетка шаблона, и галерея уехала бы в правую колонку. */
.sp-simpleportfolio-view-item.sf-flow > .sp-simpleportfolio-details {
    display: block !important;
    float: none !important;
    width: auto !important;
    max-width: none;
    margin: 0;
}

/* Только геометрия: фон, отступы и скругление остаются за Custom CSS шаблона.
   !important здесь обязателен: и сам компонент (float:left;width:35%), и типовые
   правки в Custom CSS (float:none!important) иначе гасят обтекание. */
.sp-simpleportfolio-view-item.sf-flow .sp-simpleportfolio-meta {
    float: right !important;
    width: 340px !important;
    max-width: 100%;
    margin: 0 0 28px 40px;
}

/* Своя область форматирования — иначе фото уедет под плавающую колонку. */
.sp-simpleportfolio-view-item.sf-flow .sp-simpleportfolio-image {
    overflow: hidden !important;
    float: none !important;
    width: auto !important;
    margin: 0 0 24px;
    border-radius: 16px;
}

.sp-simpleportfolio-view-item.sf-flow .sp-simpleportfolio-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Описание идёт сразу за фото и, став длиннее колонки, заходит под неё. */
.sp-simpleportfolio-view-item.sf-flow .sp-simpleportfolio-description {
    float: none !important;
    width: auto !important;
    max-width: none;
    margin: 0;
}

.sp-simpleportfolio-view-item.sf-nodate .sp-simpleportfolio-created {
    display: none;
}

@media (max-width: 767px) {
    .sp-simpleportfolio-view-item.sf-flow .sp-simpleportfolio-meta {
        float: none !important;
        width: 100% !important;
        margin: 0 0 24px;
    }
}

/* ---------- 2. Дополнительные поля в правой колонке ---------- */

.sp-simpleportfolio-view-item .sf-fields {
    margin: 22px 0 0;
    font-size: 14px;
    line-height: 1.55;
}

.sp-simpleportfolio-view-item .sf-group + .sf-group {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(7, 24, 27, .12);
}

.sp-simpleportfolio-view-item .sf-group-title {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6f9d8d;
}

.sp-simpleportfolio-view-item .sf-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(7, 24, 27, .08);
}

.sp-simpleportfolio-view-item .sf-group .sf-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.sp-simpleportfolio-view-item .sf-k {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6f9d8d;
}

.sp-simpleportfolio-view-item .sf-v {
    color: #0a201c;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Ссылки внутри полей: подчёркивание только по наведению, цвет из палитры сайта. */
.sp-simpleportfolio-view-item .sf-v a {
    color: #0a201c;
    text-decoration: none;
    border-bottom: 1px solid rgba(111, 157, 141, .55);
    transition: color .15s, border-color .15s;
}

.sp-simpleportfolio-view-item .sf-v a:hover,
.sp-simpleportfolio-view-item .sf-v a:focus {
    color: #2fd7a8;
    border-bottom-color: #2fd7a8;
}

/* Поле с форматированием: обычный текст, а не подпись-значение. */
.sp-simpleportfolio-view-item .sf-row-wide .sf-v {
    font-weight: 400;
    color: #5f7169;
    margin-top: 4px;
}

.sp-simpleportfolio-view-item .sf-html > :first-child { margin-top: 0; }
.sp-simpleportfolio-view-item .sf-html > :last-child { margin-bottom: 0; }
.sp-simpleportfolio-view-item .sf-html p { margin: 0 0 8px; }

.sp-simpleportfolio-view-item .sf-html ul,
.sp-simpleportfolio-view-item .sf-html ol {
    margin: 0 0 8px;
    padding-left: 18px;
}

.sp-simpleportfolio-view-item .sf-html li + li { margin-top: 4px; }

.sp-simpleportfolio-view-item .sf-fields + .sp-simpleportfolio-link {
    margin-top: 24px;
}

/* Шаблон печатает кнопку через text-transform: capitalize — по-английски это
   выглядит нормально, но «Смотреть В Гиде» по-русски читается неряшливо. */
.sp-simpleportfolio-view-item .sp-simpleportfolio-link a {
    text-transform: none;
}

/* ---------- 3. Галерея ---------- */

/* Уже колонки текста: ряд из четырёх миниатюр иначе получается слишком широким. */
.sp-simpleportfolio-view-item .sf-gallery {
    clear: both;
    /* Ширину задаёт настройка плагина; 70% — запасное значение. */
    width: var(--sf-gallery-width, 100%);
    max-width: 100%;
    margin: 46px auto 0;
}

.sp-simpleportfolio-view-item .sf-gallery-title {
    margin: 0 0 18px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #0a201c;
}

/* Сетка на 30 колонок: 30 делится и на 5, и на 6, поэтому верхние ряды
   (крупный кадр плюс пять миниатюр) и нижние (шесть миниатюр)
   умещаются в одну сетку без рассинхрона отступов. */
.sp-simpleportfolio-view-item .sf-gallery-grid {
    display: grid;
    grid-template-columns: repeat(30, minmax(0, 1fr));
    gap: 12px;
}

/* Крупный кадр: треть ширины, высотой ровно в два ряда.
   Высоту задаёт сетка, поэтому снимок внутри выводится из потока —
   иначе его собственные пропорции растягивали бы ряды. */
.sp-simpleportfolio-view-item .sf-shot.sf-hero {
    grid-column: span 10;
    grid-row: span 2;
    aspect-ratio: auto;
    height: auto;
    align-self: stretch;
}

.sp-simpleportfolio-view-item .sf-shot.sf-hero img {
    position: absolute;
    inset: 0;
}

/* Соседи крупного кадра — по пять в ряд. */
.sp-simpleportfolio-view-item .sf-shot.sf-top {
    grid-column: span 4;
}

.sp-simpleportfolio-view-item .sf-shot {
    display: block;
    position: relative;
    grid-column: span 5;
    /* Без этого содержимое задаёт элементу минимальную ширину и растягивает колонку. */
    min-width: 0;
    min-height: 0;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 14px;
    background: #eef2ef;
    border: 0;
}

.sp-simpleportfolio-view-item .sf-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.sp-simpleportfolio-view-item .sf-shot:hover img,
.sp-simpleportfolio-view-item .sf-shot:focus-visible img {
    transform: scale(1.045);
}

.sp-simpleportfolio-view-item .sf-shot-hidden {
    display: none;
}

.sp-simpleportfolio-view-item .sf-more {
    display: block;
    margin: 24px auto 0;
    padding: 13px 30px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    color: #0a201c;
    background: none;
    border: 1px solid rgba(7, 24, 27, .22);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.sp-simpleportfolio-view-item .sf-more:hover {
    color: #ffffff;
    background: #0a201c;
    border-color: #0a201c;
}

/* На ноутбуке соседи крупного кадра уравниваются с остальными: иначе
   десять «верхних» снимков не делятся на ряд нацело и дают рваную строку. */
@media (max-width: 1199px) {
    .sp-simpleportfolio-view-item .sf-gallery { width: max(var(--sf-gallery-width, 100%), 90%); }
    .sp-simpleportfolio-view-item .sf-shot,
    .sp-simpleportfolio-view-item .sf-shot.sf-top { grid-column: span 5; }
}

@media (max-width: 991px) {
    .sp-simpleportfolio-view-item .sf-gallery { width: 100%; }
    .sp-simpleportfolio-view-item .sf-gallery-grid { gap: 8px; }
    .sp-simpleportfolio-view-item .sf-shot,
    .sp-simpleportfolio-view-item .sf-shot.sf-top { grid-column: span 10; }
}

/* На телефоне 30 колонок не помещаются: одних промежутков набирается больше
   ширины экрана. Переходим на обычные две колонки. */
@media (max-width: 767px) {
    .sp-simpleportfolio-view-item .sf-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .sp-simpleportfolio-view-item .sf-shot,
    .sp-simpleportfolio-view-item .sf-shot.sf-top { grid-column: span 1; }
    .sp-simpleportfolio-view-item .sf-shot.sf-hero {
        grid-column: span 2;
        grid-row: span 1;
        aspect-ratio: 3 / 2;
    }
}

/* ---------- 4. Просмотр фотографии ---------- */

.sf-box {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px 72px;
    background: rgba(6, 19, 22, .94);
}

.sf-box.is-open { display: flex; }

body.sf-box-locked { overflow: hidden; }

.sf-box-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0;
    max-width: 100%;
}

.sf-box img {
    display: block;
    max-width: min(1240px, 90vw);
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
}

.sf-box-count {
    font-size: 12px;
    letter-spacing: .14em;
    color: #8fb3a7;
}

.sf-box button {
    position: absolute;
    width: 46px;
    height: 46px;
    padding: 0;
    background: rgba(255, 255, 255, .1);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .15s;
}

.sf-box button:hover { background: rgba(47, 215, 168, .28); }
.sf-box button[hidden] { display: none; }

.sf-box button::before,
.sf-box button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
}

.sf-box-close { top: 22px; right: 22px; }
.sf-box-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.sf-box-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.sf-box-prev { top: 50%; left: 18px; margin-top: -23px; }
.sf-box-next { top: 50%; right: 18px; margin-top: -23px; }

.sf-box-prev::before { transform: translate(-30%, -50%) rotate(-45deg); transform-origin: left center; }
.sf-box-prev::after { transform: translate(-30%, -50%) rotate(45deg); transform-origin: left center; }
.sf-box-next::before { transform: translate(-70%, -50%) rotate(45deg); transform-origin: right center; }
.sf-box-next::after { transform: translate(-70%, -50%) rotate(-45deg); transform-origin: right center; }

@media (max-width: 600px) {
    .sf-box { padding: 20px 14px; }
    .sf-box-prev { left: 8px; }
    .sf-box-next { right: 8px; }
}