/* Glazbena Pandemija — global responsive layout and mobile navigation. Loaded last. */

/* ==========================================================
   GLOBAL RESPONSIVE HEADER / NAVIGATION
   This used to live inside woocommerce.css, so the mobile menu
   only worked on WooCommerce pages. It belongs in base.css.
========================================================== */
@media (max-width: 1120px) {
.gp-topbar {
		min-height: 40px;
		font-size: 12px;
	}

	.gp-topbar__inner {
		justify-content: center;
		min-height: 40px;
		padding: 4px 12px;
		gap: 0;
	}

	.gp-topbar__contacts {
		justify-content: center;
		gap: 4px 12px;
		width: 100%;
	}

	.gp-topbar__item {
		gap: 4px;
	}

	.gp-topbar__item--address {
		flex-basis: 100%;
		justify-content: center;
	}

	.gp-topbar .dashicons {
		width: 14px;
		height: 14px;
		font-size: 14px;
	}

	.gp-topbar__socials {
		display: none;
	}

	.gp-header__inner {
		width: 100%;
		min-height: 54px;
		padding: 0 14px;
		gap: 5px;
	}

	.gp-brand img {
		max-height: 46px;
	}

	.gp-menu-toggle {
		display: block;
		margin-left: auto;
		flex: 0 0 auto;
	}

	.gp-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 50;
		display: block;
		max-height: 0;
		padding: 0;
		overflow: hidden auto;
		background: rgba(255,255,255,.98);
		border-top: 0 solid #1e1e1e;
		box-shadow: 0 28px 60px rgba(0,0,0,.24);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: max-height .28s ease, opacity .18s ease, transform .18s ease, visibility .18s ease, border-width .18s ease;
	}

	.gp-nav.is-open {
		max-height: calc(100dvh - 94px);
		border-top-width: 2px;
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.gp-menu {
		align-items: stretch;
		flex-direction: column;
		gap: 0;
	}

	.gp-menu > li {
		border-bottom: 1px solid rgba(0,0,0,.06);
	}

	.gp-menu a {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 48px;
		padding: 12px 24px;
		color: #5f5f5f;
		font-size: 16px;
		font-weight: 900;
	}

	.gp-menu a:hover,
	.gp-menu .current-menu-item > a,
	.gp-menu .current-menu-ancestor > a {
		color: var(--gp-orange);
	}

	.gp-menu > .menu-item-has-children > a::after {
		margin-left: auto;
	}

	.gp-menu .sub-menu {
		position: static;
		display: none;
		min-width: 0;
		padding: 0 0 7px;
		border: 0;
		border-radius: 0;
		background: #f8f8f8;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.gp-menu .sub-menu::before {
		display: none;
	}

	.gp-menu li.is-submenu-open > .sub-menu,
	.gp-menu li:focus-within > .sub-menu {
		display: block;
	}

	.gp-menu .sub-menu a {
		min-height: 42px;
		padding: 9px 34px;
		color: #6d6d6d;
		font-size: 14px;
		white-space: normal;
	}

	body.gp-menu-open {
		overflow: hidden;
	}
}

@media (max-width: 782px) {
}

@media (max-width: 720px) {
	:root {
		--gp-landing-h1: 40px;
		--gp-landing-lead: 16px;
	}

	.gp-container,
	.gp-narrow {
		width: min(calc(100% - 28px), var(--gp-container));
	}

	.gp-topbar__inner,
	.gp-header__inner {
		width: 100%;
	}

	.gp-topbar__contacts {
		gap: 5px 10px;
	}

	.gp-topbar__item {
		font-size: 11px;
	}

	.gp-topbar__item--address {
		display: none;
	}

	.gp-brand img {
		max-height: 42px;
	}

	.gp-menu-toggle {
		width: 42px;
		height: 38px;
		border-width: 1px;
	}

	.gp-menu a {
		padding-left: 18px;
		padding-right: 18px;
	}

	.gp-menu .sub-menu a {
		padding-left: 30px;
	}

	.gp-button {
		width: 100%;
	}
}

