/* ============================================================
   betekinto.css — 2. MODUL: Betekintő oldal stílusai
   ============================================================ */

.betekinto-tartalom { max-width: 1180px; }

/* ---------- Lapozó sáv ---------- */
.lapozo-sav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.lapozo-sav .gomb { flex: 1 1 auto; min-width: 150px; }

/* ============================================================
   ELSŐ RÉSZ — két oszlop: galéria + adatok
   ============================================================ */
.elso-resz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 1.8rem;
  margin-bottom: 2rem;
}
@media (max-width: 850px) {
  .elso-resz { grid-template-columns: 1fr; }
}

/* --- Bal oszlop: képgaléria --- */
.galeria {
  background: var(--fa-vilagos);
  border: 2px solid var(--bor);
  border-radius: var(--radius-nagy);
  box-shadow: var(--arnyek);
  padding: 1rem;
  position: sticky;
  top: 1rem;
  align-self: start;
}
/* Egy oszlopos (keskeny / fél képernyős) elrendezésben a galéria NE legyen
   ragadós és NE nyúljon teljes szélességig — különben a magas borítókép
   a képernyő aljára tolja a jobb oldali adat-oszlopot, ami így „eltűnik".
   Ez a blokk a fenti .galeria szabály UTÁN áll, hogy felül tudja írni. */
@media (max-width: 850px) {
  .galeria {
    position: static;
    top: auto;
    max-width: 380px;
    margin: 0 auto 0.3rem;
  }
  .galeria-fokep {
    aspect-ratio: auto;
    max-height: 56vh;
    height: auto;
    object-fit: contain;
  }
}
.galeria-fokep-keret {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--fa-sotet);
  border: 1px solid var(--bor);
}
.galeria-fokep {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: contain;
  background: var(--fa-sotet);
  display: block;
}
/* Galéria léptető nyilak a képen */
.galeria-nyil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(28,20,16,.78);
  border: 1px solid var(--arany-melyebb);
  color: var(--arany-vilagos);
  font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background .18s ease, transform .15s ease;
}
.galeria-nyil:hover { background: var(--bor); transform: translateY(-50%) scale(1.06); }
.galeria-nyil.bal { left: .6rem; }
.galeria-nyil.jobb { right: .6rem; }

/* Bélyegkép-sor */
.galeria-belyeg-sor {
  display: flex;
  gap: .5rem;
  margin-top: .7rem;
  flex-wrap: wrap;
  justify-content: center;
}
.galeria-belyeg {
  width: 58px;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  opacity: .6;
  transition: opacity .18s ease, border-color .18s ease, transform .15s ease;
  background: var(--fa-sotet);
}
.galeria-belyeg:hover { opacity: .9; transform: translateY(-2px); }
.galeria-belyeg.aktiv { opacity: 1; border-color: var(--arany); }

/* --- Jobb oszlop: adatsorok --- */
.adat-oszlop { display: flex; flex-direction: column; gap: .9rem; }

.adat-sor {
  background: var(--fa-vilagos);
  border: 1px solid var(--bor);
  border-radius: var(--radius-nagy);
  padding: .9rem 1.1rem;
  box-shadow: var(--arnyek);
}
.adat-cimke {
  font-family: var(--betu-ui);
  font-size: .92rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--arany);
  margin: 0 0 .25rem;
}
.adat-ertek { font-size: 1.18rem; color: var(--pergamen); margin: 0; }

/* Cím + író kiemelt fejléc */
.fo-fejlec-sor {
  background:
    linear-gradient(180deg, rgba(201,162,94,.08), transparent),
    var(--fa-vilagosabb);
  border: 1px solid var(--bor-vilagos);
  border-radius: var(--radius-nagy);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--arnyek);
}
.fo-fejlec-cim {
  font-family: var(--betu-cim);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.2rem);
  color: var(--arany-vilagos);
  margin: 0;
  line-height: 1.15;
}
.fo-fejlec-iro { font-style: italic; font-size: 1.2rem; color: var(--pergamen-halvany); margin: .25rem 0 0; }
.fo-fejlec-sorszam {
  font-family: var(--betu-ui); font-size: .85rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--pergamen-tompa);
}

/* Apró adatok rácsban (kiadó / évszám / műfajok) */
.adat-racs { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 420px) { .adat-racs { grid-template-columns: 1fr; } }

/* Ár sor kiemelten */
.ar-sor {
  background: linear-gradient(180deg, rgba(139,58,47,.22), rgba(28,20,16,.4));
  border: 1px solid var(--voros);
}
.ar-ertek {
  font-family: var(--betu-cim);
  font-size: 1.7rem;
  color: var(--arany-vilagos);
  margin: 0;
}
.ar-megjegyzes { font-size: .95rem; color: var(--pergamen-tompa); margin: .2rem 0 0; }

