/* =============================================
   SMARTBUILD — Why Us Section (Почему мы)
   CSS Grid: 4 cols × 3 rows, фото по диагонали
   ============================================= */

.whyus {
  background-color: var(--color-white);
}

/* ---- Header: заголовок + описание ---- */

.whyus__header {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding: 0 var(--content-padding);
  margin-bottom: 60px;
}

.whyus__title {
  flex: 1;
  font-size: 54px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -2.7px;
  color: var(--color-dark);
}

.whyus__description {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
}

.whyus__description p {
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: var(--color-graphite);
}

/* ---- Grid: 4 колонки × 3 ряда ---- */

.whyus__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 400px);
  padding: 0 var(--content-padding);
}

/* ---- Фото: размещение по диагонали ---- */

.whyus__photo {
  position: relative;
  overflow: hidden;
}

.whyus__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.whyus__photo--1 { grid-area: 1 / 1; }
.whyus__photo--2 { grid-area: 2 / 2; }
.whyus__photo--3 { grid-area: 3 / 3; }

/* ---- Карточки: размещение в сетке ---- */

.whyus__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
  border: 1px solid var(--color-graphite);
  margin: -0.5px;  /* overlap neighbors to fix sub-pixel gaps at intersections */
}

.whyus__photo {
  margin: -0.5px;
}

.whyus__card--1 { grid-area: 1 / 2; }
.whyus__card--2 { grid-area: 1 / 4; }
.whyus__card--3 { grid-area: 2 / 1; }
.whyus__card--4 { grid-area: 2 / 3; }
.whyus__card--5 { grid-area: 3 / 2; }
.whyus__card--6 { grid-area: 3 / 4; }

/* ---- Типографика карточек ---- */

.whyus__card-number {
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  line-height: var(--h5-line-height);
  letter-spacing: var(--h5-letter-spacing);
  color: var(--color-graphite);
}

.whyus__card-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.whyus__card-title {
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
  color: var(--color-dark);
}

.whyus__card-text {
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: var(--color-graphite);
}

/* ---- Скругления: только внешние углы блока ---- */
/*
  Раскладка (фото на диагонали, пусто со сдвигом):
  R1: [Фото1·TL] [Карта01·TR] [пусто     ] [Карта02·TL+TR+BR]
  R2: [Карта03·BL] [Фото2    ] [Карта04   ] [пусто           ]
  R3: [пусто     ] [Карта05·BL] [Фото3    ] [Карта06·TR+BR   ]
*/

/* Фото 1 (R1/C1): скругление top-left + бордер на наружных сторонах */
.whyus__photo--1 {
  border-top: 1px solid var(--color-graphite);
  border-left: 1px solid var(--color-graphite);
  border-radius: var(--radius-md) 0 0 0;
}
.whyus__photo--1 .whyus__photo-img {
  border-radius: var(--radius-md) 0 0 0;
}

/* Фото 3 (R3/C3): бордер на нижнем наружном крае */
.whyus__photo--3 {
  border-bottom: 1px solid var(--color-graphite);
}

/* Карта 01 (R1/C2): top-right */
.whyus__card--1 {
  border-radius: 0 var(--radius-md) 0 0;
}

/* Карта 02 (R1/C4): top-left + top-right + bottom-right (островок) */
.whyus__card--2 {
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 0;
}

/* Карта 03 (R2/C1): bottom-left */
.whyus__card--3 {
  border-radius: 0 0 0 var(--radius-md);
}

/* Карта 04 (R2/C3): без скруглений */
.whyus__card--4 {
  border-radius: 0;
}

/* Карта 05 (R3/C2): bottom-left */
.whyus__card--5 {
  border-radius: 0 0 0 var(--radius-md);
}

/* Карта 06 (R3/C4): top-right + bottom-right */
.whyus__card--6 {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}