:root{
  --header-h: 72px; /* подстрой под header */
  --gap: 22px;
  --accent-from: #003d1e;
  --accent-to: #13503a;
}

/* main занимает всю высоту экрана под header */
.hero{
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* блоки вверху */
  gap: var(--gap);
  padding: 18px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Соц-блоки по центру, в один ряд, с расстоянием */
.social-row{
  width: 100%;
  max-width: 1600px;
  display: flex;
  justify-content: center;
  gap: 24px; /* расстояние между карточками */
  margin-top: 2px;
}

/* Карточки */
.social-card{
  flex: 0 0 400px;
  min-width: 500px;
  max-width: 320px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.08));
  border-radius: 12px;
  padding: 12px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  /* зелёный тон на фоне сверху вниз */
  background-image: linear-gradient(135deg, var(--accent-from), var(--accent-to));
}

/* заголовок сверху по центру */
.social-title{
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 8px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

/* иконка слева внутри блока */
.social-body{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 14px;
  padding-bottom: 6px;
}

.social-icon{
  font-size: 64px;            /* больше */

    object-fit: contain;
  color: rgba(255,255,255,0.95);
}

/* hover */
.social-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.35);
}

/* Популярное — под соц-блоками, фото на всю ширину main */
.popular{
  width: 100%;
  max-width: 1200px;
  box-sizing: border-box;
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Заголовок */
.popular-title{
  color: #fff;
  font-size: 20px;
  margin: 6px 0 10px;
}

/* Фотографии занимают всю ширину main, по центру в один ряд и масштабируются */
.photos{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  align-items:flex-start;
}

.photo-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:1 1 calc(33.333% - 12px);
  max-width:calc(33.333% - 12px);
}

.photo-item img{
  width:100%;
  height:350px;
  object-fit:cover;
  border-radius:10px;
  display:block;
  pointer-events: none;
}

.photo-item figcaption{
  margin-top:8px;
  font-size:13px;
  color:#ddd;
  text-align:center;
  line-height:1.2;
}

/* Адаптив: на узких экранах уменьшить размеры, картинки — по ширине контейнера */
@media (max-width: 1000px){
  .photos img{ height: calc((100vh - var(--header-h) - 160px) / 1.8); max-height: 300px; }
  .social-row{ gap: 16px; }
}

@media (max-width: 760px){
  .social-row{ gap: 12px; }
  .social-card{ flex: 1 1 0; min-width: 0; display:flex; flex-direction:row; align-items:center; padding:10px; }
  .social-title{ margin: 0 12px 0 0; font-size:16px; }
  .social-body{ padding-left:6px; }
  .photos{ flex-direction: column; gap:10px; }
  .photos img{ width: 100%; height: calc((100vh - var(--header-h) - 200px) / 3); max-height: none; }
}

/* Убедись, что страница примерно влезает в экран. Если появляется скролл — уменьшай высоту картинок или --header-h */
html,body{ height:100%; margin:0; }


/* Мобильная адаптация */
@media (max-width:820px){
  :root{ --header-h:64px; --gap:16px; }

  .hero{ padding:14px; min-height:calc(100vh - var(--header-h)); gap:var(--gap); overflow:auto; }

  /* Соц-блоки: центр, карты в строке с автошириной */
  .social-row{ max-width:1100px; gap:14px; padding:0 6px; }
  .social-card{
    flex: 1 1 260px;
    min-width:0;
    max-width:320px;
    padding:10px;
    border-radius:10px;
    background-image: linear-gradient(135deg, var(--accent-from), var(--accent-to));
  }
  .social-title{ font-size:16px; margin-bottom:6px; }
  .social-body{ padding-left:10px; }
  .social-icon{ font-size:56px; }

  /* Популярное: фото подгоняются по высоте */
  .popular{ max-width:1000px; padding-top:6px; }
  .photos{ gap:10px; }
  .photo-item{ flex:1 1 calc(50% - 10px); max-width:calc(50% - 10px); }
  .photo-item img{ height:260px; }

  /* Общая улучшенная прокрутка на мобилях */
  html,body{ height:auto; min-height:100%; }
}

/* Малые экраны — вертикальная структура */

@media (max-width:480px){
  :root{ --header-h:56px; --gap:12px; }

  .hero{ padding:12px; gap:12px; min-height:calc(100vh - var(--header-h)); overflow:auto; }

  /* Соц-блоки — столбец */
  .social-row{ flex-direction:column; align-items:center; gap:12px; width:100%; max-width:480px; }
  .social-card{
    flex: 0 0 auto;
    width:100%;
    max-width:100%;
    display:flex;
    flex-direction:row;
    align-items:center;
    padding:10px;
    border-radius:10px;
  }
  .social-title{ font-size:15px; margin:0 10px 0 12px; text-align:left; }
  .social-body{ padding-left:8px; }
  .social-icon{ font-size:48px; margin-right:8px; }

  /* ВАЖНО: фотографии идут сверху вниз и не превышают доступную высоту */
  .photos{
    flex-direction:column;
    gap:10px;
    width:100%;
    align-items:center;
  }
  .photo-item{
    flex: 0 0 auto;
    width:100%;
    max-width:100%;
  }
  /* Высота картинки ограничена так, чтобы суммарно не выходило за экран:
     высота каждой = (100vh - --header-h - запас) / count_visible
     Здесь даём безопасную фиксированную высоту и max-height */
  .photo-item img{
    width:100%;
    height: calc((100vh - var(--header-h) - 160px) / 3); /* пример для до 3 видимых карточек */
    max-height:260px;
    object-fit:cover;
    border-radius:8px;
    display:block;
  }

  .popular-title{ font-size:18px; margin:6px 0 8px; }
}