/* Apartment Espoir – gallery pages: cartoon scene, compact header, modern slider (loaded by gallery_page.php) */
/* =====================================================================
   v19 · Gallery pages – Caribbean cartoon scene, compact header,
   modern slider with paged thumbnail grid (desktop) / swipe strip (phone)
   ===================================================================== */
.ae-gallery-scene{
    position:relative;
    isolation:isolate;
    width:min(1240px,100%);
    margin:18px auto 30px;
    padding:18px clamp(14px,5.2vw,74px) 26px;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 18px 44px rgba(5,70,84,.16);
    background:#eaf8f5;
}
.ae-fx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ae-fx svg{position:absolute;display:block}
.ae-fx .fx-sky{inset:0;width:100%;height:100%}
.ae-fx .fx-side{bottom:0;height:min(92%,640px);width:auto;max-width:34%}
.ae-fx .fx-left{left:-1%}
.ae-fx .fx-right{right:-1%}

/* palms sway from the trunk base */
.fx-sway{transform-box:fill-box;transform-origin:50% 100%;animation:fx-sway 7s ease-in-out infinite alternate}
.fx-s2{animation-duration:5.6s;animation-delay:-2s}
.fx-s3{animation-duration:7.8s;animation-delay:-3.5s}
.fx-s4{animation-duration:6.2s;animation-delay:-1s}
@keyframes fx-sway{from{transform:rotate(-2.4deg)}to{transform:rotate(2.6deg)}}
/* clouds / birds drifting across the sky */
.fx-drift{animation:fx-drift 70s linear infinite}
.fx-d2{animation-duration:95s;animation-delay:-30s}
.fx-d3{animation-duration:120s;animation-delay:-70s}
@keyframes fx-drift{from{transform:translateX(0)}to{transform:translateX(1700px)}}
.fx-pulse{transform-box:fill-box;transform-origin:center;animation:fx-pulse 6s ease-in-out infinite alternate}
@keyframes fx-pulse{from{transform:scale(.92);opacity:.75}to{transform:scale(1.06);opacity:1}}
.fx-spin{transform-box:fill-box;transform-origin:center;animation:fx-spin 40s linear infinite}
@keyframes fx-spin{to{transform:rotate(360deg)}}
/* beach */
.fx-wave{animation:fx-wave 16s linear infinite}
.fx-w2{animation-duration:12s;animation-direction:reverse}
.fx-w3{animation-duration:9s}
@keyframes fx-wave{from{transform:translateX(0)}to{transform:translateX(-600px)}}
.fx-boat{animation:fx-boat 90s linear infinite;animation-delay:-25s}
@keyframes fx-boat{from{transform:translate(-120px,468px)}to{transform:translate(1320px,468px)}}
.fx-bob{animation:fx-bob 3.6s ease-in-out infinite alternate}
@keyframes fx-bob{from{transform:translateY(-4px) rotate(-2deg)}to{transform:translateY(4px) rotate(2deg)}}
.fx-flap{animation:fx-flap 1.4s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
.fx-flap2{animation-delay:-.7s}
@keyframes fx-flap{from{transform:scaleY(1)}to{transform:scaleY(.55)}}
/* pool */
.fx-float .fx-bob{animation-duration:4.4s}
.fx-float2 .fx-bob{animation-duration:3.2s;animation-delay:-1.5s}

/* the scene stays calm behind the photos: a soft veil in the middle */
.ae-gallery-scene::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(ellipse 62% 70% at 50% 52%,rgba(255,255,255,.34),rgba(255,255,255,0) 70%)}
.fx-kind-sun.ae-gallery-scene::after{background:radial-gradient(ellipse 62% 70% at 50% 52%,rgba(255,255,255,.22),rgba(255,255,255,0) 70%)}

