/* ===== Блок «Виды работ» ===== */
.work-types {
  --work-side-padding: clamp(20px, 4vw, 64px);
  background-color: #353334;
  padding: clamp(56px, 6vw, 96px) 0;
  overflow: hidden;
}

/* ===== Заголовок ===== */
.work-types-header {
  margin-bottom: clamp(36px, 4vw, 64px);
}

.work-types-header-box {
  width: min(640px, calc(100% - 20px));
  min-height: clamp(92px, 8.3vw, 133px);
  padding: 18px clamp(28px, 5vw, 72px) 18px var(--work-side-padding);
  margin-left: 0;
  background-color: #ffd000;
  border-radius: 0 999px 999px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-types-header-text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1.1;
  letter-spacing: clamp(0.04em, 0.7vw, 0.09em);
  color: #353334;
  text-align: center;
  -webkit-text-stroke: 1px #353334;
}

/* ===== Контент ===== */
.work-types-container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--work-side-padding);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 445px);
  align-items: stretch;
  gap: clamp(32px, 4vw, 60px);
}

.work-list {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(18px, 2vw, 30px);
}

.work-item {
  min-width: 0;
  display: grid;
  grid-template-columns: clamp(72px, 6.1vw, 97px) minmax(0, 1fr);
  align-items: stretch;
}

.work-number {
  min-height: 112px;
  padding: 18px 8px;
  background-color: #e3ba00;
  color: #353334;
  font-family: 'YS Text', sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 3.2vw, 50px);
  line-height: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px 0 0 20px;
}

.work-text {
  min-width: 0;
  min-height: 112px;
  padding: clamp(20px, 2vw, 30px) clamp(24px, 4vw, 80px);
  background-color: #d6d6d6;
  color: #141213;
  font-family: 'YS Text', sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.25vw, 36px);
  line-height: 1.18;
  overflow-wrap: anywhere;
  display: flex;
  align-items: center;
  border-radius: 0 20px 20px 0;
}

.work-photo {
  min-width: 0;
  height: 100%;
  min-height: 680px;
  display: flex;
}

.work-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 680px;
  object-fit: cover;
  object-position: center;
  border-radius: 30px;
  border: clamp(5px, 0.55vw, 8px) solid #ffd000;
}

/* ===== Небольшие ноутбуки и планшеты в альбомной ориентации ===== */
@media (max-width: 1200px) {
  .work-types-container {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 36%);
    gap: 32px;
  }

  .work-text {
    padding-inline: clamp(22px, 3vw, 44px);
    font-size: clamp(22px, 2.6vw, 31px);
  }

  .work-photo,
  .work-photo img {
    min-height: 620px;
  }
}

/* ===== Планшеты ===== */
@media (max-width: 900px) {
  .work-types {
    --work-side-padding: clamp(20px, 5vw, 40px);
  }

  .work-types-container {
    grid-template-columns: 1fr;
  }

  .work-list {
    width: 100%;
  }

  .work-item {
    grid-template-columns: clamp(70px, 10vw, 88px) minmax(0, 1fr);
  }

  .work-number,
  .work-text {
    min-height: 100px;
  }

  .work-photo {
    width: min(100%, 680px);
    min-height: 0;
    aspect-ratio: 16 / 9;
    margin: 8px auto 0;
  }

  .work-photo img {
    min-height: 0;
    height: 100%;
    object-position: center 42%;
  }
}

/* ===== Телефоны ===== */
@media (max-width: 600px) {
  .work-types {
    --work-side-padding: 16px;
    padding: 48px 0;
  }

  .work-types-header {
    margin-bottom: 32px;
  }

  .work-types-header-box {
    width: calc(100% - 16px);
    min-height: 82px;
    padding: 14px 30px 14px 16px;
  }

  .work-types-header-text {
    font-size: clamp(30px, 9vw, 38px);
    letter-spacing: 0.04em;
    -webkit-text-stroke: 0;
  }

  .work-types-container {
    gap: 28px;
  }

  .work-list {
    gap: 14px;
  }

  .work-item {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .work-number {
    min-height: 84px;
    padding: 14px 4px;
    font-size: 32px;
    border-radius: 14px 0 0 14px;
  }

  .work-text {
    min-height: 84px;
    padding: 17px 16px;
    font-size: clamp(18px, 5.4vw, 23px);
    line-height: 1.22;
    border-radius: 0 14px 14px 0;
  }

  .work-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  .work-photo img {
    border-radius: 20px;
  }
}

/* ===== Очень узкие экраны ===== */
@media (max-width: 360px) {
  .work-types {
    --work-side-padding: 12px;
  }

  .work-types-header-box {
    width: calc(100% - 12px);
    padding-left: 12px;
  }

  .work-item {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .work-number {
    font-size: 28px;
  }

  .work-text {
    padding: 15px 13px;
    font-size: 17px;
  }
}