/*
 * Hila Cards Widget — קלפי מסר
 * Feature: features/hila_cards
 * Extracted from hila-cards-widget.html (page background rules intentionally omitted —
 * the widget is transparent and inherits the WordPress section background).
 */

/* ====== RESET & BASE ====== */
.hk-cards-widget * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hk-cards-widget {
  /* Site color palette from hilakessem.co.il */
  --hk-teal: #2a9d8f;
  --hk-teal-dark: #1f7a6f;
  --hk-teal-light: #e0f3f0;
  --hk-gold: #e9a84c;
  --hk-gold-dark: #c78b2d;
  --hk-gold-light: #f2c97e;
  --hk-dark: #1e2d2b;
  --hk-text: #4a635f;
  --hk-bg-warm: #faf9f7;
  --hk-bg-cream: #f5f0ea;
  --hk-bg-sand: #f0ebe3;
  --hk-white: #ffffff;
  --hk-shadow: rgba(42, 157, 143, 0.12);
  --hk-glow: rgba(233, 168, 76, 0.35);

  font-family: 'Rubik', sans-serif;
  direction: rtl;
  text-align: center;
  padding: 40px 0 50px;
  /* Transparent so it inherits the page/section background in WordPress */
  background: transparent;
  overflow: hidden;
  position: relative;
}

/* ====== DECORATIVE ELEMENTS ====== */
.hk-cards-widget::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -80px;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(42,157,143,0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hk-cards-widget::after {
  content: '';
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(233,168,76,0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* ====== HEADER ====== */
.hk-header {
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}

.hk-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--hk-dark);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.hk-subtitle {
  font-size: 1.05rem;
  color: var(--hk-text);
  font-weight: 400;
  line-height: 1.6em;
}

.hk-dragonfly {
  display: inline-block;
  font-size: 1.4rem;
  animation: hk-float 3s ease-in-out infinite;
  margin: 0 6px;
}

@keyframes hk-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(3deg); }
  75% { transform: translateY(3px) rotate(-2deg); }
}

/* ====== CAROUSEL CONTAINER ====== */
.hk-carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 30px 0;
  z-index: 2;
}

.hk-carousel-track {
  display: flex;
  gap: 20px;
  padding: 10px 40px;
  /* בלי transition על ה-transform! התנועה מנוהלת פריים-אחר-פריים ב-JS
     (requestAnimationFrame + האטה משלו). transition כאן גורם לכל עדכון
     פריים להיות מונפש ל-0.5 שניות, והקרוסלה נתקעת. */
  will-change: transform;
  cursor: grab;
  user-select: none;
  /* גלילה אנכית של העמוד נשארת אצל הדפדפן, גרירה אופקית מגיעה אלינו */
  touch-action: pan-y;
}

.hk-carousel-track:active {
  cursor: grabbing;
}

/* ====== CARD ====== */
.hk-card {
  flex: 0 0 auto;
  width: 180px;
  height: 234px;
  perspective: 800px;
  cursor: pointer;
  position: relative;
}

.hk-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

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

.hk-card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px var(--hk-shadow), 0 2px 8px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  border: 1px solid rgba(233,168,76,0.15);
}

.hk-card:hover .hk-card-face {
  box-shadow: 0 8px 32px var(--hk-shadow), 0 0 20px var(--hk-glow);
}

.hk-card-back {
  z-index: 2;
}

.hk-card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hk-card-front {
  transform: rotateY(180deg);
}

.hk-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card hover animation - gentle tilt */
.hk-card:not(.flipped):not(.locked):hover .hk-card-inner {
  transform: rotateY(8deg) scale(1.03);
}

.hk-card.locked {
  cursor: default;
  opacity: 0.55;
  filter: grayscale(0.3);
  transition: opacity 0.5s, filter 0.5s;
}

.hk-card.locked:hover .hk-card-face {
  box-shadow: 0 4px 20px var(--hk-shadow);
}

/* ====== SHIMMER EFFECT ON CARD BACK ====== */
.hk-card:not(.flipped):not(.locked) .hk-card-back::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,255,255,0.15) 50%,
    transparent 70%
  );
  animation: hk-shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hk-shimmer {
  0% { transform: translateX(-100%) translateY(-100%); }
  100% { transform: translateX(100%) translateY(100%); }
}

/* ====== NAV ARROWS ====== */
.hk-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--hk-white);
  border: 2px solid rgba(233,168,76,0.25);
  color: var(--hk-gold);
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px var(--hk-shadow);
  transition: all 0.3s ease;
}

