/*
	Beauty Atelier — restyling na bazie Astral by HTML5 UP
	Paleta: kremowe tło, róż pudrowy, grafit, złoty akcent.
	Ten plik nadpisuje kolory/typografię z main.css i dodaje nowe komponenty
	(karty oferty, opinie, lightbox galerii) — main.css pozostaje nietknięty.
*/

:root {
	--color-bg: #F7F1EC;
	--color-panel: #FFFDFB;
	--color-accent: #D9A9A0;
	--color-accent-dark: #C98E82;
	--color-ink: #2B2420;
	--color-ink-soft: #5C5248;
	--color-gold: #C9A25C;
	--color-gold-dark: #B48B44;
	--color-border: rgba(43, 36, 32, 0.12);
}

/* Base */

	body {
		background-image: none;
		background-color: var(--color-bg);
	}

	body, input, textarea, select {
		font-family: 'Work Sans', sans-serif;
		color: var(--color-ink-soft);
	}

	strong, b, h1, h2, h3, h4, h5, h6 {
		font-family: 'Fraunces', serif;
		font-weight: 600;
		color: var(--color-ink);
	}

	#main > .panel.intro header h1 {
		font-weight: 700;
	}

	header > p {
		color: var(--color-ink-soft);
	}

	blockquote {
		border-left-color: var(--color-accent);
	}

	hr {
		border-top-color: var(--color-border);
	}

	#main a:not(.button):not(.jumplink) {
		color: var(--color-ink);
		text-decoration-color: var(--color-accent);
	}

	#main a:not(.button):not(.jumplink):hover {
		color: var(--color-gold-dark);
		text-decoration-color: var(--color-gold);
	}

/* Form */

	form label {
		color: var(--color-ink);
	}

	form input[type="text"],
	form input[type="email"],
	form input[type="password"],
	form select,
	form textarea {
		background: #F1E9E1;
		color: var(--color-ink);
	}

		form input[type="text"]:focus,
		form input[type="email"]:focus,
		form input[type="password"]:focus,
		form select:focus,
		form textarea:focus {
			background: #EBE0D5;
		}

	form ::placeholder {
		color: #A79C8E;
	}

/* Buttons */

	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button,
	.button {
		background-color: var(--color-ink);
		color: #F7F1EC;
		letter-spacing: 0.03em;
		text-decoration: none;
	}

		input[type="button"]:hover,
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		button:hover,
		.button:hover {
			background-color: var(--color-gold);
			color: var(--color-ink);
		}

		input[type="button"]:active,
		input[type="submit"]:active,
		input[type="reset"]:active,
		button:active,
		.button:active {
			background-color: var(--color-gold-dark);
			color: var(--color-ink);
		}

/* Nav */

	#nav a {
		color: var(--color-ink);
	}

		#nav a:after {
			border-bottom-color: var(--color-gold);
		}

		#nav a span {
			background: var(--color-ink);
			color: #F7F1EC;
		}

			#nav a span:after {
				border-top-color: var(--color-ink);
			}

		#nav a:hover {
			color: var(--color-gold-dark);
		}

/* Wrapper / Main */

	#main {
		background: var(--color-panel);
		box-shadow: 0px 1px 0px 0px rgba(43, 36, 32, 0.15), 0 1.5em 3em rgba(43, 36, 32, 0.08);
	}

	#main > .panel.intro .pic .arrow {
		background: rgba(43, 36, 32, 0.75);
	}

	/* Na bardzo szerokich ekranach karta (max-width: 45em z main.css) zostaje
	   mała i otoczona dużą ilością pustego tła — poszerzamy ją tam, żeby
	   layout nie wyglądał na niedokończony. */
	@media screen and (min-width: 1400px) {
		/* main.css ustawia stały `width: 45em` na #wrapper — samo podbicie
		   max-width nic nie zmienia, trzeba nadpisać też width. */
		#wrapper {
			width: 64em;
			max-width: 64em;
		}
	}

	/* Alternatywa (Opcja B) zamiast poszerzania karty: subtelne, rozmyte tło
	   za #wrapper na dużych ekranach, żeby pusta przestrzeń wyglądała na
	   celowy, oddychający layout zamiast przypadkowej. Zostawione jako
	   komentarz do decyzji — obie opcje nie powinny być włączone naraz.
	@media screen and (min-width: 1400px) {
		body {
			background-image: url('../../images/hero.jpg');
			background-size: cover;
			background-position: center;
		}
		body:before {
			content: '';
			position: fixed;
			top: 0; left: 0; width: 100%; height: 100%;
			background: rgba(247, 241, 236, 0.85);
			backdrop-filter: blur(50px);
			z-index: -1;
		}
	}
	*/

