/* ============================================================================
   JASNA — novi dizajn (inspiracija: eola.hr)
   Mediteranska plavo-pjeskana paleta prilagođena otoku Pagu / Novalji.
   Ova datoteka u potpunosti zamjenjuje staru vizualnu temu (bootstrap, style.css,
   effects.css, gallery.css, gallery-folder.css, slimbox2.css, mlddmenu.css...).
   PHP logika, rute (?page=) i podaci ostaju netaknuti — mijenja se samo izgled.
   ========================================================================== */

:root{
	--font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--font-sans: 'Jost', 'Segoe UI', Arial, sans-serif;

	--c-ink:        #17303b;
	--c-sea-dark:   #0e2733;
	--c-sea:        #1c5c74;
	--c-sea-mid:    #2c7691;
	--c-sea-light:  #6fa9bd;
	--c-sand:       #c99a5b;
	--c-sand-light: #e6c893;
	--c-sand-pale:  #f1e3c8;
	--c-cream:      #faf6ee;
	--c-cream2:     #f2ead9;
	--c-white:      #ffffff;
	--c-text:       #3a4750;
	--c-text-light: #6c7c85;
	--c-line:       #e4dcc9;

	--radius-sm: 4px;
	--radius: 10px;
	--radius-lg: 20px;
	--shadow-sm: 0 2px 14px rgba(14,39,51,.08);
	--shadow-md: 0 14px 40px rgba(14,39,51,.14);
	--container: 1180px;
}

/* ---------------------------------------------------------------- Reset */

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0; padding:0;
	background:var(--c-cream);
	color:var(--c-text);
	font-family:var(--font-sans);
	font-size:16px;
	line-height:1.65;
	text-align:left;
	-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
p{ margin:0 0 1em; padding:0; }
.clear{ clear:both; }
h1,h2,h3,h4{
	font-family:var(--font-serif);
	color:var(--c-sea-dark);
	font-weight:600;
	margin:0 0 .5em;
	line-height:1.2;
}
.eyebrow{
	display:inline-block;
	font-family:var(--font-sans);
	text-transform:uppercase;
	letter-spacing:.22em;
	font-size:.72rem;
	color:var(--c-sand);
	font-weight:600;
	margin-bottom:.6em;
}
.container{
	max-width:var(--container);
	margin:0 auto;
	padding:0 24px;
}

/* ---------------------------------------------------------------- Buttons */

