/* =====================================================================
   GYIK (08) – előtag: gy-
   Lenyílók (az alap .lenyilo komponense, data-lenyilo="gyik"); JS nem kell.
   ===================================================================== */

.gy-racs { max-width: var(--max); margin-inline: auto; display: grid; }
.gy .szakasz-fej { margin-inline: 0; }

.gy-lista { display: grid; gap: 10px; min-width: 0; }
.gy-h { margin: 0; font: inherit; }
.gy-fej { gap: 14px; padding: 18px 16px; min-height: 64px; }
.gy-szam { flex: none; width: 24px; font: 700 12px/1 var(--font-cim); letter-spacing: .08em; color: var(--piros-vilagos); font-variant-numeric: tabular-nums; }
.gy-kerdes { min-width: 0; font: 700 16.5px/1.3 var(--font-cim); color: var(--szoveg); }
.gy-elem.nyitva { border-color: rgba(216, 38, 45, .4); }
.gy-elem.nyitva .jel { background: rgba(216, 38, 45, .18); }
@media (hover: hover) {
  .gy-fej { transition: background-color .25s; }
  .gy-fej:hover { background-color: rgba(255, 255, 255, .025); }
}

/* a válasz a kérdés szövegéhez igazodik (a szám mögött) */
.gy-valasz { padding: 0 18px 20px 54px; }
.gy-valasz p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #d6d4d9; }
.lenyilo.nyitva .gy-valasz p { animation: gy-be .5s var(--be) .1s backwards; }
@keyframes gy-be { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* csukott válasz ne legyen fókuszálható / felolvasható */
.gy .lenyilo-tartalom { visibility: hidden; transition: visibility 0s .45s; }
.gy .lenyilo.nyitva .lenyilo-tartalom { visibility: visible; transition-delay: 0s; }

/* záró sor: telefon + vissza az űrlaphoz */
.gy-zaro { display: grid; gap: 14px; justify-items: start; margin-top: 28px; padding: 22px 18px; border-radius: 14px; border: 1px solid var(--vonal); background: radial-gradient(120% 140% at 0% 100%, rgba(216, 38, 45, .14), rgba(216, 38, 45, 0) 60%), var(--bg2); }
.gy-zaro-szoveg { margin: 0; font: 700 17px/1.4 var(--font-cim); color: var(--szoveg); }
.gy-zaro .gomb { width: 100%; }

@media (min-width: 900px) {
  .gy-racs { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-areas: "fej lista" "zaro lista"; grid-template-rows: auto 1fr; column-gap: 56px; align-items: start; }
  .gy-fejresz { grid-area: fej; margin-bottom: 0; }
  .gy-fejresz .cim-szakasz { font-size: clamp(40px, 4.4vw, 60px); overflow-wrap: anywhere; }
  .gy-lista { grid-area: lista; }
  .gy-zaro { grid-area: zaro; margin-top: 32px; }
  .gy-zaro .gomb { width: auto; }
  .gy-fej { padding: 20px 22px; }
  .gy-kerdes { font-size: 18px; }
  .gy-valasz { padding: 0 22px 22px 60px; }
}