/*
Theme Name: Medicora Child
Theme URI: https://medicora.keydesign.xyz/
Description: Doctor & Medical Clinic Elementor WordPress Theme
Author: Key-Design
Author URI: http://themeforest.net/user/Key-Design
Template: medicora
Version: 1.0
License: Envato Standard License
License URI: https://themeforest.net/licenses/standard
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-menu, featured-images, flexible-header, post-formats, sticky-post, translation-ready
Text Domain: medicora-child
*/

.flip-card {
  width: 290px;
  height: 250px;
  perspective: 1000px;
  margin: auto;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Effetto flip su hover (desktop) */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Facce */
.flip-card-front, 
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

/* Fronte */
.flip-card-front {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.front-logo {
  width: 120px;
  height: auto;
  margin-bottom: 15px;
}

.flip-card-front h3 {
  font-size: 15px;
  color: #0a4b82;
  margin: 0;
  font-weight: 600;
}

/* Retro */
.flip-card-back {
  background-size: cover;
  background-repeat: no-repeat;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  color: #fff;
  text-align: center;
}

.flip-card-back p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .flip-card {
    width: 90%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .front-logo {
    width: 90px;
    margin-bottom: 10px;
  }

  .flip-card-front h3 {
    font-size: 14px;
  }

  .flip-card-back p {
    font-size: 13px;
    padding: 10px;
  }

  /* disattiva hover su mobile, ma mantieni flip su tap */
  .flip-card:hover .flip-card-inner {
    transform: none;
  }

  .flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
  }
}