@import 'https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap';

@font-face {
	font-family: 'Lato';
	src: url(/fonts/Lato-Regular.woff2) format('woff2');
}
@font-face {
	font-family: 'Lato';
	font-weight: 700;
	src: url(/fonts/Lato-Bold.woff2) format('woff2');
}

/* Boje */

html {
	--lightest-blue: #eaf1f5;
	--lightest-blue: #dcebf3;
	--light-blue: #38b4da;
	--dark-blue: #1e72a3;
	--darkest-blue: #175e87;
	--blue-gradient: linear-gradient(180deg, #1e72a3aa, #1e72a355);
	--gold: #e2c48e;
	--red: #dc5454;

	--bg: #fff;
	--accent: var(--dark-blue);
	--accent-fg: #f0f0f0;
	--accent-hover: #000;
	--accent-glow: #1e72a333;
	--text: #333;
	--error: var(--red);
	--error-fg: #f0f0f0;
}

/* Reset */

* { box-sizing: border-box }
html { background: var(--bg); scrollbar-gutter: stable }
body { margin: 0 }
img,
svg { vertical-align: bottom }
[hidden] { display: none !important }

/* Tipografija */

html { font: normal clamp(17px, 1.25vw, 21px) / 1.5 Lato, sans-serif; color: var(--text) }
h1,
.supertitle { margin: .5rem 0; font: 400 2rem/1 Jost, sans-serif; color: var(--accent) }
h2,
.title { margin: .5rem 0; font: 550 1.75rem/1.2 Jost, sans-serif; color: var(--accent) }
h3,
.subtitle { margin: 0; font: 550 1.2rem/1.2 Jost, sans-serif; color: var(--accent) }
@media (min-width: 576px) {
	h1,
	.supertitle { font-size: 3rem }
}
.eyebrow { font-size: .9rem; text-transform: uppercase }
p { margin: 1rem 0 }
h2:first-child,
h3:first-child,
p:first-child { margin-top: 0 }
h2:last-child,
h3:last-child,
p:last-child { margin-bottom: 0 }
a { color: inherit; text-decoration: none }
a:hover { text-decoration: underline }
.icon { width: 1.4em; height: 1.4em; fill: currentColor }
li::marker { color: var(--accent); font-size: 1.5rem; line-height: .5; }

/* Mobilna struktura: .mobile-header, pa .hero */

.mobile-header { position: fixed; left: 0; right: 0; top: 0; height: 3rem; z-index: 98; background: var(--accent); color: var(--accent-fg); }
.mobile-menu,
.super-header,
.header { display: none }
.hero { width: 100%; height: calc(100vh - 3rem); margin-top: 3rem; z-index: 1 }
.hero__slide { height: calc(100vh - 3rem) }
.hero--small { height: calc(50vh - 3rem) }

/* Desktop struktura: .super-header, pa .header, pa .hero */

@media (min-width: 768px) {
	.super-header { line-height: 2rem; z-index: 2; position: relative; display: block }
	.header { position: sticky; top: 0; z-index: 99; line-height: 2.5rem; display: block }
	.hero { height: 100vh; margin-top: -4.5rem }
	.hero__slide { height: 100vh }
	.hero--small { height: 40vh }
	.mobile-header { display: none }
}

/* Desktop izbornik */

@media (min-width: 768px) {
	.super-header { padding: 0 2rem; display: flex; justify-content: end; align-items: center; }
	.super-header__item { padding: 0 .5rem 0 .2rem; font-size: .8rem; color: var(--accent-fg); text-shadow: 0 0 7px var(--accent); text-decoration: none }
	.super-header__icon { width: .7rem; height: 1em; color: var(--accent-fg) }
	.super-header__item:hover,
	.super-header__item:active { color: var(--accent-hover); text-decoration: none; text-shadow: 0 0 7px #fff8 }

	.menu { padding: 0 2rem; display: flex }
	.menu__item { padding: 0 .5rem; font-size: .92rem; color: var(--accent-fg); text-shadow: 0 0 7px var(--accent); text-decoration: none; text-transform: uppercase }
	.menu__item--logo { width: 9rem; height: 2.5rem; margin-right: 1.5rem; background: no-repeat url(logo-transparent.svg) center/contain }
	.menu__item:hover,
	.menu__item:active { color: var(--accent-hover); text-decoration: none; text-shadow: 0 0 7px #fff8 }
	.menu.is-scrolled { background-color: var(--accent) }

	.langs { margin-left: auto; display: flex }
	.langs__item { padding: 0 .5rem; line-height: 2.5rem; font-size: .92rem; color: var(--accent-fg); text-shadow: 0 0 7px var(--accent); text-decoration: none; text-transform: uppercase }
	.langs__item:hover,
	.langs__item:active { color: var(--accent-hover); text-decoration: none }
}

/* Mobilni izbornik */

.menu-toggle { position: fixed; z-index: 99; right: 0; top: 0; width: 3rem; height: 3rem; border-radius: 0 0 0 .18rem; background: var(--accent); color: var(--accent-fg); cursor: pointer; user-select: none; -webkit-user-select: none }
.menu-toggle__menu-icon,
.menu-toggle__close-icon { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transform: rotate(0); transition: all 200ms ease-out }
.menu-toggle__menu-icon  { opacity: 1 }
.menu-toggle.is-open .menu-toggle__menu-icon  { opacity: 0; transform: rotate(-90deg) }
.menu-toggle.is-open .menu-toggle__close-icon { opacity: 1; transform: rotate(-90deg) }

.mobile-menu { position: fixed; z-index: 97; left: 0; top: 3rem; right: 0; bottom: 0; padding: 1.5rem 0 0; background: var(--accent); color: var(--accent-fg); display: none }
.mobile-menu.is-open { display: flex; flex-direction: column }
.mobile-menu__item { line-height: 3rem; padding: 0 2rem; border-bottom: 1px dotted var(--accent-fg); color: var(--accent-fg); text-decoration: none }
.mobile-menu__item:hover,
.mobile-menu__item:active { background: var(--light-blue); color: var(--darkest-blue); -webkit-tap-highlight-color: transparent; text-decoration: none }
.mobile-menu__langs { margin-top: 1.1rem }
.mobile-menu__lang { line-height: 3rem; padding: 0 2rem; font-size: .9rem; color: var(--accent-fg); text-decoration: none; text-transform: uppercase; display: block }
.mobile-menu__lang:hover,
.mobile-menu__lang:active { background: var(--light-blue); color: var(--darkest-blue); -webkit-tap-highlight-color: transparent; text-decoration: none }
.mobile-header__logo { width: 10rem; height: 3rem; border: 0; background: url(logo-transparent.svg) center no-repeat; background-size: 9rem; display: block }
.mobile-menu__contacts { padding: 1rem 2rem; font-size: .9rem; display: grid; grid-template-columns: auto 1fr }
.mobile-menu__contact { line-height: 2rem; color: var(--accent-fg); text-decoration: none }
.mobile-menu__contact:hover,
.mobile-menu__contact:active { color: var(--accent-hover); text-decoration: none }
.mobile-menu__icon { width: 1em; height: 1em; margin: auto .6em auto 0; fill: currentColor }

@media (min-width: 768px) {
	.menu-toggle,
	.mobile-menu { display: none }
}

/* Hero: veliki ima sadržaj centriran, a mali na dnu lijevo (hrbat) */

.hero { background: var(--accent); position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.hero__overcast { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background: var(--blue-gradient) }
.hero__title { text-align: center; color: #fff; z-index: 3 }
.hero__title--top { position: relative; top: -.2em; padding: .1rem .5rem; background-color: #38b4da; color: #fff }
.hero__title--bottom { padding: .1rem .5rem; background-color: #155980; color: #fff }
.hero__slide { width: 100vw; object-fit: cover }

.hero--small { background-position: center; background-size: cover; display: flex; flex-direction: column; justify-content: end; align-items: flex-start }
.hero--small__title { margin: 0 0 -1rem; padding: .5rem 1rem; z-index: 3; background: var(--accent); color: var(--accent-fg) }
@media (min-width: 768px) {
	.hero--small { padding: 0 calc((100% - 60vw)/2) }
	.hero--small__title { margin: 0 0 -1rem -1rem }
}

/* Sekcije */

.section--narrow { padding: 5rem 1rem }
.section--wide { padding: 5rem 1rem }
.section--full-width { padding: 5rem 0 }
.section--mini { padding: 2rem 1rem }
.section:nth-child(1 of .section) { padding-top: 3rem }
@media (min-width: 768px) {
	.section--narrow { padding: 7rem calc((100% - 60vw)/2) }
	.section--wide { padding: 7rem 3rem }
	.section--mini { padding: 2rem calc((100% - 60vw)/2) }
	.section:nth-child(1 of .section) { padding-top: 5rem }
}
.section--full-height { padding-top: 0; padding-bottom: 0 }
.section:nth-child(2n of .section) { background-color: var(--lightest-blue) }
.section--dark { background-color: var(--lightest-blue) }
.section--darkest { background: #494949; color: #eee }

/* Komponente */

.suites { padding: 1rem 0; text-align: center; gap: 2rem }
.suites__thumb-container { padding-bottom: 75%; position: relative; display: block }
.suites__thumb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover }
.suites__title,
.suites__title:hover { position: relative; top: -1rem; padding: .1rem .5rem; background: var(--light-blue); color: var(--accent-fg); text-decoration: none; display: inline-block }
.suites__info { padding: 0 .5rem; position: relative; top: -1rem; font-size: .9rem; display: flex; align-items: center; }
.suites__icon { width: 1.3rem; height: 1rem; margin-right: .3rem; color: var(--dark-blue); }

.map { padding-bottom: 66%; background-color: #ccc; position: relative }
.map__iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0 }
@media (min-width: 768px) {
	.map { padding-bottom: 33% }
}

.prices { width: fit-content; display: grid; grid-template-columns: auto auto; gap: 0 1rem }

.list { list-style: none; margin: 0; padding-left: 0 }
.list__icon { width: 1.4em; height: 1.4em; color: var(--light-blue) }

/* Formulari */

.form { gap: .95rem }
.form__label { display: block; margin: .5rem .2rem .2rem; font-size: .9rem }
.form__input,
.form__textarea { width: 100%; padding: .2rem .5rem; border: 1px solid #0003; border-radius: .2rem; font: inherit }
.form__textarea { min-height: 6.6rem; max-height: 20.5rem; overflow-y: auto; resize: vertical }
.form__input:focus,
.form__textarea:focus { outline: 1px solid var(--accent); outline-offset: -1px; box-shadow: 0 0 .75rem var(--accent-glow) }
.form__success { background: var(--bg); display: flex; flex-direction: column; justify-content: center; align-items: center }

button,
.button { display: inline-block; padding: .65rem .9rem; line-height: 1.2rem; font-size: .9rem; border: 0; border-radius: .2rem; background-color: var(--accent); color: var(--accent-fg); text-transform: uppercase; cursor: pointer; }
.button:hover { text-decoration: none }

.form__error { margin: 0.3em 0; padding: .2rem .5rem; border-radius: .18rem; color: var(--error-fg); background: var(--error); position: relative }
.form__error::before { content: ''; border: .5rem solid transparent; border-bottom-color: var(--error); width: 0; height: 0; position: absolute; bottom: 100%; left: 10%; margin-left: -7px }

/* Pohvale */

.testimonials { min-height: 10rem }
.testimonials__slide { width: 100%; padding: 0 1rem 5rem; display: flex; flex-direction: column; align-items: start }
.testimonials__icon { width: 3rem; height: 3rem; margin-bottom: 1rem; color: var(--accent); flex-shrink: 0; opacity: .5; }
.testimonials__quote { flex-grow: 1 }
.testimonials__name { margin-top: 1rem; font-weight: bold }
.testimonials .gallerista__dot { border-color: var(--accent) }
.testimonials .gallerista__dot--active { background-color: var(--accent) }
.testimonials .gallerista__prev,
.testimonials .gallerista__next { background: var(--accent); color: var(--accent-fg); opacity: .33 }
@media (max-width: 767px) {
	.testimonials .gallerista__dots { bottom: .6rem }
	.testimonials .gallerista__prev,
	.testimonials .gallerista__next { top: auto; bottom: 0; transform: none }
}
@media (min-width: 768px) {
	.testimonials { margin: 0 calc((100% - 60vw)/2) }
	.testimonials__slide { padding: 0 5rem 3rem; font-size: 1.13rem; }
}

/* Podnožje */

.footer { padding: 3rem 1rem 4rem; background-color: var(--accent); color: var(--accent-fg) }
.footer__logo { display: none }
.footer__socials { margin-top: 1rem; display: flex; gap: .5rem }
@media (min-width: 768px) {
	.footer { padding: 3rem calc((100% - 60vw)/2) 4rem; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto }
	.footer__left { grid-column: 1/2; grid-row: 1/3; }
	.footer__right { grid-column: 2/3; text-align: right }
	.footer__logo { display: inline-block; width: 9rem; height: 4rem; color: var(--light-blue) }
	.footer__socials { grid-column: 2/3; margin: 1rem 0; justify-content: flex-end }
}
.footer__title { color: var(--light-blue) }
.footer__icon { width: 1.2em; height: 1.2em; vertical-align: -.3rem; margin-right:.2em }
.footer__icon-table { line-height: 2rem; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 .25rem }
.footer__link { color: inherit; font-size: .95rem; text-decoration: none; }
.footer__link:hover,
.footer__link:active { color: var(--accent-hover); text-decoration: none }
.footer__social-link { display: inline-block; font-size: 1.33rem; color: inherit; text-decoration: none }
.footer__social-link:hover,
.footer__social-link:active { color: var(--accent-hover); text-decoration: none }

/* Modal */

.modal--dialog { width: 19rem; max-width: 19rem; margin-bottom: 20vh; padding: 1.5rem 1rem 1rem; background: var(--bg); border-radius: .18rem; box-shadow: 0 .3rem .8rem #0003; text-align: center }
.modal--fullscreen { width: 100%; height: 100% }
.modal__title { margin: 0 0 1.15rem; line-height: 1.2; font-size: 1.3rem; }
.modal__footer { margin: 2.3rem 0 0; display: flex; gap: 0.4rem }
.modal__backdrop { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; background: #333333cc; display: flex; justify-content: center; align-items: center;}

.fullscreen { background-color: #333; }
.fullscreen__slide { width: 100%; height: 100%; object-fit: contain }
.fullscreen__close { position: absolute; right: 0; width: 3.2rem; height: 3.2rem; padding: .5rem; z-index: 2; border: 0; background-color: #333; color: #fff9; cursor: pointer }

/* Gallerista */

.gallery { margin-left: -1rem; margin-right: -1rem; padding-bottom: 66.67%; z-index: 0; position: relative }
.gallery__slide { position: absolute; width: 100%; height: 100%; object-fit: cover }

.gallerista { overflow: hidden; user-select: none; position: relative }
.gallerista__slide { position: absolute; top: 0; z-index: 1 }
.gallerista__dots { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; text-align: center }
.gallerista__dot { display: inline-block; width: 0.6rem; height: 0.6rem; margin: 0.8rem 0.25rem; border: 1px solid #ffffff99; border-radius: 50% }
.gallerista__dot--active { background: #ffffff99; border: none }
.gallerista__prev,
.gallerista__next { position: absolute; z-index: 3; display: block; width: 2rem; height: 2rem; padding: 1rem 0.2rem; box-sizing: content-box; transform: translateY(-50%); border-radius: .2rem; color: #ffffff99; background: #00000022; cursor: pointer }
.gallerista__prev { left: 0; top: 50% }
.gallerista__next { right: 0; top: 50% }

/* Fluid system */

.grid-xs-2 { display: grid; grid-template-columns: 1fr 1fr }
.grid-xs-3 { display: grid; grid-template-columns: 1fr 1fr 1fr }
.grid-xs-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr }
.grid-sm-2 { display: grid }
.grid-sm-3 { display: grid }
.grid-sm-4 { display: grid }
.grid-md-2 { display: grid }
.grid-md-3 { display: grid }
.grid-md-4 { display: grid }
.grid-lg-2 { display: grid }
.grid-lg-3 { display: grid }
.grid-lg-4 { display: grid }
.grid-xl-2 { display: grid }
.grid-xl-3 { display: grid }
.grid-xl-4 { display: grid }
@media (min-width: 576px) {
	.grid-sm-2 { display: grid; grid-template-columns: 1fr 1fr }
	.grid-sm-3 { display: grid; grid-template-columns: 1fr 1fr 1fr }
	.grid-sm-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr }
}
@media (min-width: 768px) {
	.grid-md-2 { display: grid; grid-template-columns: 1fr 1fr }
	.grid-md-3 { display: grid; grid-template-columns: 1fr 1fr 1fr }
	.grid-md-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr }
}
@media (min-width: 1024px) {
	.grid-lg-2 { display: grid; grid-template-columns: 1fr 1fr }
	.grid-lg-3 { display: grid; grid-template-columns: 1fr 1fr 1fr }
	.grid-lg-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr }
}
@media (min-width: 1280px) {
	.grid-xl-2 { display: grid; grid-template-columns: 1fr 1fr }
	.grid-xl-3 { display: grid; grid-template-columns: 1fr 1fr 1fr }
	.grid-xl-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr }
}

/* Utility */

.ml-auto { margin-left: auto }
.ml-2 { margin-left: .5rem }
.mt-4 { margin-top: 1rem }
.mt-0 { margin-top: 0 }
.mt-6 { margin-top: 1.5rem }
.mt-8 { margin-top: 2rem }
.mt-12 { margin-top: 3rem }
.mt-16 { margin-top: 4rem }
.mb-8 { margin-bottom: 2rem }
.mb-12 { margin-bottom: 3rem }
.my-8 { margin-top: 2rem; margin-bottom: 2rem }

.py-4 { padding-top: 1rem; padding-bottom: 1rem }
.pt-0 { padding-top: 0 }
.pt-8 { padding-top: 2rem }
.pt-16 { padding-top: 4rem }
.pb-4 { padding-bottom: 1rem }
.pb-8 { padding-bottom: 2rem }
.py-8 { padding-top: 2rem; padding-bottom: 2rem }

.text-left { text-align: left }
.text-right { text-align: right }
.text-center { text-align: center }

.text-xs { font-size: .75rem }
.text-sm { font-size: 0.875rem }
.text-base { font-size: 1rem }
.text-lg { font-size: 1.125rem }
.text-xl { font-size: 1.25rem }
.text-2xl { font-size: 1.5rem }

.relative { position: relative }
.cover { position: absolute; left: 0; top: 0; width: 100%; height: 100% }