/* ==========================================================================
   The Love Nails — core: structure and behaviour shared by every skin
   (site.css = white version, the glass child theme has its own skin).
   Skins set the colours: --paper --ink --muted --em --blush --sage --lilac --butter --sky --menu-bg.
   ========================================================================== */

:root {
	--display: Georgia, serif; /* set per font preset in inc/fonts.php */
	--w-display: 400;
	--w-text: 400;
	--sans: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
	--pad: clamp(16px, 4.5vw, 72px);
	--gap: clamp(8px, 1vw, 14px);
	--arch: 999px 999px 0 0;
	--round: 16px;                          /* photo corners */
	--glass: saturate(1.6) blur(18px);      /* frosted glass, like the cloche */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2 { margin: 0; font-family: var(--display); font-weight: var(--w-display); line-height: .9; text-transform: uppercase; }
:focus-visible { outline: 2px solid var(--em); outline-offset: 4px; }

/* burger: two lines that turn into a cross */
.hdr-burger { display: none; width: 44px; height: 44px; margin-right: -10px; padding: 0; background: none; border: 0; border-radius: 50%; color: inherit; cursor: pointer; }
.hdr-burger span, .hdr-burger span::before { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .35s cubic-bezier(.7, 0, .2, 1); }
.hdr-burger span { top: 17px; }
.hdr-burger span::before { content: ""; top: 8px; left: 6px; right: 0; }
.hdr.is-menu .hdr-burger span { transform: translateY(4px) rotate(45deg); }
.hdr.is-menu .hdr-burger span::before { left: 0; transform: translateY(-8px) rotate(-90deg); }

/* language switcher: the current code, the list opens under it (site.js) */
.lang { position: relative; z-index: 2; }
.lang-btn { min-width: 44px; height: 36px; padding: 0 12px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; font: 500 13px/1 var(--sans); letter-spacing: .06em; cursor: pointer; }
.lang-list { position: absolute; right: 0; top: calc(100% + 10px); min-width: 170px; margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 16px 40px rgba(20, 30, 25, .18); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.lang-list[hidden] { display: none; }
.lang-list a { display: block; padding: 10px 14px; border-radius: 10px; font: 400 15px/1.2 var(--sans); text-transform: none; text-decoration: none; }
.lang-list a:hover { background: rgba(22, 38, 31, .06); }
.lang-list a[aria-current] { font-weight: 500; color: var(--em); }
.lang-list a[aria-current]::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 10px; border-radius: 50%; background: currentColor; vertical-align: middle; }
@media (min-width: 761px) {
	.hdr-nav { margin-left: auto; }
	.lang { margin-left: 22px; }
}

/* works masonry: columns and pastel fillers are built in site.js */
.tiles { columns: 4 220px; column-gap: var(--gap); }
.tiles > .tile { margin-bottom: var(--gap); break-inside: avoid; }
.tiles.is-built { display: flex; gap: var(--gap); columns: auto; }
.tiles-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.tile { position: relative; display: block; aspect-ratio: 1 / var(--r, 1.25); overflow: hidden; border-radius: var(--round); cursor: zoom-in; background: var(--sage); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.tile:hover img { transform: scale(1.04); }
@media (hover: hover) {
	.tile::after, .review::after { content: var(--t-view, "Смотреть"); position: absolute; left: 50%; top: 50%; padding: 10px 20px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 14px; transform: translate(-50%, -50%); opacity: 0; transition: opacity .25s; }
	.tile:hover::after, .review:hover::after { opacity: 1; }
}
.fill { position: relative; display: flex; align-items: center; justify-content: center; flex: none; border-radius: var(--round); background: var(--c); }
.fill--arch::before { content: ""; width: 34%; height: 58%; border: 1px solid rgba(22, 38, 31, .22); border-bottom: 0; border-radius: var(--arch); }
.fill--cta { flex-direction: column; gap: 6px; text-decoration: none; text-align: center; transition: background .25s; }
.fill--cta b { font: var(--w-display) clamp(22px, 2.6vw, 42px)/1 var(--display); text-transform: uppercase; }
.fill--cta span { font-size: 14px; color: var(--muted); }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(255, 255, 255, .98); }
.lb.is-open { display: flex; }
.lb img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; opacity: 0; transition: opacity .2s; }
.lb img.is-loaded { opacity: 1; }
.lb button { position: absolute; padding: 18px; background: none; border: 0; color: var(--ink); font: var(--w-display) 40px/1 var(--display); cursor: pointer; }
.lb-close { top: 10px; right: 14px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 8px; }
.lb-next { right: 8px; }
.lb-count { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-size: 14px; color: var(--muted); }

/* phones: full-screen menu revealed as a circle from the burger, and the booking dock */
.nav-social, .dock.pill { display: none; }  /* .dock.pill: beats the skins' .pill display */
@media (max-width: 760px) {
	.hdr-burger { display: block; position: relative; z-index: 2; }
	.hdr-nav { --from: circle(0 at calc(100% - 32px) 30px); position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 80px var(--pad) 40px; background: var(--menu-bg, var(--blush)); color: var(--ink); font: var(--w-display) 48px/1.15 var(--display); text-transform: uppercase; clip-path: var(--from); visibility: hidden; transition: clip-path .55s cubic-bezier(.7, 0, .2, 1), visibility 0s .55s; }
	.hdr-nav.is-open { clip-path: circle(150% at calc(100% - 32px) 30px); visibility: visible; transition: clip-path .55s cubic-bezier(.7, 0, .2, 1); }
	.hdr-nav > * { opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .3s; }
	.hdr-nav.is-open > * { opacity: 1; transform: none; transition: opacity .4s .2s, transform .4s .2s; }
	.hdr-nav.is-open > :nth-child(2) { transition-delay: .25s; }
	.hdr-nav.is-open > :nth-child(3) { transition-delay: .3s; }
	.hdr-nav.is-open > :nth-child(4) { transition-delay: .35s; }
	.hdr-nav.is-open > :nth-child(n+5) { transition-delay: .4s; }
	.hdr-nav .pill { order: 2; margin-top: 32px; padding: 15px 30px; border-color: var(--em); background: var(--em); color: var(--paper); font-size: 15px; text-transform: none; }
	.nav-social { order: 3; display: flex; gap: 24px; margin-top: 24px; font: 400 15px var(--sans); text-transform: none; }
	.hdr.is-menu { background: none; box-shadow: none; }  /* skins keep backdrop-filter off .is-menu: it would trap the fixed menu */
	.hdr.is-menu .hdr-brand { position: relative; z-index: 2; }
	.lang { margin-left: auto; margin-right: 6px; }
	.hdr.is-menu ~ .dock { visibility: hidden; }
	.dock.pill { display: block; position: fixed; left: 50%; bottom: 16px; z-index: 60; white-space: nowrap; box-shadow: 0 10px 30px rgba(10, 20, 16, .25); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); transform: translate(-50%, 160%); transition: transform .35s ease; }
	.dock.is-shown { transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tile img, .dock, .hdr-nav, .hdr-nav > *, .hdr-burger span, .hdr-burger span::before { transition: none !important; } }