/* Aria Bello — responsive layout (mobile & tablet) */

:root {
	--site-header-height: 76px;
}

@media (max-width: 1100px) {
	:root {
		--site-header-height: 64px;
	}

	.aria-site-logo {
		max-height: 38px;
		max-width: min(160px, 42vw);
	}

	.v-nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid rgba(184, 149, 110, 0.25);
		background: rgba(255, 255, 255, 0.8);
		cursor: pointer;
		flex-shrink: 0;
	}
	.v-nav-toggle-lines,
	.v-nav-toggle-lines::before,
	.v-nav-toggle-lines::after {
		display: block;
		width: 18px;
		height: 1px;
		background: var(--jet);
		position: relative;
		transition: transform 0.25s, opacity 0.25s;
	}
	.v-nav-toggle-lines::before,
	.v-nav-toggle-lines::after {
		content: '';
		position: absolute;
		left: 0;
	}
	.v-nav-toggle-lines::before { top: -6px; }
	.v-nav-toggle-lines::after { top: 6px; }

	.aria-header-inner {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr) auto;
		gap: 12px;
		padding: 0 20px;
	}

	.aria-header-brand {
		justify-self: center;
	}

	.aria-header-nav {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(320px, 88vw);
		height: 100vh;
		padding: calc(var(--site-header-height) + 24px) 28px 28px;
		transform: translateX(-105%);
		transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
		z-index: 260;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 32px;
		background: linear-gradient(180deg, #FAF8F5 0%, #F5F2EC 100%);
		border-right: 1px solid rgba(184, 149, 110, 0.2);
		box-shadow: 24px 0 60px rgba(17, 17, 17, 0.12);
		overflow-y: auto;
	}

	body.aria-nav-open .aria-header-nav {
		transform: translateX(0);
	}

	body.aria-nav-open .v-nav-toggle-lines { background: transparent; }
	body.aria-nav-open .v-nav-toggle-lines::before { top: 0; transform: rotate(45deg); }
	body.aria-nav-open .v-nav-toggle-lines::after { top: 0; transform: rotate(-45deg); }

	.v-nav-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(17, 17, 17, 0.35);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s, visibility 0.3s;
		z-index: 250;
		border: none;
		padding: 0;
		cursor: pointer;
	}
	body.aria-nav-open .v-nav-overlay {
		opacity: 1;
		visibility: visible;
	}

	.v-links {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}
	.v-links .menu-item,
	.v-links > .v-link {
		width: 100%;
		border-bottom: 1px solid rgba(184, 149, 110, 0.12);
	}
	.v-link,
	.v-links .menu-item > a {
		display: block;
		padding: 16px 0;
		font-size: 0.68rem;
		opacity: 1;
	}
	.v-links .menu-item-has-children > a::after {
		content: '+';
		float: right;
		font-size: 0.9rem;
		color: var(--gold, #B8956E);
	}
	.v-links .menu-item-has-children.is-open > a::after {
		content: '−';
	}
	.v-links .sub-menu {
		display: none;
		list-style: none;
		margin: 0;
		padding: 0 0 8px 16px;
	}
	.v-links .menu-item-has-children.is-open > .sub-menu {
		display: block;
	}
	.v-links .sub-menu .menu-item a {
		padding: 10px 0;
		font-size: 0.62rem;
		opacity: 0.75;
	}
	.v-links .sub-menu .menu-item a:hover,
	.v-links .sub-menu .current-menu-item > a {
		opacity: 1;
		color: var(--gold, #B8956E);
	}
	.v-links .current-menu-item > a::after,
	.v-links .current_page_item > a::after,
	.v-links .aria-nav-current > a::after {
		display: none;
	}

	.v-social {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		gap: 20px;
		padding-top: 8px;
		border-top: 1px solid rgba(184, 149, 110, 0.15);
	}

	.main,
	.elementor-page .main,
	.aria-footer,
	.footer-bottom,
	.aria-luxury-ornament {
		margin-left: 0 !important;
	}
	.aria-luxury-ornament {
		display: none !important;
	}
	.main {
		padding-top: var(--site-header-height);
		min-height: calc(100vh - var(--site-header-height));
	}
	.main > .elementor:first-child,
	.main > section.hero:first-child {
		margin-top: 0;
	}

	.section-header,
	.shop-sec-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		margin-bottom: 40px;
	}
	.section-link { white-space: normal; }

	.contact-hero-grid,
	.contact-cards,
	.contact-form-map-row,
	.contact-links-grid,
	.aria-footer-top,
	.aria-footer-main,
	.aria-footer-nav-grid,
	.newsletter-inner,
	.about-hero-grid,
	.about-founder-grid,
	.about-pillar-grid {
		grid-template-columns: 1fr !important;
	}

	.gallery-sec,
	.shop-sec,
	.shop-sec--fancy,
	.booking-sec,
	.hair-sec,
	.testi-sec,
	.testi-sec--fancy,
	.newsletter-sec--fancy,
	.contact-hero--fancy,
	.contact-studio--fancy,
	.contact-form-sec--fancy,
	.contact-map-sec--fancy,
	.contact-links--fancy,
	.shop-hub--premium,
	.shop-cat-hero--premium,
	.aria-footer--fancy,
	.aria-footer--minimal {
		padding-left: 24px;
		padding-right: 24px;
	}

	.pf-masonry {
		padding-left: 16px;
		padding-right: 16px;
		gap: 8px;
	}

	.pf-masonry-col {
		gap: 8px;
	}
}

