/* ==========================================================
   Angel Nails – strona w budowie
   ========================================================== */

:root {
	--accent: #e0457b; /* róż – akcenty, ceny, "strona w budowie" */
	--ink: #1c1c1c; /* prawie czarny – nagłówki */
	--text: #3d3d3d; /* tekst akapitów */
	--tile-a: #f6ccd7; /* jaśniejszy pasek kafelka */
	--tile-b: #f0bcca; /* ciemniejszy pasek kafelka */
	--line: #ececec; /* linia nad stopką */
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	height: 100%;
}

/* body = header + main + footer w kolumnie, razem dokładnie na wysokość ekranu */
body {
	height: 100vh;
	height: 100svh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	font-family: 'Quicksand', 'Segoe UI', system-ui, sans-serif;
	background: #fff;
	color: var(--text);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--accent);
	color: #fff;
}

/* wyśrodkowana kolumna treści – rozciąga się, żeby wypełnić miejsce między
   nagłówkiem a stopką, bez wychodzenia poza ekran */
.page {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: 430px;
	margin: 0 auto;
	padding: clamp(14px, 4vh, 48px) 24px 0;
	text-align: center;
}

/* ---------- logo ---------- */

.logo {
	display: block;
	width: min(200px, 60%);
	height: auto;
	margin: 0 auto;
	flex-shrink: 0;
}

/* ---------- nagłówki i teksty ---------- */

.badge {
	margin-top: clamp(10px, 3vh, 34px);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--accent);
	flex-shrink: 0;
}

h1 {
	margin-top: 6px;
	font-size: clamp(1.9rem, 7vh, 3.4rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--ink);
	flex-shrink: 0;
}

.lead {
	margin-top: clamp(8px, 2vh, 20px);
	font-size: clamp(0.92rem, 2.4vh, 1.08rem);
	font-weight: 500;
	flex-shrink: 0;
}

.lead-one {
	margin-bottom: 0.2em;
}

.lead strong {
	color: var(--accent);
	font-weight: 700;
}

/* ---------- galeria + ceny ---------- */

.gallery {
	margin-top: clamp(14px, 4vh, 38px);
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* mobile: pasek jednego zdjęcia na ekran, przewijany/swipe ze snapem */
.gallery-track {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: 14px;
}

.gallery-track::-webkit-scrollbar {
	display: none;
}

.tile {
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tile-img-btn {
	display: block;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	border-radius: 22px;
}

.tile-img-btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.tile img {
	display: block;
	height: clamp(120px, 30vh, 320px);
	width: auto;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 22px;
	color: transparent; /* chowa tekst alt, dopóki nie wgrasz zdjęć */
	/* różowe paski – widoczne do czasu podmiany na zdjęcia */
	background: repeating-linear-gradient(45deg, var(--tile-a) 0 14px, var(--tile-b) 14px 28px);
	transition: opacity 0.15s ease;
}

.tile-img-btn:hover img,
.tile-img-btn:focus-visible img {
	opacity: 0.9;
}

.price {
	margin-top: 8px;
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--accent);
}

/* kropki nawigacyjne slidera – tylko mobile */
.gallery-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
}

.dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--tile-b);
	cursor: pointer;
	transition:
		background 0.2s ease,
		transform 0.2s ease;
}

.dot.is-active {
	background: var(--accent);
	transform: scale(1.3);
}

/* ---------- stopka / Instagram ---------- */

.insta {
	margin-top: clamp(14px, 3vh, 44px);
	padding-top: clamp(10px, 2vh, 30px);
	border-top: 1px solid var(--line);
	flex-shrink: 0;
}

.footer {
	flex-shrink: 0;
	width: 100%;
	max-width: 430px;
	margin: 0 auto;
	padding: clamp(8px, 2vh, 20px) 24px clamp(10px, 2vh, 24px);
	text-align: center;
}

.instagram {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 1.06rem;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	transition: color 0.2s ease;
}

.instagram svg {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
}

.instagram:hover,
.instagram:focus-visible {
	color: var(--accent);
}

.instagram:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
	border-radius: 6px;
}

/* ---------- tablety i desktop ---------- */

@media (min-width: 768px) {
	.page {
		max-width: 640px;
		padding: clamp(24px, 5vh, 64px) 32px 0;
	}
	.logo {
		width: 280px;
	}
	.badge {
		margin-top: clamp(16px, 4vh, 42px);
	}
	.lead {
		font-size: clamp(1.02rem, 2.2vh, 1.16rem);
	}
	.gallery {
		margin-top: clamp(20px, 4vh, 46px);
	}

	/* od 768px: slider wyłączony, z powrotem siatka 3 kolumn */
	.gallery-track {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		overflow: visible;
		scroll-snap-type: none;
		gap: 22px;
	}
	.tile {
		flex: initial;
	}
	.tile-img-btn {
		width: 100%;
		border-radius: 26px;
	}
	.tile img {
		width: 100%;
		height: auto;
		max-width: none;
		border-radius: 26px;
	}
	.price {
		font-size: 1.1rem;
		margin-top: 12px;
	}
	.gallery-dots {
		display: none;
	}
	.footer {
		max-width: 640px;
		padding: clamp(12px, 3vh, 24px) 32px clamp(16px, 3vh, 32px);
	}
}