.hk-nav-btn:hover {
  background: var(--hk-teal);
  color: var(--hk-white);
  border-color: var(--hk-teal);
  box-shadow: 0 4px 20px rgba(42,157,143,0.3);
}

.hk-nav-prev { left: 8px; }
.hk-nav-next { right: 8px; }

/* ====== MODAL OVERLAY ====== */
.hk-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(30, 45, 43, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hk-modal-overlay.active {
  display: flex;
  opacity: 1;
}

.hk-modal-card {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 0 40px var(--hk-glow);
  animation: hk-modal-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  perspective: 1000px;
}

.hk-modal-card-inner {
  position: relative;
  /* נגזר מיחס הצדדים האמיתי של הקלף (602x780) כדי שלא ייחתך אף פעם —
     גם במסך נמוך או בטלפון במצב לרוחב */
  width: min(340px, 86vw, calc(72vh * 0.772));
  height: auto;
  aspect-ratio: 602 / 780;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.hk-modal-card-inner.flipping {
  transform: rotateY(180deg);
}

.hk-modal-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 20px;
  overflow: hidden;
}

.hk-modal-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hk-modal-front {
  transform: rotateY(180deg);
}

@keyframes hk-modal-in {
  0% { transform: scale(0.5) rotateY(-30deg); opacity: 0; }
  100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}

.hk-modal-close {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--hk-white);
  border: 2px solid var(--hk-teal);
  color: var(--hk-teal);
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  transition: all 0.3s;
}

.hk-modal-close:hover {
  background: var(--hk-teal);
  color: var(--hk-white);
}

/* ====== STATUS MESSAGE ====== */
.hk-status {
  margin-top: 12px;
  font-size: 0.95rem;
  color: var(--hk-text);
  min-height: 28px;
  position: relative;
  z-index: 2;
}

.hk-status .hk-highlight {
  color: var(--hk-gold-dark);
  font-weight: 600;
}

/* ====== PARTICLES ====== */
.hk-particle {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: hk-particle-float 4s ease-in-out forwards;
}

@keyframes hk-particle-float {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-120px) scale(1.2) rotate(180deg); }
}

/* ====== INSTRUCTION HINT ====== */
.hk-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
  margin-bottom: 4px;
  font-size: 0.9rem;
  color: var(--hk-text);
  opacity: 0.75;
  position: relative;
  z-index: 2;
}

.hk-hint-hand {
  display: inline-block;
  animation: hk-tap 1.5s ease-in-out infinite;
}

@keyframes hk-tap {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2) rotate(-10deg); }
}

/* ====== DIVIDER ====== */
.hk-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--hk-teal), var(--hk-gold));
  border-radius: 3px;
  margin: 10px auto 6px;
}

/* ====== RESPONSIVE ====== */
/* גובה הקלף נגזר מיחס הצדדים (602x780) ולא מוקלד ידנית, כדי שהתמונה
   לא תימתח באף breakpoint */
.hk-card {
  aspect-ratio: 602 / 780;
  height: auto;
}

@media (max-width: 768px) {
  .hk-card { width: 140px; }
  .hk-title { font-size: 1.6rem; }
  .hk-subtitle { font-size: 0.9rem; }
  .hk-nav-btn {
    /* 44px = יעד המגע המינימלי המומלץ */
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .hk-card { width: 120px; }
  .hk-carousel-track {
    gap: 12px;
    padding: 10px 20px;
  }
  .hk-title { font-size: 1.3rem; }
  .hk-subtitle { font-size: 0.85rem; }
  .hk-cards-widget {
    padding: 24px 0 30px;
  }
  .hk-nav-prev { left: 4px; }
  .hk-nav-next { right: 4px; }
}

@media (max-width: 360px) {
  .hk-card { width: 104px; }
  .hk-carousel-track {
    gap: 10px;
    padding: 10px 14px;
  }
  .hk-title { font-size: 1.15rem; }
}

/* טלפון במצב לרוחב — מעט גובה, הרבה רוחב */
@media (max-height: 480px) and (orientation: landscape) {
  .hk-cards-widget { padding: 18px 0 22px; }
  .hk-card { width: 110px; }
  .hk-carousel-wrapper { padding: 14px 0; }
}

/* כיבוד העדפת המערכת לצמצום אנימציות */
@media (prefers-reduced-motion: reduce) {
  .hk-dragonfly,
  .hk-particle {
    animation: none !important;
  }
  .hk-card-inner,
  .hk-modal-card-inner {
    transition-duration: 0.15s;
  }
}