/* ── Секция ───────────────────────────────────────────────────── */
.oshg-section {
    --oshg-card-w: 250px;
    --oshg-card-h: 285px;
    --oshg-gap: 20px;
    --oshg-overlap: 54px;
    --oshg-offset: calc((var(--oshg-card-w) + var(--oshg-gap)) / 2);
    background: #fff;
    padding: 48px 24px 56px;
    box-sizing: border-box;
    overflow-x: clip;
    overflow-y: visible;
    position: relative;
    isolation: isolate;
    border-radius: 5px;
}

/* ── Сетка ────────────────────────────────────────────────────── */
.oshg-grid {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--oshg-gap);
    row-gap: 0;
    max-width: calc(var(--oshg-card-w) * 4 + var(--oshg-gap) * 3);
    margin: 0 auto;
    justify-content: flex-start;
    position: relative;          /* якорь для боковых ghost-ов */
    z-index: 1;
    border-radius: 5px;
}

.oshg-grid::before,
.oshg-grid::after {
    content: "";
    position: absolute;
    top: -170px;
    bottom: -170px;
    width: 460px;
    pointer-events: none;
    z-index: 1;
}

.oshg-grid::before {
    left: -340px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) calc(100% - 95px),
        rgba(255, 255, 255, 0) 100%
    );
}

.oshg-ghost-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    border-radius: 5px;
}

.oshg-ghost-layer::before,
.oshg-ghost-layer::after {
    content: "";
    position: absolute;
    left: -320px;
    right: -320px;
    height: 250px;
    pointer-events: none;
    z-index: 1;
}

.oshg-ghost-layer::before {
    top: -190px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) calc(100% - 70px),
        rgba(255, 255, 255, 0) 100%
    );
}

.oshg-ghost-layer::after {
    bottom: -190px;
    background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) calc(100% - 70px),
        rgba(255, 255, 255, 0) 100%
    );
}

.oshg-grid::after {
    right: -340px;
    background: linear-gradient(
        270deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) calc(100% - 95px),
        rgba(255, 255, 255, 0) 100%
    );
}

/* ── Карточка 250×285 (соотношение ≈ SVG 252:287) ────────────── */
.oshg-card {
    display: block;
    width: var(--oshg-card-w);
    height: var(--oshg-card-h);
    text-decoration: none;
    flex-shrink: 0;
    transition: transform 0.25s ease;
    position: relative;
    z-index: 2;
    border-radius: 5px;
}

.oshg-card:hover {
    transform: scale(1.05);
    z-index: 10;
}

/*
  Honeycomb (W=250 H=285 gap=20):
    margin-left = (250+20)/2 = 135px
    margin-top  = −54px (~20px перпендикулярный зазор)

  Паттерн 4+3+4+3… (max-width=1060px):
    Ряд 1 →  1– 4  (4 шт.)
    Ряд 2 →  5– 7  (3 шт., margin-left:135 + margin-top:−54)
    Ряд 3 →  8–11  (4 шт., margin-top:−54)
    Ряд 4 → 12–14  (3 шт., margin-left:135 + margin-top:−54)
*/

.oshg-card:nth-child(n+5) {
    margin-top: calc(var(--oshg-overlap) * -1);
}

.oshg-card:nth-child(7n+5) {
    margin-left: var(--oshg-offset);
}

/* ── Ghost-карточка (каркас без содержимого) ─────────────────── */
.oshg-card--ghost {
    pointer-events: none;
    position: absolute;
    margin: 0 !important;
    z-index: 0;
}

.oshg-card--ghost .oshg-card__border {
    background: linear-gradient(
        180deg,
        rgba(13, 153, 255, 0.16) 0%,
        rgba(25, 119, 240, 0.34)  100%
    );
}

.oshg-card--ghost .oshg-card__inner {
    background-color: #fff;
    transition: none;
}

.oshg-card--ghost-edge .oshg-card__border {
    background: linear-gradient(
        180deg,
        rgba(13, 153, 255, 0.1) 0%,
        rgba(25, 119, 240, 0.24) 100%
    );
}

/* ── Градиентный border (внешний wrapper) ─────────────────────── */
.oshg-card__border {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(13, 153, 255, 0.5) 0%,
        rgba(25, 119, 240, 1)   100%
    );
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.25s ease;
    border-radius: 5px;
}

.oshg-card:not(.oshg-card--ghost):hover .oshg-card__border {
    filter: brightness(1.15) drop-shadow(0 6px 16px rgba(25, 119, 240, 0.5));
}

/* ── Внутренний элемент (5 px border) ────────────────────────── */
.oshg-card__inner {
    width:  calc(100% - 10px);
    height: calc(100% - 10px);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background-color: #ddeeff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: background-size 0.25s ease;
    border-radius: 5px;
}

.oshg-card:not(.oshg-card--ghost):hover .oshg-card__inner {
    background-size: 110%;
}