@media (max-width: 430px) {
	.gp-topbar__contacts {
		justify-content: space-between;
	}

	.gp-topbar__item {
		min-width: 0;
	}

	.gp-topbar__item:first-child span:last-child {
		max-width: 190px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* ==========================================================
   HOMEPAGE MOBILE STABILITY
   Prevent horizontal viewport drift and keep homepage grids usable.
========================================================== */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

.gp-main,
.gp-main > *,
.gp-section,
.gp-container,
.gp-hero,
.gp-room-preview,
.gp-how,
.gp-info-slider,
.gp-about,
.gp-blog,
.gp-gallery-slider,
.gp-booking-cta {
	min-width: 0;
	max-width: 100%;
}

.gp-info-slider__grid > *,
.gp-how__grid > *,
.gp-about__grid > *,
.gp-booking-cta__inner > * {
	min-width: 0;
}

@media (max-width: 1024px) {
	/* Rooms must stay two per row on tablet/mobile instead of inheriting desktop 4 columns. */
	.home .gp-room-grid,
	body.home .gp-room-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	/* The services/how section is clearer stacked on narrower screens. */
	.home .gp-how__grid,
	body.home .gp-how__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.home .gp-how__grid > div:first-child,
	body.home .gp-how__grid > div:first-child {
		max-width: 760px;
	}
}

@media (max-width: 720px) {
	.home .gp-section,
	body.home .gp-section {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.home .gp-room-grid,
	body.home .gp-room-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.home .gp-room-card,
	body.home .gp-room-card {
		min-width: 0;
	}

	.home .gp-room-card a,
	body.home .gp-room-card a {
		min-height: 270px;
	}

	.home .gp-room-card span,
	.home .gp-room-card h3,
	.home .gp-room-card p,
	body.home .gp-room-card span,
	body.home .gp-room-card h3,
	body.home .gp-room-card p {
		margin-left: 11px;
		margin-right: 11px;
	}

	.home .gp-room-card span,
	body.home .gp-room-card span {
		margin-top: 11px;
		padding: 6px 8px;
		font-size: 9px;
		line-height: 1.15;
	}

	.home .gp-room-card h3,
	body.home .gp-room-card h3 {
		padding-top: 155px;
		margin-bottom: 6px;
		font-size: 18px;
		line-height: 1.08;
		overflow-wrap: anywhere;
	}

	.home .gp-room-card p,
	body.home .gp-room-card p {
		font-size: 13px;
		line-height: 1.25;
	}

	.home .gp-how__grid,
	body.home .gp-how__grid {
		gap: 24px;
	}

	.home .gp-how__grid > div:first-child p:not(.gp-eyebrow),
	body.home .gp-how__grid > div:first-child p:not(.gp-eyebrow) {
		font-size: 16px;
		line-height: 1.55;
	}

	.home .gp-steps,
	body.home .gp-steps {
		gap: 10px;
	}

	.home .gp-step,
	body.home .gp-step {
		grid-template-columns: 46px minmax(0, 1fr);
		gap: 5px 13px;
		padding: 16px;
		border-radius: 14px;
	}

	.home .gp-step span,
	body.home .gp-step span {
		grid-row: span 2;
		width: 44px;
		height: 44px;
		font-size: 13px;
	}

	.home .gp-step strong,
	body.home .gp-step strong {
		font-size: 17px;
		line-height: 1.2;
	}

	.home .gp-step p,
	body.home .gp-step p {
		font-size: 14px;
		line-height: 1.4;
	}

	/* Sliders may translate their tracks; clips keep them from enlarging the page viewport. */
	.home .gp-info-slider,
	.home .gp-info-slider__slider,
	.home .gp-info-slider__viewport,
	.home .gp-gallery-slider,
	.home .gp-gallery-slider__viewport,
	body.home .gp-info-slider,
	body.home .gp-info-slider__slider,
	body.home .gp-info-slider__viewport,
	body.home .gp-gallery-slider,
	body.home .gp-gallery-slider__viewport {
		overflow: hidden;
		max-width: 100%;
	}

	.home .gp-gallery-slider__track,
	.home .gp-info-slider__track,
	body.home .gp-gallery-slider__track,
	body.home .gp-info-slider__track {
		min-width: 0;
		max-width: none;
	}
}

@media (max-width: 380px) {
	.home .gp-room-grid,
	body.home .gp-room-grid {
		gap: 8px;
	}

	.home .gp-room-card a,
	body.home .gp-room-card a {
		min-height: 245px;
	}

	.home .gp-room-card h3,
	body.home .gp-room-card h3 {
		padding-top: 140px;
		font-size: 16px;
	}

	.home .gp-room-card p,
	body.home .gp-room-card p {
		font-size: 12px;
	}
}