*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#19344a;background:#fffdf9;font:16px/1.7 "DM Sans",sans-serif}a{color:inherit}h1,h2,h3{font-family:"Playfair Display",serif;line-height:1.16}h1{font-size:clamp(2.8rem,6vw,5.6rem)}h2{font-size:clamp(2rem,4vw,3rem);margin:.5rem 0 1.3rem}h3{font-size:1.65rem;margin:.4rem 0}.wrap{width:min(1150px,90%);margin:auto}.top{background:#fffdf9;position:sticky;top:0;z-index:10;box-shadow:0 2px 15px #122d3a0d}.nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1rem 0}.logo{text-decoration:none;font-weight:700;letter-spacing:.12em;line-height:1.2}.logo span{color:#c78e64}.logo small{display:block;font-size:.62rem;letter-spacing:.2em;margin-top:.35rem;color:#77909b}nav{display:flex;gap:1.5rem;flex-wrap:wrap}nav a{text-decoration:none;font-size:.91rem}.hero{min-height:610px;background-size:cover;background-position:center;display:flex;align-items:center;color:white}.hero .wrap{padding:5rem 0}.hero em{font-weight:500}.hero p{font-size:1.2rem}.eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.18em;color:#b77e58}.hero .eyebrow{color:#e6c8ab}.btn{display:inline-block;background:#d5a077;color:#182f40;text-decoration:none;font-weight:700;padding:.9rem 1.4rem;margin-top:1rem;border-radius:3px}.section{padding:5rem 0}.lead{max-width:760px;color:#627787;font-size:1.08rem}.units{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:2.4rem}.unit{background:white;border:1px solid #e7e4de;box-shadow:0 8px 30px #172c3810;overflow:hidden}.unit-photo{display:block;height:230px;overflow:hidden}.unit-photo img{height:100%;width:100%;object-fit:cover;transition:transform .25s}.unit-photo:hover img{transform:scale(1.045)}.unit-info{padding:1.35rem}.unit-info p{color:#657783;font-size:.94rem}.missing{height:100%;display:grid;place-items:center;background:#e4e9e7;color:#58707b}.more{font-weight:700;color:#a76b45;text-underline-offset:4px}.soft{background:#f2f4f0}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.features span{padding:1rem;background:white;border-left:3px solid #c79c79}.note{font-size:.9rem;color:#697a83}.contact-links{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}.contact-links a{display:inline-block;padding:.7rem 1rem;border:1px solid #c9d5d7;text-decoration:none;background:white;border-radius:4px}.contact-links a:hover{background:#dce9e8}.detail{padding-top:3rem;padding-bottom:5rem}.back{display:block;margin-bottom:2rem;color:#9b735b}.detail h1{margin:.5rem 0}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin:1.5rem 0 3rem}.gallery a{display:block;aspect-ratio:4/3;overflow:hidden;background:#e5eae7}.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .2s}.gallery img:hover{transform:scale(1.04)}.detail-contact{background:#f2f4f0;padding:2rem;margin-top:3rem}footer{background:#19344a;color:#e6eceb;padding:2rem 0;font-size:.88rem}footer a{color:inherit}@media(max-width:850px){.units{grid-template-columns:repeat(2,1fr)}.features{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.nav{align-items:flex-start;flex-direction:column;gap:.7rem}nav{gap:.8rem}.hero{min-height:520px}.units,.features,.gallery{grid-template-columns:1fr}.gallery{grid-template-columns:repeat(2,1fr)}.section{padding:3rem 0}}
/* Navigation: hero image continues behind the header on every page */
.top{background:linear-gradient(90deg,rgba(8,30,48,.86),rgba(8,30,48,.47)),var(--header-photo) center top / cover no-repeat;color:white;position:relative;box-shadow:none}
.top .nav{width:min(1400px,94%);min-height:112px;display:flex;align-items:center;gap:clamp(12px,2vw,32px)}
.top .logo{display:flex;align-items:center;flex:0 0 auto;letter-spacing:normal}
.logo-img{width:clamp(148px,17vw,235px);height:auto;max-height:105px;object-fit:contain;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.23))}
.top nav{display:flex;align-items:center;justify-content:center;gap:clamp(9px,1.8vw,26px);flex:1}
.top nav a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-weight:500;color:white;transition:color .2s,font-weight .2s,transform .2s}
.top nav a:hover,.top nav a:focus-visible{color:#62b5ff;font-weight:800;transform:translateY(-1px)}
.nav-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;transition:stroke-width .2s,transform .2s}
.top nav a:hover .nav-icon,.top nav a:focus-visible .nav-icon{stroke-width:3;transform:scale(1.1)}
.language-switch{display:flex;align-items:center;gap:7px;margin-left:auto;flex-shrink:0}
.language-switch a{color:#fff;text-decoration:none;font-size:.77rem;font-weight:700;padding:5px 3px;border-bottom:2px solid transparent}
.language-switch a:hover,.language-switch a:focus-visible{color:#62b5ff}
.language-switch a.active{border-color:#fff}
.contact-links{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem}
.contact-links a{min-width:min(340px,100%)}
.detail-over-photo{padding-top:3.2rem}
@media(max-width:850px){.top .nav{flex-wrap:wrap;justify-content:space-between;padding:12px 0}.top nav{order:3;flex:1 1 100%;justify-content:space-between;gap:10px}.language-switch{margin-left:auto}}
@media(max-width:550px){.logo-img{width:148px}.top nav{gap:8px;flex-wrap:wrap}.top nav a{font-size:.78rem;gap:4px}.nav-icon{width:15px;height:15px}.language-switch{gap:5px}.language-switch a{font-size:.72rem}}

/* V5: navigation overlays the same continuous hero image */
body:has(.hero) .top{position:absolute;top:0;left:0;right:0;width:100%;z-index:30;background:transparent!important;box-shadow:none!important}
body:has(.hero) .hero{min-height:680px;padding-top:130px;background-position:center center}
body:has(.hero) .hero .wrap{padding-top:5rem}
.top{background:linear-gradient(90deg,rgba(8,30,48,.78),rgba(8,30,48,.28)),var(--header-photo) center center / cover no-repeat}
.top .nav{position:relative}
.features{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.feature-card{background:white;display:flex;flex-direction:column;overflow:hidden;border:1px solid #e1e7e5;border-radius:7px;box-shadow:0 8px 25px #172c380a}
.feature-photo{display:block;width:100%;height:180px;object-fit:cover;object-position:center}
.feature-placeholder{background:#e8edea;min-height:180px}
.feature-icon{width:48px;height:48px;stroke:#3284ad;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none;margin:27px auto 18px}
.feature-label{padding:16px 18px;font-weight:600;display:block}
.feature-card:has(.feature-icon) .feature-label{text-align:center;margin-top:auto}
/* Lightbox: single photo, arrows, close; backdrop blur */
.gallery a{cursor:zoom-in}
.photo-lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(8,18,30,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.photo-lightbox.open{display:flex}
.photo-lightbox img{display:block;max-width:calc(100vw - 150px);max-height:calc(100vh - 80px);object-fit:contain;box-shadow:0 15px 65px #0005}
.photo-lightbox button{position:absolute;border:0;background:transparent;color:white;font-size:44px;font-family:Arial,sans-serif;cursor:pointer;line-height:1;padding:14px;text-shadow:0 1px 8px #0009}
.photo-lightbox button:hover,.photo-lightbox button:focus-visible{color:#76c5ff;outline:2px solid #76c5ff;outline-offset:2px}
.photo-lightbox .lb-close{right:17px;top:12px;font-size:38px}.photo-lightbox .lb-prev{left:15px;top:50%;transform:translateY(-50%)}.photo-lightbox .lb-next{right:15px;top:50%;transform:translateY(-50%)}
@media(max-width:850px){.features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){body:has(.hero) .hero{min-height:650px;padding-top:170px}.features{grid-template-columns:1fr 1fr}.feature-photo,.feature-placeholder{height:130px;min-height:130px}.feature-label{font-size:.85rem;padding:12px}.photo-lightbox img{max-width:calc(100vw - 90px);max-height:calc(100vh - 95px)}.photo-lightbox button{font-size:32px;padding:8px}.photo-lightbox .lb-prev{left:3px}.photo-lightbox .lb-next{right:3px}}

/* V6 — coastal palette and booking experience */
:root{--sea:#0096a5;--lagoon:#4ebdd5;--sage:#9bc6c0;--ice:#b6dbe5;--sand:#d7b4d2;--ink:#153e4b}
body{color:var(--ink);background:#f9fcfc}h1,h2,h3{color:inherit}.eyebrow,.more{color:var(--sea)}.hero .eyebrow{color:#c9f4f7}.btn{background:var(--sea);color:white;border:0;cursor:pointer}.btn:hover,.btn:focus-visible{background:#007887}.soft{background:#e9f5f5}.unit{border-color:var(--ice)}.feature-card,.amenity-visual{border-color:var(--sage)}.features span{border-color:var(--sea)}.top nav a:hover,.top nav a:focus-visible,.language-switch a:hover{color:var(--lagoon)}.language-switch a.active{border-color:var(--lagoon)}.contact-links a:hover{background:var(--ice)}footer{background:#075a65}.detail-contact{background:#e9f5f5}
body:has(.hero) .top{background:transparent!important}body:has(.hero) .hero{background-position:center center}
.amenity-compact{display:flex;flex-wrap:wrap;gap:12px;margin:1.6rem 0 2rem}.amenity-chip{display:flex;align-items:center;gap:10px;background:#fff;padding:12px 16px;border:1px solid var(--ice);border-radius:9px;font-weight:600}.amenity-chip .feature-icon{width:21px;height:21px;margin:0;flex-shrink:0;stroke:var(--sea);stroke-width:2}.amenity-chip .feature-label{padding:0!important;margin:0!important;text-align:left!important}
.amenity-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.amenity-visual{overflow:hidden;background:#fff;border:1px solid var(--ice);border-radius:10px;box-shadow:0 7px 20px #15495b0c}.amenity-visual .feature-label{padding:16px;font-weight:700}.amenity-visual .gallery{display:block;margin:0}.amenity-visual .gallery>a:first-child{display:block;aspect-ratio:16/10;cursor:zoom-in}.amenity-visual .gallery img{width:100%;height:100%;object-fit:cover}.amenity-visual .gallery .gallery-hidden{display:none}.amenity-visual .feature-photo{height:210px}.amenity-visual .feature-placeholder{display:grid;place-items:center;color:#4c7a80;background:#dceeee;cursor:pointer;font-size:.92rem}.amenity-visual .feature-placeholder:hover{background:var(--ice)}
.location-map{width:100%;height:390px;border:0;border-radius:12px;margin-top:25px;box-shadow:0 8px 24px #15495b16}
.booking-page{padding:4rem 0 6rem}.booking-wrap{max-width:900px}.booking-page h1{font-size:clamp(2.3rem,5vw,3.8rem)}.booking-form{margin-top:2rem;padding:clamp(18px,4vw,38px);background:white;border:1px solid var(--ice);border-radius:14px;box-shadow:0 12px 35px #15495b0c}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.form-grid label{display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:.92rem}.form-grid input,.form-grid select{font:inherit;padding:12px;border:1px solid #a9cbcf;border-radius:6px;width:100%;min-width:0;background:#fff}.form-grid input:focus,.form-grid select:focus{outline:2px solid var(--sea);outline-offset:1px}.pet-total{font-weight:700;color:var(--sea)}.booking-dialog{max-width:min(650px,94vw);border:0;border-radius:14px;padding:28px;box-shadow:0 20px 70px #0019}.booking-dialog::backdrop{background:#092c3dbb;backdrop-filter:blur(7px)}.booking-dialog h2{font-size:1.8rem}.booking-dialog pre{font:14px/1.65 'DM Sans',sans-serif;white-space:pre-wrap;overflow:auto;max-height:38vh;padding:16px;background:#e9f5f5;border-radius:8px}.dialog-actions{display:flex;gap:10px;flex-wrap:wrap}.dialog-actions .btn{text-decoration:none;margin:0}.secondary-btn{background:#9bc6c0;color:#153e4b}.dialog-x{position:absolute;right:12px;top:8px;border:0;background:none;font-size:30px;cursor:pointer}
@media(max-width:700px){.amenity-photo-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.amenity-visual .feature-photo{height:230px}.location-map{height:310px}}

/* Floating navigation after the opening photograph */
.top.nav-floating{position:fixed!important;top:0!important;left:0;right:0;z-index:80;background:#0096a5!important;box-shadow:0 9px 25px #003c4930!important;animation:navEnter .34s ease-out both;--header-photo:none!important}
.top.nav-floating .nav{min-height:78px;padding-top:8px;padding-bottom:8px}
.top.nav-floating .logo-img{max-height:64px;width:auto}
@keyframes navEnter{from{transform:translateY(-110%);opacity:.5}to{transform:translateY(0);opacity:1}}
.nav-placeholder.is-active{height:112px}
.detail-cta{margin:0 0 1.2rem;display:inline-block;text-decoration:none}
.unit-amenities{margin:3rem 0 1.5rem}.unit-feature-list{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0}.unit-feature-list li{background:#e9f5f5;border:1px solid #9bc6c0;border-radius:8px;padding:10px 15px}
.detail #sadrzaji{margin:3rem calc((min(1150px,90vw) - 100vw)/2);padding:3rem max(5vw,calc((100vw - 1150px)/2));width:100vw}
.booking-divider{border:0;border-top:2px solid #9bc6c0;margin:3rem 0 2rem}.booking-preview-gallery{margin-top:1rem}.booking-preview{margin-bottom:3rem}
@media(max-width:600px){.top.nav-floating .logo-img{max-height:48px}.top.nav-floating .nav{min-height:96px}.nav-placeholder.is-active{height:165px}}

/* Final layout refinements */
body:has(.hero) .top.nav-floating, body .top.nav-floating {background-color:#0096a5!important;background-image:none!important;opacity:1!important;backdrop-filter:none!important;}
body:has(.hero) .top:not(.nav-floating){background:transparent!important}
.check-times{font-weight:700;color:#075a65;margin:1.3rem 0;padding:.8rem 1rem;border-left:4px solid #0096a5;background:#fff}
.unit-amenities-top{margin:1.2rem 0 2rem}.unit-capacity{font-size:1.15rem;font-weight:700;color:#007f8c;margin:.4rem 0 1rem}.unit-amenities-top .unit-feature-list{margin:0;gap:10px}.unit-feature-list li{display:inline-flex;align-items:center;gap:7px}.unit-feature-icon{font-size:1.05rem;line-height:1}
.location-extras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:2.3rem}.location-extra{display:flex;align-items:center;gap:16px;background:#e9f5f5;border:1px solid #9bc6c0;border-radius:12px;padding:22px;text-decoration:none;transition:transform .2s,box-shadow .2s}.location-extra:hover{transform:translateY(-3px);box-shadow:0 9px 25px #003c4920}.location-extra strong,.location-extra small{display:block}.location-extra small{font-size:.85rem;color:#4d7580}.location-extra .extra-icon{font-size:2rem}.location-extra>span:last-child{margin-left:auto;color:#0096a5;font-size:1.5rem}
.guide-main{min-height:70vh;background:#f9fcfc}.guide{padding:3rem 0 6rem}.guide h1{margin:1rem 0}.guide-section{margin:2.8rem 0;padding:2rem;background:white;border:1px solid #b6dbe5;border-radius:12px}.guide-section h2{font-size:2rem}.guide-section .btn{display:inline-block;text-decoration:none;margin-top:1rem}.timetable-image{width:100%;height:auto;max-width:1000px;display:block;margin:1.5rem auto;border:1px solid #d9e5e5}.schedule-box{background:#e9f5f5;padding:1.4rem;border-radius:8px}.event-list{display:grid;gap:1rem}.event-list article{border-left:4px solid #0096a5;background:#e9f5f5;padding:1rem 1.2rem}.event-list article p{margin:.35rem 0 0}
@media(max-width:700px){.location-extras{grid-template-columns:1fr}.guide-section{padding:1.2rem}}

/* Dorade: navigacija u skrolu i fotografija Raba */
body:has(.hero) .top.nav-floating, body .top.nav-floating {background:rgba(0,150,165,.9)!important;background-color:rgba(0,150,165,.9)!important;background-image:none!important;opacity:1!important;backdrop-filter:none!important;}
.contact-booking-cta{display:inline-flex;align-items:center;justify-content:center;margin:0.35rem 0 1.15rem;text-decoration:none;}
.rab-photo{margin:2rem 0 2.5rem;}
.rab-photo img{display:block;width:100%;max-height:530px;object-fit:cover;border-radius:12px;box-shadow:0 12px 35px #123d4b1a;}
.rab-photo figcaption{font-size:.88rem;color:#617b82;margin-top:.55rem;}