/* ── Overlay ─────────────────────────────────────────────────── */
.oshg-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    transition: background 0.25s ease;
}

.oshg-card:not(.oshg-card--ghost):hover .oshg-card__overlay {
    background: rgba(13, 153, 255, 0.8);
}

/* ── Заголовок ───────────────────────────────────────────────── */
.oshg-card__title {
    position: relative;
    z-index: 2;
    color: rgba(1, 21, 48, 1);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: clamp(12px, calc(var(--oshg-card-w) * 0.06), 15px);
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    margin: 0;
    padding: 0 calc(var(--oshg-card-w) * 0.128);
    transition: color 0.25s ease;
}

.oshg-card:not(.oshg-card--ghost):hover .oshg-card__title {
    color: rgba(255, 255, 255, 1);
}

/* ── Кнопка «Показать ещё» ────────────────────────────────────── */
.oshg-loadmore-wrap {
    text-align: center;
    margin-top: 60px;
    position: relative;
    z-index: 20;
}

.oshg-loadmore {
    display: inline-block;
    padding: 13px 44px;
    background: linear-gradient(90deg, rgba(13, 153, 255, 1) 0%, rgba(25, 119, 240, 1) 100%);
    color: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.oshg-loadmore:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.oshg-loadmore:disabled {
    opacity: 0.5;
    cursor: default;
    transform: none;
}

/* ── Tablet (≤ 1024px): 2+1+2+1 ряды, карточка 250×285 ───────── */
/* max-width = 2×250 + 20 = 520px; margin-left = (250+20)/2 = 135px */
.oshg-section.oshg-layout-tablet {
    --oshg-card-w: 250px;
    --oshg-card-h: 285px;
    --oshg-overlap: 54px;
}

.oshg-section.oshg-layout-tablet .oshg-grid {
    max-width: calc(var(--oshg-card-w) * 2 + var(--oshg-gap));
    column-gap: var(--oshg-gap);
}

.oshg-section.oshg-layout-tablet .oshg-card {
    width: var(--oshg-card-w);
    height: var(--oshg-card-h);
}

/* Сброс desktop-смещений */
.oshg-section.oshg-layout-tablet .oshg-card:nth-child(n+5) {
    margin-top: 0;
}
.oshg-section.oshg-layout-tablet .oshg-card:nth-child(7n+5) {
    margin-left: 0;
}

/* Tablet: 2+1 паттерн */
.oshg-section.oshg-layout-tablet .oshg-card:nth-child(n+3) {
    margin-top: calc(var(--oshg-overlap) * -1);
}
.oshg-section.oshg-layout-tablet .oshg-card:nth-child(3n) {
    margin-left: var(--oshg-offset);
}

.oshg-section.oshg-layout-tablet .oshg-card__title {
    font-size: clamp(12px, calc(var(--oshg-card-w) * 0.06), 15px);
    padding: 0 calc(var(--oshg-card-w) * 0.128);
}

/* ── Mobile (≤ 520px): 1 карточка зигзагом, без дублей ghost ─── */
/* 250×0.64=160, 285×0.64=182                                     */
.oshg-section.oshg-layout-mobile {
    --oshg-card-w: 160px;
    --oshg-card-h: 182px;
    --oshg-overlap: 36px;
    --oshg-offset: calc((var(--oshg-card-w) + 16px) / 2);
    padding: 24px 16px 32px;
    overflow-x: hidden;
    overflow-y: hidden;
}

.oshg-section.oshg-layout-mobile .oshg-ghost-layer::before,
.oshg-section.oshg-layout-mobile .oshg-ghost-layer::after {
    display: none;
}

.oshg-section.oshg-layout-mobile .oshg-grid::before,
.oshg-section.oshg-layout-mobile .oshg-grid::after {
    top: -110px;
    bottom: -110px;
    width: 220px;
}

.oshg-section.oshg-layout-mobile .oshg-grid::before {
    left: -150px;
}

.oshg-section.oshg-layout-mobile .oshg-grid::after {
    right: -150px;
}

.oshg-section.oshg-layout-mobile .oshg-grid {
    max-width: calc(var(--oshg-card-w) + var(--oshg-offset));
    column-gap: 0;
    row-gap: 0;
}

.oshg-section.oshg-layout-mobile .oshg-card:nth-child(n) {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}

.oshg-section.oshg-layout-mobile .oshg-card:nth-child(n+2) {
    margin-top: calc(var(--oshg-overlap) * -1);
}

.oshg-section.oshg-layout-mobile .oshg-card:nth-child(even) {
    margin-left: var(--oshg-offset);
}

.oshg-section.oshg-layout-mobile .oshg-card {
    width: var(--oshg-card-w);
    height: var(--oshg-card-h);
}

.oshg-section.oshg-layout-mobile .oshg-card__title {
    font-size: clamp(10px, calc(var(--oshg-card-w) * 0.075), 12px);
    padding: 0 calc(var(--oshg-card-w) * 0.1375);
}