/* ============================================
   Компонент GeometricFrame - Сложная геометрия
   ============================================ */

.geometric-frame {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-white);
  
  /* CSS переменные для настройки */
  --frame-height: 500px;
  --frame-width: 100%;
  --image-scale: 1.2; /* Уменьшено до более нормального размера */
  --image-offset-x: -10%; /* Пересчитано для центрирования 120% ширины */
  --parallax-speed: 0.15;
  --image-initial-offset: -15%; /* Начальное смещение вверх для заполнения маски */
}

.geometric-frame__content {
  position: relative;
  width: 100%;
  min-width: 100%; /* Гарантируем минимальную ширину */
  height: 100%;
  overflow: hidden;
}

.geometric-frame__image,
.geometric-frame .category-image {
  position: absolute;
  top: var(--image-initial-offset); /* Начальное смещение вверх для заполнения верхней части маски */
  left: -10%; /* Начинаем левее контейнера для горизонтального центрирования */
  width: 120%; /* 120% ширины контейнера - более нормальный размер */
  height: 180%; /* 180% высоты контейнера */
  object-fit: cover;
  object-position: center 25%; /* Смещаем фокус немного вверх */
  display: block;
  will-change: transform;
  transition: transform 0.1s ease-out;
}

/* Применение SVG маски через clip-path */
.geometric-frame[data-shape="folder"] .geometric-frame__content {
  clip-path: url(#folder-shape);
  -webkit-clip-path: url(#folder-shape);
}

.geometric-frame[data-shape="folder-smooth"] .geometric-frame__content {
  clip-path: url(#folder-shape-smooth);
  -webkit-clip-path: url(#folder-shape-smooth);
}

/* Применение масок для изображений с изгибами */
.geometric-frame[data-shape="mask-left"] .geometric-frame__content {
  clip-path: url(#mask-left);
  -webkit-clip-path: url(#mask-left);
}

.geometric-frame[data-shape="mask-right"] .geometric-frame__content {
  clip-path: url(#mask-right);
  -webkit-clip-path: url(#mask-right);
}

/* Автоматическое применение масок в зависимости от позиции изображения */
.category-section.image-left .geometric-frame .geometric-frame__content,
.category-section.image-left .geometric-frame[data-shape="folder"] .geometric-frame__content,
.category-section.image-left .geometric-frame[data-shape="folder-smooth"] .geometric-frame__content {
  clip-path: url(#mask-left);
  -webkit-clip-path: url(#mask-left);
}

.category-section.image-right .geometric-frame .geometric-frame__content,
.category-section.image-right .geometric-frame[data-shape="folder"] .geometric-frame__content,
.category-section.image-right .geometric-frame[data-shape="folder-smooth"] .geometric-frame__content {
  clip-path: url(#mask-right);
  -webkit-clip-path: url(#mask-right);
}

/* Если компонент используется вместе с category-image-wrapper */
.category-image-wrapper.geometric-frame .geometric-frame__content {
  width: 100%;
  min-width: 100%; /* Гарантируем минимальную ширину */
  height: 100%;
}

/* Альтернативный подход через mask-image (если clip-path не поддерживается) */
@supports not (clip-path: url(#folder-shape)) {
  .geometric-frame__mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mask-image: url("geometric-frame.802f268e44b6.svg#folder-shape");
    -webkit-mask-image: url("geometric-frame.802f268e44b6.svg#folder-shape");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
  }
  
  .geometric-frame__content {
    position: relative;
    z-index: 0;
  }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .geometric-frame {
    --frame-height: 300px;
    --image-scale: 1.2;
    --image-offset-x: -10%;
    --image-initial-offset: -12%;
  }
  
  .geometric-frame[data-shape="folder"] .geometric-frame__content,
  .geometric-frame[data-shape="folder-smooth"] .geometric-frame__content {
    /* Упрощенная форма для мобильных */
    clip-path: polygon(
      0% 10%,
      0% 0%,
      10% 0%,
      100% 0%,
      100% 90%,
      90% 100%,
      0% 100%
    );
    -webkit-clip-path: polygon(
      0% 10%,
      0% 0%,
      10% 0%,
      100% 0%,
      100% 90%,
      90% 100%,
      0% 100%
    );
  }
  
  .geometric-frame__image,
  .geometric-frame .category-image {
    top: var(--image-initial-offset);
    left: -10%;
    width: 120%;
    height: 180%;
    object-position: center 25%;
  }
}

/* Адаптивность для планшетов */
@media (min-width: 769px) and (max-width: 1024px) {
  .geometric-frame {
    --frame-height: 400px;
  }
}

/* Растягивание маски до края экрана в сторону, противоположную тексту */
@media (min-width: 769px) {
  /* Когда изображение справа */
  .category-section.image-right .category-image-wrapper.geometric-frame {
    flex: 0 0 auto;
    
    /* Упрощаем CSS, так как JS updateLayout вычислит точную ширину */
    width: 60%; /* Базовая ширина до загрузки JS */
    
    /* ВАЖНО: Убираем max-width, который ограничивал растягивание */
    /* max-width: calc(100vw - var(--spacing-md)); <--- УДАЛИТЬ или закомментировать */
    
    /* Margin оставляем для начальной позиционки, JS его скорректирует если надо */
    margin-right: calc(-1 * var(--spacing-md));
    overflow: hidden;
    box-sizing: border-box;
  }
  
  /* Когда изображение слева */
  .category-section.image-left .category-image-wrapper.geometric-frame {
    flex: 0 0 auto;
    width: 60%; 
    /* max-width: calc(100vw - var(--spacing-md)); <--- УДАЛИТЬ */
    margin-left: calc(-1 * var(--spacing-md));
    overflow: hidden;
    box-sizing: border-box;
  }
  
  /* Разрешаем контенту выходить за границы контейнера */
  .category-section.image-right .category-content {
    margin-right: calc(-1 * var(--spacing-md));
  }
  
  .category-section.image-left .category-content {
    margin-left: calc(-1 * var(--spacing-md));
  }
}