/* ==========================================================================
Iso Section
========================================================================== */

.iso-section {
position: relative;
padding: var(--space-2xl) 0;
background: transparent;
color: var(--text);
/* Обрезаем всё что выходит за пределы секции */
overflow-x: hidden;
}

.iso-section::before {
content: "";
position: absolute;
inset: auto -15% 0 -15%;
height: 52%;
background: transparent;
pointer-events: none;
}

[data-theme="dark"] .iso-section::before {
background: transparent;
}

/* ==========================================================================
Header
========================================================================== */

.iso-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
justify-content: space-between;
gap: var(--space-6);
margin-bottom: var(--space-16);
}

.iso-header-content {
display: block;
}

.iso-title {
margin: 0;
color: var(--text);
font-family: var(--font-heading);
font-size: var(--fs-h1);
font-weight: 700;
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
text-transform: uppercase;
}

.iso-subtitle {
max-width: 620px;
margin: var(--space-4) 0 0;
}

.iso-all {
align-self: flex-end;
margin-bottom: var(--space-2);
}

.iso-all .icon {
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
Reveal Animations
========================================================================== */

.iso-section .reveal,
.iso-section .reveal-fade,
.iso-section .reveal-scale {
opacity: 0;
transition: 
  opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
  transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.iso-section .reveal {
transform: translateY(40px);
}

.iso-section .reveal-fade {
transform: translateY(20px);
}

.iso-section .reveal-scale {
transform: scale(0.95);
}

.iso-section .reveal.is-visible,
.iso-section .reveal-fade.is-visible,
.iso-section .reveal-scale.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}

/* Задержка для карточек */
.iso-section .iso-card.reveal {
transition-delay: calc(var(--iso-card-index, 0) * 0.1s);
}

/* ==========================================================================
Slider
========================================================================== */

.iso-slider {
position: relative;
width: 100%;
}

.iso-track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(300px, 380px);
gap: var(--space-8);
overflow-x: auto;
overflow-y: hidden;
padding: var(--space-4) var(--space-4) var(--space-12) 0;
/* Компенсация: track шире чтобы карточки выходили за правую границу */
margin-right: calc(-1 * var(--space-4));
scroll-snap-type: x mandatory;
scroll-padding-inline: 0;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}

.iso-track::-webkit-scrollbar {
display: none;
}

/* ==========================================================================
Card
========================================================================== */

.iso-card {
position: relative;
min-height: 560px;
scroll-snap-align: start;
overflow: hidden;
border-radius: var(--radius-2xl);
transition: 
  transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
  box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.iso-card-link {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: var(--text);
border-radius: var(--radius-2xl);
}

/* Colored glow behind card */
.iso-card-glow {
position: absolute;
inset: -20px;
background: radial-gradient(
circle at 50% 20%,
color-mix(in srgb, var(--iso-glow-color) 80%, transparent),
transparent 60%
);
opacity: 0.6;
z-index: 0;
filter: blur(40px);
transition: opacity 0.4s ease;
}

/* Glass background */
.iso-card-bg {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: var(--radius-2xl);
z-index: 1;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
transition: 
  background 0.4s ease,
  box-shadow 0.4s ease,
  border-color 0.4s ease;
}

[data-theme="dark"] .iso-card-bg {
background: rgba(28, 28, 30, 0.65);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Badge */
.iso-badge {
position: absolute;
top: var(--space-4);
left: var(--space-4);
z-index: 3;
}

.iso-card-media {
position: relative;
z-index: 2;
display: flex;
align-items: flex-end;
justify-content: center;
height: 410px;
padding: 0 var(--space-8) var(--space-0);
margin-top: auto;
}

.iso-card-media img {
display: block;
max-width: 100%;
max-height: 360px;
object-fit: contain;
filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.15));
transform: translateY(4px) scale(1);
transition:
transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
filter 0.5s ease;
pointer-events: none;
}

/* Content */
.iso-card-content {
position: relative;
z-index: 2;
display: flex;
flex: 1;
flex-direction: column;
justify-content: flex-end;
padding: var(--space-6) var(--space-8) var(--space-8);
}

.iso-card-title {
margin: 0 0 var(--space-3);
color: var(--text);
font-family: var(--font-heading);
font-size: var(--fs-h4);
font-weight: 700;
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
text-transform: uppercase;
}

