/*
 * konyv.css — csak a Könyv landing egyedi CSS-e.
 * A designban nem volt könyv-oldal: az éles /konyv/ szekciói a meglévő
 * design-szótárra képezve. Komponensek: konyv-intro (webshopos split),
 * fail-grid (ok-kártyák), chapters-faq (fejezet-toggle), proof-side (sticky kép),
 * qslider (vélemény-lapozó).
 */

/* Landing-hero: nagyobb, mint az aloldali alap */
.konyv-hero { min-height: 620px; }
.konyv-hero .wrap { padding-top: 104px; padding-bottom: 104px; }
.konyv-hero h1 { max-width: 24ch; }
.konyv-hero .lead { max-width: 62ch; }
.konyv-q { margin-top: 18px; }
.konyv-q strong { color: #8ff3d8; }

/* — Webshopos intro-split: termék-galéria (kiemelt + 2 thumb, lightbox) + alert-lista — */
.book-gallery { margin: 0; display: grid; gap: 14px; align-self: start; }
.book-gallery .glight { display: block; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: .2s ease; }
.book-gallery .glight:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.book-gallery picture { display: block; }
.book-gallery img { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; box-shadow: none; }
.gthumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gthumbs img { aspect-ratio: 3/2; }
.konyv-alerts { margin-top: 22px; }
.konyv-alerts li { align-items: flex-start; font-family: var(--font-body); font-weight: 400; font-size: 16px; color: var(--ink-2); }
.konyv-alerts svg { color: var(--blue); margin-top: 2px; }
.konyv-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 30px; }

/* A lightbox (.lb) és a .glight alap a base.css-be került (v0.14.0) — a coaching
   Referenciám-képe is használja. */

/* Arculati szabály: tartalmi kép max 1:1 — a portré-slot a base .split-media img (4/3)
   helyett négyzetes vágást kap, akkor is, ha később állóbb képfájl kerül a helyére. */
.split-media.portrait img { aspect-ratio: 1/1; object-position: top center; }

/* — Kudarc-okok: ikonos kártya-rács (checklist helyett) — */
.fail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; max-width: 1010px; margin: 0 auto; }
.fail-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 28px 30px 32px; box-shadow: var(--shadow-sm); transition: .2s ease; overflow: hidden; }
.fail-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad); }
.fail-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.fail-card .ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(58,63,214,.08); color: var(--blue); display: grid; place-items: center; margin-bottom: 16px; }
.fail-card .ic svg { width: 25px; height: 25px; }
.fail-card h3 { font-size: 17.5px; margin-bottom: 10px; }
.fail-card p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.fail-card.wide { grid-column: 1 / -1; }
@media (max-width: 820px) { .fail-grid { grid-template-columns: minmax(0, 1fr); } }

/* Gomb a szekciók alján: középen, levegővel (a base csak mobil-szabályt ad) */
.steps-cta { text-align: center; margin-top: 48px; }

.okclose { max-width: 760px; margin: 34px auto 0; text-align: center; color: var(--ink-2); }

/* "Neked szól, ha…" lista (centrált blokk) */
.konyv-list { max-width: 820px; margin: 0 auto; }
.konyv-list li { align-items: flex-start; font-family: var(--font-body); font-weight: 400; font-size: 16.5px; color: var(--ink-2); }

