/**
 * IRV Könyv Lapozó — frontend stílus
 * Design-rendszer: Cormorant Garamond + Outfit, --gold #b8872e,
 * --bg #f5f1ea, --dark #1c1812 (az album/oldal arculatával összhangban).
 */

.irv-kl-container {
    --irv-gold: #b8872e;
    --irv-bg: #f5f1ea;
    --irv-dark: #1c1812;
    --irv-paper: #fbf8f2;
    max-width: 760px;
    margin: 0 auto;
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    color: var(--irv-dark);
}

/* ── Bevezető üzenet (a lapozó FÖLÖTT) ── */
.irv-kl-intro {
    background: var(--irv-bg);
    border: 1px solid rgba(184, 135, 46, 0.30);
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 20px;
}
.irv-kl-intro-label {
    display: block;
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--irv-gold);
    margin-bottom: 8px;
}
.irv-kl-intro p {
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    color: var(--irv-dark);
}

.irv-kl-meta {
    text-align: center;
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 13px;
    color: #8a7f6a;
    margin-bottom: 16px;
}

/* ── Lapozó-színpad ── */
.irv-kl-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.irv-kl-wrap {
    width: 100%;
    max-width: 660px;
    margin: 0 auto;
}
#irv-kl-flipbook {
    margin: 0 auto;
}

/* ── Oldalak ── */
.irv-kl-pageItem {
    background: var(--irv-paper);
}
.irv-kl-page {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(184, 135, 46, 0.18);
    overflow: hidden;
}
.irv-kl-page-inner {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.irv-kl-page-image .irv-kl-page-inner {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.irv-kl-page-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* v1.4.1: köszöntő-kép oldal — a megszólítás RÁ a képre, felül (overlay) */
.irv-kl-page-koszkep .irv-kl-page-inner {
    padding: 0;
}
.irv-kl-koszkep-inner {
    width: 100%;
    height: 100%;
    position: relative;   /* az overlay ehhez igazodik */
    box-sizing: border-box;
}
.irv-kl-koszkep-img {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.irv-kl-koszkep-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* a kép kitölti az oldalt; a felhasználó felül
                              hagy helyet a megszólításnak a képen */
    display: block;
}
.irv-kl-greeting-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    /* v1.4.2: kisebb, visszafogottabb megszólítás-méret. A v1.4.1-ben
       a clamp felső határa (22px) + 3.4vw nagy képernyőn túl nagyra ment
       a kép finom törzs-szövegéhez képest. Most elegánsabb arány. */
    font-size: clamp(13px, 2vw, 17px);
    font-weight: 700;
    color: var(--irv-gold);
    /* enyhe, lefelé halványuló fátyol, hogy a név bármilyen képen olvasható
       legyen, de a kép se vesszen el (a felhasználó amúgy is hagy helyet) */
    background: linear-gradient(180deg, rgba(245,241,234,0.92) 0%, rgba(245,241,234,0.72) 60%, rgba(245,241,234,0) 100%);
    padding: 16px 18px 30px;
    letter-spacing: 0.02em;
    pointer-events: none;  /* ne fogja el a lapozó-kattintást */
}

/* ── Szöveges oldalak (köszöntő, impresszum) ── */
.irv-kl-text-inner {
    /* v1.3.2: kisebb padding — több hely a szövegnek a hosszú, teljes
       köszöntő/impresszum elféréséhez a négyzetes oldalon */
    padding: 22px 22px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}
.irv-kl-text-body {
    /* v1.3.2: a betűméretet a front.js auto-fit állítja (a teljes szöveg
       hosszához). Tömörebb sortáv (1.5) — több sor fér ugyanakkora helyre. */
    font-size: 13px;
    line-height: 1.5;
    text-align: justify;
    color: #2e2a22;
    flex: 1;
    overflow: hidden;
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}
/* v1.3.1: ELEGÁNS könyv-tipográfia — szebb, mint egy sima Word-oldal.
   A feltöltött .docx címe (h1/h2/strong-első sor) arany, ritkított,
   középre zárt; a bekezdések levegősek; a kiemelt szavak meleg sötét. */
.irv-kl-text-body h1,
.irv-kl-text-body h2,
.irv-kl-text-body h3 {
    color: var(--irv-gold);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    margin: 0 0 4px;
    line-height: 1.25;
    text-transform: uppercase;
}
.irv-kl-text-body h1 { font-size: 1.45em; }
.irv-kl-text-body h2 { font-size: 1.25em; }
.irv-kl-text-body h3 { font-size: 1.1em; }
/* Arany elválasztó vonal az első cím alatt (automatikus, dekoratív) */
.irv-kl-text-body h1:first-child::after,
.irv-kl-text-body h2:first-child::after,
.irv-kl-text-body h3:first-child::after {
    content: "";
    display: block;
    width: 42px;
    height: 1.5px;
    background: var(--irv-gold);
    margin: 7px auto 11px;
}
.irv-kl-text-body p {
    margin: 0 0 0.6em;
    orphans: 2;
    widows: 2;
}
.irv-kl-text-body p:last-child { margin-bottom: 0; }
.irv-kl-text-body strong,
.irv-kl-text-body b {
    font-weight: 700;
    color: var(--irv-dark);
}
.irv-kl-text-body em,
.irv-kl-text-body i { font-style: italic; }
.irv-kl-text-body u { text-decoration: underline; }
.irv-kl-text-body [style*="text-align: center"] { text-align: center !important; }
.irv-kl-text-body [style*="text-align: right"]  { text-align: right !important; }
.irv-kl-text-body [style*="text-align: left"]   { text-align: left !important; }
.irv-kl-text-body ul,
.irv-kl-text-body ol { margin: 0 0 0.85em 1.4em; padding: 0; }
.irv-kl-text-body li { margin-bottom: 0.35em; }
/* Az impresszum tömörebb, kisszerifes-érzettel */
.irv-kl-text-impresszum { line-height: 1.5; }

/* v1.2.0: teljesen ÜRES bal oldal a köszöntő előtt — csak krém papírszín */
.irv-kl-blank-inner {
    width: 100%;
    height: 100%;
}

/* ── Vezérlők ── */
.irv-kl-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    font-family: "Outfit", system-ui, sans-serif;
}
.irv-kl-controls button {
    padding: 9px 16px;
    background: #fff;
    border: 1px solid var(--irv-gold);
    color: var(--irv-gold);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-family: "Outfit", system-ui, sans-serif;
    transition: background 0.15s, color 0.15s;
}
.irv-kl-controls button:hover {
    background: var(--irv-gold);
    color: #fff;
}
.irv-kl-info {
    font-size: 13px;
    color: #8a7f6a;
    min-width: 130px;
    text-align: center;
}
.irv-kl-hint {
    margin: 4px 0 0;
    font-size: 12px;
    color: #a99a85;
    font-family: "Outfit", system-ui, sans-serif;
}

/* ── Reszponzív ── */
@media (max-width: 480px) {
    .irv-kl-intro p { font-size: 15px; }
    .irv-kl-text-inner { padding: 24px 20px; }
    .irv-kl-text-body { font-size: 12.5px; }
    .irv-kl-info { min-width: 90px; }
}