/*
 * Фотосистема для четырёх блоков главной 3aclean.ru.
 * Подключать после основного CSS сайта. Активируется классом ac-photo-sections
 * на контейнере .t-home.
 */

.ac-photo-sections .t-dirs,
.ac-photo-sections .t-cats,
.ac-photo-sections .t-scen {
  padding: 24px;
  border: 1px solid rgba(173, 195, 202, .62);
  border-radius: 28px;
  background-color: #e8f0f2;
  background-position: center;
  background-size: cover;
  box-shadow: 0 18px 48px rgba(20, 46, 62, .08);
}

/* Основные направления */
.ac-photo-sections .t-dirs {
  background-image:
    linear-gradient(110deg, rgba(239, 245, 246, .96), rgba(239, 245, 246, .72) 52%, rgba(239, 245, 246, .3)),
    url('../images/section-directions-desktop.webp');
}

.ac-photo-sections .t-dir {
  border: 1px solid rgba(255, 255, 255, .74);
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 10px 28px rgba(20, 46, 62, .08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.ac-photo-sections .t-dir:hover {
  border-color: rgba(53, 119, 61, .35);
  background: rgba(255, 255, 255, .96);
}

/* Всё для клининга */
.ac-photo-sections .t-cats {
  background-image:
    linear-gradient(110deg, rgba(247, 247, 243, .96), rgba(247, 247, 243, .74) 54%, rgba(247, 247, 243, .25)),
    url('../images/section-cleaning-desktop.webp');
}

.ac-photo-sections .t-cat {
  border: 1px solid rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 8px 24px rgba(20, 46, 62, .07);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.ac-photo-sections .t-cat:hover {
  border-color: rgba(53, 119, 61, .35);
  background: rgba(255, 255, 255, .97);
}

/* Не знаете, что выбрать? */
.ac-photo-sections .t-banner {
  min-height: 260px;
  border: 1px solid rgba(255, 255, 255, .14);
  background:
    linear-gradient(90deg, rgba(8, 24, 34, .97) 0%, rgba(8, 24, 34, .9) 43%, rgba(8, 24, 34, .42) 74%, rgba(8, 24, 34, .2) 100%),
    url('../images/section-consult-desktop.webp') center / cover no-repeat;
  box-shadow: 0 22px 58px rgba(8, 24, 34, .2);
}

.ac-photo-sections .t-banner::after {
  display: none;
}

.ac-photo-sections .t-banner-txt {
  max-width: 64ch;
}

.ac-photo-sections .t-banner-act {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: rgba(8, 24, 34, .58);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Решения для объектов */
.ac-photo-sections .t-scen {
  background-image:
    linear-gradient(180deg, rgba(228, 237, 240, .35), rgba(228, 237, 240, .74)),
    url('../images/section-solutions-desktop.webp');
}

.ac-photo-sections .t-sc {
  min-height: 210px;
  border: 1px solid rgba(255, 255, 255, .76);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 10px 28px rgba(20, 46, 62, .09);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.ac-photo-sections .t-sc:nth-child(4),
.ac-photo-sections .t-sc:nth-child(5) {
  background: rgba(255, 255, 255, .91);
}

@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .ac-photo-sections .t-dir,
  .ac-photo-sections .t-cat,
  .ac-photo-sections .t-sc {
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  }

  .ac-photo-sections .t-dir:hover,
  .ac-photo-sections .t-cat:hover,
  .ac-photo-sections .t-sc:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(20, 46, 62, .13);
  }
}

@media (min-width:768px) and (max-width:1199px) {
  .ac-photo-sections .t-dirs {
    background-image:
      linear-gradient(110deg, rgba(239, 245, 246, .96), rgba(239, 245, 246, .7)),
      url('../images/section-directions-tablet.webp');
  }

  .ac-photo-sections .t-cats {
    background-image:
      linear-gradient(110deg, rgba(247, 247, 243, .96), rgba(247, 247, 243, .72)),
      url('../images/section-cleaning-tablet.webp');
  }

  .ac-photo-sections .t-banner {
    background-image:
      linear-gradient(90deg, rgba(8, 24, 34, .97), rgba(8, 24, 34, .78) 60%, rgba(8, 24, 34, .34)),
      url('../images/section-consult-tablet.webp');
  }

  .ac-photo-sections .t-scen {
    background-image:
      linear-gradient(180deg, rgba(228, 237, 240, .4), rgba(228, 237, 240, .78)),
      url('../images/section-solutions-tablet.webp');
  }
}

@media (max-width:767px) {
  .ac-photo-sections .t-dirs,
  .ac-photo-sections .t-cats,
  .ac-photo-sections .t-scen {
    padding: 14px;
    border-radius: 20px;
  }

  .ac-photo-sections .t-dirs {
    background-image:
      linear-gradient(180deg, rgba(239, 245, 246, .75), rgba(239, 245, 246, .93)),
      url('../images/section-directions-mobile.webp');
  }

  .ac-photo-sections .t-cats {
    background-image:
      linear-gradient(180deg, rgba(247, 247, 243, .74), rgba(247, 247, 243, .94)),
      url('../images/section-cleaning-mobile.webp');
  }

  .ac-photo-sections .t-banner {
    min-height: 390px;
    padding: 24px 20px;
    background-image:
      linear-gradient(180deg, rgba(8, 24, 34, .96), rgba(8, 24, 34, .72)),
      url('../images/section-consult-mobile.webp');
    background-position: center;
  }

  .ac-photo-sections .t-banner-act {
    padding: 12px;
  }

  .ac-photo-sections .t-scen {
    background-image:
      linear-gradient(180deg, rgba(228, 237, 240, .52), rgba(228, 237, 240, .86)),
      url('../images/section-solutions-mobile.webp');
  }

  .ac-photo-sections .t-sc {
    min-height: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .ac-photo-sections .t-dir,
  .ac-photo-sections .t-cat,
  .ac-photo-sections .t-sc {
    transition: none !important;
  }
}