/* — Fejezet-toggle-ök (a coaching .faq mintája, számozott summary-vel) — */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 15px; padding: 17px 22px; font-family: var(--font-head); font-weight: 600; font-size: 16.5px; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { margin-left: auto; color: var(--blue); transition: .2s ease; flex: none; }
.faq-item summary .chev svg { width: 21px; height: 21px; }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item .fnum { flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--grad-ink); color: #fff; display: grid; place-items: center; font-size: 14.5px; font-weight: 700; box-shadow: 0 6px 14px rgba(47,80,180,.22); }
.faq-item .ans { padding: 0 22px 20px 73px; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.faq-item .ans blockquote { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.faq-item .ans blockquote p { font-style: italic; font-size: 14.5px; color: var(--ink-2); }
.faq-item .ans cite { display: block; margin-top: 6px; font-style: normal; font-family: var(--font-head); font-weight: 600; font-size: 13px; color: var(--teal-ink); }
@media (max-width: 600px) { .faq-item .ans { padding-left: 22px; } }

/* — Bizonyíték-split: sticky kép + gomb a kép alatt — */
.konyv-proof { margin-top: 22px; }
.konyv-proof li { align-items: flex-start; font-family: var(--font-body); font-weight: 400; font-size: 16px; color: var(--ink-2); }
.konyv-proof svg { color: var(--teal-ink); margin-top: 2px; }
.proof-side { position: sticky; top: 96px; align-self: start; }
.proof-side .btn { margin-top: 18px; }
@media (max-width: 900px) { .proof-side { position: static; } }

/* — Vélemény-lapozó: egyszerre EGY kártya, pöttyök + gradiens nyilak —
   A viewport negatív margó + padding párossal vág: így a kártya-árnyék nem csonkul
   szögletesre a sarkoknál. A kártyák közti rést a JS calc-os eltolása kezeli (48px). */
.qslider { max-width: 860px; margin: 0 auto; }
/* a --shadow-md 14px offsettel + 40px blurrel lefelé ~54px-t nyúlik → alul nagyobb ráhagyás */
.qviewport { overflow: hidden; margin: -40px -40px -60px; padding: 40px 40px 60px; }
.qtrack { display: flex; gap: 48px; align-items: flex-start; transition: transform .45s ease, height .35s ease; }
@media (prefers-reduced-motion: reduce) { .qtrack { transition: none; } }
/* csak az AKTÍV kártya látszik (árnyékostól) — a szomszéd árnyéka így sosem lóg be a keretbe */
.qtrack .quote-card { flex: 0 0 100%; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
.qtrack .quote-card.on { opacity: 1; visibility: visible; }
.quote-card { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 42px 48px 36px; box-shadow: var(--shadow-md); position: relative; text-align: center; }
.quote-card::before { content: "”"; display: block; font-family: var(--font-head); font-weight: 700; font-size: 64px; line-height: 1; margin: -10px 0 6px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .55; }
.quote-card p { color: var(--ink-2); font-size: 16px; line-height: 1.65; max-width: 62ch; margin: 0 auto; }
.quote-card p + p { margin-top: 10px; }
.quote-card cite { display: block; margin-top: 18px; font-style: normal; font-family: var(--font-head); font-weight: 700; font-size: 15px; background: var(--grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qnav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 28px; }
.qarrow { width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--grad-ink); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 18px rgba(47,80,180,.28); transition: .2s ease; }
.qarrow:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(47,80,180,.36); }
.qarrow svg { width: 21px; height: 21px; }
.qarrow.prev svg { transform: rotate(180deg); }
.qdots { display: flex; gap: 16px; }
.qdots button { position: relative; width: 9px; height: 9px; border-radius: 100px; border: 0; padding: 0; background: #cdd4ea; cursor: pointer; transition: .25s ease; }
/* A 9px-es pottyok kattinthato terulete pszeudo-elemmel: a latvany valtozatlan,
   a hit-area 25x43px. A 16px-es gap miatt a szomszedos teruletek nem fedik egymast. */
.qdots button::after { content: ""; position: absolute; inset: -17px -8px; }
.qdots button.on { width: 28px; background: var(--grad); }
@media (max-width: 600px) { .quote-card { padding: 36px 24px 30px; } }

/* Széles head-center a tartalom-szekcióhoz */
.head-center.wide { max-width: 60ch; }

/* A fejezet-toggle-ök funkcióját jelző note a lista fölött */
.chapters-note { display: flex; align-items: center; justify-content: center; gap: 9px; max-width: 860px; margin: -26px auto 22px; font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: var(--blue); }
.chapters-note svg { width: 18px; height: 18px; flex: none; }