/* ---------- compact header (glass card) ---------- */
.ae-gallery-header.ae-gallery-header--compact{
    display:flex;
    align-items:center;
    gap:14px;
    max-width:860px;
    margin:0 auto 14px;
    padding:12px 22px 12px 14px;
    border-radius:20px;
    text-align:left;
    color:#08414f;
    background:rgba(255,255,255,.74);
    border:1px solid rgba(255,255,255,.85);
    box-shadow:0 10px 26px rgba(5,70,84,.14);
    -webkit-backdrop-filter:blur(10px) saturate(1.2);
    backdrop-filter:blur(10px) saturate(1.2);
}
.ae-gallery-header--compact::before,.ae-gallery-header--compact::after{display:none}
.ae-gallery-header--compact .ae-gallery-icons{
    flex:0 0 54px;width:54px;height:54px;margin:0;display:grid;place-items:center;
    border-radius:16px;font-size:20px;letter-spacing:0;line-height:1;
    background:linear-gradient(150deg,#12a7a6,#06566b);box-shadow:0 6px 14px rgba(6,86,107,.3);
}
.ae-gh-text{min-width:0}
.ae-gallery-header--compact .ae-gallery-kicker{
    display:flex;flex-wrap:wrap;gap:6px;margin:0 0 3px;padding:0;border:0;background:none;
    color:#0a7d86;font-size:10.5px;letter-spacing:.13em;
}
.ae-gh-count{padding:1px 8px;border-radius:999px;background:#ffe9b8;color:#8a5a07;letter-spacing:.06em}
.ae-gallery-header--compact h1{margin:0;color:#063f4d;font-size:clamp(19px,2.3vw,25px);line-height:1.15;letter-spacing:-.01em}
.ae-gallery-header--compact p{max-width:none;margin:3px 0 0;color:#3f6b66;font-size:13.5px;line-height:1.45}

/* ---------- gallery slider ---------- */
.room-slider--gallery{margin:0}
.room-slider--gallery .rs-stage{
    aspect-ratio:auto;
    height:clamp(300px,64vh,640px);
    border-radius:24px;
    border:5px solid rgba(255,255,255,.9);
    box-shadow:0 22px 50px rgba(3,45,56,.32);
}
.room-slider--gallery .rs-backdrop{filter:blur(34px) brightness(.62) saturate(1.35)}
/* gentle Ken-Burns zoom on the active photo */
.room-slider--gallery .rs-slide img{transform:scale(1);transition:transform 0s}
.room-slider--gallery .rs-slide.is-active img{transform:scale(1.035);transition:transform calc(var(--rs-interval,5000ms) + 1.4s) ease-out}
.room-slider--gallery.is-paused .rs-slide.is-active img{transform:scale(1)}
.room-slider--gallery .rs-caption{padding:60px 22px 18px}
.room-slider--gallery .rs-caption-text{font-size:18px}
.room-slider--gallery .rs-counter{padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.room-slider--gallery .rs-arrow{width:54px;height:54px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.room-slider--gallery .rs-zoom{width:42px;height:42px;background:rgba(3,30,38,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.rs-play{position:absolute;top:12px;right:62px;z-index:3;width:42px;height:42px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;
    background:rgba(3,30,38,.45);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s ease}
.rs-play:hover{background:rgba(3,30,38,.75)}
.rs-play svg{width:18px;height:18px}
.rs-play .i-play{display:none}
.room-slider--gallery.is-paused .rs-play .i-play{display:block}
.room-slider--gallery.is-paused .rs-play .i-pause{display:none}
.room-slider--gallery .rs-progress{height:4px}
.room-slider--gallery .rs-progress span{background:linear-gradient(90deg,#ffe08a,#ffb347)}

/* phone strip: bigger, snapping thumbnails on a glass rail */
.room-slider--gallery .rs-thumbs-wrap{margin-top:14px;padding:6px 8px;border-radius:18px;background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.8);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 20px rgba(5,70,84,.1)}
.room-slider--gallery .rs-thumb{border-radius:12px;opacity:.7}
.room-slider--gallery .rs-thumb.is-active{opacity:1;box-shadow:0 0 0 3px #fff,0 0 0 6px #0a8d98}

/* desktop: grid of 10 (5 × 2) with pages – main photo always stays */
.room-slider--gallery.is-grid .rs-thumbs-nav{display:none}
.room-slider--gallery.is-grid .rs-thumbs-wrap{padding:12px}
.room-slider--gallery.is-grid .rs-thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:4px;overflow:visible;scroll-snap-type:none}
.room-slider--gallery.is-grid .rs-thumb{width:auto;height:auto;aspect-ratio:3/2;opacity:.82;transform:translateY(0)}
.room-slider--gallery.is-grid .rs-thumb:hover{opacity:1;transform:translateY(-3px);box-shadow:0 10px 20px rgba(3,45,56,.25)}
.room-slider--gallery.is-grid .rs-thumb.is-active{opacity:1}
.room-slider--gallery.is-grid .rs-thumb.is-off{display:none}
.room-slider--gallery.is-grid .rs-thumb.is-in{animation:rs-thumb-in .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k,0) * 28ms)}
@keyframes rs-thumb-in{from{opacity:0;transform:translateX(calc(var(--rs-dir,1) * 26px)) scale(.96)}to{opacity:.82;transform:none}}
.rs-gpager{display:none}
.room-slider--gallery.is-grid .rs-gpager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.rs-gp-arrow{width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:#fff;color:#07566f;cursor:pointer;box-shadow:0 5px 14px rgba(3,45,56,.16);transition:transform .15s ease}
.rs-gp-arrow:hover{transform:scale(1.08)}
.rs-gp-arrow svg{width:18px;height:18px}
.rs-gp-label{min-width:150px;text-align:center;font-size:13px;font-weight:800;color:#07566f;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.75)}
.rs-gp-dots{display:flex;gap:6px}
.rs-gp-dot{width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.7);color:#07566f;font-weight:800;font-size:12px;cursor:pointer}
.rs-gp-dot.is-on{background:linear-gradient(150deg,#12a7a6,#06566b);color:#fff;box-shadow:0 4px 10px rgba(6,86,107,.3)}
.rs-gp-dot:focus-visible,.rs-gp-arrow:focus-visible,.rs-play:focus-visible{outline:3px solid #ffd34d;outline-offset:2px}

.ae-gallery-scene .ae-gallery-note{margin-top:16px;padding:8px 14px;max-width:600px;border-radius:999px;background:rgba(255,255,255,.7);color:#2f5c56;font-size:13.5px}
.ae-gallery-scene .gallery-empty{background:rgba(255,255,255,.85)}

@media (max-width:899px){
    .ae-gallery-scene{margin:10px auto 22px;padding:12px 10px 18px;border-radius:22px}
    .ae-fx .fx-side{height:min(70%,420px);max-width:44%;opacity:.85}
    .room-slider--gallery .rs-stage{height:auto;aspect-ratio:4/3;border-width:3px;border-radius:18px}
    .room-slider--gallery .rs-thumb{width:96px;height:70px}
}
@media (max-width:560px){
    .ae-gallery-header.ae-gallery-header--compact{gap:10px;padding:9px 12px 9px 9px;border-radius:16px;margin-bottom:10px}
    .ae-gallery-header--compact .ae-gallery-icons{flex-basis:42px;width:42px;height:42px;font-size:15px;border-radius:13px}
    .ae-gallery-header--compact h1{font-size:18px}
    .ae-gallery-header--compact p{font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .room-slider--gallery .rs-arrow{width:42px;height:42px}
    .room-slider--gallery .rs-caption-text{font-size:15px}
    .rs-play{right:58px}
    .ae-gallery-scene .ae-gallery-note{border-radius:14px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
    .ae-fx *{animation:none!important}
    .room-slider--gallery .rs-slide.is-active img{transform:none;transition:none}
    .room-slider--gallery.is-grid .rs-thumb.is-in{animation:none}
}
/* v19 refinements: palm fronds in the top corners, smaller palms at the bottom */
.ae-fx .fx-corner{top:-6px;width:clamp(120px,17vw,240px);height:auto}
.ae-fx .fx-cl{left:-8px}
.ae-fx .fx-cr{right:-8px}
.fx-sway-corner{transform-origin:0 0;animation:fx-sway-c 6.5s ease-in-out infinite alternate}
.fx-cr .fx-sway-corner{animation-duration:7.3s;animation-delay:-2.4s}
@keyframes fx-sway-c{from{transform:rotate(-3deg)}to{transform:rotate(4deg)}}
.fx-kind-palms .ae-fx .fx-side{height:min(40%,330px)}
@media (max-width:899px){
  .ae-fx .fx-corner{width:110px}
  .fx-kind-palms .ae-fx .fx-side{height:min(30%,230px)}
}
.fx-kind-palms .ae-fx .fx-side{height:min(19%,215px)}
@media (max-width:899px){.fx-kind-palms .ae-fx .fx-side{height:min(14%,150px)}}
/* motifs placed relative to the scene, so they are visible on every screen size */
.ae-fx .fx-obj{position:absolute}
.fx-o-sunpalm{top:-30px;right:12%;width:150px;height:150px;opacity:.95}
@media (max-width:899px){.fx-o-sunpalm{right:26%;width:110px;height:110px;top:-28px}}
/* sunrise -> noon -> sunset around the edges of the scene, 48 s per day */
.fx-o-daysun{width:clamp(110px,13vw,170px);height:auto;margin:-80px 0 0 -80px;animation:fx-dayarc 48s linear infinite}
@keyframes fx-dayarc{
  0%{left:3%;top:86%;opacity:.0} 3%{opacity:1}
  18%{left:4%;top:30%} 32%{left:14%;top:6%} 50%{left:50%;top:2%} 68%{left:86%;top:6%} 76%{left:96%;top:30%}
  80%{left:97%;top:80%;opacity:1} 83%{left:97%;top:92%;opacity:0} 100%{left:3%;top:86%;opacity:0}}
.fx-o-moon{right:8%;top:5%;width:60px;height:60px;opacity:0;animation:fx-moon 48s linear infinite}
@keyframes fx-moon{0%,78%{opacity:0}84%,95%{opacity:1}99%,100%{opacity:0}}
.fx-o-beachsun{left:5%;top:-28px;width:130px;height:130px}
.fx-o-boatlane{position:absolute;left:0;right:0;bottom:21%;height:70px}
.fx-o-boat{position:absolute;bottom:0;width:80px;height:72px;animation:fx-sail 80s linear infinite;animation-delay:-20s}
@keyframes fx-sail{from{left:-90px}to{left:100%}}
.fx-o-crab{right:6%;bottom:2%;width:56px;height:36px;animation:fx-crab 22s ease-in-out infinite alternate}
@keyframes fx-crab{from{transform:translateX(0)}to{transform:translateX(-120px)}}
.fx-o-ring{right:3%;top:10%;width:120px;height:60px;animation:fx-drift-y 9s ease-in-out infinite alternate}
.fx-o-ball{left:3%;top:36%;width:60px;height:60px;animation:fx-drift-y 7s ease-in-out infinite alternate-reverse}
.fx-o-duck{right:4%;bottom:14%;width:70px;height:56px;animation:fx-duck 26s ease-in-out infinite alternate}
@keyframes fx-drift-y{from{transform:translate(0,0)}to{transform:translate(-14px,26px)}}
@keyframes fx-duck{from{transform:translateX(0)}to{transform:translateX(-60px)}}
.fx-roll{transform-box:fill-box;transform-origin:center;animation:fx-spin 18s linear infinite}
@media (max-width:899px){
  .fx-o-beachsun{width:90px;height:90px;top:-24px;left:auto;right:6%}
  .fx-o-ring{width:80px;height:40px;top:auto;bottom:4%;right:auto;left:4%}
  .fx-o-ball{width:42px;height:42px;top:auto;bottom:6%;left:auto;right:6%}
  .fx-o-duck{display:none}
  .fx-o-daysun{width:90px;margin:-45px 0 0 -45px}
}