/* ============================================================
   HEALTH BENEFITS PAGE CSS
   ============================================================ */

/* ---- Body Diagram ---- */
.body-pulse { animation: pulse 1.5s ease-in-out infinite; }
.body-diagram { display: flex; justify-content: center; padding: 20px 0; }
.health-icon-anim svg { animation: float 3s ease-in-out infinite; }

/* ---- Flip Cards Grid ---- */
.benefits-flip-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 28px;
}

/* ---- Flip Card ---- */
.flip-card {
    perspective: 1200px;
    height: 240px; cursor: pointer;
    border-radius: var(--radius-lg);
}
.flip-card-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform 0.6s cubic-bezier(0.4,0.2,0.2,1);
    transform-style: preserve-3d;
    border-radius: var(--radius-lg);
}
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }

.flip-front, .flip-back {
    position: absolute; inset: 0;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border-radius: var(--radius-lg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 28px; text-align: center;
    box-shadow: var(--shadow-md);
}
.flip-front {
    background: white;
    border: 2px solid var(--border);
    transition: border-color 0.3s;
}
.flip-card:hover .flip-front { border-color: var(--primary); }
.flip-front h3 { font-size: 17px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; }
.flip-hint { font-size: 13px; color: var(--primary); font-weight: 500; }

.flip-back {
    background: linear-gradient(135deg, var(--primary), var(--dark-teal));
    transform: rotateY(180deg);
}
.flip-back p { font-size: 14px; color: white; line-height: 1.7; margin-bottom: 16px; }
.flip-close { font-size: 12px; color: rgba(255,255,255,0.7); font-style: italic; }

/* ---- Intake Cards ---- */
.intake-card { border: 2px solid var(--border); }
.intake-card:hover { border-color: var(--primary); }

/* ---- Research Cards ---- */
.research-card { text-align: center; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .benefits-flip-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
    .benefits-flip-grid { grid-template-columns: 1fr; }
    .flip-card { height: auto; perspective: none; }
    .flip-card-inner { transform-style: flat; }
    .flip-front, .flip-back { position: static; backface-visibility: visible; }
    .flip-back { display: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); transform: none; }
    .flip-card.flipped .flip-front { display: none; }
    .flip-card.flipped .flip-back { display: flex; }
    .flip-card.flipped .flip-card-inner { transform: none; }
}