/* ==========================================================
   ОСНОВНОЙ КОНТЕЙНЕР С КАРТОЧКАМИ
   ========================================================== */
.cards {
  background-size: cover;
  background-position: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  min-height: 100vh;
  margin-bottom: 1.5rem;
}

/* ==========================================================
   КАРТОЧКА И 3D ПЕРСПЕКТИВА
   ========================================================== */
.card {
  position: relative;
  width: 300px;
  height: 480px;
  padding: 1rem;
  display: flex;
  text-align: center;
  background: rgba(17, 25, 40, 0.35);
  border: 1px solid rgba(255,255,255,0.125);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);

  perspective: 1000px;
  transform: translateZ(0);
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
}

.card__wrapper,
.card__inner {
  width: 100%;
  height: 100%;
}

.card__inner {
  position: relative;
  transition: transform 0.8s ease;
  transform-style: preserve-3d;
  will-change: transform;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
}

/* flip state */
.card.flipped .card__inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
}

/* ==========================================================
   ИЗОБРАЖЕНИЕ
   ========================================================== */
.card__image img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.25);
}

/* ==========================================================
   ТЕКСТ
   ========================================================== */
.card h3 {
  margin-top: 0.4rem;
  font-size: 1.2rem;
  color: #fff;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__front p {
  flex-grow: 1;
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: #a6a6a6;
  line-height: 150%;
  letter-spacing: 1px;
}

/* ==========================================================
   КНОПКИ (универсальные стили)
   ========================================================== */
.card__button-wrapper { 
  display: flex;
  gap: 0.6rem;
  margin: 1rem 0; 
}

.card__button {
  padding: 12px 24px;
  border-radius: 24px;
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all .3s ease;
}



/* Outline / Fill */
.card__button-outline {
  background: transparent;
  color: rgba(0, 212, 255, 0.9);
  border: 1px solid rgba(0, 212, 255, 0.6);
}
.card__button-outline:hover {
  transform: scale(1.125);
  color: #fff;
  border-color: #fff;
}

.card__button-fill {
  background: rgba(0, 212, 255, 0.9);
  color: #fff;
  font-weight: bold;
}
.card__button-fill:hover {
  transform: scale(1.125);
  filter: drop-shadow(0 10px 5px rgba(0,0,0,0.125));
}

/* ==========================================================
   FRONT / BACK
   ========================================================== */
.card__front,
.card__back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  backface-visibility: hidden;
  transition: opacity 0.6s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.card__front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.125);
}

.card__back {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: rgba(17,25,40,0.25);
  border: 1px solid rgba(255,255,255,0.125);
  backdrop-filter: blur(6px) saturate(180%);
  transform: rotateY(180deg);
}

.card.flipped .card__front { opacity: 0; }
.card.flipped .card__back { opacity: 1; }

/* ==========================================================
   КОНТАКТЫ
   ========================================================== */
.card__back-info {
  width: 100%;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.card__back-info-settings {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.25);
}
.card__back-info-settings:last-child { border-bottom: none; }

.card__back-info-text { color: #fff; font-size: 0.95rem; }

.card__back-info-settings .fa-brands,
.card__back-info-settings .fa-solid,
.card__back-info-settings .fa-regular {
  font-size: 24px;
  min-width: 24px;
  transition: transform .3s ease, filter .3s ease;
}

/* ==========================================================
   ГРАДИЕНТНЫЕ ИКОНКИ
   ========================================================== */
.fa-whatsapp {
  background: linear-gradient(45deg,#25D366,#128C7E,#0bdec5);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.fa-whatsapp:hover { transform: scale(1.2) rotate(10deg); filter: drop-shadow(0 0 6px #25D366); }

.fa-envelope {
  background: linear-gradient(45deg,#1DA1F2,#0a74da,#00c6ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.fa-envelope:hover { transform: scale(1.2) rotate(-10deg); }

.fa-instagram {
  background: linear-gradient(45deg,#f58529,#feda77,#dd2a7b,#8134af,#515bd4);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.fa-phone {
  background: linear-gradient(45deg, #00BFFF, #1E90FF, #00CED1);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: transform 0.3s, filter 0.3s;
}

.fa-phone:hover {
  transform: scale(1.2) rotate(5deg);
  filter: drop-shadow(0 0 6px #1E90FF);
}




/* ==========================================================
   ПОДДЕРЖКА СТАРЫХ БРАУЗЕРОВ
   ========================================================== */
@supports not ((backdrop-filter: blur(6px))) {
  .card__front, .card__back { background-color: rgba(255,255,255,0.05); }
}

/* ==========================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ
   ========================================================== */
@media (max-width: 600px) {
  .cards { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 0.6rem; 
    justify-items: center; 
  }

  .card { width: 12.5rem; height: 24rem; padding: 0.6rem; perspective: 800px; }
  .card__image img { height: 140px; border-radius: 10px; }
  .card h3 { font-size: 1.1rem; -webkit-line-clamp: 2; line-clamp: 2; margin-bottom: 0.3rem;}
  .card p { font-size: 0.9rem;  }

  .card__button-wrapper { flex-direction: column;}
  .card__button { padding: 7-8px 12-14px; font-size: 0.6-0.65rem; letter-spacing: 1px;}

  .card__back { gap: 0rem; }
  .card__back h3 { font-size: 0.9rem; font-weight: bold;}
  .card__back p { font-size: 0.8rem; font-weight: normal;}
  .card__back { padding: 0.6rem; transform: rotateY(180deg); }
  .card__back-info { gap: 0.6rem; }
  .card__back-info-text { font-size: 0.8rem; }
  .card__back-info-settings .fa-brands,
  .card__back-info-settings .fa-solid,
  .card__back-info-settings .fa-regular,
  .card__back-info-settings .fa-solid { font-size: 18px; min-width: 18px; }
}