/* ---------- Ajánlók (3 váltható, egymást nem takaró) ---------- */
.ajanlok-doboz {
  background: var(--fa-vilagos);
  border: 2px solid var(--bor);
  border-radius: var(--radius-nagy);
  box-shadow: var(--arnyek);
  overflow: hidden;
}
.ajanlo-fulek {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--bor);
  background: var(--fa-kozep);
  flex-wrap: wrap;
}
.ajanlo-ful {
  flex: 1 1 33%;
  font-family: var(--betu-ui);
  font-size: 1.02rem;
  letter-spacing: .5px;
  color: var(--pergamen-tompa);
  padding: .7rem .5rem;
  text-align: center;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all .18s ease;
  min-width: 110px;
}
.ajanlo-ful:hover { color: var(--arany-vilagos); background: rgba(201,162,94,.08); }
.ajanlo-ful.aktiv {
  color: var(--arany-vilagos);
  border-bottom-color: var(--arany);
  background: rgba(201,162,94,.12);
}
.ajanlo-tartalom {
  padding: 1.1rem 1.2rem 1.3rem;
  font-size: 1.3rem;
  line-height: 1.7;
  min-height: 120px;
}
.ajanlo-panel { display: none; }
.ajanlo-panel.aktiv { display: block; animation: halvanyBe .25s ease; }
@keyframes halvanyBe { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ============================================================
   MÁSODIK és HARMADIK RÉSZ — a szövegblokkok 2 oszlopban,
   párosával egymás mellett (jobb olvashatóság). Mobilon 1 oszlop.
   ============================================================ */
.masodik-resz, .harmadik-resz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 2rem;
  align-items: start;
}
@media (max-width: 768px) {
  .masodik-resz, .harmadik-resz { grid-template-columns: 1fr; }
}

.szoveg-blokk {
  background:
    linear-gradient(180deg, rgba(243,231,207,.03), transparent),
    var(--fa-vilagos);
  border: 1px solid var(--bor);
  border-left: 4px solid var(--arany-melyebb);
  border-radius: var(--radius-nagy);
  padding: 1.2rem 1.4rem;
  box-shadow: var(--arnyek);
}
.szoveg-blokk-cim {
  font-family: var(--betu-cim);
  font-size: 1.42rem;
  color: var(--arany-vilagos);
  margin: 0;
  display: flex; align-items: center; gap: .5rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
/* A natív <summary> nyíl elrejtése (minden böngészőben) */
.szoveg-blokk-cim::-webkit-details-marker { display: none; }
.szoveg-blokk-cim::marker { content: ""; }
.szoveg-blokk-cim .ikon { font-size: 1.3rem; }
.szoveg-blokk-cim .blokk-cim-szoveg { flex: 1; }
/* Saját nyíl jelző (jobb oldalon) — zárt állapot: lefelé mutat */
.szoveg-blokk-cim .blokk-nyil {
  flex: 0 0 auto;
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid var(--arany-melyebb);
  transition: transform .2s ease;
}
/* Nyitott állapotban a nyíl felfelé fordul */
.szoveg-blokk[open] > .szoveg-blokk-cim .blokk-nyil { transform: rotate(180deg); }
/* Hover visszajelzés a fejlécen */
.szoveg-blokk-cim:hover .blokk-cim-szoveg { color: var(--arany-vilagos); text-decoration: underline; text-decoration-color: var(--arany-melyebb); }
/* A tartalom térköze, amikor nyitva van */
.szoveg-blokk[open] > .szoveg-blokk-tartalom { margin-top: .6rem; }
/* Apró megnyíló animáció */
.szoveg-blokk[open] > .szoveg-blokk-tartalom { animation: halvanyBe .22s ease; }
.szoveg-blokk-szoveg {
  font-size: 1.34rem;
  line-height: 1.7;
  color: var(--pergamen);
  margin: 0;
  max-width: none;
}

/* Szekció elválasztó cím */
.resz-cim {
  font-family: var(--betu-cim);
  font-size: 1.5rem;
  color: var(--arany-vilagos);
  text-align: center;
  margin: 1.5rem 0 1rem;
  padding-bottom: .4rem;
}
.resz-cim::after { content: "❦"; display:block; color: var(--arany-melyebb); margin-top: .2rem; }

/* Hashtag sor a 3. részben */
.hashtag-blokk { display: flex; gap: .5rem; flex-wrap: wrap; }
.hashtag-cimke {
  font-family: var(--betu-ui);
  font-size: 1.05rem;
  padding: .35rem .9rem;
  border-radius: var(--radius-nagy);
  background: var(--fa-vilagosabb);
  border: 1px solid var(--bor-vilagos);
  color: var(--arany-vilagos);
}

/* Üres mező jelzés (ha az Excelben nincs adat) */
.ures-mezo { color: var(--pergamen-tompa); font-style: italic; }

@media (max-width: 575px) {
  .lapozo-sav .gomb { min-width: 0; font-size: .98rem; padding: .5rem .7rem; }
}