/* PROJECTS PAGE */

/* === ЧЕРНАЯ ТЕМА ДЛЯ СТРАНИЦЫ ПРОЕКТОВ === */
[data-theme='dark'] .page-projects {
  background: #0a0a0a;
}

[data-theme='dark'] .project-item {
  background: #0a0a0a;
}

[data-theme='dark'] .project-info h3 {
  color: #ffffff;
}

[data-theme='dark'] .project-overlay {
  background: rgba(0, 0, 0, 0.8);
}
.page-projects {
  background: var(--bg-primary);
}

/* GRID */
.projects-grid {
  margin-top: 58px; /* как на index hero-block */
  padding-bottom: clamp(60px, 8vw, 120px); /* Плавные отступы снизу */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 24px); /* Плавные отступы между элементами */
  width: 100%;
}

/* BASE STYLES */
.project-item {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-secondary);
  transition: transform 0.3s ease;
  min-height: clamp(280px, 40vw, 480px); /* Плавная высота */
}

.project-item:hover {
  transform: none; /* без подъёма на hover */
}

.project-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.project-image {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* HOVER EFFECTS */
.project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: flex-end;
  padding: clamp(20px, 3vw, 24px); /* Плавные отступы */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.project-item:hover .project-overlay {
  opacity: 1;
}

/* На ховере оставляем только затемнение без зума (как на index) */
.project-item:hover .project-image img {
  transform: none;
}

.project-info h3 {
  margin: 0 0 clamp(6px, 1vw, 8px); /* Плавные отступы */
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.2rem); /* Плавные размеры шрифтов */
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.project-info p {
  margin: 0;
  font-size: clamp(0.85rem, 1.5vw, 0.9rem); /* Плавные размеры шрифтов */
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

/* SIZES */
.project-large {
  grid-column: span 6;
  grid-row: span 8;
}

.project-medium {
  grid-column: span 6;
  grid-row: span 6;
}

.project-small {
  grid-column: span 3;
  grid-row: span 4;
}

.project-tall {
  grid-column: span 3;
  grid-row: span 12;
}

.project-wide {
  grid-column: span 6;
  grid-row: span 12;
}

.project-square {
  grid-column: span 3;
  grid-row: span 6;
}

.project-mini {
  grid-column: span 3;
  grid-row: span 2;
}

.project-extra-wide {
  grid-column: span 9;
  grid-row: span 4;
}

.project-wide-right {
  grid-column: span 6;
  grid-row: span 8;
}

.project-tall-right {
  grid-column: span 3;
  grid-row: span 8;
}

.project-wide-bottom {
  grid-column: span 9;
  grid-row: span 4;
}

.project-wide-tall {
  grid-column: span 3;
  grid-row: span 12;
}

.project-hinori {
  grid-column: span 3;
  grid-row: span 16;
}

.project-tall-extended {
  grid-column: span 3;
  grid-row: span 14;
}

.project-tall-medium {
  grid-column: span 3;
  grid-row: span 14;
}

/* RESPONSIVE - синхронизировано с глобальными breakpoints */
@media (max-width: 1200px) {
  .projects-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(18px, 2vw, 22px); /* Увеличил отступы для лучшего разделения на планшетах */
  }
  .project-large {
    grid-column: span 3;
    grid-row: span 3;
  }
  .project-medium {
    grid-column: span 3;
    grid-row: span 2;
  }
  .project-small {
    grid-column: span 2;
    grid-row: span 1;
  }
  .project-tall {
    grid-column: span 2;
    grid-row: span 3;
  }
  .project-wide {
    grid-column: span 4;
    grid-row: span 2;
  }
  .project-square {
    grid-column: span 3;
    grid-row: span 2;
  }
  .project-mini {
    grid-column: span 1;
    grid-row: span 1;
  }
  .project-extra-wide {
    grid-column: span 6;
    grid-row: span 1;
  }
  .project-wide-right {
    grid-column: span 4;
    grid-row: span 3;
  }
  .project-tall-right {
    grid-column: span 2;
    grid-row: span 4;
  }
  .project-wide-bottom {
    grid-column: span 4;
    grid-row: span 1;
  }
}

@media (max-width: 800px) {
  /* Синхронизировано с глобальным breakpoint */
  .projects-grid {
    grid-template-columns: 1fr; /* Как на 600px - одна колонка */
    gap: clamp(18px, 3vw, 24px); /* Как на 600px */
    margin-top: 30px;
  }
  .project-large,
  .project-medium,
  .project-small,
  .project-tall,
  .project-wide,
  .project-square,
  .project-mini,
  .project-extra-wide,
  .project-wide-right,
  .project-tall-right,
  .project-wide-bottom,
  .project-wide-tall,
  .project-hinori,
  .project-tall-medium {
    grid-column: span 1;
    grid-row: span 1;
    min-height: clamp(280px, 50vw, 360px); /* Как на 600px */
    max-height: clamp(280px, 50vw, 360px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .project-overlay {
    padding: clamp(20px, 3vw, 24px); /* Как на 600px */
  }
  .project-info h3 {
    font-size: clamp(1.1rem, 2.5vw, 1.2rem); /* Как на 600px */
    margin-bottom: clamp(8px, 1.5vw, 12px);
  }
  .project-info p {
    font-size: clamp(0.9rem, 2vw, 1rem); /* Как на 600px */
  }

  /* Дополнительные стили для горизонтального формата как на 600px */
  .project-item {
    aspect-ratio: 3 / 1; /* Как на 600px */
  }

  .project-overlay {
    align-items: center;
    justify-content: flex-start;
  }

  .project-info h3 {
    margin-bottom: 0;
  }
}

@media (max-width: 600px) {
  .projects-grid {
    grid-template-columns: 1fr;
    gap: clamp(
      18px,
      3vw,
      24px
    ); /* Увеличил отступы для лучшего разделения на очень маленьких экранах */
    margin-top: 30px;
  }
  .project-large,
  .project-medium,
  .project-small,
  .project-tall,
  .project-wide,
  .project-square,
  .project-mini,
  .project-extra-wide,
  .project-wide-right,
  .project-tall-right,
  .project-wide-bottom,
  .project-wide-tall,
  .project-hinori,
  .project-tall-medium {
    grid-column: span 1;
    grid-row: span 1;
    min-height: clamp(
      280px,
      50vw,
      360px
    ); /* Увеличена высота для очень маленьких экранов в 2 раза */
    max-height: clamp(280px, 50vw, 360px); /* Увеличена высота в 2 раза */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .project-overlay {
    padding: clamp(20px, 3vw, 24px);
  }
  .project-info h3 {
    font-size: clamp(1.1rem, 2.5vw, 1.2rem);
    margin-bottom: clamp(8px, 1.5vw, 12px);
  }
  .project-info p {
    font-size: clamp(0.9rem, 2vw, 1rem);
  }

  /* Дополнительные стили для горизонтального формата на очень маленьких экранах */
  .project-item {
    aspect-ratio: 3 / 1; /* Более широкое соотношение для очень маленьких экранов */
  }

  .project-overlay {
    align-items: center; /* Центрируем текст по вертикали */
    justify-content: flex-start; /* Выравниваем по левому краю */
  }

  .project-info h3 {
    margin-bottom: 0; /* Убираем отступ снизу для компактности */
  }
}

/* Специальные исправления для Safari на iOS */
@supports (-webkit-touch-callout: none) {
  .page-projects {
    /* Специальные исправления для iOS Safari */
    -webkit-overflow-scrolling: touch;
    /* Убираем возможные проблемы с рендерингом */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .projects-grid {
    /* Специальные исправления для iOS Safari */
    -webkit-overflow-scrolling: touch;
    /* Убираем возможные проблемы с рендерингом */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .project-item {
    /* Специальные исправления для iOS Safari */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Убираем возможные проблемы с рендерингом */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .project-image img {
    /* Специальные исправления для iOS Safari */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Убираем возможные проблемы с рендерингом */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

/* Исправления для viewport на мобильных */
@media (max-width: 800px) {
  /* Убираем возможные проблемы с viewport */
  html,
  body {
    /* Убираем возможные проблемы с высотой */
    height: auto;
    min-height: auto;
    /* Убираем возможные проблемы с overflow */
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Стабилизируем main контейнер */
  main.page-projects {
    /* Убираем возможные проблемы с позиционированием */
    position: relative;
    top: 0;
    transform: none;
    /* Убираем возможные проблемы с overflow */
    overflow: visible;
    /* Стабилизируем высоту */
    min-height: auto;
    height: auto;
  }
}

/* Специальные исправления для очень маленьких экранов iPhone */
@media (max-width: 375px) {
  .projects-grid {
    /* Увеличиваем отступы для очень маленьких экранов */
    gap: 20px;
    margin-top: 25px;
    /* Стабилизируем сетку */
    grid-template-columns: 1fr;
  }

  .project-item {
    /* Стабилизируем размеры на очень маленьких экранах */
    min-height: 300px;
    max-height: 300px;
    /* Убираем возможные проблемы с overflow */
    overflow: visible;
  }

  .project-image {
    /* Стабилизируем изображения на очень маленьких экранах */
    overflow: visible;
  }

  .project-image img {
    /* Стабилизируем изображения на очень маленьких экранах */
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

/* Дополнительные исправления для iPhone SE и других маленьких устройств */
@media (max-width: 320px) {
  .projects-grid {
    /* Еще больше увеличиваем отступы для очень маленьких экранов */
    gap: 16px;
    margin-top: 20px;
  }

  .project-item {
    /* Уменьшаем высоту для очень маленьких экранов */
    min-height: 250px;
    max-height: 250px;
  }

  .project-info h3 {
    /* Уменьшаем размер шрифта для очень маленьких экранов */
    font-size: clamp(1rem, 2.5vw, 1.1rem);
  }
}

/* Исправления для мобильной версии карточек проектов (рекомендации ChatGPT) */
@media (max-width: 800px) {
  /* 1) На мобиле карточка не должна иметь фикс/минимальную высоту */
  .project-item {
    min-height: 0 !important;
    height: auto !important;
  }

  /* 2) Картинка управляет высотой карточки */
  .project-image {
    position: relative;
  }

  .project-image img {
    display: block;
    width: 100%;
    height: 100% !important; /* растягиваем на всю высоту карточки */
    object-fit: cover !important; /* обрезаем лишнее, сохраняя пропорции */
  }

  /* 3) Подпись/оверлей не должен занимать всю высоту блока */
  .project-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 16px;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0)
    ); /* вместо сплошного серого */
    min-height: 0 !important;
    height: auto !important;
  }
}

/* Если нужны ровные по высоте плитки */
@supports (aspect-ratio: 16 / 9) {
  @media (max-width: 768px) {
    .project-image {
      aspect-ratio: 16 / 9;
    }
    .project-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

/* Радикальное исправление CSS Grid для очень узких экранов (рекомендация ChatGPT) */
@media (max-width: 600px) {
  .projects-grid {
    /* Принудительно переключаемся на одну колонку */
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Каждая карточка — обычный блок без span'ов */
  .project-large,
  .project-medium,
  .project-small,
  .project-tall,
  .project-tall-right {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  .project-item {
    /* Стабилизируем размеры */
    min-height: 200px !important;
    max-height: none !important;
    display: block !important;
    overflow: hidden !important;
  }
}