/* ==========================================================================
   FrankfurtFinder V2 — Micro-Interactions V1.1
   Scoped hover effects. GPU-friendly. Desktop only. Reduced-motion aware.
   ========================================================================== */

/* --- CLICKABLE CARDS ONLY --- */
a.hub-card,
a[href*="/en/"][style*="border-radius:1"],
a[href*="/de/"][style*="border-radius:1"],
a[style*="display:block"][style*="border-radius:1"] {
  transition: transform .15s ease-out, box-shadow .15s ease-out, border-color .15s ease-out;
  cursor: pointer;
}
@media (hover: hover) {
  a.hub-card:hover,
  a[href*="/en/"][style*="border-radius:1"]:hover,
  a[href*="/de/"][style*="border-radius:1"]:hover,
  a[style*="display:block"][style*="border-radius:1"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
    border-color: #b3894a !important;
  }
}

/* --- Quick Decision cards (interactive) --- */
.qt-card { transition: transform .15s ease-out, box-shadow .15s ease-out, border-color .15s ease-out; cursor: default; }
@media (hover: hover) {
  .qt-card:hover { border-color: #b3894a; box-shadow: 0 4px 12px rgba(0,0,0,.04); }
}

/* --- Hub cards (clickable ones) --- */
.hub-card:not(.hub-card--info) { cursor: pointer; }

/* --- Coming-soon / info cards — NO hover elevation --- */
.hub-card--info { cursor: default !important; }
.hub-card--info:hover { transform: none !important; box-shadow: none !important; border-color: #e2ddd0 !important; }

/* --- Decision Summary — static, no hover lift --- */
div[style*="border:2px solid #191817"][style*="box-shadow:0 3px"] {
  transition: none;
}
div[style*="border:2px solid #191817"][style*="box-shadow:0 3px"]:hover {
  transform: none !important;
}

/* --- Table row hover (reading aid, background only) --- */
.scenario-row, .compare-grid {
  transition: background .15s ease-out;
}
@media (hover: hover) {
  .scenario-row:hover, .compare-grid:hover {
    background: #f9f6ee !important;
  }
}

/* --- Evidence row hover (reading aid) --- */
.evidence-row { transition: background .15s ease-out; }
@media (hover: hover) {
  .evidence-row:hover { background: #f0ede7 !important; }
}

/* --- Badges — STATIC, no animation --- */
.match-badge, .score-badge, .class-badge {
  transition: none !important;
}
.match-badge:hover, .score-badge:hover, .class-badge:hover {
  opacity: 1 !important;
  transform: none !important;
}

/* --- Button transitions (unified 150ms) --- */
.tool-cta,
a[style*="background:#191817"][style*="color:#fff"] {
  transition: background .15s ease-out, opacity .15s ease-out;
  cursor: pointer;
}
.tool-cta:hover,
a[style*="background:#191817"][style*="color:#fff"]:hover {
  opacity: .92;
}

/* --- FAQ question hover (subtle reading cue) --- */
.faq-q { transition: color .15s ease-out; }
@media (hover: hover) {
  .faq-q:hover { color: #b3894a; }
}

/* --- Interactive elements cursor --- */
a[href]:not([href="#"]):not([href=""]) { cursor: pointer; }
button, .tool-cta { cursor: pointer; }

/* --- Non-clickable coming-soon cards --- */
a[href="#"] { cursor: default !important; }
a[href="#"]:hover { transform: none !important; box-shadow: none !important; }

/* --- Language switch --- */
a[href="/"], a[href="/en/"], a[href="/de/"] {
  transition: color .15s ease-out;
}

/* --- Search trigger --- */
span[role="button"][aria-label*="search"],
span[role="button"][aria-label*="Suche"] {
  cursor: pointer;
  transition: color .15s ease-out;
}
span[role="button"][aria-label*="search"]:hover,
span[role="button"][aria-label*="Suche"]:hover {
  color: #191817;
}

/* ═══════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .qt-card:hover,
  a[href*="/en/"][style*="border-radius:1"]:hover,
  a[href*="/de/"][style*="border-radius:1"]:hover,
  a[style*="display:block"][style*="border-radius:1"]:hover {
    transform: none !important;
  }
}