/*
Объединенные стили сайта
Включает: style.css, 01_top-menu.css, 02_gallery-card_v20250417-1.css, projects.css, services.css, contacts.css
*/

/* ============================================
   Основные стили сайта (style.css)
   ============================================ */
:root {
  /* Main colors */
  --white: rgb(255, 255, 255);
  --gray250: rgb(250, 250, 250);
  --gray245: rgb(245, 245, 245);
  --gray235: rgb(235, 235, 235);
  --gray215: rgb(215, 215, 215);
  --gray185: rgb(185, 185, 185);
  --gray155: rgb(155, 155, 155);
  --gray125: rgb(125, 125, 125);
  --gray50: rgb(50, 50, 50);
  --black: rgb(0, 0, 0);

  --red: #ff7b7b;
  --light-red: #ffc5c5;
  --blue: rgb(50, 90, 255);
  --purple: rgb(185, 125, 255);
  --green: rgb(80, 225, 130);
  --brand: rgb(255, 210, 80); /* main brand color */
  --brand-light: rgb(255, 245, 200); /* light brand color */

  --modal-color: rgb(250, 250, 250);
  --modal-bg-color: rgba(0, 0, 0, 0.5);
  --light-gray-color: #e9e9e9; /* light-gray-color */

  --gray-text: var(--gray125);

  --brand-light: rgb(255, 240, 190); /* main brand color */

  /* Radiuses */
  --card-border-radius: 5px;
  --board-border-radius: 5px;
  --btn-border-radius: 5px;
  --elem-border-radius: 5px;

  /* стандартные размеры */
  --page-width: 95%;
}

.hidden {
  display: none !important;
}

main {
  flex: 1; /* Основной контент растягивается, занимая всё доступное пространство */
}

.page {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--white);
}

.top-box {
  height: 165px;
  background-color: var(--gray50);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  color: white;
  font-size: 26px;
  font-weight: 400;
}

h2 {
  color: white;
  font-size: 40px;
  font-weight: 300;
  letter-spacing: 10px;
  margin-right: -10px; /* Компенсация letter-spacing после последней буквы */
}

.footer {
  border-top: solid 1px rgb(200, 200, 200);
  min-height: 50px;
  background-color: var(--white);
  padding: 10px 20px;
}

.foot-menu {
  width: 100%;
  min-height: 100%;
  gap: 15px;
}

@media (max-width: 768px) {
  .footer {
    min-height: auto;
    padding: 15px 10px;
  }

  .foot-menu {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .foot-menu .btn-footer {
    width: auto;
    padding: 8px 15px;
  }

  .foot-menu p {
    text-align: center;
    font-size: 12px;
  }
}

/* ============================================
   Стили верхнего меню (01_top-menu.css)
   ============================================ */
.top-menu {
  width: 80%;
  background-color: var(--white);
  padding: 10px;
}

.top-logo {
  height: 35px;
  margin-right: 30px;
}

.top-logo_mobile {
  display: none;
  height: 35px;
  margin-right: 30px;
}

.tg-icon {
  height: 27px;
  margin-left: 10px;
}

.wa-icon {
  height: 33px;
  margin-left: 10px;
}

.tg-icon:hover,
.wa-icon:hover {
  transform: scale(1.2);
  cursor: pointer;
}

/* Бургер-меню */
.burger-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10;
  margin-right: 15px;
}

.burger-menu-btn span {
  width: 100%;
  height: 3px;
  background-color: var(--black);
  border-radius: 3px;
  transition: all 0.3s ease;
}

.burger-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.burger-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.burger-menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -8px);
}

/* Мобильное меню */
.menu-items {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.burger-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.burger-menu-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background-color: var(--white);
  padding: 60px 20px 20px;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 101;
}

.burger-menu.active {
  display: block;
  opacity: 1;
  visibility: visible;
}

.burger-menu.active .burger-menu-content {
  transform: translateX(0);
}

.burger-menu-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.burger-menu-items .btn-page {
  width: 100%;
  text-align: left;
  padding: 15px;
  font-size: 18px;
}

@media (max-width: 768px) {
  .burger-menu-btn {
    display: flex;
  }

  .top-logo,
  .top-logo_mobile {
    display: none !important;
  }

  .menu-items {
    display: none;
  }

  .burger-menu {
    display: block;
  }

  /* Компенсация letter-spacing для h2 на мобильных */
  h2 {
    margin-right: -10px;
  }
}

@media (min-width: 769px) {
  .burger-menu-btn {
    display: none !important;
  }

  .burger-menu {
    display: none !important;
  }
}

/* ============================================
   Стиль карточки галереи (02_gallery-card_v20250417-1.css)
   ============================================ */
.gal-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--card-border-radius);
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
  aspect-ratio: 4 / 3; /* Соотношение сторон 4:3 */
  min-height: 200px; /* Минимальная высота до загрузки */
}

.gal-photo {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Заполнение блока без искажения изображения */
  transition: transform 0.2s ease-in-out;
  display: block; /* Убирает нижний отступ у img */
  background-color: var(--gray235); /* Цвет фона до загрузки изображения */
}

.gal-photo:hover {
  transform: scale(1.03);
}

.gal-card-descr {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0; /* Занимает всю ширину родительского блока */
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 12px 10px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  min-height: auto;
  max-height: none;
  height: auto;
  justify-content: center;
  text-align: center;
}

.gal-card:hover .gal-card-descr {
  opacity: 1;
}

@media (max-width: 768px) {
  .gal-card-descr {
    padding: 8px 6px;
    min-height: auto;
    max-height: none;
  }

  .gal-card-descr p {
    font-size: 12px;
    line-height: 1.3;
    margin: 2px 0;
  }
}

@media (max-width: 480px) {
  .gal-card-descr {
    padding: 6px 5px;
  }

  .gal-card-descr p {
    font-size: 11px;
    line-height: 1.2;
    margin: 1px 0;
  }
}

/* ============================================
   Страница с проектами (projects.css)
   ============================================ */
.cont-filters {
  background-color: var(--white);
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Три столбца */
  gap: 10px; /* Расстояние между изображениями */
  padding: 10px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .cont-filters {
    margin: 0 0 0 10px;
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr); /* Два столбца для планшета */
  }
}

@media (max-width: 480px) {
  .gallery {
    grid-template-columns: repeat(1, 1fr); /* Один столбец для смартфона */
  }
}

/* ============================================
   Страница услуг (services.css)
   ============================================ */
.green {
  background-color: var(--green);
}

.blue {
  background-color: var(--blue);
}

.purple {
  background-color: var(--purple);
}

.serv-type {
  height: 60px;
}

.serv-box {
  width: 350px;
  min-width: 300px;
  height: 350px;
  border-radius: var(--board-border-radius);
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
  margin: 10px;
  padding: 20px;
}

.serv-box h3 {
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 5px;
  color: var(--white);
}

.serv-descr p {
  margin-top: 5px;
  font-size: 18px;
  font-weight: 300;
  color: var(--white);
}

@media (max-width: 900px) {
  .serv-box-cont {
    flex-direction: column;
    align-items: center;
  }
  .pages {
    height: auto;
  }
}

/* ============================================
   Страница контактов (contacts.css)
   ============================================ */
iframe {
  width: 100%;
  height: 500px;
  border: 0;
}