/* Footer */

	#footer {
		color: rgba(43, 36, 32, 0.55);
	}

		#footer a {
			color: rgba(43, 36, 32, 0.75);
		}

			#footer a:hover {
				color: var(--color-gold-dark);
			}

		#footer .copyright li {
			border-left-color: rgba(43, 36, 32, 0.2);
		}

		/* Wymagany przez licencję CCA 3.0 szablonu credit dla HTML5 UP —
		   zostaje w treści (link, nie usunięty/ukryty), ale wyciszony
		   kolorystycznie tak, żeby wzrok szedł na "Wykonanie: widacwas.pl". */
		#footer .copyright li.credit,
		#footer .copyright li.credit a {
			color: rgba(43, 36, 32, 0.35);
		}

			#footer .copyright li.credit a:hover {
				color: rgba(43, 36, 32, 0.6);
			}

/* Service cards (Oferta) */

	.service-card {
		height: 100%;
		padding: 1.75em 1.5em;
		background: var(--color-bg);
		border: solid 1px var(--color-border);
		border-top: solid 3px var(--color-accent);
		transition: border-color .25s ease-in-out, transform .25s ease-in-out;
	}

		.service-card:hover {
			border-top-color: var(--color-gold);
			transform: translateY(-0.25em);
		}

		.service-card h3 {
			font-size: 1.1em;
			margin-bottom: 0.5em;
			line-height: 1.3em;
		}

		.service-card p {
			font-size: 0.85em;
			margin-bottom: 0.75em;
		}

		.service-card .price {
			font-family: 'Fraunces', serif;
			font-size: 1em;
			color: var(--color-gold-dark);
			margin-bottom: 0;
		}

/* Review cards (Opinie) */

	.review-card {
		height: 100%;
		padding: 1.75em 1.5em;
		background: var(--color-bg);
		border: solid 1px var(--color-border);
		text-align: center;
	}

		.review-card blockquote {
			border-left: 0;
			padding: 0;
			font-family: 'Fraunces', serif;
			font-style: italic;
			font-size: 1.05em;
			color: var(--color-ink);
			margin-bottom: 1em;
		}

		.review-author {
			color: var(--color-gold-dark);
			font-size: 0.85em;
			letter-spacing: 0.03em;
			text-transform: uppercase;
			margin-bottom: 0;
		}

/* Contact info block */

	.contact-info {
		margin-top: 2em;
		padding-top: 2em;
		border-top: solid 1px var(--color-border);
	}

		.contact-info h3 {
			margin-bottom: 0.75em;
		}

		.contact-info ul {
			list-style: none;
			padding-left: 0;
			margin-bottom: 0;
		}

			.contact-info ul li {
				padding-left: 0;
				margin-bottom: 0.6em;
				font-size: 0.85em;
			}

			.contact-info ul li .icon {
				color: var(--color-gold-dark);
				width: 1.4em;
				display: inline-block;
				text-align: center;
			}

/* Gallery */

	/* Fixed aspect-ratio box so mixed portrait/landscape photos stay in a neat,
	   even grid instead of rows jumping to whatever height each photo has.
	   TODO: większość realnych zbliżeń beauty (oko/brwi) jest w pionie — po
	   wgraniu docelowych zdjęć rozważ zmianę na aspect-ratio: 3 / 4, żeby
	   kadrowanie nie ucinało niepotrzebnie góry/dołu. Trzeba wtedy też
	   zaktualizować width/height na <img> w index.html (np. 600x800). */
	#work .image.fit {
		aspect-ratio: 4 / 3;
		overflow: hidden;
		background-color: var(--color-bg);
	}

	#work .image.fit img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		cursor: zoom-in;
		opacity: 0;
		transition: opacity .3s ease-in-out;
	}

	#work .image.fit img.loaded {
		opacity: 1;
	}

	#work .image.fit:hover img.loaded {
		opacity: 0.85;
	}

/* Lightbox */

	.lightbox {
		display: none;
		position: fixed;
		z-index: 1000;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(43, 36, 32, 0.92);
		text-align: center;
	}

		.lightbox.active {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.lightbox img {
			max-width: 90vw;
			max-height: 85vh;
			box-shadow: 0 1em 3em rgba(0, 0, 0, 0.5);
		}

		.lightbox-close {
			position: absolute;
			top: 1.25em;
			right: 1.5em;
			width: 2.25em;
			height: 2.25em;
			line-height: 2em;
			background: transparent;
			border: solid 2px rgba(247, 241, 236, 0.6);
			border-radius: 50%;
			color: #F7F1EC;
			font-size: 1.5em;
			cursor: pointer;
			padding: 0;
		}

			.lightbox-close:hover {
				border-color: var(--color-gold);
				color: var(--color-gold);
			}

	@media screen and (max-width: 736px) {
		.service-card,
		.review-card {
			margin-bottom: 0;
		}
	}