/*
 * Главная.
 *
 * Взято из инлайнового блока старой главной — только то, чего нет
 * в base.css (шапка, подвал, типографика там общие).
 *
 * Кнопка называется .btn-main, а не .btn: у главной был свой .btn
 * (синий прямоугольник), а в base.css под тем же именем живёт кнопка
 * запроса со страниц станков, которая центрирует себя через
 * left:50% + translate. Два разных .btn в одном проекте уже ломали
 * фильтр на «Электроэрозионных станках», второй раз не наступаем.
 */
body {
  background-color: #fff;
}
/* ---- слайдер --------------------------------------------------------- */

.slider {
  margin: 0 auto;
}

.slider,
.slider img {
  width: 100%;
  object-fit: cover;
}

/* На узком экране картинка ничего не сообщает — только гонит вниз текст. */
@media screen and (max-width: 768px) {
  .slider {
    display: none;
  }
}

/* ---- интро ----------------------------------------------------------- */

.home__title {
  margin-top: 40px;
  font-size: 20px;
  font-weight: 300;
  font-style: normal;
  line-height: 1em;
  letter-spacing: 1px;
  text-align: center;
  color: #3b3d42;
}

/* Ниже 768px картинка скрыта, и под шапкой не остаётся ничего, что держало
   бы её место: на внутренних страницах его резервирует полоса с крошками,
   а здесь заголовок оказывался прямо под меню. Отступ считается от высоты
   шапки, а не подбирается числом.

   Блок стоит здесь, а не рядом с правилом, скрывающим картинку: у обоих
   селекторов одинаковый вес, и выше по файлу он бы проиграл. */
@media screen and (max-width: 768px) {
  .home__title {
    margin-top: calc(var(--nav-h) + 1em);
  }
}

.home__subtitle {
  margin-top: 40px;
}

.home__lead {
  max-width: 42em;
  margin: 0 auto 1em;
  padding: 0 1.25em;
}

/* ---- три категории станков ------------------------------------------- */

.box-edm,
.box-edm__link {
  display: flex;
  flex-direction: column;
}

.box-edm {
  max-width: 500px;
  margin: 40px auto;
}

.box-edm__link {
  justify-content: center;
}

.box-edm__link picture {
  margin: auto;
}

.box-edm__image {
  display: block;
  margin: 0 auto;
  border-radius: 50%;
}

.box-edm__item {
  width: 100%;
  margin-bottom: 30px;
}

@media screen and (min-width: 571px) {
  .box-edm {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    max-width: var(--wrap);
    margin: 40px auto;
  }

  .box-edm__link {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .box-edm__image {
    display: block;
    width: 30vw;
    height: 30vw;
    margin: 0 auto;
    box-shadow: 0 10px 20px 3px rgba(0, 0, 0, .12);
    transition-duration: .3s;
  }

  /* min-height, а не height: при жёстких 600px текст карточки на планшете
     вылезал за её границы и налезал на плитку технологий. Колонки flex
     и так выравниваются по самой высокой. */
  .box-edm__item {
    width: 33%;
    min-height: 600px;
  }
}

@media screen and (min-width: 1200px) {
  .box-edm__image {
    width: 90%;
    max-width: 350px;
    height: 350px;
  }
}

.box-edm__image:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px 3px rgba(0, 0, 0, .12);
}

.box-edm__discription {
  text-align: center;
  color: #333;
}

.box-edm__discription p {
  width: 100%;
}

.box-edm__title {
  padding-bottom: 1rem;
  font-size: 24px;
}

/* ---- плитка технологий ------------------------------------------------ */

.feature__title {
  margin: 40px 0 20px;
  font-size: 38px;
}