@media (max-width: 768px) {
	.pf-grid:not(.pf-grid--masonry):not(.pf-grid--project),
	.hair-menu {
		grid-template-columns: 1fr !important;
	}

	.contact-social-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	.contact-social-links { width: 100%; }
	.contact-social-btn { flex: 1 1 100%; }

	.newsletter-form {
		flex-direction: column;
	}
	.newsletter-form .btn-jet {
		width: 100%;
	}

	.bk-row {
		grid-template-columns: 1fr;
	}

	.footer-bottom--fancy {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.aria-footer-main {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		padding-bottom: 14px;
	}

	.aria-footer-aside {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 16px;
		width: 100%;
	}

	.aria-footer-social {
		flex-wrap: wrap;
	}

	.project-meta-bar {
		grid-template-columns: 1fr;
		padding-left: 24px;
		padding-right: 24px;
	}

	.project-story,
	.project-gallery-wrap {
		padding-left: 24px;
		padding-right: 24px;
	}

	.pf-masonry {
		gap: 8px;
	}

	.portfolio-lightbox {
		padding: 20px;
	}

	.portfolio-lightbox-prev { left: 12px; }
	.portfolio-lightbox-next { right: 12px; }
}

@media (min-width: 1101px) {
	.aria-header-nav .v-social {
		display: none;
	}

	.v-links .menu-item-has-children {
		position: relative;
	}
	.v-links .sub-menu {
		position: absolute;
		left: 50%;
		top: calc(100% + 14px);
		transform: translateX(-50%) translateY(6px);
		min-width: 180px;
		padding: 10px 0;
		background: rgba(249, 247, 244, 0.98);
		border: 1px solid rgba(184, 149, 110, 0.25);
		box-shadow: 0 16px 40px rgba(17, 17, 17, 0.08);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
		list-style: none;
		margin: 0;
		z-index: 220;
	}
	.v-links .menu-item-has-children:hover > .sub-menu,
	.v-links .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
	}
	.v-links .sub-menu .menu-item a {
		display: block;
		padding: 10px 18px;
		font-size: 0.58rem;
		opacity: 0.75;
	}
	.v-links .sub-menu .menu-item a:hover,
	.v-links .sub-menu .current-menu-item > a {
		opacity: 1;
		color: var(--gold, #B8956E);
		background: rgba(184, 149, 110, 0.08);
	}
}