.dor-ac-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 100px;
  margin: 50px;
}

@media (max-width: 980px){
  .dor-ac-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .dor-ac-grid{ grid-template-columns: 1fr; }
}

.dor-ac-card{
  perspective: 1200px;
  -webkit-perspective: 1200px;
}

.dor-ac-inner{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;

  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

  transition: transform .65s ease;
  will-change: transform;
}
.dor-ac-card.is-flipped .dor-ac-inner{
  transform: rotateY(180deg);
}
.dor-ac-face{
  position: absolute;
  inset: 0;
  overflow: hidden;
  

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


.dor-ac-front img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dor-ac-back{
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  text-align: center;
    padding: 35px;
  gap: 10px;
  padding: 18px;

  background: rgba(255, 255, 255, 0.85);
  color: #571003;
  align-items: center;
}
.dor-ac-title{ margin: 0; font-size: 1.75rem; }
.dor-ac-text{ margin: 0; font-size: 1.25rem; line-height: 1.35; opacity: .95; }

/* Блокируем hover на всех карточках, пока идет анимация,
   но оставляем события на текущей открытой (чтобы mouseleave работал корректно) */
.dor-ac-grid.is-busy .dor-ac-card {
  pointer-events: none;
}
.dor-ac-grid.is-busy .dor-ac-card.is-flipped {
  pointer-events: auto;
}