.office-advantages {
  padding-top: clamp(6.25rem, 5rem + 6.25vw, 12.5rem);
}

.office-advantages__box {
  margin-top: clamp(1.875rem, 1rem + 4.375vw, 6.25rem);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "media"
    "left"
    "right";
  gap: clamp(1.25rem, 1rem + 1.25vw, 2.5rem);
}

.office-advantages__col {
  display: flex;
  flex-direction: column;
  gap: clamp(0.625rem, 0.5rem + 0.625vw, 1.25rem);
}

.office-advantages__col:first-of-type {
  grid-area: left;
}

.office-advantages__col:last-of-type {
  grid-area: right;
}

.office-advantages__card {
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-m) 0 var(--radius-m) 0;
  padding: clamp(1.25rem, 0.75rem + 2.5vw, 3.75rem)
    clamp(1.25rem, 0.5rem + 3.75vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.625rem, 0.5rem + 0.625vw, 1.25rem);
  text-align: center;
}

.office-advantages__card-title {
  font-family: var(--font-body-extrabolt);
  font-size: clamp(1.3125rem, 1.1375rem + 0.875vw, 2.1875rem);
  line-height: clamp(1.8125rem, 1.65rem + 0.8125vw, 2.625rem);
}

.office-advantages__card-desc {
  font-family: var(--font-body-medium);
  font-size: clamp(1.125rem, 1.075rem + 0.25vw, 1.375rem);
  line-height: clamp(1.5625rem, 1.5rem + 0.3125vw, 1.875rem);
}

.office-advantages__media-wrap {
  grid-area: media;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}

.office-advantages__media {
  width: clamp(17.5rem, 13.5rem + 20vw, 37.5rem);
  height: clamp(21.25rem, 15rem + 31.25vw, 52.5rem);
  align-self: center;
}

.office-advantages__badge {
  background-color: var(--color-primary);
  color: var(--color-text-invert);
  border-radius: var(--radius-pill);
  width: 100%;
  padding-block: clamp(0.9375rem, 0.75rem + 0.9375vw, 1.875rem);
  font-family: var(--font-body-regular);
  font-size: clamp(1.25rem, 1rem + 1.25vw, 2.5rem);
  line-height: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
  text-align: center;
}

.office-advantages__badge strong {
  font-family: var(--font-body-bold);
}

@media (min-width: 768px) {
  .office-advantages__box {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "media media"
      "left right";
    gap: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  }

  /* Фіксована мін-висота під найдовший поточний текст картки ("Простота в
     користуванні"), щоб усі 6 карток були однакової висоти в 2-колонковій
     розкладці. Підібрано заміром реального рендеру 768–1279px — якщо текст
     карток стане суттєво довшим, перевірити знову. */
  .office-advantages__card {
    min-height: 15.5rem;
  }
}

/* Проміжний брейкпоінт поза базовим набором 768/1920 — узгоджено окремо:
   на такій ширині 3 однакові колонки (картки-зображення-картки) вже вміщаються в ряд. */
@media (min-width: 1280px) {
  .office-advantages__box {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "left media right";
    align-items: start;
  }

  .office-advantages__media-wrap {
    align-self: flex-start;
  }

  .office-advantages__col {
    padding-top: 4rem;
    justify-content: space-between;
    height: 100%;
  }

  /* У 3-колонковій розкладці картки вужчі, тож текст переноситься сильніше —
     потрібна більша мін-висота, ніж у 2-колонковій (768–1279px). */
  .office-advantages__card {
    min-height: 19.5rem;
  }
}

/* ==========================================================================
   Motion (js/modules/officeAdvantages.js)
   ========================================================================== */

.office-advantages__count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.office-advantages__media {
  position: relative;
}

.office-advantages__media picture {
  position: relative;
  z-index: 1;
}

/* Contact shadow under the machine; JS nudges it opposite to the machine. */
.office-advantages__shadow {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 1%;
  height: 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(60, 34, 20, 0.22), transparent);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Transitions only after the GSAP entrance hands the card back to CSS. */
  .office-advantages__card.is-revealed {
    transition:
      transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1),
      opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1),
      background-color 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  .office-advantages__card.is-active {
    transform: translate3d(0, -4px, 0) scale(1.004);
    background-color: color-mix(in srgb, var(--color-surface-alt) 93%, var(--color-primary));
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  .office-advantages__box.is-benefit-active .office-advantages__card:not(.is-active) {
    opacity: 0.78;
  }
}