/* ── Szoba-előnézet: "hogy nézne ki nálam" ──────────────── */
.rp { margin: 36px 0; }
.rp-head { text-align: center; margin-bottom: 18px; }
.rp-title {
    font-size: clamp(1.15rem, 2.6vw, 1.45rem); font-weight: 700;
    letter-spacing: -.025em; color: var(--c-ink, #1d2433); margin-bottom: 4px;
}
.rp-sub { font-size: 14px; color: var(--c-muted, #8a93a5); }

.rp-stage {
    position: relative; width: 100%;
    border-radius: 16px; overflow: hidden;
    background: #ececf2;
    box-shadow: 0 18px 44px rgba(29,36,51,.16);
}
.rp-scene { display: none; position: relative; }
.rp-scene.is-on { display: block; animation: rpFade .45s ease both; }
@keyframes rpFade { from { opacity: 0; } to { opacity: 1; } }

.rp-bg { width: 100%; height: auto; display: block; }

/* ── A vászon mint test ─────────────────────────────────────────────

   Egy feszített vászonkép a falból ~3,5 cm-re kiálló doboz. Ebből
   három dolog látszik:

     1. az OLDALA — a keretre ráhajtott vászon, a kép szélének
        folytatása, sötétebben (mert elfordul a fénytől),
     2. a felső és alsó ÉLE befelé dől — a keret hátrafelé fut,
     3. az ÁRNYÉKA a falra vetve, a kiállás irányába.

   Fontos tanulság: a `filter` levágja a szülő dobozából kilógó
   részeket. Ezért az oldallap NEM a kép gyereke, hanem a vászon
   saját rétege, és az árnyékot box-shadow adja, nem filter. */

.rp-art {
    position: absolute;
    transform: translate(-50%, -50%) rotate(var(--rp-tilt, 0deg));
    pointer-events: none;
    line-height: 0;
    transition: width .3s cubic-bezier(.2,.8,.3,1), aspect-ratio .3s, left .3s, top .3s;
}

.rp-art img {
    /* A kép kitölti a vászon keretét, ami a VÁLASZTOTT méret arányát
       veszi fel — így a fekvő méret fekvő, az álló álló lesz. */
    width: 100%; height: 100%; object-fit: cover; display: block;
    position: relative;
    z-index: 2;                      /* az előlap takarja az oldal tövét */
    /* A vetett árnyék: szűk és sötét a vászon tövénél (ettől áll el a
       faltól), tág és halvány a szórt fényből. A perem belső fénye
       pedig domborítja a szemnek. */
    box-shadow:
        var(--rp-sx, 4px) 5px 7px rgba(0,0,0,calc(var(--rp-shadow, .35) * .75)),
        var(--rp-sx2, 11px) 18px 34px rgba(0,0,0,calc(var(--rp-shadow, .35) * .42)),
        inset 0 1px 0 rgba(255,255,255,.24),
        inset -2px -2px 5px rgba(0,0,0,.18);
}

/* Melyik oldala látszik: a kép a fal melyik felén lóg. Balra lógó
   képnek a JOBB oldalát látjuk, és az árnyéka is jobbra esik. */
.rp-art.rp-right { --rp-sx: 5px;  --rp-sx2: 12px; }
.rp-art.rp-left  { --rp-sx: -5px; --rp-sx2: -12px; }

/* ── Az oldallap: a ráhajtott vászon ────────────────────────────── */
.rp-side {
    position: absolute;
    top: 0;
    height: 100%;
    width: var(--rp-depth, 4%);
    z-index: 1;                      /* a kép mögött, de a fal előtt */
    display: block;
    /* A kép szélső sávja hajlik rá, ahogy a nyomda is teszi.
       A háttér pontosan akkora, mint maga a vászon (--rp-bg-w), és
       úgy toljuk el, hogy az oldallap keskeny ablakába épp a kép
       SZÉLE essen. Ezért látszik rajta a kép, nem egy szürke csík. */
    background-repeat: no-repeat;
    background-size: var(--rp-bg-w, 1400%) 100%;
    overflow: hidden;
    /* Elfordul a fénytől: sötétebb az előlapnál, de nem fekete —
       a szoba szórt fénye ide is eljut. */
    filter: brightness(.68) saturate(.92);
}

/* A jobb oldala látszik: az oldallap a kép jobb szélénél kezdődik,
   kifelé nő, és a kép jobb szélső sávját mutatja. A felső-alsó éle
   befelé dől: a keret hátrafelé fut a fal felé. */
.rp-art.rp-right .rp-side {
    left: 100%;
    /* A kép jobb széle az oldallap BAL szélére esik, és onnan
       folytatódik kifelé — ahogy a vászon ráhajlik a keretre.
       A "100% center" a háttérkép jobb szélét igazítja ide. */
    background-position: 100% center;
    clip-path: polygon(0 0, 100% 3%, 100% 97%, 0 100%);
    box-shadow: inset 4px 0 9px rgba(0,0,0,.36);
}

/* A bal oldala: tükörkép. */
.rp-art.rp-left .rp-side {
    right: 100%;
    /* Tükörkép: a kép bal széle az oldallap JOBB szélére esik. */
    background-position: 0% center;
    clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 97%);
    box-shadow: inset -4px 0 9px rgba(0,0,0,.36);
}

/* Szobaválasztó */
.rp-picker {
    display: flex; gap: 10px; margin-top: 14px;
    overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: thin;
}
.rp-chip {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px;
    width: 92px; padding: 0 0 7px; cursor: pointer;
    background: #fff; border: 2px solid var(--c-line, #e6e9f0); border-radius: 11px;
    overflow: hidden; font: inherit; transition: all .22s cubic-bezier(.2,.8,.3,1);
}
.rp-chip img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.rp-chip span {
    font-size: 11px; font-weight: 600; color: var(--c-ink-soft, #566074);
    text-align: center; line-height: 1.25; padding: 0 5px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rp-chip:hover { border-color: rgba(255,107,91,.5); transform: translateY(-2px); }
.rp-chip.is-on {
    border-color: var(--c-coral, #ff6b5b);
    box-shadow: 0 0 0 3px rgba(255,107,91,.18);
}

/* A méret kiírása a kép alá */
.rp-note {
    margin-top: 10px; text-align: center;
    font-size: 12.5px; color: var(--c-muted, #8a93a5);
}

@media (max-width: 620px) {
    .rp { margin: 26px 0; }
    .rp-chip { width: 78px; }
    .rp-chip span { font-size: 10.5px; }
    .rp-stage { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .rp-scene.is-on { animation: none; }
    .rp-chip, .rp-art { transition: none; }
}