/* Блок «Корпоративные сайты компаний»: php-helpers/corp-sites.php + js/corp-sites.js */
.corp {
    --corp-red: #c80000;
    --corp-ink: #17181d;
    --corp-text: #4a4d57;
    --corp-muted: #6f7380;
    --corp-line: #e6e8ec;
    --corp-gap: 24px;
    --corp-per: 4;
    padding: 88px 0 80px;
    background: #f6f6f6;
    color: #45474d;
    overflow: hidden;
}
.corp .title-group { margin-bottom: 32px; }
.corp .vs-titles [data-role="subtitle"] { max-width: 760px; margin: 10px auto 0; color: var(--corp-muted); font-size: 16px; line-height: 1.6; }

.corp__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.corp__all { font-size: 14px; font-weight: 600; color: var(--corp-ink); border-bottom: 1px solid rgba(23, 24, 29, .25); transition: color .2s, border-color .2s; }
.corp__all:hover, .corp__all:focus { color: var(--corp-red); border-color: var(--corp-red); text-decoration: none; }
.corp__nav { display: flex; gap: 8px; }
.corp__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    border: 1px solid #d5d7dd; border-radius: 50%;
    background: #fff; color: var(--corp-ink);
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, opacity .2s, transform .15s;
}
.corp__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.corp__btn:active:not(:disabled) { transform: scale(.94); }
.corp__btn:disabled { opacity: .35; cursor: default; }
.corp__btn:focus-visible, .corp__track:focus-visible, .corp-card a:focus-visible, .corp-card--all:focus-visible { outline: 2px solid var(--corp-red); outline-offset: 3px; }

.corp__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--corp-per) - 1) * var(--corp-gap)) / var(--corp-per));
    gap: var(--corp-gap);
    margin: 0;
    padding: 6px 0 18px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.corp__track::-webkit-scrollbar { display: none; }
.corp__item { display: flex; min-width: 0; scroll-snap-align: start; }

.corp-card {
    display: flex; flex-direction: column;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(23, 24, 29, .06), 0 6px 20px rgba(23, 24, 29, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}
.corp-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #e9eaee; }
.corp-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s ease; }
.corp-card__b { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 20px; text-align: left; }
.corp .corp-card__niche { margin-bottom: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; line-height: 1.4; text-transform: uppercase; color: var(--corp-red); }
.corp .corp-card__t { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: 0; line-height: 1.3; text-transform: none; color: var(--corp-ink); }
.corp .corp-card__t a { color: inherit; }
.corp .corp-card__t a:hover { color: var(--corp-red); text-decoration: none; }
.corp .corp-card__d {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
    margin: 0 0 16px; overflow: hidden;
    font-size: 14px; line-height: 1.55; color: var(--corp-text);
}
.corp-card__links { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--corp-line); }
.corp .corp-card__more { flex: none; font-size: 14px; font-weight: 600; color: var(--corp-red); }
.corp .corp-card__more span { display: inline-block; transition: transform .2s; }
.corp .corp-card__more:hover { color: #a90000; text-decoration: none; }
.corp .corp-card__site { min-width: 0; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; color: var(--corp-muted); border-bottom: 1px solid transparent; }
.corp .corp-card__site:hover { color: var(--corp-ink); border-color: currentColor; text-decoration: none; }

.corp .corp-card--all {
    justify-content: center;
    padding: 32px 28px;
    background: var(--corp-ink);
    color: #fff;
    text-align: left;
}
.corp .corp-card--all:hover, .corp .corp-card--all:focus { color: #fff; text-decoration: none; }
.corp-card__num { font-size: 64px; font-weight: 300; line-height: 1; letter-spacing: -2px; color: var(--corp-red); }
.corp-card__all-t { margin-top: 14px; font-size: 22px; font-weight: 600; line-height: 1.25; }
.corp-card__all-t span { display: inline-block; transition: transform .2s; }
.corp-card__all-d { margin-top: 10px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .7); }

@media (hover: hover) {
    .corp__btn:hover:not(:disabled) { border-color: var(--corp-red); background: var(--corp-red); color: #fff; }
    .corp-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(23, 24, 29, .06), 0 14px 32px rgba(23, 24, 29, .1); }
    .corp-card:hover .corp-card__img img { transform: scale(1.03); }
    .corp-card:hover .corp-card__more span, .corp-card--all:hover .corp-card__all-t span { transform: translateX(4px); }
}

@media (max-width: 1199px) {
    .corp { --corp-per: 3; }
}
@media (max-width: 991px) {
    .corp { --corp-gap: 20px; --corp-per: 2.25; padding: 72px 0 64px; }
}
@media (max-width: 767px) {
    .corp { --corp-gap: 14px; --corp-per: 1.18; padding: 56px 0 48px; }
    .corp .vs-titles [data-role="subtitle"] { font-size: 15px; }
    .corp__track { margin: 0 -15px; padding: 6px 15px 16px; scroll-padding: 0 15px; grid-auto-columns: calc((100% - 30px - (var(--corp-per) - 1) * var(--corp-gap)) / var(--corp-per)); }
    .corp__btn { width: 40px; height: 40px; }
    .corp-card__b { padding: 16px 16px 18px; }
    .corp .corp-card__t { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .corp__track { scroll-behavior: auto; }
    .corp-card, .corp-card__img img, .corp__btn, .corp-card__more span, .corp-card__all-t span { transition: none; }
}