.iso-card-more {
color: var(--accent);
transition: color 0.2s ease;
}

/* ==========================================================================
Hover effects (ТОЛЬКО для десктопа)
========================================================================== */

@media (hover: hover) and (pointer: fine) {
/* Интерактив для трека слайдера */
.iso-track {
cursor: grab;
user-select: none;
}

.iso-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

/* Эффекты наведения ссылок */
.iso-all:hover .icon {
    transform: translateX(4px);
}

.iso-card-more:hover {
    color: var(--accent-hover);
}

/* Анимации карточки при hover */
.iso-card:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 16px 48px rgba(0, 0, 0, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .iso-card:hover {
    box-shadow: 
        0 16px 48px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(0, 0, 0, 0.3);
}

.iso-card:hover .iso-card-glow {
    opacity: 0.8;
}

.iso-card:hover .iso-card-bg {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 16px 48px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .iso-card:hover .iso-card-bg {
    background: rgba(28, 28, 30, 0.75);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 16px 48px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.iso-card:hover .iso-card-media img {
    transform: translateY(-4px) scale(1.03);
    filter: drop-shadow(0 28px 32px rgba(0, 0, 0, 0.18));
}

}

/* ==========================================================================
Arrows
========================================================================== */

.iso-arrow {
position: absolute;
z-index: 4;
top: 50%;
transform: translateY(-50%);
}

.iso-arrow-prev {
left: calc(var(--space-4) * -1);
}

.iso-arrow-next {
right: calc(var(--space-4) * -1);
}

.iso-arrow.is-hidden {
opacity: 0;
pointer-events: none;
}

/* ==========================================================================
Mobile Actions
========================================================================== */

.iso-mobile-actions {
display: none;
margin-top: var(--space-8);
padding: 0 var(--space-4);
}

/* ==========================================================================
Empty state
========================================================================== */

.iso-empty {
color: var(--text-tertiary);
font-size: var(--fs-body);
line-height: var(--lh-body);
text-align: center;
padding: var(--space-16);
}

/* ==========================================================================
Responsive
========================================================================== */

@media (max-width: 992px) {
.iso-header {
grid-template-columns: 1fr;
align-items: start;
justify-content: start;
gap: var(--space-4);
margin-bottom: var(--space-12);
}

.iso-all {
    align-self: flex-start;
    display: none !important;
}

.iso-mobile-actions {
    display: block;
}

.iso-track {
    grid-auto-columns: minmax(280px, 85vw);
    gap: var(--space-6);
    padding: var(--space-4) var(--space-4) var(--space-12) 0;
    scroll-padding-inline: 0;
    margin-right: calc(-1 * var(--space-4));
}

.iso-card { 
    min-height: 520px; 
}

.iso-card-media { 
    height: 450px;
    padding: 0 var(--space-6) var(--space-10);
}

.iso-arrow { 
    display: none; 
}


}

@media (max-width: 768px) {
.iso-section {
padding: var(--space-16) 0;
}

.iso-title { 
    font-size: var(--fs-h2); 
}

.iso-card { 
    min-height: 500px; 
    border-radius: var(--radius-xl); 
}

.iso-card-bg {
    border-radius: var(--radius-xl);
}

.iso-card-glow {
    inset: -16px;
    filter: blur(32px);
}

.iso-card-media { 
    height: 450px;
    padding: 0 var(--space-6) var(--space-10);
}

.iso-card-media img { 
    max-height: 360px; 
}

.iso-card-content { 
    padding: var(--space-6); 
}

.iso-card-title { 
    font-size: var(--fs-h5); 
}

.iso-mobile-actions {
    padding: 0 var(--space-4);
}


}

@media (max-width: 568px) {
.iso-track {
grid-auto-columns: 88vw;
gap: var(--space-4);
margin-right: calc(-1 * var(--space-4));
/* Сохраняем паддинги из предыдущих разрешений */
padding: var(--space-4) var(--space-4) var(--space-12) 0;
scroll-padding-inline: 0;
}

.iso-card { 
    min-height: 480px; 
}

.iso-card-media { 
    height: 460px;
    padding: 0 var(--space-4) var(--space-8);
}

.iso-card-media img { 
    max-height: 360px; 
}


}