/* ---------- dvh zamiast vh tam, gdzie wspierane ----------
   vh w Safari na iOS liczy się od największego możliwego viewportu
   (bez schowanego paska adresu), a wysokość strony (body) liczymy
   w dvh (dynamiczny, kurczy się gdy pasek adresu jest widoczny).
   Bez tego odstępy nie kurczą się razem z realnie dostępnym miejscem
   i np. cena pod zdjęciem wypada poza ekran mimo braku scrolla. */
@supports (height: 100dvh) {
	.page {
		padding-top: clamp(14px, 3dvh, 48px);
	}
	.badge {
		margin-top: clamp(8px, 2dvh, 34px);
	}
	h1 {
		font-size: clamp(2.2rem, 6.5dvh, 3.4rem);
	}
	.lead {
		margin-top: clamp(8px, 1.4dvh, 20px);
		font-size: clamp(1rem, 2.4dvh, 1.08rem);
		line-height: 1.4;
	}
	.gallery {
		margin-top: clamp(10px, 2.2dvh, 38px);
	}
	.insta {
		margin-top: clamp(10px, 1.6dvh, 44px);
		padding-top: clamp(8px, 1dvh, 30px);
	}
	.footer {
		padding: clamp(6px, 0.8dvh, 20px) 24px clamp(8px, 0.8dvh, 24px);
	}
}

/* wysokość zdjęcia liczona z dvh tylko na mobile (slider) – na desktopie
   galeria to siatka 3 kolumn z width:100%; height:auto (patrz niżej),
   ta reguła nie może tam wyciekać, bo razem ze stałą szerokością
   spłaszcza zdjęcie zamiast trzymać kwadrat */
@media (max-width: 767px) {
	@supports (height: 100dvh) {
		.tile img {
			height: clamp(150px, 27dvh, 300px);
		}
	}
}

/* telefony z zapasem wysokości (iPhone 6/7/8 Plus, Nexus 5X i wyżej) –
   ten dodatkowy zapas oddajemy zdjęciu i górnemu marginesowi, zamiast
   skalować wszystkie odstępy po równo */
@media (min-height: 700px) and (max-width: 767px) {
	@supports (height: 100dvh) {
		.page {
			padding-top: clamp(20px, 4dvh, 56px);
		}
		.tile img {
			height: clamp(180px, 30dvh, 340px);
		}
		.badge {
			margin-top: clamp(8px, 1.3dvh, 30px);
		}
		.gallery {
			margin-top: clamp(10px, 1.6dvh, 34px);
		}
		.insta {
			margin-top: clamp(10px, 1.1dvh, 40px);
			padding-top: clamp(8px, 0.7dvh, 26px);
		}
	}
}

@media (min-width: 768px) {
	@supports (height: 100dvh) {
		.page {
			padding-top: clamp(24px, 5dvh, 64px);
		}
		.badge {
			margin-top: clamp(16px, 4dvh, 42px);
		}
		.lead {
			font-size: clamp(1.02rem, 2.2dvh, 1.16rem);
		}
		.gallery {
			margin-top: clamp(20px, 4dvh, 46px);
		}
		.footer {
			padding: clamp(12px, 3dvh, 24px) 32px clamp(16px, 3dvh, 32px);
		}
	}
}

/* ---------- bardzo niskie ekrany (np. telefon w poziomie) ---------- */

@media (max-height: 560px) and (max-width: 767px) {
	.logo {
		width: min(150px, 50%);
	}
	.badge,
	.lead {
		display: none;
	}
	h1 {
		font-size: clamp(1.5rem, 6vh, 2.2rem);
		margin-top: 4px;
	}
	.tile img {
		height: clamp(90px, 22vh, 160px);
	}
}

/* ---------- lightbox (powiększone zdjęcie) ---------- */

.lightbox {
	border: none;
	padding: 0;
	background: transparent;
	max-width: 92vw;
	max-height: 92vh;
	margin: auto;
}

.lightbox::backdrop {
	background: rgba(20, 10, 14, 0.86);
}

.lightbox-img {
	display: block;
	max-width: 92vw;
	max-height: 92vh;
	width: auto;
	height: auto;
	border-radius: 16px;
}

.lightbox-close {
	position: fixed;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
	background: var(--accent);
}

.lightbox-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}