.feature {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.feature-layout {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 360px;
  text-align: center;
  transition: .4s ease-out;
}

/* Девятая плитка — добивка ряда. Там, где ряд и так полный, она лишняя. */
@media (min-width: 720px) and (max-width: 1023px) {
  .feature-layout {
    width: 50%;
  }

  .feature-layout:nth-child(9) {
    display: none;
  }
}

@media (min-width: 1024px) {
  .feature-layout {
    width: 33%;
  }
}

@media (min-width: 1440px) {
  .feature-layout {
    width: 25%;
  }

  .feature-layout:nth-child(9) {
    display: none;
  }
}

.feature-layout:before {
  content: "";
  display: block;
  width: 100%;
  background: rgba(0, 0, 0, .6);
  opacity: 0;
  z-index: 2;
  transition: .5s;
}

.feature-layout img,
.feature-layout:before {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.feature-layout img {
  width: 100%;
  object-fit: cover;
}

.feature-layout:hover:before {
  opacity: 1;
}

.feature-layout .feature-layout__content {
  position: relative;
  z-index: 3;
  color: #fff;
  opacity: 0;
  transform: translateY(0);
  transition: .5s;
}

.feature-layout:hover .feature-layout__content {
  opacity: 1;
  transform: translateY(-10px);
}

.feature-layout .feature-layout__content h4 {
  margin: 20px 40px;
  padding-bottom: 1px;
  font-size: 1.8rem;
  text-align: center;
  color: #fff;
  border-bottom: 1px solid #fff;
}

.feature-layout .feature-layout__content p {
  margin-top: 8px;
  padding: 0 20px;
}

/* ---- статьи ----------------------------------------------------------- */

.posts {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.25em;
}

/* Верхняя граница дорожки нужна, чтобы одна-единственная статья не
   растягивалась на всю ширину: пока статей меньше трёх, карточки
   держат нормальный размер и стоят по центру. */
.posts__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17em, 100%), 20em));
  justify-content: center;
  gap: 1.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.posts__item {
  display: flex;
}

.posts__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.2em 1.4em;
  background: #eaeaea;
  border-radius: .4em;
  color: inherit;
  transition: box-shadow .3s;
}

.posts__link:hover {
  box-shadow: 0 .3em 1em rgba(0, 0, 0, .12);
  text-decoration: none;
}

.posts__title {
  margin: 0 0 .5em;
  font-size: 1.15em;
  text-align: left;
}

.posts__lead {
  flex-grow: 1;
  margin-bottom: .8em;
  color: #444;
}

.posts__meta {
  margin: 0;
  font-size: .9em;
  color: #767676;
}

.posts__meta > * + *::before {
  content: "·";
  margin: 0 .5em;
}

/* ---- кнопка ----------------------------------------------------------- */

.wrapper-more {
  margin-top: 20px;
  text-align: center;
}

.btn-main {
  display: inline-block;
  padding: 12px 18px;
  background-color: #1965a3;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 3px;
  line-height: 1.42857;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  transition: all .3s;
}

.btn-main:hover {
  background-color: #145285;
  color: #fff;
  text-decoration: none;
}

/* ---- баннер «О компании» ---------------------------------------------- */

.banner {
  position: relative;
  margin-top: 50px;
  padding: 60px 0;
  background-color: #3a3d45;
  background-image: url(/assets/images/united-machining.jpg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  color: #fff;
}

/* Своя обёртка, а не .container: тот в base.css высотой 2.5em — он для шапки. */
.banner__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.25em;
}

.banner h2 {
  margin-bottom: 30px;
  color: #fff;
}

.column {
  column-width: 400px;
  column-count: 2;
  column-gap: 30px;
  column-rule: 1px solid #ccc;
}

/* ---- контакты и карта -------------------------------------------------- */

@media (min-width: 768px) {
  .contact-map {
    display: flex;
  }

  .contact-map__map,
  .contact-map__text {
    width: 50%;
    align-content: center;
  }
}

.contact-map__text {
  margin: auto;
  text-align: center;
}

.contact-map__map img {
  width: 100%;
  object-fit: cover;
}