/* GPC New Wave Miskolc — Díjátvállalás flip-kártya
   Kanonikus .card mintát követi (brand.css .card: 1px #e8e0d0 keret / 8px radius / piros hover) —
   nincs bespoke kártya-variáns. Web-robot [SUBROLE: landing], 2026-08-13, delegation_id:
   2026-08-13T12-10-00Z_gpcdij01. Használja: kalkulator.html, eurban-gyerekjovo.html. */

.dv-flip-wrap {
  perspective: 1800px;
  max-width: 480px;
  margin: 0 auto;
}

.dv-flip {
  position: relative;
  width: 100%;
  min-height: 340px;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.4, .2, .2, 1);
}

.dv-flip.is-flipped {
  transform: rotateY(180deg);
}

.dv-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dv-face-front {
  justify-content: flex-start;
}

.dv-face-back {
  transform: rotateY(180deg);
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* FIX (2026-10-02, bug: forgó/flicker kártya): a .dv-face elemek a brand.css
   kanonikus .card osztályát is viselik. A .card:hover `transform:
   translateY(-3px)` + `transition: ... transform 0.2s` (specificitás 0,2,0)
   felülírja a .dv-face-back `transform: rotateY(180deg)`-jét (0,1,0), amikor
   az egér a megfordított hátlapra ér — a lap 0.2s alatt visszaforog,
   backface-visibility miatt eltűnik, a hover megszűnik, újra előreforog:
   végtelen flicker-ciklus. A lapokon a transform-hover/transition-t
   semlegesítjük, a piros keret + árnyék hover-effekt marad. */
.dv-flip .dv-face.card {
  transition: border-color 0.2s, box-shadow 0.2s;
}

.dv-flip .dv-face-front.card:hover {
  transform: none;
}

.dv-flip .dv-face-back.card,
.dv-flip .dv-face-back.card:hover {
  transform: rotateY(180deg);
}

/* Teljes előlapot lefedő, láthatatlan flip-trigger gomb — a látható tartalom
   (span/h3/p) NEM kerül <button> alá (content-model érvényesség), a gomb
   csak a kattintható/tapintható réteget adja, aria-label-lel önmagában
   érthető. DOM-sorrendben a látható szöveg UTÁN jön (screen reader előbb a
   tartalmat olvassa, utána éri el a flip-gombot). */
.dv-hit-area {
  position: absolute;
  inset: 0;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

.dv-hit-area:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 8px;
}

.dv-face-front h3 {
  font-size: 1.35rem;
  margin-bottom: .75rem;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.dv-face-front p {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--text-body);
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.dv-flip-hint {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: 1.1rem;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.dv-flip-hint svg {
  flex-shrink: 0;
}

.dv-back-btn {
  align-self: flex-start;
  background: none;
  border: 0;
  color: var(--text-muted);
  font-size: .82rem;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  padding: .3rem .3rem;
  margin-bottom: .5rem;
}

.dv-back-btn:hover {
  color: var(--red);
}

.dv-back-btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}

.dv-face-back p {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: 1.4rem;
}

/* prefers-reduced-motion: animáció nélküli, azonnali váltás */
@media (prefers-reduced-motion: reduce) {
  .dv-flip {
    transition: none;
  }
}

@media (max-width: 480px) {
  .dv-flip {
    min-height: 400px;
  }
}