/* ============================================================
   06-УСЛУГИ («мы строим презентации, которые говорят сами за себя»)

   Три карточки: планирование, дизайн, сопровождение.

   Это первая секция после первого экрана - именно она НАЕЗЖАЕТ
   на прибитый герой. Работает это за счёт двух вещей:
     - у секции непрозрачный фон (#f4f4f4)
     - position: relative, поэтому она рисуется поверх героя,
       который в потоке идёт раньше

   ПОВЕДЕНИЕ КАРТОЧЕК РАЗНОЕ НА ДЕСКТОПЕ И МОБИЛЬНОМ:

     десктоп   в покое видно только заголовок, приглушённый серым.
               При наведении заголовок чернеет, появляется текст,
               линии краснеют, иконка краснеет.

     мобильный наводить нечем, поэтому всё показано сразу:
               заголовок чёрный, текст видно, линии красные.
   ============================================================ */


/* ------------------------------------------------------------
   СЕКЦИЯ
   ------------------------------------------------------------ */

.hero-starting {
  position: relative;                  /* рисуется поверх героя */
  background-color: #f4f4f4;           /* непрозрачный фон - он и закрывает герой */
  padding: calc(120 / var(--device-size) * 100vw) 0
           calc(160 / var(--device-size) * 100vw);
}

@media (max-width: 767px) {
  .hero-starting {
    padding: calc(20 / var(--device-size) * 100vw) 0
             calc(40 / var(--device-size) * 100vw);
  }
}

.hero-starting__header {
  margin-bottom: calc(80 / var(--device-size) * 100vw);
}

@media (max-width: 767px) {
  .hero-starting__header {
    margin-bottom: calc(150 / var(--device-size) * 100vw);
  }
}

/* Три колонки на десктопе, столбик на мобильном */
.hero-starting__list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: calc(40 / var(--device-size) * 100vw);
}

@media (max-width: 767px) {
  .hero-starting__list {
    display: flex;
    flex-direction: column;
  }
}

/* Колонка фиксированной высоты - чтобы карточки стояли ровно,
   даже когда текст спрятан */
.hero-starting__col {
  position: relative;
  height: calc(383 / var(--device-size) * 100vw);
  padding-bottom: calc(32 / var(--device-size) * 100vw);
  border-bottom: 1px solid #cfcfcf;
}

@media (max-width: 767px) {
  .hero-starting__col {
    height: auto;
    padding-bottom: calc(20 / var(--device-size) * 100vw);
  }

  .hero-starting__col:last-child {
    border-bottom: none;
  }
}


/* ------------------------------------------------------------
   КАРТОЧКА
   ------------------------------------------------------------ */

.starting-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: rgba(1, 1, 1, 0.35);   /* приглушённый - до наведения */
}

.starting-card__title,
.starting-card__text {
  font-size: calc(24 / var(--device-size) * 100vw);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: calc(29 / var(--device-size) * 100vw);
  transition: 0.5s ease-out;
}

/* На иврите начертание тоньше - шрифт Noto Sans Hebrew
   выглядит плотнее латиницы при том же весе */
[lang="he"] .starting-card__title,
[lang="he"] .starting-card__text {
  font-weight: 300;
}

/* Текст спрятан и проявляется при наведении */
.starting-card__text {
  opacity: 0;
}

/* Тонкие линии над и под заголовком */
.starting-card__line {
  height: calc(1 / var(--device-size) * 100vw);
  margin: calc(22 / var(--device-size) * 100vw) 0;
  background-color: #cfcfcf;
  transition: 0.3s ease-out;
}

.starting-card__line:first-child {
  margin-top: 0;
}

/* Иконка прижата к низу карточки */
.starting-card__icon {
  margin-top: auto;
  color: #010101;
  transition: 0.3s ease-out;
}

/* У каждой иконки свой размер - взят из макета */
.starting-card__icon .icon-bulb { width: calc(46 / var(--device-size) * 100vw); height: calc(48 / var(--device-size) * 100vw); }
.starting-card__icon .icon-pen  { width: calc(45 / var(--device-size) * 100vw); height: calc(42 / var(--device-size) * 100vw); }
.starting-card__icon .icon-gear { width: calc(42 / var(--device-size) * 100vw); height: calc(42 / var(--device-size) * 100vw); }


/* ------------------------------------------------------------
   НАВЕДЕНИЕ (только там, где есть мышь)
   ------------------------------------------------------------ */

@media (hover: hover) {
  .starting-card:hover .starting-card__title {
    color: #010101;
  }

  .starting-card:hover .starting-card__text {
    opacity: 1;
  }

  /* box-shadow добавляет линии «толщины» без сдвига вёрстки */
  .starting-card:hover .starting-card__line {
    background-color: #d41318;
    box-shadow: 0 1px 0 0 #d41318;
  }

  .starting-card:hover .starting-card__icon {
    color: #d41318;
  }
}


/* ------------------------------------------------------------
   МОБИЛЬНЫЙ: показываем сразу всё, что на десктопе по наведению
   ------------------------------------------------------------ */

@media (max-width: 767px) {
  .starting-card__title {
    color: #010101;
    font-size: calc(36 / var(--device-size) * 100vw);
    font-weight: 500;
    line-height: 1;
  }

  /* на иврите чуть тоньше, чем на латинице */
  [lang="he"] .starting-card__title {
    font-weight: 400;
  }

  /* переносы строк в заголовке карточки на мобильном не нужны */
  [lang="he"] .starting-card__title br {
    display: none;
  }

  .starting-card__text {
    color: #010101;
    opacity: 1;
  }

  .starting-card__line {
    background-color: #d41318;
    box-shadow: 0 1px 0 0 #d41318;
    margin: calc(20 / var(--device-size) * 100vw) 0;
  }

  .starting-card__icon {
    margin-top: calc(30 / var(--device-size) * 100vw);
    color: #d41318;
  }

  .starting-card__icon .icon {
    transform: scale(0.6);
  }
}