/* ============================================================================
   ЕДИНЫЙ КОМПОНЕНТ «ДРУГИЕ ПРОЕКТЫ» — один источник правды для всех кейсов.
   Подключение на странице кейса (3 строки):
     <link rel="stylesheet" href="../case-projects.css">
     <div class="other-projects" data-projects="nedvizhimost,yplay"></div>
     <script src="../case-projects.js"></script>
   case-projects.js сам отрисует .op-grid > a.op-card > iframe из реестра проектов
   (RU/EN определит по URL). Классы .op-* уникальны, чтобы не конфликтовать с
   локальными стилями страниц. Ширина карточки = как на главной (контейнер 1440px
   → 2 кол → ~708px), ровно под неё свёрстаны 4:3-обложки. Брейкпоинты — только здесь.
   ========================================================================== */

/* БЛОК-КОНСТРУКТОР: обёртка (заголовок + грид) НЕ подчиняется ширине контейнера
   страницы. Вырывается из любого узкого враппера (cp-w 1140, sd-page 1200 …) и
   центрируется по вьюпорту на ширине как у главной → заголовок и карточки одной
   ширины, карточка ~708px, один и тот же десктоп-слой обложки НА ВСЕХ страницах. */
.op-wrap {
    width: min(1440px, 100vw - 48px);
    margin-top: 32px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: left; /* единообразно: заголовок по левому краю плашек на всех страницах */
}

.op-title {
    font-family: inherit;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: inherit;
    margin: 0 0 28px;
}

.op-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.op-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
}

.op-card iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 16px;
    display: block;
    pointer-events: none; /* клик ловит сам <a class="op-card"> */
}

/* Мобайл: одна колонка во всю ширину (как на главной) → обложка в своей
   мобильной раскладке. */
@media (max-width: 600px) {
    .op-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .op-title {
        font-size: clamp(24px, 7vw, 34px);
        margin-bottom: 18px;
    }
}