.btn{
	display:inline-flex;
	align-items:center;
	gap:.5em;
	padding:.85em 1.9em;
	border-radius:999px;
	font-family:var(--font-sans);
	font-size:.82rem;
	letter-spacing:.14em;
	text-transform:uppercase;
	font-weight:600;
	border:1px solid transparent;
	cursor:pointer;
	transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-sand{
	background:linear-gradient(180deg,var(--c-sand-light),var(--c-sand));
	color:var(--c-sea-dark);
	box-shadow:var(--shadow-sm);
}
.btn-sand:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-outline{
	background:transparent;
	border-color:rgba(255,255,255,.65);
	color:#fff;
}
.btn-outline:hover{ background:rgba(255,255,255,.14); }
.btn-line{
	background:transparent;
	border-color:var(--c-sea);
	color:var(--c-sea-dark);
	border-radius:999px;
}
.btn-line:hover{ background:var(--c-sea); color:#fff; }

/* ============================================================== HEADER */

.site-header{ position:relative; z-index:60; background:var(--c-white); }

.topbar{
	background:var(--c-sea-dark);
	color:var(--c-sand-light);
	font-size:.78rem;
	letter-spacing:.03em;
}
.topbar .container{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding-top:8px; padding-bottom:8px;
}
.topbar-phone{ display:flex; align-items:center; gap:.5em; color:#fff; }
.topbar-phone i{ color:var(--c-sand); }
.topbar-langs{ display:flex; align-items:center; gap:10px; }
.topbar-langs a{ opacity:.55; transition:opacity .2s ease; display:inline-flex; }
.topbar-langs a:hover,
.topbar-langs a.is-active{ opacity:1; }
.topbar-langs img{ width:20px; height:20px; border-radius:2px; object-fit:cover; }

.brand-row{
	position:relative;
	text-align:center;
	padding-top:18px;
	padding-bottom:18px;
}
.brand{ text-align:center; }
.brand a{ display:inline-block; }
.brand-emblem{ width:40px; height:40px; margin:0 auto 6px; color:var(--c-sea); animation:brandSpin 16s linear infinite; }
@keyframes brandSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.brand-word{
	font-family:var(--font-serif);
	font-weight:700;
	font-size:2.31rem;
	letter-spacing:.4em;
	color:var(--c-sea-dark);
	margin:0;
	padding-left:.4em; /* optical centering for letter-spacing */
}
.brand-tag{
	display:block;
	font-family:var(--font-serif);
	font-style:italic;
	font-size:.95rem;
	color:var(--c-sand);
	letter-spacing:.02em;
	margin-top:2px;
}

.main-nav{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:34px;
	padding-top:14px;
	padding-bottom:20px;
	border-top:1px solid var(--c-line);
}
.main-nav a{
	font-size:.82rem;
	letter-spacing:.14em;
	text-transform:uppercase;
	font-weight:600;
	color:var(--c-ink);
	position:relative;
	padding-bottom:6px;
}
.main-nav a::after{
	content:"";
	position:absolute; left:0; right:0; bottom:0;
	height:2px; background:var(--c-sand);
	transform:scaleX(0); transform-origin:left;
	transition:transform .25s ease;
}
.main-nav a:hover::after,
.main-nav a.is-active::after{ transform:scaleX(1); }

.hamburger{
	display:none;
	position:absolute;
	right:24px; top:50%; transform:translateY(-50%);
	width:42px; height:42px;
	border-radius:50%;
	border:1px solid var(--c-line);
	background:#fff;
	align-items:center;
	justify-content:center;
	cursor:pointer;
}
.hamburger span,
.hamburger span::before,
.hamburger span::after{
	content:"";
	display:block;
	width:18px; height:2px;
	background:var(--c-sea-dark);
	position:relative;
	transition:transform .25s ease, opacity .25s ease;
}
.hamburger span::before{ position:absolute; top:-6px; }
.hamburger span::after{ position:absolute; top:6px; }

.mobile-nav{
	position:fixed; inset:0;
	background:linear-gradient(160deg,var(--c-sea-dark),var(--c-sea) 120%);
	display:flex; flex-direction:column;
	align-items:center; justify-content:center;
	gap:26px;
	opacity:0; visibility:hidden;
	transform:translateY(-8px);
	transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
	z-index:100;
}
.mobile-nav.is-open{
	opacity:1; visibility:visible; transform:none;
	transition:opacity .3s ease, transform .3s ease;
}
.mobile-nav a{
	font-family:var(--font-serif);
	font-size:1.7rem;
	color:#fdf8ee;
	letter-spacing:.03em;
}
.mobile-nav a.is-active{ color:var(--c-sand-light); }
.mobile-nav .mobile-langs{
	display:flex; gap:14px; margin-top:10px;
}
.mobile-nav .mobile-langs img{ width:26px; height:26px; border-radius:2px; }
.mobile-close{
	position:absolute; top:20px; right:24px;
	width:44px; height:44px; border-radius:50%;
	border:1px solid rgba(255,255,255,.4);
	background:transparent; color:#fff; font-size:1.3rem;
	cursor:pointer;
}
body.nav-open{ overflow:hidden; }

@media (max-width:900px){
	.main-nav{ display:none; }
	.hamburger{ display:flex; }
	.brand-row{ padding-top:14px; padding-bottom:14px; }
	.brand-word{ font-size:1.76rem; letter-spacing:.32em; }
}

/* ============================================================== HERO (naslovnica) */

.hero{
	position:relative;
	height:62vh;
	min-height:400px;
	max-height:640px;
	overflow:hidden;
	background:var(--c-sea-dark);
}
.hero-slide{
	position:absolute; inset:0;
	background-size:cover;
	background-position:center;
	opacity:0;
	animation-name:heroFade;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
}
.hero::after{
	content:"";
	position:absolute; inset:0;
	background:linear-gradient(180deg,rgba(14,39,51,.25) 0%,rgba(14,39,51,.15) 45%,rgba(14,39,51,.75) 100%);
}
@keyframes heroFade{
	0%{ opacity:0; }
	6%{ opacity:1; }
	28%{ opacity:1; }
	34%{ opacity:0; }
	100%{ opacity:0; }
}
.hero-content{
	position:relative; z-index:2;
	height:100%;
	display:flex; flex-direction:column;
	align-items:center; justify-content:center;
	text-align:center;
	color:#fff;
	padding:0 20px;
}
.hero-content .eyebrow{ color:var(--c-sand-light); }
.hero-content h1{
	color:#fff;
	font-size:clamp(2.4rem,6vw,4.2rem);
	font-style:italic;
	font-weight:500;
	margin-bottom:.3em;
	text-shadow:0 6px 30px rgba(0,0,0,.25);
}
.hero-content p{
	max-width:560px;
	color:#f1e9d6;
	margin-bottom:1.6em;
}
.hero-wave{
	position:absolute; left:0; right:0; bottom:-1px; z-index:2;
	width:100%; height:auto; display:block; color:var(--c-cream);
}

/* Banner za unutarnje stranice (2-5) */

.page-banner{
	position:relative;
	background:linear-gradient(120deg,var(--c-sea-dark),var(--c-sea) 75%);
	min-height:230px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:20px 24px 50px;
	text-align:center;
	overflow:hidden;
}
.page-banner::before{
	content:"";
	position:absolute; inset:0;
	background:radial-gradient(ellipse at top right, rgba(255,255,255,.12), transparent 55%);
}
.page-banner h1{
	position:relative;
	color:#fff;
	font-size:clamp(2.1rem,4.4vw,3rem);
	margin:0;
}
.page-banner .eyebrow{ position:relative; color:var(--c-sand-light); }
.page-banner .hero-wave{ color:var(--c-cream); }

/* ============================================================== LAYOUT */

.page-shell{ padding:56px 0 70px; }
.content-grid{
	display:grid;
	grid-template-columns:minmax(0,2.05fr) minmax(0,1fr);
	gap:48px;
	align-items:start;
}
@media (max-width:940px){
	.content-grid{ grid-template-columns:1fr; }
}

.main-col{ min-width:0; }
.page-title{
	font-size:clamp(1.7rem,3.4vw,2.3rem);
	margin-bottom:.5em;
}

/* ---------------------------------------------------------------- Sidebar cards */

.side-card{
	background:#fff;
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow-sm);
	padding:26px;
	margin-bottom:24px;
}
.side-card h3{
	font-size:1.15rem;
	text-transform:uppercase;
	letter-spacing:.1em;
	font-family:var(--font-sans);
	font-weight:600;
	color:var(--c-sea-dark);
	margin-bottom:1em;
	padding-bottom:.6em;
	border-bottom:2px solid var(--c-sand-pale);
}

.weather-row{ display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.weather-row img{ width:56px; height:56px; }
.weather-row strong{ color:var(--c-sea-dark); }
.weather-links a{
	display:block;
	font-size:.85rem;
	color:var(--c-sea);
	margin-top:4px;
	text-decoration:underline;
	text-underline-offset:3px;
}

.contact-card .obj-name{
	font-family:var(--font-serif);
	font-size:1.5rem;
	font-weight:600;
	color:var(--c-sea-dark);
	display:block;
	margin-bottom:.35em;
}
.contact-card .stars{ margin-bottom:.7em; color:var(--c-sand); font-size:1.15rem; letter-spacing:.2em; }
.contact-card p{ font-size:.92rem; }
.contact-card a{ color:var(--c-sea); }

.map-thumb{ display:block; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); aspect-ratio:16/11; }
.map-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.map-thumb:hover img{ transform:scale(1.06); }

.link-list li{ border-top:1px solid var(--c-line); }
.link-list li:first-child{ border-top:none; }
.link-list a{
	display:flex; align-items:center; gap:.6em;
	padding:.65em 0;
	font-size:.9rem;
	color:var(--c-text);
	transition:color .2s ease, padding-left .2s ease;
}
.link-list a i{ color:var(--c-sand); }
.link-list a:hover{ color:var(--c-sea); padding-left:4px; }

/* ============================================================== APARTMANI (page 2) */

.apartments-list details.apartment-item{
	background:#fff;
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow-sm);
	margin-bottom:16px;
	overflow:hidden;
}
.apartment-item summary{
	list-style:none;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:20px 26px;
}
.apartment-item summary::-webkit-details-marker{ display:none; }
.apartment-item summary .ap-name{
	font-family:var(--font-serif);
	font-size:1.4rem;
	color:var(--c-sea-dark);
}
.apartment-item summary .ap-type{
	display:block;
	font-family:var(--font-sans);
	font-size:.8rem;
	color:var(--c-text-light);
	letter-spacing:.03em;
	margin-top:2px;
}
.apartment-item summary .chevron{
	flex:none;
	width:32px; height:32px;
	border-radius:50%;
	border:1px solid var(--c-line);
	display:flex; align-items:center; justify-content:center;
	transition:transform .3s ease, background .3s ease;
	color:var(--c-sea-dark);
}
.apartment-item[open] summary .chevron{ transform:rotate(180deg); background:var(--c-sand-pale); }
.apartment-item[open] summary{ border-bottom:1px solid var(--c-line); }
.apartment-body{ padding:22px 26px 28px; }

/* Gallery grid used by showgallery() output */

.gal-grid{
	display:grid;
	grid-template-columns:repeat(var(--cols,3),1fr);
	gap:10px;
}
@media (max-width:560px){
	.gal-grid{ grid-template-columns:repeat(2,1fr); }
}
.gal-cell{ min-width:0; }
.gal-item{
	position:relative;
	display:block;
	border-radius:var(--radius);
	overflow:hidden;
	background:var(--c-cream2);
	box-shadow:var(--shadow-sm);
}
.gal-item img{
	width:100%; height:auto;
	transition:transform .5s ease;
}
.gal-item img.js-lazy-thumb{ opacity:0; transition:opacity .3s ease, transform .5s ease; }
.gal-item img.js-lazy-thumb.is-loaded{ opacity:1; }
.gal-item:hover img{ transform:scale(1.08); }
.gal-item::after{
	content:"";
	position:absolute; inset:0;
	background:linear-gradient(180deg,rgba(14,39,51,0) 55%,rgba(14,39,51,.45) 100%);
	opacity:0;
	transition:opacity .3s ease;
}
.gal-item:hover::after{ opacity:1; }
.gal-item .gal-zoom{
	position:absolute; right:8px; bottom:8px;
	width:28px; height:28px;
	border-radius:50%;
	background:rgba(255,255,255,.9);
	color:var(--c-sea-dark);
	display:flex; align-items:center; justify-content:center;
	font-size:.75rem;
	opacity:0; transform:translateY(6px);
	transition:opacity .3s ease, transform .3s ease;
}
.gal-item:hover .gal-zoom{ opacity:1; transform:none; }
.gal-caption{
	margin-top:8px;
	font-size:.82rem;
	color:var(--c-text-light);
	text-align:center;
}

/* ============================================================== CJENIK (price table) */

.price-wrap{ overflow-x:auto; margin-top:28px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
table.price-table{ width:100%; border-collapse:collapse; background:#fff; min-width:520px; }
.price-table thead th{
	background:var(--c-sea-dark);
	color:var(--c-sand-light);
	font-family:var(--font-sans);
	font-size:.78rem;
	letter-spacing:.08em;
	text-transform:uppercase;
	padding:14px 16px;
	text-align:left;
	white-space:nowrap;
}
.price-table tbody td{
	padding:12px 16px;
	border-bottom:1px solid var(--c-line);
	font-size:.92rem;
	white-space:nowrap;
}
.price-table tbody tr:nth-child(even){ background:var(--c-cream2); }
.price-table tbody td:first-child{ font-weight:600; color:var(--c-sea-dark); }

/* ============================================================== INFO / amenities (page 1) */

.info-panel{
	margin-top:30px;
	background:#fff;
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow-sm);
	padding:30px;
}
.info-panel h3{
	font-size:1.05rem;
	text-transform:uppercase;
	letter-spacing:.14em;
	color:var(--c-sand);
	margin-bottom:1.1em;
}
.info-cols{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
@media (max-width:560px){ .info-cols{ grid-template-columns:1fr; } }
.info-stat{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--c-line); font-size:.94rem; }
.info-stat span{ color:var(--c-text-light); }
.info-stat strong{ color:var(--c-sea-dark); }
.amenity-chips{ display:flex; flex-wrap:wrap; gap:10px; align-content:flex-start; }
.amenity-chips span{
	display:inline-flex; align-items:center; gap:.5em;
	background:var(--c-cream2);
	border-radius:999px;
	padding:.5em 1em;
	font-size:.85rem;
	color:var(--c-ink);
}
.amenity-chips i{ color:var(--c-sea); }

/* ============================================================== KAKO DO NAS (directions) */

.directions-photo{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); margin-bottom:24px; }
.info-box{
	background:#fff;
	border-radius:var(--radius);
	box-shadow:var(--shadow-sm);
	padding:20px 24px;
	margin-bottom:20px;
	display:flex; align-items:center; justify-content:space-between;
	gap:16px; flex-wrap:wrap;
}
.info-box .label{ display:flex; align-items:center; gap:.6em; color:var(--c-text-light); font-size:.92rem; }
.info-box .label i{ color:var(--c-sand); }
.info-box .value{ font-weight:600; color:var(--c-sea-dark); }
.gmap-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.gmap-form input[type=text]{
	border:1px solid var(--c-line);
	border-radius:999px;
	padding:.6em 1.1em;
	font-family:var(--font-sans);
	min-width:190px;
}
.gmap-form input[type=submit]{
	border:none; cursor:pointer;
	border-radius:999px;
	padding:.6em 1.4em;
	background:var(--c-sea);
	color:#fff;
	font-family:var(--font-sans);
	font-size:.82rem;
	letter-spacing:.08em;
	text-transform:uppercase;
	font-weight:600;
}
.gmap-form input[type=submit]:hover{ background:var(--c-sea-dark); }
.map-embed{ position:relative; width:100%; aspect-ratio:870/325; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-embed.map-embed-tall{ aspect-ratio:870/400; }
.top-map{ padding-top:26px; }
.top-map .map-embed{ box-shadow:var(--shadow-md); }

/* ============================================================== KONTAKT (contact form) */

.contact-panel{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:34px; }
.alert-success{
	background:#e7f3ea; color:#2c6b3f; border:1px solid #c5e3cc;
	border-radius:var(--radius); padding:14px 18px; margin-bottom:22px;
	display:flex; align-items:center; justify-content:space-between; font-size:.92rem;
}
.alert-success button{ background:none; border:none; color:inherit; cursor:pointer; font-size:1.1rem; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.form-field{ display:flex; flex-direction:column; gap:.4em; }
.form-field.full{ grid-column:1/-1; }
.form-field label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--c-text-light); font-weight:600; }
.form-field input[type=text],
.form-field select,
.form-field textarea{
	border:1px solid var(--c-line);
	border-radius:var(--radius-sm);
	padding:.7em .9em;
	font-family:var(--font-sans);
	font-size:.95rem;
	color:var(--c-ink);
	background:var(--c-cream2);
	transition:border-color .2s ease, background .2s ease;
}
.form-field input[type=text]:focus,
.form-field select:focus,
.form-field textarea:focus{ outline:none; border-color:var(--c-sea); background:#fff; }
.date-fields{ display:flex; gap:8px; align-items:center; }
.date-fields select{ flex:1; }
.form-field.antispam{
	background:var(--c-sand-pale);
	border-radius:var(--radius-sm);
	padding:.9em 1em;
	flex-direction:row;
	align-items:center;
	gap:.8em;
	flex-wrap:wrap;
}
.form-field.antispam label{ margin-right:auto; }
.form-field.antispam input{ width:90px; }
.form-actions{ grid-column:1/-1; text-align:right; margin-top:6px; }
.form-actions .btn{ border:none; }

/* ============================================================== NOVALJA (page 5) */

.novalja-photo{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); margin-bottom:22px; }

/* ============================================================== FOOTER */

.site-footer{
	background:var(--c-sea-dark);
	color:#cfe0e6;
	padding-top:8px;
}
.footer-main{
	display:flex; align-items:center; justify-content:space-between;
	flex-wrap:wrap; gap:12px;
	padding-top:20px;
	padding-bottom:20px;
	border-bottom:1px solid rgba(255,255,255,.08);
	font-size:.88rem;
}
.footer-main a{ color:#fff; }
.footer-badges{ display:flex; align-items:center; gap:16px; }
.footer-badges img{ opacity:.85; }
.footer-more{ padding-top:14px; padding-bottom:26px; }
.footer-more summary{
	list-style:none; cursor:pointer;
	display:inline-flex; align-items:center; gap:.5em;
	font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
	color:var(--c-sand-light);
}
.footer-more summary::-webkit-details-marker{ display:none; }
.footer-more-links{
	margin-top:14px;
	display:flex; flex-wrap:wrap; gap:8px 18px;
	font-size:.82rem;
}
.footer-more-links a{ color:#a9c2ca; }
.footer-more-links a:hover{ color:#fff; }

/* ============================================================== LIGHTBOX (js/lightbox.js) */

.lb-overlay{
	position:fixed; inset:0; z-index:200;
	background:rgba(10,20,26,.94);
	display:flex; align-items:center; justify-content:center;
	opacity:0; visibility:hidden;
	transition:opacity .25s ease, visibility 0s linear .25s;
}
.lb-overlay.is-open{ opacity:1; visibility:visible; transition:opacity .25s ease; }
.lb-content{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; pointer-events:none; }
.lb-figure{
	position:relative;
	width:92vw; height:78vh; max-width:92vw; max-height:78vh;
	text-align:center; cursor:pointer; user-select:none;
	touch-action:none;
}
.lb-img{
	position:absolute; top:50%; left:50%;
	max-width:100%; max-height:100%;
	width:auto; height:auto;
	border-radius:6px;
	box-shadow:0 20px 60px rgba(0,0,0,.5);
	opacity:0; transform:translate(-50%,-50%) scale(.97);
	transition:opacity .25s ease, transform .25s ease;
	-webkit-user-drag:none;
	pointer-events:auto;
}
.lb-img.is-shown{ opacity:1; transform:translate(-50%,-50%); }
.lb-img-back{ display:none; }
.lb-caption{ color:#f1e9d6; font-family:var(--font-serif); font-size:1.05rem; margin-top:14px; }
.lb-counter{ color:#93a8b0; font-size:.78rem; letter-spacing:.1em; margin-top:4px; }
.lb-close,.lb-prev,.lb-next{
	position:fixed; z-index:5;
	width:46px; height:46px; border-radius:50%;
	border:1px solid rgba(255,255,255,.3);
	background:rgba(255,255,255,.06);
	color:#fff;
	display:flex; align-items:center; justify-content:center;
	cursor:pointer; font-size:1.1rem;
	transition:background .2s ease;
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{ background:rgba(255,255,255,.18); }
.lb-close{ top:22px; right:22px; }
.lb-prev{ left:22px; top:50%; transform:translateY(-50%); }
.lb-next{ right:22px; top:50%; transform:translateY(-50%); }
@media (max-width:640px){
	.lb-prev{ left:8px; } .lb-next{ right:8px; }
	.lb-close{ top:12px; right:12px; }
}

/* ============================================================== Misc helpers */

.text-center{ text-align:center; }
.mt-lg{ margin-top:40px; }
::selection{ background:var(--c-sand-light); color:var(--c-ink); }
