/* ==========================================================================
   Aura Studios – hlavní styly
   Paleta: krémová, světle béžová, kašmír, zlato. Písmo: Newsreader (nadpisy, opsz zapíchnutá na 22) + Montserrat (text).
   ========================================================================== */

:root {
	--cream: #FBF8F3;
	--cream-2: #F4EEE5;
	--beige: #EADFD0;
	--beige-2: #DDD0BC;
	--cashmere: #CDBBA3;
	--taupe: #A08B72;
	--gold: #C29A45;
	--gold-dark: #A57E2C;
	--gold-light: #E6CB7C;
	--gold-grad: linear-gradient(135deg, #A57E2C 0%, #D4B25A 40%, #EAD48F 55%, #B8892F 100%);
	--ink: #2A2521;
	--ink-2: #6B5F55;
	--ink-3: #9A8E82;
	--dark: #211D19;
	--dark-2: #2B2622;
	--white: #FFFFFF;

	--font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
	--font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--container: 1200px;
	--gutter: clamp(20px, 4vw, 40px);
	--radius: 22px;
	--radius-sm: 14px;
	--arch: 999px 999px var(--radius) var(--radius);

	--shadow-sm: 0 8px 24px -14px rgba(42, 37, 33, .22);
	--shadow: 0 24px 60px -30px rgba(42, 37, 33, .30);
	--shadow-gold: 0 12px 30px -14px rgba(194, 154, 69, .6);

	--header-h: 84px;
	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   Reset & základ
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.75;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
body.nav-open { overflow: hidden; }
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.005em;
	margin: 0 0 .5em;
	color: var(--ink);
	text-wrap: balance;
}
h1 em, h2 em, h3 em, .section-title em { font-style: italic; font-weight: 500; color: var(--gold-dark); }
strong { font-weight: 600; }
::selection { background: var(--gold-light); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.icon { width: 1.25em; height: 1.25em; flex: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--ink); color: var(--cream); padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.anchor { position: static; display: block; height: 0; visibility: hidden; scroll-margin-top: 28px; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* --------------------------------------------------------------------------
   Typografie – prvky
   -------------------------------------------------------------------------- */
.eyebrow {
	display: inline-flex; align-items: center; gap: 14px;
	margin: 0 0 18px;
	font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-dark);
}
.eyebrow::before, .eyebrow::after { content: ""; width: 34px; height: 1px; background: var(--gold); opacity: .8; }
.eyebrow--left::after { display: none; }

.section-title { font-size: clamp(2.1rem, 3.1vw + .9rem, 3.4rem); line-height: 1.08; margin-bottom: .45em; }
.section-text { font-size: 1.05rem; color: var(--ink-2); max-width: 640px; margin: 0; }
.section-head { margin-bottom: clamp(40px, 6vw, 64px); }
.section-head--center { text-align: center; }
.section-head--center .section-text { margin-inline: auto; }
.section-head--center .section-title { margin-inline: auto; max-width: 780px; }
.section-note { text-align: center; color: var(--ink-2); margin-top: clamp(28px, 4vw, 44px); font-size: .95rem; }
.section-note__link { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--gold); }
.section-note__link:hover { color: var(--gold-dark); }
.admin-hint { margin: 24px auto 0; max-width: 720px; padding: 14px 18px; border: 1px dashed var(--gold); border-radius: var(--radius-sm); background: var(--white); color: var(--ink-2); font-size: .9rem; text-align: center; }
.admin-hint a { color: var(--gold-dark); font-weight: 600; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Tlačítka
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .6em;
	padding: 1.05em 2.1em;
	border-radius: 999px;
	font-family: var(--font-body); font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1;
	border: 1px solid transparent;
	white-space: nowrap;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), filter .3s var(--ease);
}
.btn .icon { width: 1.05em; height: 1.05em; }
.btn__icon--left { order: -1; }
.btn-gold { background: var(--gold-grad); color: var(--ink); box-shadow: var(--shadow-gold); }
.btn-gold:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 34px -14px rgba(194, 154, 69, .75); }
.btn-outline { border-color: var(--gold); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); }
.btn-light { border-color: rgba(255,255,255,.35); color: var(--cream); }
.btn-light:hover { background: var(--cream); color: var(--ink); }
.btn-sm { padding: .85em 1.5em; font-size: .7rem; }
.btn-block { width: 100%; }
@media (max-width: 640px) {
	.btn { white-space: normal; text-align: center; line-height: 1.4; max-width: 100%; }
}

/* Grid/flex potomci nesmí roztahovat rodiče (dlouhé slovo, obrázek s poměrem stran). */
.hero__inner > *, .about > *, .contact-grid > *, .services-grid > *, .reviews-grid > *, .gallery-grid > * { min-width: 0; }
.section-title, .hero__title, .page-hero__title { overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   Hlavička
   -------------------------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 100;
	border-bottom: 1px solid transparent;
	transition: border-color .3s, box-shadow .3s;
}
/* Rozostřené pozadí je na pseudo-elementu: backdrop-filter přímo na hlavičce by
   rozbil position: fixed u mobilního menu (stal by se jeho containing blockem). */
.site-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: rgba(251, 248, 243, .86);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	transition: background-color .3s;
}
.site-header.is-scrolled { border-bottom-color: var(--beige); box-shadow: 0 10px 30px -22px rgba(42, 37, 33, .35); }
.site-header.is-scrolled::before { background: rgba(251, 248, 243, .94); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }
.site-logo { display: inline-flex; align-items: center; flex: none; }
.site-logo .logo-img { height: 46px; width: auto; }

.site-nav__list { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.site-nav__list a {
	position: relative; display: inline-block; padding: 8px 0;
	font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}
.site-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.site-nav__list a:hover::after, .site-nav__list .is-current > a::after, .site-nav__list .current-menu-item > a::after { transform: scaleX(1); }
.site-nav__list a:hover { color: var(--gold-dark); }
.site-nav__extra { display: none; }

.site-header__actions { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; border: 1px solid var(--beige-2); background: var(--white); }
.nav-toggle__bars { display: flex; flex-direction: column; gap: 5px; width: 18px; }
.nav-toggle__bars i { display: block; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 960px) {
	:root { --header-h: 72px; }
	.site-logo .logo-img { height: 38px; }
	.nav-toggle { display: inline-flex; }
	.site-header__cta { display: none; }
	.site-nav {
		position: fixed; inset: var(--header-h) 0 0 0; z-index: 90;
		display: flex; flex-direction: column; justify-content: space-between;
		padding: 32px var(--gutter) 40px;
		background: var(--cream);
		opacity: 0; visibility: hidden; transform: translateY(-12px);
		transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s;
		overflow-y: auto;
	}
	.site-nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s; }
	.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.site-nav__list li { border-bottom: 1px solid var(--beige); }
	.site-nav__list a { display: block; padding: 18px 0; font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; letter-spacing: .01em; text-transform: none; }
	.site-nav__list a::after { display: none; }
	.site-nav__extra { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 32px; }
}
@media (min-width: 961px) and (max-width: 1100px) {
	.site-header__cta { display: none; }
}

/* --------------------------------------------------------------------------
   Sekce
   -------------------------------------------------------------------------- */
.section { position: relative; padding-block: clamp(72px, 9vw, 128px); }
.section--sluzby, .section--recenze, .section--galerie { background: var(--cream); }
.section--tym, .section--kontakt { background: var(--cream-2); }
.section--onas { background: var(--cream); }
.section--poukaz { padding-block: 0 clamp(72px, 9vw, 128px); background: var(--cream); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--cream); }
.hero__bg { position: absolute; inset: 0; pointer-events: none; background:
	radial-gradient(60% 55% at 85% 20%, rgba(230, 203, 124, .28), transparent 70%),
	radial-gradient(45% 40% at 10% 90%, rgba(205, 187, 163, .35), transparent 70%); }
.hero__inner {
	position: relative;
	display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(40px, 6vw, 88px);
	min-height: min(calc(100vh - var(--header-h)), 900px);
	min-height: min(calc(100svh - var(--header-h)), 900px);
	padding-block: clamp(56px, 8vw, 96px);
}
.hero__title { font-size: clamp(2.9rem, 5.2vw + 1rem, 5.4rem); line-height: 1.02; margin-bottom: .4em; }
.hero__text { font-size: 1.08rem; color: var(--ink-2); max-width: 520px; margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 2.4rem; }
.hero__benefits { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .82rem; font-weight: 500; color: var(--ink-2); }
.hero__benefits li { display: inline-flex; align-items: center; gap: 8px; }
.hero__benefits .icon { color: var(--gold-dark); width: 1.1em; height: 1.1em; }

.hero__media { position: relative; justify-self: end; width: min(100%, 520px); }
.hero__frame { position: relative; aspect-ratio: 4 / 5; border-radius: var(--arch); overflow: hidden; box-shadow: var(--shadow); background: var(--beige); }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; }
.hero__media::before { content: ""; position: absolute; inset: 0; transform: translate(20px, 20px); border: 1px solid var(--gold); border-radius: var(--arch); opacity: .8; pointer-events: none; }
.hero__card {
	position: absolute; left: -28px; bottom: 44px;
	display: flex; align-items: center; gap: 14px;
	padding: 16px 20px 16px 16px;
	background: var(--white); border: 1px solid var(--beige); border-radius: 16px; box-shadow: var(--shadow-sm);
}
.hero__card-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold-grad); color: var(--ink); }
.hero__card-icon .icon { width: 22px; height: 22px; }
.hero__card-text { display: flex; flex-direction: column; line-height: 1.3; }
.hero__card-text strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.hero__card-text small { font-size: .74rem; color: var(--ink-2); letter-spacing: .04em; }

@media (max-width: 960px) {
	.hero__inner { grid-template-columns: 1fr; min-height: 0; padding-block: 48px 64px; gap: 44px; }
	.hero__media { justify-self: center; width: min(100%, 440px); }
	.hero__card { left: 0; bottom: 24px; }
	.hero__text { max-width: none; }
}
@media (max-width: 560px) {
	.hero__title { font-size: clamp(2.5rem, 11vw, 3.4rem); }
	.hero__actions .btn { width: 100%; }
	.hero__frame { aspect-ratio: 4 / 4.6; }
	.hero__card { padding: 12px 16px 12px 12px; }
	.hero__media::before { transform: translate(12px, 12px); }
}

/* --------------------------------------------------------------------------
   Služby
   -------------------------------------------------------------------------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 32px); }
.service-card {
	display: flex; flex-direction: column;
	background: var(--white); border: 1px solid var(--beige); border-radius: var(--radius); overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.service-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--beige); }
.service-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.service-card:hover .service-card__img { transform: scale(1.05); }
.service-card__icon {
	position: absolute; left: 22px; bottom: -24px;
	display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
	background: var(--gold-grad); color: var(--ink); box-shadow: var(--shadow-gold); border: 3px solid var(--white);
}
.service-card__icon .icon { width: 24px; height: 24px; }
.service-card__body { display: flex; flex-direction: column; flex: 1; padding: 40px 26px 26px; }
.service-card__title { font-size: 1.85rem; font-weight: 600; margin-bottom: .15em; }
.service-card__subtitle { font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 14px; }
.service-card__text { color: var(--ink-2); font-size: .94rem; margin-bottom: 18px; }
.price-list { margin: auto 0 22px; padding-top: 6px; border-top: 1px solid var(--beige); }
.price-row { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; font-size: .9rem; border-bottom: 1px solid var(--cream-2); }
.price-row:last-child { border-bottom: 0; }
.price-row__name { color: var(--ink); }
.price-row__dots { flex: 1; min-width: 16px; border-bottom: 1px dotted var(--beige-2); transform: translateY(-.3em); }
.price-row__price { font-weight: 600; white-space: nowrap; color: var(--ink); }
.service-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.service-card__duration { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ink-2); }
.service-card__duration .icon { color: var(--gold-dark); }

@media (max-width: 960px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .services-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Tým / rezervace
   -------------------------------------------------------------------------- */
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 2.2vw, 28px); }
.team-card {
	flex: 0 1 calc(20% - 22.4px); min-width: 200px;
	display: flex; flex-direction: column;
	background: var(--white); border: 1px solid var(--beige); border-radius: var(--radius); padding: 14px 14px 20px;
	box-shadow: var(--shadow-sm);
	transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.team-card__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--arch); overflow: hidden; background: var(--beige); }
.team-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.team-card:hover .team-card__img { transform: scale(1.04); }
.team-card__tags { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.team-card__tags li { padding: 5px 10px; border-radius: 999px; background: rgba(251, 248, 243, .92); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dark); }
.team-card__body { display: flex; flex-direction: column; flex: 1; text-align: center; padding: 18px 6px 0; }
.team-card__name { font-size: 1.75rem; font-weight: 600; margin-bottom: .1em; }
.team-card__role { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 10px; }
.team-card__text { font-size: .86rem; color: var(--ink-2); margin-bottom: 12px; }
.team-card__ig { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: .8rem; color: var(--ink-2); margin-bottom: 16px; }
.team-card__ig:hover { color: var(--gold-dark); }
.team-card__btn { margin-top: auto; }

@media (max-width: 1100px) { .team-card { flex-basis: calc(33.333% - 19px); } }
@media (max-width: 700px) { .team-card { flex-basis: calc(50% - 9px); min-width: 0; padding: 10px 10px 16px; } .team-card__name { font-size: 1.5rem; } }
@media (max-width: 400px) { .team-card { flex-basis: 100%; } }

/* --------------------------------------------------------------------------
   O nás
   -------------------------------------------------------------------------- */
.about { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: clamp(40px, 6vw, 96px); }
.about__media { position: relative; }
.about__frame { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 4.4; background: var(--beige); }
.about__img { width: 100%; height: 100%; object-fit: cover; }
.about__media::before { content: ""; position: absolute; inset: 0; transform: translate(-18px, 18px); border: 1px solid var(--gold); border-radius: var(--radius); opacity: .7; pointer-events: none; }
.about__accent {
	position: absolute; right: -22px; top: 34px;
	display: flex; align-items: center; gap: 10px; padding: 14px 18px;
	background: var(--gold-grad); color: var(--ink); border-radius: 14px; box-shadow: var(--shadow-gold);
	font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.05;
}
.about__accent .icon { width: 26px; height: 26px; }
.about__text { color: var(--ink-2); font-size: 1.02rem; margin-bottom: 24px; }
.check-list { display: grid; gap: 12px; margin-bottom: 32px; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; font-weight: 500; }
.check-list__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-dark); margin-top: 1px; }
.check-list__icon .icon { width: 14px; height: 14px; }

@media (max-width: 960px) {
	.about { grid-template-columns: 1fr; }
	.about__media { max-width: 520px; margin-inline: auto; width: 100%; }
	.about__accent { right: 0; }
}

/* --------------------------------------------------------------------------
   Recenze
   -------------------------------------------------------------------------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 32px); }
.review-card {
	position: relative; margin: 0; padding: 34px 30px 30px;
	background: var(--white); border: 1px solid var(--beige); border-radius: var(--radius); box-shadow: var(--shadow-sm);
	display: flex; flex-direction: column;
}
.review-card__quote { position: absolute; right: 26px; top: 22px; color: var(--beige-2); }
.review-card__quote .icon { width: 42px; height: 42px; }
.stars { display: inline-flex; gap: 2px; margin-bottom: 16px; }
.stars__star { color: var(--beige-2); }
.stars__star.is-on { color: var(--gold); }
.stars .icon { width: 16px; height: 16px; }
.review-card__text { margin: 0 0 22px; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.45; color: var(--ink); flex: 1; }
.review-card__author { display: flex; flex-direction: column; gap: 2px; padding-top: 18px; border-top: 1px solid var(--beige); }
.review-card__author strong { font-size: .92rem; }
.review-card__author span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

@media (max-width: 960px) { .reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .reviews-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Dárkový poukaz
   -------------------------------------------------------------------------- */
.voucher {
	display: grid; grid-template-columns: 1.1fr .9fr; align-items: stretch;
	background: var(--dark); color: var(--cream); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.voucher__content { position: relative; padding: clamp(40px, 6vw, 80px); }
.voucher__content .section-title { color: var(--cream); }
.voucher__content .section-title em { color: var(--gold-light); }
.voucher__content .eyebrow { color: var(--gold-light); }
.voucher__content .eyebrow::before { background: var(--gold-light); }
.voucher__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(230, 203, 124, .5); color: var(--gold-light); margin-bottom: 26px; }
.voucher__icon .icon { width: 26px; height: 26px; }
.voucher__text { color: rgba(251, 248, 243, .78); max-width: 480px; margin-bottom: 30px; }
.voucher__media { position: relative; min-height: 320px; }
.voucher__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.voucher__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--dark) 0%, rgba(33, 29, 25, 0) 40%); }

@media (max-width: 860px) {
	.voucher { grid-template-columns: 1fr; }
	.voucher__content, .voucher__media { min-width: 0; }
	.voucher__media { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
	.voucher__media::before { background: linear-gradient(0deg, var(--dark) 0%, rgba(33, 29, 25, 0) 45%); }
}

/* --------------------------------------------------------------------------
   Galerie
   -------------------------------------------------------------------------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 22px); }
.gallery-item { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--beige); }
.gallery-item__img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.gallery-item:hover .gallery-item__img { transform: scale(1.06); }
.gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(42, 37, 33, .35), transparent 55%); opacity: 0; transition: opacity .4s; }
.gallery-item:hover::after { opacity: 1; }
.gallery-item__zoom { position: absolute; right: 14px; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cream); color: var(--gold-dark); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s var(--ease); }
.gallery-item:hover .gallery-item__zoom { opacity: 1; transform: none; }
.gallery-more { text-align: center; margin-top: clamp(28px, 4vw, 44px); }

@media (max-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; margin: 0; inset: 0; }
.lightbox::backdrop { background: rgba(33, 29, 25, .94); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox__figure { margin: 0; max-width: min(1200px, 92vw); max-height: 88vh; }
.lightbox__img { max-width: 100%; max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
.lightbox__close, .lightbox__nav { position: fixed; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(251, 248, 243, .12); color: var(--cream); transition: background .25s; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(251, 248, 243, .28); }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 14px; }
.lightbox__nav--next { right: 14px; }
.lightbox__nav .icon, .lightbox__close .icon { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   Kontakt
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact-grid--no-map { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }
.contact-list { display: grid; gap: 22px; margin-bottom: 30px; }
.contact-list__item { display: flex; gap: 18px; align-items: flex-start; }
.contact-list__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--white); border: 1px solid var(--beige-2); color: var(--gold-dark); }
.contact-list__icon .icon { width: 22px; height: 22px; }
.contact-list__body { display: flex; flex-direction: column; gap: 2px; }
.contact-list__body strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.contact-list__body a:not(.contact-list__link) { font-weight: 500; }
.contact-list__body a:hover { color: var(--gold-dark); }
.contact-list__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dark); }
.contact-list__link .icon { width: 1em; height: 1em; transition: transform .3s var(--ease); }
.contact-list__link:hover .icon { transform: translateX(4px); }
.contact-list__note { font-size: .84rem; color: var(--ink-3); margin-top: 6px; }
.hours { margin: 4px 0 0; display: grid; gap: 4px; }
.hours__row { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border-bottom: 1px dotted var(--beige-2); }
.hours__row dt { font-weight: 500; }
.hours__row dd { margin: 0; color: var(--ink-2); white-space: nowrap; }
.contact-map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--beige); box-shadow: var(--shadow-sm); background: var(--beige); aspect-ratio: 4 / 3; }
.contact-map iframe { width: 100%; height: 100%; border: 0; filter: saturate(.75) sepia(.12); }

@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .contact-map { aspect-ratio: 16 / 10; } }

/* Sociální sítě */
.social { display: flex; gap: 10px; }
.social__link { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--beige-2); color: var(--ink); transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); }
.social__link:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-2px); }
.social__link .icon { width: 18px; height: 18px; }
.social--footer .social__link { border-color: rgba(255,255,255,.18); color: var(--cream); }
.social--footer .social__link:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* --------------------------------------------------------------------------
   Patička
   -------------------------------------------------------------------------- */
.site-footer { background: var(--dark); color: rgba(251, 248, 243, .72); padding-block: clamp(56px, 7vw, 88px) 28px; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1.2fr; gap: clamp(32px, 4vw, 64px); padding-bottom: clamp(36px, 5vw, 56px); border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-logo { display: inline-block; margin-bottom: 20px; }
.footer-logo .logo-img { height: 46px; width: auto; }
.footer-brand__text { max-width: 340px; margin-bottom: 22px; }
.footer-col__title { font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 20px; }
.footer-menu { display: grid; gap: 10px; }
.footer-menu a { color: rgba(251, 248, 243, .78); }
.footer-menu a:hover { color: var(--gold-light); }
.footer-contact { display: grid; gap: 12px; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact .icon { color: var(--gold-light); margin-top: 3px; width: 18px; height: 18px; }
.footer-contact a:hover { color: var(--gold-light); }
.hours--footer .hours__row { border-bottom-color: rgba(255,255,255,.1); }
.hours--footer .hours__row dt { color: rgba(251, 248, 243, .85); }
.hours--footer .hours__row dd { color: rgba(251, 248, 243, .6); }
.footer-col__note { font-size: .8rem; color: rgba(251, 248, 243, .5); margin-top: 10px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; font-size: .78rem; color: rgba(251, 248, 243, .5); }
.footer-bottom p { margin: 0; }
.footer-bottom a { color: rgba(251, 248, 243, .75); border-bottom: 1px solid transparent; }
.footer-bottom a:hover { color: var(--gold-light); border-bottom-color: var(--gold-light); }
.footer-bottom__links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-bottom__sep { margin-inline: 6px; }

@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; } }

/* --------------------------------------------------------------------------
   Podstránky, 404, obsah
   -------------------------------------------------------------------------- */
.page-hero { background: var(--cream-2); padding-block: clamp(48px, 7vw, 88px) clamp(36px, 5vw, 60px); text-align: center; }
.page-hero__title { font-size: clamp(2.3rem, 4vw + .8rem, 3.8rem); margin: 0; }
.section--page { padding-top: clamp(40px, 5vw, 64px); }
.entry-content { max-width: 760px; margin-inline: auto; color: var(--ink-2); }
.entry-content h2, .entry-content h3 { color: var(--ink); margin-top: 1.8em; }
.entry-content h2 { font-size: 2rem; }
.entry-content h3 { font-size: 1.5rem; }
.entry-content a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; margin-bottom: 1.2em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: .35em; }
.entry-content img { border-radius: var(--radius-sm); }
.entry-content blockquote { margin: 1.5em 0; padding-left: 1.2em; border-left: 2px solid var(--gold); font-family: var(--font-display); font-size: 1.3rem; }
.post-teaser { margin-bottom: 2.5rem; }
.post-teaser h2 { font-size: 1.9rem; }
.section--404 { padding-block: clamp(80px, 12vw, 160px); text-align: center; }
.not-found { max-width: 620px; margin-inline: auto; }
.not-found .section-text { margin: 0 auto 28px; }

/* --------------------------------------------------------------------------
   Animace při scrollu (jen s JS; respektuje omezený pohyb)
   -------------------------------------------------------------------------- */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
html.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html.js .reveal { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Tisk */
@media print {
	.site-header, .site-footer, .hero__bg, .lightbox, .btn { display: none !important; }
	body { background: #fff; color: #000; }
}


/* ==========================================================================
   OPRAVY – přístupnost, mřížka týmu, dotykové cíle
   Přidáno 23. 9. 2026. Blok je záměrně na konci souboru: přepisuje pravidla
   výše v kaskádě, takže se dá celý smazat a web se vrátí do původního stavu.
   ========================================================================== */

:root {
	/* Zlatá na drobný text. --gold-dark má na krémové jen 3,53:1, což neprojde
	   WCAG AA (4,5:1). Tenhle odstín má 5,72:1 na krémové a 6,06:1 na bílé. */
	--gold-text: #7E5D18;
}

/* Drobné zlaté texty na čitelný odstín. Velké nadpisy (h1 em, h2 em) zůstávají
   na --gold-dark – u velkého textu stačí 3:1 a ten poměr splňuje. */
.eyebrow,
.service-card__subtitle,
.team-card__role,
.contact-list__link,
.section-note__link:hover,
.team-card__ig:hover,
.entry-content a { color: var(--gold-text); }

.check-list__icon { border-color: var(--gold-text); color: var(--gold-text); }
.btn-outline { border-color: var(--gold-text); }

/* Hvězdičky: svítící 6,06:1, zhasnuté 3,27:1 (dřív 2,62:1 a 1,52:1).
   Rozdíl tvarem (výplň vs. obrys) je ještě potřeba doplnit v šabloně. */
.stars__star { color: var(--taupe); }
.stars__star.is-on { color: var(--gold-text); }

/* Nečitelné meta texty: --ink-3 má na bílé jen 3,20:1, --ink-2 má 6,19:1. */
.review-card__author span,
.contact-list__note { color: var(--ink-2); }

/* Oddělovače v ceníku byly prakticky neviditelné (--cream-2 na bílé = 1,15:1). */
.price-row { border-bottom-color: var(--beige-2); }

/* Focus byl 2px v --gold = 2,62:1, tedy k nepřehlédnutí leda náhodou.
   --ink má na krémové 14,31:1; na tmavých plochách se přepíná na světlé zlato. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
:where(.site-footer, .voucher) :focus-visible { outline-color: var(--gold-light); }

/* Co vidí myš, musí vidět i klávesnice. */
.site-nav__list a:focus-visible::after { transform: scaleX(1); }
.team-card:has(:focus-visible),
.service-card:has(:focus-visible) { transform: translateY(-6px); box-shadow: var(--shadow); }

/* Skip-link byl position: absolute – na odrolované stránce skákal mimo výřez. */
.skip-link { position: fixed; }

/* --------------------------------------------------------------------------
   Mřížka týmu: flex → grid
   Původní flex: 0 1 calc(20% - 22.4px) + min-width: 200px bylo napevno
   spočítané pro pět karet. Pátá se vešla až od ~1184 px, ale přepnutí na tři
   sloupce přišlo až na 1100 px – mezi tím vznikalo 4+1. Při jiném počtu členek
   se rozpad opakoval jinde. Grid s auto-fit to řeší pro libovolný počet.
   -------------------------------------------------------------------------- */
.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: clamp(18px, 2.2vw, 28px);
	align-items: start;
}
.team-card { flex: none; min-width: 0; }

@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .team-grid { grid-template-columns: repeat(2, 1fr); } }

/* Jeden sloupec se záměrně nepoužívá: karta pak měla 626 px na výšku a celá
   sekce přes 3 000 px, skoro pět obrazovek scrollu v místě, kvůli kterému web
   vznikl. Dvousloupcová mřížka je čitelná až do 320 px. */

/* Štítky specializací pryč z obličeje. Je to rozhodovací informace („kdo dělá
   manikúru“) a nad fotkou navíc neměly zaručený kontrast – závisel na snímku. */
.team-card__tags {
	position: static;
	justify-content: center;
	margin: 10px 0 0;
	gap: 5px;
}
.team-card__tags li {
	background: var(--white);
	color: var(--gold-text);
	border: 1px solid var(--gold);
	font-size: .7rem;
	padding: 6px 12px;
}

/* --------------------------------------------------------------------------
   Dotykové cíle – minimum 44 px
   Pod hranicí bylo .btn-sm (36,7 px), tedy právě tlačítko rezervace u každé
   holky, dál .social__link a odkazy v patičce.
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
	.btn { min-height: 48px; }
	.btn-sm { min-height: 44px; }
	.social__link { width: 46px; height: 46px; }
	.footer-menu { gap: 0; }
	.footer-menu a { display: block; padding-block: 11px; }
	.contact-list__link { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   Pojistka: obsah nesmí zůstat navždy neviditelný, když selže JS
   html.js .reveal { opacity: 0 } nastavuje inline skript v hlavičce, ale
   odkrývá to až hlavní skript. Když se nenačte, stránka zůstane prázdná.
   Druhé pravidlo řeší, aby klávesnice nezaostřila neviditelné tlačítko.
   -------------------------------------------------------------------------- */
html.reveal-fallback .reveal { opacity: 1 !important; transform: none !important; }
html.js .reveal:focus-within { opacity: 1 !important; transform: none !important; transition: none !important; }


/* ==========================================================================
   HERO – celoplošná fotka salonu, obsah na krémovém skle vpravo
   Nahrazuje původní dvousloupcový hero s fotkou v oblouku 4:5, do kterého
   se vešla sotva polovina šířky snímku.
   ========================================================================== */

.hero-stage { position: relative; margin-top: calc(-1 * var(--header-h)); overflow: hidden; background: var(--beige); isolation: isolate; }

.hero-stage__media {
	position: absolute; inset: -40px; z-index: -3;
	transform: translate3d(calc(var(--mx, 0) * -16px), calc(var(--my, 0) * -12px), 0);
	transition: transform .8s var(--ease);
}
.hero-stage__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
@media (prefers-reduced-motion: no-preference) {
	.hero-stage__img { animation: hero-breathe 28s ease-in-out infinite; }
}
@keyframes hero-breathe { 0%, 100% { transform: scale(1.04); } 50% { transform: scale(1.12); } }

.hero-stage__veil { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
/* Závoj zprava: levá polovina fotky (manikérské stoly) zůstává odkrytá. */
.hero-stage__veil--side { background: linear-gradient(270deg, rgba(251,248,243,.93) 0%, rgba(251,248,243,.66) 28%, rgba(251,248,243,.06) 52%, rgba(251,248,243,0) 66%); }
/* Úzký závoj pod hlavičkou nese čitelnost menu, ale nezhasíná nápis na stěně. */
/* První vrstva ztlumuje zlatý nápis na stěně přímo za logem v hlavičce – jinak
   se dvě loga Aura Studios překrývají. Čte se jako světelný nádech od okna. */
.hero-stage__veil--top {
	background:
		radial-gradient(32% 28% at 9% 3%, rgba(251,248,243,.95) 0%, rgba(251,248,243,.58) 46%, rgba(251,248,243,0) 78%),
		linear-gradient(180deg, rgba(251,248,243,.97) 0%, rgba(251,248,243,.86) 6%, rgba(251,248,243,.46) 13%, rgba(251,248,243,.12) 21%, rgba(251,248,243,0) 30%);
}
.hero-stage__veil--vignette { background: radial-gradient(118% 76% at 42% 46%, rgba(255,255,255,0) 46%, rgba(160,139,114,.20) 100%); }

.hero-stage__inner {
	position: relative;
	min-height: 100vh; min-height: 100svh;
	display: flex; align-items: center; justify-content: flex-end;
	padding-block: calc(var(--header-h) + 28px) 92px;
}
.hero-stage__card {
	width: min(100%, 596px);
	padding: clamp(28px, 3.4vw, 52px);
	border-radius: 34px;
	background: rgba(251, 248, 243, .90);
	-webkit-backdrop-filter: blur(22px) saturate(1.12);
	backdrop-filter: blur(22px) saturate(1.12);
	border: 1px solid rgba(255, 255, 255, .72);
	box-shadow: 0 48px 90px -44px rgba(42, 37, 33, .52);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.hero-stage__card { background: rgba(251, 248, 243, .97); }
}

.hero-stage__title { font-size: clamp(2.6rem, 4.3vw + .9rem, 4.9rem); line-height: 1.0; margin-bottom: .3em; }
.hero-stage__text { font-size: 1rem; color: var(--ink-2); margin-bottom: 2rem; max-width: 468px; }
.hero-stage__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-stage__crew { display: flex; align-items: center; gap: 18px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--beige); }
.hero-stage__faces { display: flex; align-items: center; }
.hero-stage__face {
	width: 46px; height: 46px; margin-right: -12px; flex: none;
	border-radius: 50%; overflow: hidden;
	background: var(--cream-2); border: 1.5px solid var(--cream);
	box-shadow: 0 4px 12px -6px rgba(42, 37, 33, .4);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--gold-dark);
}
.hero-stage__face img { width: 100%; height: 100%; object-fit: cover; }
.hero-stage__crew-text { margin: 0 0 0 8px; font-size: .82rem; line-height: 1.5; color: var(--ink-2); }
.hero-stage__crew-text strong { color: var(--ink); font-weight: 600; }

.hero-stage__cue { position: absolute; left: var(--gutter); bottom: 46px; width: 2px; height: 58px; border-radius: 2px; background: rgba(42, 37, 33, .16); overflow: hidden; }
.hero-stage__cue i { position: absolute; left: 0; right: 0; height: 22px; border-radius: 2px; background: var(--gold-dark); }
@media (prefers-reduced-motion: no-preference) {
	.hero-stage__cue i { animation: hero-cue 2.4s cubic-bezier(.4, 0, .2, 1) infinite; }
}
@keyframes hero-cue {
	0% { transform: translateY(-14px); opacity: 0; }
	35% { opacity: 1; }
	100% { transform: translateY(16px); opacity: 0; }
}

/* Hlavička na úvodní stránce leží na fotce a zesílí až po odrolování. */
.aura-home .site-header::before { opacity: 0; transition: opacity .3s, background-color .3s; }
.aura-home .site-header.is-scrolled::before { opacity: 1; }

/* Pod 1100 px se karta staví doprostřed a závoj se překlápí shora dolů,
   aby fotka zůstala nahoře a text seděl na krémové ploše. */
@media (max-width: 1100px) {
	.hero-stage__inner { justify-content: center; }
	.hero-stage__veil--side { background: linear-gradient(180deg, rgba(251,248,243,.12) 0%, rgba(251,248,243,.46) 40%, rgba(251,248,243,.82) 72%, rgba(251,248,243,.90) 100%); }
	.hero-stage__veil--vignette { background: none; }
}
@media (max-width: 640px) {
	.hero-stage__inner { align-items: flex-end; padding-block: calc(var(--header-h) + 190px) 40px; }
	.hero-stage__card { width: 100%; border-radius: 26px; }
	.hero-stage__actions .btn { width: 100%; }
	.hero-stage__cue { display: none; }
	.hero-stage__crew { margin-top: 26px; padding-top: 22px; }
}


/* ==========================================================================
   NAŠE SLUŽBY – bez cen, hranaté fotky, 3D naklonění při najetí
   Ceník si vede každá specialistka sama, proto karta vypisuje jen to,
   co služba zahrnuje.
   ========================================================================== */

:root { --surface: #FEFCF9; }

.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 32px); align-items: stretch; }
.svc-cell { display: flex; }

/* Naklonění sedí na .svc-card, ne na .svc-cell: třída .reveal má po odkrytí
   transform: none s vyšší specificitou a přebila by ho. */
.svc-card {
	position: relative; display: flex; flex-direction: column; flex-grow: 1;
	padding: 14px 14px 26px;
	background: var(--surface);
	border: 1px solid var(--beige);
	border-radius: 26px;
	box-shadow: 0 10px 30px -22px rgba(42, 37, 33, .4);
	transform: perspective(1100px) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg)) translateY(calc(var(--lift, 0) * -6px));
	transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.svc-card:hover { box-shadow: var(--shadow); }

.svc-card__media { position: relative; }
.svc-card__crop { position: relative; aspect-ratio: 4 / 4.4; border-radius: 14px; overflow: hidden; background: var(--beige); }
/* Ořez posunutý nahoru: fotky mají spodní třetinu prázdnou podlahu. */
.svc-card__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transition: transform .9s var(--ease); }
.svc-card:hover .svc-card__img { transform: scale(1.05); }
.svc-card__frame { position: absolute; inset: 0; transform: translate(14px, 14px); border: 1px solid var(--gold); border-radius: 14px; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.svc-card:hover .svc-card__frame { opacity: .85; }
.svc-card__icon {
	position: absolute; left: 20px; bottom: -24px;
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--gold-grad); color: var(--ink);
	border: 3px solid var(--surface);
	box-shadow: var(--shadow-gold);
}
.svc-card__icon .icon { width: 24px; height: 24px; }

.svc-card__body { display: flex; flex-direction: column; flex-grow: 1; padding: 40px 12px 0; }
.svc-card__title { font-size: 2.1rem; font-weight: 600; margin-bottom: .1em; }
.svc-card__sub { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 18px; }

.svc-list { display: flex; flex-direction: column; gap: 11px; margin: 0 0 22px; padding-top: 18px; border-top: 1px solid var(--beige); list-style: none; }
.svc-list li { position: relative; padding-left: 15px; font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
.svc-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

.svc-card__footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.svc-card__duration { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--ink-2); }
.svc-card__duration .icon { color: var(--gold-dark); width: 1em; height: 1em; }

@media (max-width: 960px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.svc-grid { grid-template-columns: 1fr; }
	.svc-card__footer { flex-direction: column; align-items: stretch; }
	.svc-card__footer .btn { width: 100%; }
}


/* ==========================================================================
   SPECIALISTKY – profilové karty + ceník v dialogu
   Každá si vede vlastní kalendář i ceník. Pět ceníků by sekci nafouklo,
   proto se otevírají až na vyžádání, ale zůstávají v DOM kvůli vyhledávačům.
   ========================================================================== */

.tgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.tcell { display: flex; }

.tcard {
	display: flex; flex-direction: column; flex-grow: 1;
	padding: 14px 14px 20px;
	background: var(--surface);
	border: 1px solid var(--beige);
	border-radius: 22px;
	box-shadow: 0 10px 30px -24px rgba(42, 37, 33, .4);
	transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease;
}
.tcard:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(42, 37, 33, .45); border-color: var(--beige-2); }

.tcard__media {
	position: relative; aspect-ratio: 4 / 5; border-radius: var(--arch); overflow: hidden;
	background: linear-gradient(165deg, var(--cream-2) 0%, var(--beige) 100%);
	display: flex; align-items: center; justify-content: center;
}
/* Zlatá vlasová linka jen u monogramu – přes fotku by rušila. */
.tcard__media:has(.tcard__mono)::after,
.pricedlg__media:has(.tcard__mono)::after {
	content: ""; position: absolute; inset: 10px; border: 1px solid rgba(194, 154, 69, .42);
	border-radius: 999px 999px 10px 10px; pointer-events: none;
}
.tcard__img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.tcard:hover .tcard__img { transform: scale(1.04); }
.tcard__mono { font-family: var(--font-display); font-size: 3.6rem; line-height: 1; font-weight: 500; color: var(--gold); }

.tcard__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 12px 0 0; }
.tcard__tags li { padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--gold); font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); }

.tcard__body { display: flex; flex-direction: column; flex-grow: 1; text-align: center; padding: 14px 2px 0; }
.tcard__name { font-size: 1.7rem; font-weight: 600; margin-bottom: .08em; }
.tcard__role { font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; color: var(--gold-text); margin-bottom: 10px; }
.tcard__ig { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: .74rem; color: var(--ink-2); margin-bottom: 16px; }
.tcard__ig:hover { color: var(--gold-text); }
.tcard__actions { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }
.tcard__book { font-size: .62rem; letter-spacing: .12em; padding-inline: 12px; }
.tcard__price {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 40px; background: none; border: 0; cursor: pointer;
	font-family: var(--font-body); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.tcard__price:hover { color: var(--gold-text); }
.tcard__chev { width: 13px; height: 13px; color: var(--gold-dark); }

/* --------------------------------------------------------------------------
   Dialog s ceníkem
   -------------------------------------------------------------------------- */
.pricedlg {
	width: min(880px, calc(100vw - 32px));
	max-height: calc(100dvh - 48px);
	padding: 0; border: 1px solid var(--beige); border-radius: 28px;
	background: var(--cream); color: var(--ink);
	box-shadow: 0 60px 120px -50px rgba(42, 37, 33, .7);
	overflow: auto;
}
.pricedlg::backdrop { background: rgba(42, 37, 33, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pricedlg__inner { position: relative; display: flex; gap: clamp(20px, 3vw, 40px); padding: clamp(22px, 3vw, 36px); }
.pricedlg__close { position: absolute; right: 18px; top: 18px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--beige-2); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.pricedlg__close:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pricedlg__aside { flex: none; width: 236px; }
.pricedlg__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--arch); overflow: hidden; background: linear-gradient(165deg, var(--cream-2) 0%, var(--beige) 100%); display: flex; align-items: center; justify-content: center; }
.pricedlg__img { width: 100%; height: 100%; object-fit: cover; }
.pricedlg__aside .tcard__ig { width: 100%; margin: 14px 0 0; }
.pricedlg__main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; padding-right: 52px; }
.pricedlg__name { font-size: 2.6rem; font-weight: 600; margin-bottom: .04em; }
.pricedlg__bio { font-size: .92rem; color: var(--ink-2); margin: 14px 0 20px; }
.pricedlg__list { margin: 0 0 22px; }
.pricedlg__cta { align-self: flex-start; margin-top: auto; }
.pricedlg__note { font-size: .78rem; line-height: 1.6; color: var(--ink-2); margin-top: 14px; }

@media (max-width: 1100px) { .tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
	.tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pricedlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
	.pricedlg__inner { flex-direction: column; padding: 22px 20px 28px; }
	.pricedlg__aside { width: 148px; }
	.pricedlg__main { padding-right: 0; }
	.pricedlg__cta { align-self: stretch; }
	.tcard__mono { font-size: 3rem; }
}


/* ==========================================================================
   PŘÍPRAVA NA PREZENTACI – rytmus stránky, pozadí sekcí, mobil, služby „sklo na fotce“
   Přidáno 24. 9. 2026 po marketingovém auditu. Blok přepisuje pravidla výše.
   ========================================================================== */

:root { --sec-y: clamp(64px, 7vw, 104px); --sec-head: clamp(32px, 4.5vw, 48px); }
.section { padding-block: var(--sec-y); }
.section-head { margin-bottom: var(--sec-head); }
.section-note { margin-top: clamp(20px, 3vw, 32px); }
.section-note__link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; }
.section--poukaz { padding-block: 0 var(--sec-y); }

/* Pozadí: krém / béž / tmavá – krém vs. krém-2 měla kontrast jen 1,09:1. */
.section--sluzby, .section--onas, .section--galerie { background: var(--cream); }
.section--tym, .section--recenze, .section--poukaz, .section--kontakt { background: var(--beige); }
.tcard__tags li, .contact-list__icon, .nav-toggle { background: var(--surface); }
.contact-map { border-color: var(--beige-2); }

/* Recenze: textový pás s vlasovou linkou místo třetí mřížky karet. */
.review-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 4px 0 0 26px; border-left: 1px solid var(--gold); }
.review-card__quote { display: none; }
.review-card__text { font-size: 1.45rem; line-height: 1.4; }
.review-card__author { border-top: 0; padding-top: 6px; }
@media (max-width: 640px) {
	.reviews-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 24px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 24px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.reviews-grid::-webkit-scrollbar { display: none; }
	.review-card { flex: 0 0 84%; scroll-snap-align: start; }
	html.js .reviews-grid .reveal { opacity: 1; transform: none; transition: none; }
}

/* Hlavička: zlaté CTA i na mobilu; sociální ikony s kroužkem 44 px. */
@media (min-width: 961px) and (max-width: 1100px) { .site-header__cta { display: inline-flex; padding-inline: 1.2em; } }
@media (max-width: 960px) {
	.site-header__cta { display: inline-flex; min-height: 40px; padding: .7em 1em; font-size: .6rem; letter-spacing: .08em; white-space: nowrap; }
	.site-header__inner { gap: 10px; }
	.site-header__actions { gap: 8px; }
}
@media (max-width: 350px) { .site-header__cta { display: none; } }
.social > a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; border-radius: 50%; border: 1px solid var(--beige-2); color: var(--ink); transition: background-color .3s, border-color .3s, color .3s; }
.social--footer > a { border-color: rgba(255, 255, 255, .18); color: var(--cream); }
.social > a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* Hero: kratší, klikací monogramy, mobil 100svh. */
.hero-stage__inner { min-height: min(80svh, 744px); padding-block: calc(var(--header-h) + 24px) 56px; }
.hero-stage__cue { display: none; }
.hero-stage__face { position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.hero-stage__face a { position: absolute; inset: 0; border-radius: 50%; }
.hero-stage__face:has(a:hover), .hero-stage__face:has(a:focus-visible) { transform: translateY(-3px); box-shadow: 0 8px 18px -8px rgba(42, 37, 33, .5); z-index: 1; }
@media (max-width: 640px) {
	.hero-stage__inner { align-items: flex-end; min-height: 100svh; padding-block: calc(var(--header-h) + 104px) 28px; }
	.hero-stage__card { padding: 24px 22px 22px; border-radius: 26px; }
	.hero-stage__card .eyebrow { font-size: .66rem; letter-spacing: .16em; gap: 10px; margin-bottom: 14px; }
	.hero-stage__card .eyebrow::before { width: 18px; }
	.hero-stage__title { font-size: clamp(2.3rem, 10.5vw, 2.8rem); }
	.hero-stage__text { font-size: .95rem; line-height: 1.6; margin-bottom: 1.4rem; }
	.hero-stage__actions { gap: 10px; }
	.hero-stage__crew { flex-wrap: wrap; row-gap: 10px; margin-top: 20px; padding-top: 18px; }
	.hero-stage__face { width: 38px; height: 38px; margin-right: -10px; font-size: 1.1rem; }
	.hero-stage__crew-text { flex: 1 1 100%; margin-left: 0; }
	.hero-stage__crew-text br { display: none; }
}
@media (hover: none), (max-width: 960px) {
	.hero-stage__img { animation: none; transform: scale(1.06); }
	.hero-stage__card { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(251, 248, 243, .93); }
}

/* Specialistky na mobilu: čitelné tlačítko, bez duplicitního štítku, lichá poslední karta naležato. */
.tcard__book { font-size: .7rem; letter-spacing: .08em; }
@media (max-width: 760px) {
	.tcard__tags { display: none; }
	.tcard__body { padding-top: 12px; }
	.tcard__role { font-size: .68rem; letter-spacing: .08em; }
	.tcard__ig { font-size: .8rem; min-height: 32px; margin-bottom: 8px; }
	.tcard__book { font-size: .72rem; letter-spacing: .06em; padding-inline: 10px; line-height: 1.25; }
	.tcard__price { min-height: 44px; font-size: .74rem; }
	.tcell:nth-child(odd):last-child { grid-column: 1 / -1; }
	.tcell:nth-child(odd):last-child .tcard { display: grid; grid-template-columns: 118px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 12px 14px 14px; }
	.tcell:nth-child(odd):last-child .tcard__body { text-align: left; padding: 0; }
	.tcell:nth-child(odd):last-child .tcard__ig { justify-content: flex-start; }
	.tcell:nth-child(odd):last-child .tcard__actions { flex-direction: row; align-items: center; gap: 12px; }
	.tcell:nth-child(odd):last-child .tcard__book { flex: 1; }
	.pricedlg__inner { padding: 16px 18px 24px; row-gap: 12px; }
	.pricedlg__aside { width: 88px; }
	.pricedlg__aside .tcard__ig { display: none; }
	.pricedlg__name { font-size: 2rem; }
	.pricedlg__bio { margin: 10px 0 12px; font-size: .88rem; }
	.pricedlg__list { margin-bottom: 14px; }
	.price-row { padding: 7px 0; }
	.pricedlg__cta { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -14px 18px -6px var(--cream), var(--shadow-gold); }
}

/* SLUŽBY – „sklo na fotce“: fotka vyplní kartu, text v krémovém skle. Karta 460 px místo 737. */
.svc-cell { position: relative; }
.svc-cell::after { content: ""; position: absolute; inset: 0; transform: translate(12px, 12px); border: 1px solid var(--gold); border-radius: 14px; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.svc-cell:has(.svc-card:hover)::after, .svc-cell:has(.svc-card:focus-within)::after { opacity: .85; }
.svc-card--glass { position: relative; isolation: isolate; display: grid; grid-template-rows: 1fr auto; min-height: 460px; padding: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--beige); background: var(--beige); transform: none; transition: box-shadow .4s var(--ease); }
.svc-card--glass:hover { transform: none; box-shadow: var(--shadow); }
.svc-card--glass .svc-card__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .9s var(--ease); }
.svc-card--glass:hover .svc-card__img { transform: scale(1.04); }
.svc-card--glass::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(42, 37, 33, 0) 50%, rgba(42, 37, 33, .14) 100%); pointer-events: none; }
.svc-card__pill { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(251, 248, 243, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .7); font-size: .68rem; font-weight: 600; letter-spacing: .08em; color: var(--ink); }
.svc-card__pill .icon { width: 12px; height: 12px; color: var(--gold-dark); }
.svc-glass { position: relative; grid-row: 2; margin: 0 10px 10px; padding: 20px 22px 22px; border-radius: 10px; background: rgba(251, 248, 243, .9); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 14px 30px -20px rgba(42, 37, 33, .35); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .svc-glass { background: rgba(251, 248, 243, .97); } }
.svc-card--glass .svc-card__icon { position: absolute; top: -24px; right: 16px; left: auto; bottom: auto; width: 44px; height: 44px; border-width: 3px; }
.svc-card--glass .svc-card__icon .icon { width: 20px; height: 20px; }
.svc-card--glass .svc-card__sub { font-size: .66rem; letter-spacing: .16em; margin-bottom: 4px; }
.svc-card--glass .svc-card__title { font-size: 1.9rem; line-height: 1.05; margin-bottom: 10px; }
.svc-list--inline { display: flex; flex-direction: row; flex-wrap: wrap; gap: 2px 0; margin: 0 0 12px; padding-top: 12px; border-top: 1px solid var(--beige); }
.svc-list--inline li { padding-left: 0; font-size: .82rem; font-weight: 500; line-height: 1.5; color: var(--ink-2); }
.svc-list--inline li::before { content: none; }
.svc-list--inline li + li::before { content: "·"; position: static; display: inline; width: auto; height: auto; border-radius: 0; background: none; color: var(--gold); font-weight: 700; margin: 0 7px; }
.svc-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; margin: 0 0 12px; font-size: .82rem; color: var(--ink-2); }
.svc-who__label { font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); margin-right: 8px; }
.svc-who__sep { white-space: pre; }
.svc-who a { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--gold); }
.svc-who a:hover { color: var(--gold-text); border-bottom-color: var(--gold-text); }
.svc-card__cta { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.svc-card__cta .icon { width: 14px; height: 14px; color: var(--gold-dark); transition: transform .3s var(--ease); }
.svc-card__cta:hover { color: var(--gold-text); }
.svc-card__cta:hover .icon { transform: translateX(4px); }
@media (max-width: 1100px) { .svc-grid { gap: 24px; } .svc-glass { padding: 18px 18px 20px; } .svc-card--glass .svc-card__title { font-size: 1.7rem; } .svc-card--glass .svc-card__sub { letter-spacing: .12em; } }
@media (min-width: 641px) and (max-width: 960px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-cell:last-child { grid-column: 1 / -1; } .svc-cell:last-child .svc-glass { width: min(100%, 560px); } }
@media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr; gap: 20px; } .svc-card--glass { min-height: 0; grid-template-rows: minmax(190px, 1fr) auto; } .section--sluzby .section-text { font-size: .95rem; } }


/* Patička: bez duplicitního kontaktu a hodin (jsou o sekci výš v Kontaktu). */
.site-footer { padding-block: clamp(48px, 6vw, 72px) 24px; }
.footer-grid { grid-template-columns: 1.6fr 1fr; padding-bottom: clamp(28px, 4vw, 40px); }
.footer-bottom { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: center; }
.footer-bottom__contact { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 8px; font-size: .88rem; color: rgba(251, 248, 243, .78); }
.footer-bottom__contact a { color: var(--cream); border-bottom: 1px solid rgba(230, 203, 124, .5); }
.footer-bottom__contact a:hover { color: var(--gold-light); }
@media (max-width: 560px) {
	.footer-grid { grid-template-columns: 1fr; }
	.footer-menu { display: flex; flex-wrap: wrap; gap: 4px 20px; }
	.footer-menu a { padding-block: 8px; }
	.footer-bottom { grid-template-columns: 1fr; }
}


/* výčet služeb: tečka u každé položky */
/* Oddělovač mezi položkami se po zalomení objevoval na začátku řádku a první řádek
   pak vypadal jinak než ostatní. Tečka u každé položky čte stejně vždy. */
.svc-list--inline { gap: 4px 14px; }
.svc-list--inline li { position: relative; padding-left: 11px; }
.svc-list--inline li::before, .svc-list--inline li + li::before { content: ""; position: absolute; display: block; left: 0; top: .6em; width: 4px; height: 4px; margin: 0; border-radius: 50%; background: var(--gold); }


/* --------------------------------------------------------------------------
   Služby: sjednocená výška skel
   Karty byly vždy 460 px, ale sklo růstalo s počtem zalomených řádků výčtu
   (300 / 253 / 276 px na 1440 px), takže horní hrana bílé plochy byla u každé karty
   jinde. Podtitul teď drží dva řádky (na 1200 a 1024 px se láme různě),
   výčet vyplňuje zbytek a sklo má pevné minimum – všechny tři jsou shodné. */
@media (min-width: 641px) {
	.svc-card--glass { min-height: 500px; }
	.svc-glass { display: flex; flex-direction: column; min-height: 340px; }
	.svc-card--glass .svc-card__sub { min-height: 3.5em; }
	.svc-list--inline { flex-grow: 1; align-content: flex-start; }
}


/* --------------------------------------------------------------------------
   Služby: větší kus fotky
   Podtituly i výčty jsou nově vyrovnané na podobnou délku, takže podtitul drží
   jeden řádek a výčet dva. Sklo se tím zkrátilo a fotka dostala víc místa.
   -------------------------------------------------------------------------- */
@media (min-width: 641px) {
	.svc-card--glass .svc-card__sub { min-height: 0; }
	.svc-glass { min-height: 282px; }
}
/* Na užších displejích se do řádku vejde jen jedna položka, takže čtvrtá ustoupí fotce. */
@media (min-width: 641px) and (max-width: 1100px) {
	.svc-list--inline li:nth-child(4) { display: none; }
}
@media (min-width: 1101px) {
	.svc-glass { min-height: 265px; }
}



/* --------------------------------------------------------------------------
   Hero bez tlačítka: rezervace je v pravém horním rohu hlavičky.
   Třída se přidá jen když obě pole tlačítek zůstanou prázdná, takže po jejich
   vyplnění se původní rozestupy vrátí samy.
   -------------------------------------------------------------------------- */
.hero-stage__card--noactions .hero-stage__text { margin-bottom: .4rem; }
.hero-stage__card--noactions .hero-stage__crew { margin-top: 26px; }


/* --------------------------------------------------------------------------
   Newsreader nese osu opticke velikosti (opsz 6-72).
   Prohlizec ji ve vychozim stavu dopocitava z velikosti pisma, takze u nadpisu
   78 px by sahl po opsz 72, kde kontrast tahu vyskoci na 4,85 a vlasovy tah
   spadne na 26/1000 em. To je vyzyvavejsi nez puvodni Cormorant (4,10 a 20).
   Zapichnutim na 22 drzi kontrast 2,58 a vlasovy tah 40, tedy dvojnasobek.
   Montserrat osu opsz nema, pravidlo ho neovlivni.
   POZOR: tohle nemazat, jinak nadpis zesilni presne ten problem, kvuli kteremu
   se pismo menilo.
   -------------------------------------------------------------------------- */
html { font-optical-sizing: none; font-variation-settings: 'opsz' 22; }

/* ==========================================================================
   TELEFONY — optimalizace pro reálné velikosti displejů
   Měřeno na 320×568, 360×640, 375×667, 390×844, 430×932 a na šířku 844×390.
   Čísla v komentářích jsou naměřená v prohlížeči, ne odhadnutá.
   ========================================================================== */

/* 1) Vodorovné přetékání stránky (320 px: 34 px, 360 px: 3 px).
      Lichá poslední karta specialistky se pod 760 px překlápí naležato a dává
      tlačítka Rezervovat a Ceník vedle sebe. Ta potřebují 165 px, ale v tĞle karty
      jich na 320 px zbývá 118, takže Ceník vyjel za okraj okna. */
@media (max-width: 430px) {
	.tcell:nth-child(odd):last-child .tcard { grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; padding: 12px 12px 14px; }
	.tcell:nth-child(odd):last-child .tcard__actions { flex-direction: column; align-items: stretch; gap: 8px; }
	.tcell:nth-child(odd):last-child .tcard__book { flex: none; }
}
/* Pojistka, aby dlouhé české slovo kartu nikdy nerozepřelo. */
.tcard, .tcard__body, .tcard__actions { min-width: 0; }
.tcard__book, .tcard__price { min-width: 0; }

/* 2) Pod 350 px se skrývalo zlaté CTA v hlavičce. Protože v heru už žádné
      tlačítko není, nebyla z první obrazovky žádná cesta do rezervace jinak
      než přes menu. Místo skrývání se zmenší logo i pilulka, aby se vešly.
      Změřeno: logo 138 + CTA 143 + hamburger 44 + mezery = 343 do 280 px. */
@media (max-width: 380px) {
	.site-header__inner { padding-inline: 14px; gap: 8px; }
	.site-header__actions { gap: 6px; }
	.site-logo .logo-img { height: 26px; }
	.site-header__cta { display: inline-flex; font-size: .58rem; letter-spacing: .05em; padding: .7em .7em; min-height: 38px; }
}

/* 3) Nízké displeje. Hero mělo nad kartou 198 px fotky; na 568 px vysokém
      telefonu to je třetina obrazovky a karta končila 93 px pod ohybem. */
@media (max-width: 640px) and (max-height: 700px) {
	.hero-stage__inner { padding-block: calc(var(--header-h) + 52px) 20px; }
}

/* 4) Telefon na šířku (844×390). Položky menu měly 89 px, pět jich udělalo
      445 px do 390 px vysokého okna, takže tlačítko Rezervovat bylo až po
      odrolování (měřeno y = 575). Hero navíc drželo 100svh. */
@media (max-width: 960px) and (max-height: 520px) {
	.hero-stage__inner { min-height: 0; padding-block: calc(var(--header-h) + 20px) 20px; }
	.hero-stage__title { font-size: clamp(1.9rem, 4.6vw, 2.4rem); }
	.site-nav { padding-block: 14px 18px; }
	.site-nav__list a { padding: 9px 0; font-size: 1.25rem; }
	.site-nav__extra { margin-top: 14px; gap: 12px; }
}

/* 5) Dotykové cíle pod 44 px. Měřeno: kroužky 35×35, „Vybrat specialistku“
      180×40, jména v řádku „Provádí“ 43×24. */
@media (max-width: 640px) {
	.hero-stage__face { width: 44px; height: 44px; margin-right: -12px; font-size: 1.15rem; }
	.svc-card__cta { min-height: 44px; }
}
@media (hover: none) {
	/* Svislá výplň se záporným okrajem zvětší plochu pro prst, ale nehne s řádkem. */
	.svc-who a { display: inline-block; padding-block: 10px; margin-block: -10px; }
}

/* 6) Ceníkové okno na telefonu přilepit k okrajům, ať nezávisí na výchozím
      centrování prvku dialog. */
@media (max-width: 760px) {
	.pricedlg { inset: 0; margin: 0; }
}

/* ==========================================================================
   TELEFONY, druhé kolo — co odhalilo měření a audit CSS
   ========================================================================== */

/* 7) Ceníkové okno se nedalo zavřít. Křížek je absolutně umístěný uvnitř
      .pricedlg__inner, ale roluje celý dialog: po odrolování o 400 px skončil
      na y = −114, tedy mimo obrazovku. Na telefonu ho proto přilepíme k oknům. */
@media (max-width: 760px) {
	.pricedlg__close { position: fixed; top: 12px; right: 12px; z-index: 5; background: var(--surface); border: 1px solid var(--beige-2); box-shadow: 0 6px 18px -8px rgba(42, 37, 33, .45); }
}

/* 8) Mobilní menu se nevejde ani na výšku. Na 320×568 potřebuje 669 px,
      k dispozici má 496, takže zlaté tlačítko leželo na y = 587, pod ohybem. */
@media (max-width: 960px) and (max-height: 720px) {
	.site-nav { padding-block: 18px 22px; }
	.site-nav__list a { padding: 11px 0; font-size: 1.45rem; }
	.site-nav__extra { margin-top: 18px; gap: 14px; }
}
/* Spodní lista iOS a home indikátor. Bez viewport-fit=cover vrátí env() nulu,
   takže se použije první hodnota a nic se nerozbije. */
@media (max-width: 960px) {
	.site-nav { padding-bottom: max(28px, env(safe-area-inset-bottom, 0px) + 20px); }
}

/* 9) Dotykové cíle, které zůstávaly pod 44 px. */
@media (max-width: 960px) {
	.site-header__cta { min-height: 44px; }
	.site-logo { min-height: 44px; }
}
@media (max-width: 380px) {
	.site-header__cta { min-height: 44px; }
}
/* Kroužek má 1,5px rámeček, takže inset: 0 dával odkazu jen 41 px. */
.hero-stage__face a { inset: -2px; }

/* 10) Řádkový proklád 1,0 u nadpisů. Newsreader má s českou diakritikou
       svislý rozsah 1,155 em, takže háček na druhém řádku může zavázet o dotah
       z prvního. Na telefonu, kde se nadpisy lámou nejčastěji, dáme malý vzduch. */
@media (max-width: 640px) {
	.hero-stage__title { line-height: 1.08; }
	.section-title { line-height: 1.1; }
}

/* 11) Telefon na šířku: karta služby držela pevných 500 px a sklo 282 px,
       tedy víc než celá výška okna (390 px). */
@media (max-width: 960px) and (max-height: 520px) {
	.svc-card--glass { min-height: 0; }
	.svc-glass { min-height: 0; }
	.pricedlg__inner { padding-block: 14px 18px; }
}

/* 12) Instagramový odkaz na kartě specialistky měl 32 px. Je to jediný
       zbývající dotykový cíl pod hranicí, pětkrát na stránce. */
@media (max-width: 760px) {
	.tcard__ig { min-height: 44px; }
}

/* 13) Telefon na šířku: i po zmenšení potřebovalo menu 488 px do 318 px,
       takže zlaté tlačítko končilo na y = 462. Široká nízká obrazovka snáší
       menu na dva sloupce, tím se výška srovná a tlačítko zůstane vidět. */
@media (max-width: 960px) and (max-height: 520px) {
	.site-nav { justify-content: center; gap: 14px; padding-block: 12px; }
	.site-nav__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; align-content: start; }
	.site-nav__list a { padding: 7px 0; font-size: 1.2rem; }
	.site-nav__extra { flex-direction: row; justify-content: center; align-items: center; gap: 16px; margin-top: 4px; }
	.site-nav__extra .btn { width: auto; min-width: 210px; }
	.social--nav { margin: 0; }
}

/* 14) Zaseknutý :hover po dotyku. Na telefonu zůstane prstěm „najetá“ karta
       nadzvednutá, dokud uživatel neklepne jinam. Zvedání necháme jen myši. */
@media (hover: none) {
	.tcard:hover, .service-card:hover, .team-card:hover,
	.btn-gold:hover, .btn-outline:hover, .social__link:hover { transform: none; }
	.tcard:hover .tcard__img, .service-card:hover .service-card__img,
	.team-card:hover .team-card__img, .gallery-item:hover .gallery-item__img,
	.svc-card:hover .svc-card__img { transform: none; }
}

/* 15) Lightbox galerie měřil ve velkém viewportu (vh), takže křížek a spodní
       okraj fotky končily pod lištou prohlížeče. Na telefonu počítáme v dvh. */
@media (max-width: 960px) {
	.lightbox { max-height: 100dvh; }
	.lightbox__figure { max-height: 82dvh; }
	.lightbox__img { max-height: 82dvh; }
}

/* 16) Dotykové cíle v patičce a v kontaktu. Telefon a e-mail měly 18 až 28 px. */
@media (max-width: 640px) {
	.footer-menu a { padding-block: 12px; }
	.footer-bottom__contact a,
	.contact-list__body a { display: inline-block; padding-block: 11px; margin-block: -7px; }
	.hero-stage__card .eyebrow { font-size: .7rem; }
}

/* 17) Dotykové cíle navázané na dotyk, ne na šířku okna.
       Telefon na šířku má 667 až 844 px, takže předchozí pravidla s hranicí
       640 px se na něj vůbec nevztahovala a cíle tam zůstávaly 16 až 40 px. */
@media (hover: none), (max-width: 960px) {
	.svc-card__cta { min-height: 44px; }
	.hero-stage__face { width: 44px; height: 44px; margin-right: -12px; }
	.footer-menu a { padding-block: 12px; }
	.footer-bottom__contact a,
	.footer-bottom__links a,
	.contact-list__body a { display: inline-block; padding-block: 11px; margin-block: -7px; }
	.svc-who a { display: inline-block; padding-block: 10px; margin-block: -10px; }
}

/* 18) Čitelnost drobných textů na telefonu. Nejmenší verzálkové popisky
       měly .62rem, tedy 9,9 px, a to ještě s prostrkáním. Zvedneme je tam,
       kde to nerozhodí vyýšku karet (na telefonu jsou karty jednosloupcové). */
@media (hover: none), (max-width: 640px) {
	.svc-card--glass .svc-card__sub { font-size: .7rem; }
	.svc-card__cta { font-size: .72rem; }
	.svc-who__label { font-size: .68rem; }
	.svc-card__pill { font-size: .72rem; }
	.tcard__role { font-size: .72rem; }
}
@media (max-width: 380px) {
	.site-header__cta { font-size: .62rem; }
}

/* 19) Nadpisy sekcí se na telefonu nezmenšovaly. clamp má spodní mez 2,1rem,
       kterou vw složka dosáhne až na 619 px, takže od 320 do 619 px držely
       konstantních 33,6 px a dlouhý český nadpis se lámal na tři řádky. */
@media (max-width: 480px) {
	.section-title { font-size: clamp(1.75rem, 5.2vw + .5rem, 2.3rem); }
	.review-card__text { font-size: 1.1rem; }
}

/* 20) Šipky lightboxu ležely uprostřed na fotce a kradly dotyky určené
       obrázku. Na telefonu patří pod něj, kde je volné místo. */
@media (max-width: 640px) {
	.lightbox__nav { top: auto; bottom: 16px; transform: none; }
	.lightbox__nav--prev { left: 16px; }
	.lightbox__nav--next { right: 16px; }
}

/* 21) Ceníkové okno a velká média na telefonu na šířku.
       Ta zařízení mají 667 až 844 px šířky, takže předchozí pravidla s hranicí
       760 px se na ně nevztahovala. Měřeno na 844×390: křížek po odrolování
       skončil na y = −189, tlačítko rezervace leželo na y = 525 a mapa
       s fotkou poukazu měly 485 px v 390 px vysokém okně. */
@media (max-width: 960px) and (max-height: 520px) {
	.pricedlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; inset: 0; margin: 0; border: 0; border-radius: 0; }
	.pricedlg__close { position: fixed; top: 10px; right: 10px; z-index: 5; background: var(--surface); border: 1px solid var(--beige-2); box-shadow: 0 6px 18px -8px rgba(42, 37, 33, .45); }
	.pricedlg__inner { flex-direction: row; padding: 14px 18px 18px; }
	.pricedlg__aside { width: 118px; }
	.pricedlg__main { padding-right: 0; }
	.contact-map { aspect-ratio: auto; height: 240px; }
	.voucher__media { aspect-ratio: auto; height: 220px; min-height: 0; }
}

/* --------------------------------------------------------------------------
   22) Karta členky týmu — zjednodušení
   Štítek s kategorií a odkaz na Instagram jsou pryč, takže specializace zůstává
   jediným popiskem pod jménem. Verzálky s prostrkáním tu působily hlučně
   a na tři položky oddělené tečkou se nehodily, proto normální sazba.
   -------------------------------------------------------------------------- */
.tcard__role {
	font-size: .84rem;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.55;
	color: var(--ink-2);
	margin-bottom: 16px;
}
.tcard__body { padding-top: 16px; }

/* 23) Jména členek na úzkých displejích. Na 320 px má karta 132 px,
       text v ní 98 px, ale „Kristýna“ ve 27,2 px potřebuje 102 px a ořízla se.
       Zalomení je pojistka pro delší jména, která klient teprve doplni. */
@media (max-width: 400px) {
	.tcard__name { font-size: 1.4rem; overflow-wrap: break-word; }
}

/* --------------------------------------------------------------------------
   24) Kontakt — rytmus a vyrovnání sloupců
   Po odstranění ikon sociálních sítí zbyla pod seznamem mezera 30 px, která
   oddělovala právě je. Mapa byla navíc na 1440 px o 64 px kratší než levý
   sloupec, protože měla pevný poměr 4:3 a mřížka zarovnávala na začátek.
   -------------------------------------------------------------------------- */
.contact-list { margin-bottom: 0; }
.section--kontakt .section-head { margin-bottom: 36px; }
@media (min-width: 901px) {
	.contact-grid { align-items: stretch; }
	.contact-map { aspect-ratio: auto; min-height: 380px; }
}

/* 25) Mapa na dotyku polykala svislé posouvání. Prst položený na mapu roloval
       mapu místo stránky a návštěvnice se na ní zasekla. Na dotykových zařízeních
       proto mapa jen zobrazuje; cesta do navigace vede přes adresu, která je odkaz. */
@media (hover: none) {
	.contact-map iframe { pointer-events: none; }
}

/* --------------------------------------------------------------------------
   26) Hero polykalo na notebooku celý první obraz a sekce Služby začínala
   přesně pod ohybem.

   Měřeno na 1512×815: hero 679 px, horní odsazení sekce 104 px, hlavička sekce
   tedy startovala na 783 px a z jejích 106 px bylo nad ohybem vidět 32 px
   prázdného místa. Celá hlavička se vešla nad ohyb až od výšky okna 954 px,
   což je až 1080p monitor — žádný notebook to nesplnil.

   Hlavní viník nebylo odsazení, ale min-height: min(80svh, 744px). Hero rostlo
   s oknem přesně stejným tempem, jakým místa přibývalo (720 px při okně 900,
   744 px při okně 1000), takže výkuk se nikdy nezlepšil. Proto výšku hero teď
   určuje obsah a svh strop zůstává jen jako pojistka pro velké monitory, aby
   hero nepůsobilo jako proužek.
   -------------------------------------------------------------------------- */
@media (min-width: 961px) {
	.hero-stage__inner {
		min-height: min(62svh, 700px);
		padding-block: calc(var(--header-h) + 20px) 36px;
	}
	.hero-stage__card { padding-block: 40px; }
	.hero-stage__title { margin-bottom: .22em; }
	.hero-stage__card--noactions .hero-stage__crew { margin-top: 20px; padding-top: 20px; }

	/* Sekce navazuje na celoplošnou fotku, ne na další krémový blok, takže
	   nepotřebuje stejný odstup jako sekce mezi sebou. Spodní odsazení
	   schválně zůstává na --sec-y, aby rytmus směrem dolů držel. */
	.section--sluzby { padding-top: clamp(56px, 4.4vw, 68px); }
}

/* Nižší notebooky (1440×900 s pruhem záložek, 1366×768). Tam už samotné
   odsazení nestačí a musí se zmenšit i nadpis hero. Strop 4.3rem je přesně to,
   co clamp výš stejně dávno ukazuje na šířce 1280, takže to není nový vzhled,
   jen se spustí i podle výšky okna. */
@media (min-width: 961px) and (max-height: 800px) {
	.hero-stage__inner { padding-block: calc(var(--header-h) + 14px) 28px; }
	.hero-stage__card { padding-block: 30px; }
	.hero-stage__title { font-size: clamp(2.4rem, 3.4vw + 1rem, 4.3rem); }
	.hero-stage__card--noactions .hero-stage__crew { margin-top: 18px; padding-top: 18px; }
	.section--sluzby { padding-top: clamp(44px, 3.2vw, 52px); }
}

/* Nízká okna (1366×768 s lištami dává 620–660 px, starší notebooky podobně).
   Tady už nestačí ani zmenšený nadpis hero — hlavička sekce by přeťala ohyb
   uprostřed písmen, což vypadá jako chyba vykreslení. Proto se stahuje všechno
   naráz a nadpis hero jde na úroveň, kterou clamp stejně ukazuje kolem 1100 px
   šířky. Pod výškou zhruba 620 px se to už poctivě nevejde a nadpis sekce
   ohyb přeťne; menší hero už by na široké obrazovce vypadalo jako proužek. */
@media (min-width: 961px) and (max-height: 710px) {
	.hero-stage__inner { padding-block: calc(var(--header-h) + 10px) 20px; }
	.hero-stage__card { padding-block: 22px; }
	.hero-stage__title { font-size: clamp(2.2rem, 3vw + .7rem, 3.6rem); }
	.hero-stage__card--noactions .hero-stage__text { margin-bottom: .2rem; }
	.hero-stage__card--noactions .hero-stage__crew { margin-top: 14px; padding-top: 14px; }
	.section--sluzby { padding-top: clamp(28px, 2.4vw, 36px); }
	.section--sluzby .section-head { margin-bottom: clamp(24px, 3vw, 32px); }
}

/* Úzká okna 641–960 px (prohlížeč na půl obrazovky, menší tablety naležato).
   Tady stejný problém existoval i před touto opravou: při výšce kolem 700 px
   nadpis sekce přeťal ohyb. Spodní mez 560 px je pojistka, aby to nespadlo na
   telefon naležato — ten má výšku 390 až 440 px a vlastní, jinak laděný blok. */
@media (min-width: 641px) and (max-width: 960px) and (min-height: 560px) and (max-height: 900px) {
	.hero-stage__inner { padding-block: calc(var(--header-h) + 14px) 24px; }
	.hero-stage__card { padding-block: 26px; }
	.hero-stage__card--noactions .hero-stage__crew { margin-top: 16px; padding-top: 16px; }
	.section--sluzby { padding-top: clamp(32px, 4vw, 44px); }
}


/* --------------------------------------------------------------------------
   27) Galerie jako jednořádkový posuvný pás
   Mřížka 3×N dělala ze šesti fotek čtyři řady a sekce zbytečně nabobtnala.
   Jeden řádek, který se posouvá, drží sekci krátkou a dává důvod ji prozkoumat.
   Počet fotek na jedno zobrazení je v proměnné --gal-sloupce, aby se šířka
   počítala na jednom místě: počítač tři, tablet dvě, telefon jednu a kus druhé,
   aby bylo na první pohled poznat, že se pás posouvá.
   -------------------------------------------------------------------------- */
.gallery-carousel { position: relative; --gal-gap: clamp(12px, 1.8vw, 22px); --gal-sloupce: 3; }
.gallery-track {
	display: flex;
	gap: var(--gal-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Místo pro stín fotek, aby ho spodní hrana pásu neuřízla. */
	padding-bottom: 6px;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-item {
	flex: 0 0 calc((100% - (var(--gal-sloupce) - 1) * var(--gal-gap)) / var(--gal-sloupce));
	scroll-snap-align: start;
}
/* Uvnitř pásu se fotky neodkrývají po jedné — co je odrolované stranou, to
   IntersectionObserver nevidí a zbývalo by prázdné. Odkrývá se celý pás naráz,
   stejně jako u recenzí na telefonu. */
html.js .gallery-track .reveal { opacity: 1; transform: none; transition: none; }

.gallery-nav {
	position: absolute; top: calc(50% - 3px); z-index: 2;
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--cream); color: var(--ink);
	border: 1px solid var(--beige-2);
	box-shadow: 0 12px 28px -14px rgba(42, 37, 33, .6);
	transform: translateY(-50%);
	transition: background .25s, color .25s, opacity .25s;
}
.gallery-nav .icon { width: 22px; height: 22px; }
.gallery-nav--prev { left: -10px; }
.gallery-nav--next { right: -10px; }
.gallery-nav:hover { background: var(--gold); color: var(--ink); }
/* Na kraji pásu šipka zmizí místo toho, aby zůstala viset jako mrtvý prvek. */
.gallery-nav:disabled { opacity: 0; pointer-events: none; }
/* Atribut hidden musí přebít display výše, jinak by ho inline-flex přehlušil. */
.gallery-nav[hidden] { display: none; }

@media (max-width: 960px) { .gallery-carousel { --gal-sloupce: 2; } }
@media (max-width: 640px) {
	.gallery-carousel { --gal-sloupce: 1.25; }
	/* Pás dojede až k hranám displeje, aby bylo víc vidět z další fotky. */
	.gallery-track { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}
/* Na dotyku se listuje prstem, šipky by jen zabíraly fotku. */
@media (hover: none) { .gallery-nav { display: none; } }

/* --------------------------------------------------------------------------
   28) Hero vyšší — ale jen tam, kde na to je místo
   Blok 26 zastavil růst hero s oknem, protože kvůli němu sekce Služby nikdy
   nevykoukla. Tím ale hero zůstalo stejně vysoké i na velkých monitorech,
   kde místa přebývá: při okně 1000 px měřilo 620 px a pod nadpisem Služeb
   zbývalo 185 px prázdna.

   Tohle pravidlo hero zvětší přesně o to, co je zrovna volné. Odečtená
   konstanta 200 px je rozpočet na to, co musí zůstat nad ohybem: hlavička
   sekce 106 px, její horní odsazení ~67 px a ~27 px vzduchu pod nadpisem.
   Výsledek: při okně 815 px se nic nezmění (rezerva tam byla vyčerpaná),
   při 900 px hero povyroste ze 614 na 700 a při 1000 px a výš na 800.
   Strop 800 px brání tomu, aby na vysokém monitoru hero spolklo celý obraz.
   -------------------------------------------------------------------------- */
@media (min-width: 641px) {
	.hero-stage__inner { min-height: min(calc(100svh - 200px), 800px); }
}

/* --------------------------------------------------------------------------
   29) Hero vyšší — na přání klienta, ale s tvrdou podmínkou, že nadpis sekce
   Služby zůstane celý nad ohybem.

   Mezi zhruba 655 a 733 px (při okně vysokém 815) je zakázaná zóna: ohyb by
   prořízl nadpis „Manikúra, pedikúra a kosmetika" uprostřed písmen a vypadalo
   by to jako chyba vykreslení. Intuitivních 700 px je z celého rozsahu ta
   nejhorší hodnota.

   Výška hero se proto neodvozuje od obsahu ani od podílu okna, ale zpětně od
   toho, co pod ní musí zbýt: 36 px odsazení sekce + 106 px hlavičky
   + 16 px vzduchu = 158 px. Pod nadpisem tak zůstává stejných 16 px na každé
   výšce okna a do zakázané zóny se spadnout nedá.

   Odsazení sekce je schválně pevných 36 px místo clamp podle šířky. Kdyby se
   měnilo se šířkou okna, měnila by se s ním i pozice nadpisu vůči ohybu
   a v některých šířkách by nadpis ohyb přeťal.
   -------------------------------------------------------------------------- */
@media (min-width: 641px) {
	.hero-stage__inner { min-height: min(calc(100svh - 158px), 900px); }
	.section--sluzby { padding-top: 36px; }
}

/* --------------------------------------------------------------------------
   30) Profil jedné členky + mezinadpisy v ceníku
   Salon startuje s jednou manikérkou. Mřížka o jedné kartě vypadá jako
   nedodělaná stránka, proto se sekce při jediné člence přepne na široký profil:
   fotka v oblouku vlevo, celý příběh vpravo. Jakmile přibude druhá, šablona
   se sama vrátí k mřížce a tenhle blok se přestane používat.

   Ceník má nově mezinadpisy — řádek bez ceny (Manikúra, Pedikúra, Podmínky)
   se vysází jako nadpis místo cenového řádku.
   -------------------------------------------------------------------------- */
/* Mezinadpis v ceníku. Bez něj by dvacet řádků splynulo v jeden sloupec čísel. */
.price-head {
	margin-top: 26px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--beige);
	font-family: var(--font-display);
	font-size: 1.15rem;
	line-height: 1.2;
	color: var(--ink);
}
.price-head:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   32) Karta členky: zkrácený popis a místa „Připravujeme"
   Salon startuje s jednou manikérkou a klient chtěl zachovat řadu tří karet.
   Dvě místa jsou proto označená jako připravovaná — tlumeně, čárkovaným rámem
   a bez tlačítek, aby bylo na první pohled jasné, že tam zatím nikdo není
   a nebyla to slepá ulička. Řada se doplňuje sama: jakmile budou tři skutečné
   členky, místa zmizí bez zásahu.

   Karta zůstává strůdmá: jméno, obor, Instagram, rezervace a ceník. Delší příběh
   členky se otevře až v okně ceníku, aby mezi kartami nevznikaly různé výšky.
   -------------------------------------------------------------------------- */
/* Připravované místo: čárkovaný rám, tlumené písmo, žádné tlačítko. */
.tcard--soon { background: var(--cream); border-style: dashed; box-shadow: none; }
.tcard--soon:hover { transform: none; box-shadow: none; border-color: var(--beige); }
/* Zarovnat nahoru, aby „Připravujeme“ lícovalo se jménem na sousední kartě. */
.tcard--soon .tcard__body { justify-content: flex-start; }
.tcard--soon .tcard__name { font-size: 1.35rem; color: var(--ink-2); }
.tcard--soon .tcard__role { margin-bottom: 0; }
.tcard__soon { display: inline-flex; color: var(--gold); opacity: .5; }
.tcard__soon .icon { width: 40px; height: 40px; }
.tcard__media:has(.tcard__soon)::after {
	content: ""; position: absolute; inset: 10px;
	border: 1px dashed rgba(194, 154, 69, .38);
	border-radius: 999px 999px 10px 10px; pointer-events: none;
}


/* Telefon: mřížka je dvousloupcová, takže tři karty nechávají jednu samotnou
   ve druhé řadě a připravované místo se natáhne na výšku Týniny karty.
   Karta s členkou proto zabere celou šířku a místa se srovnají pod ni vedle sebe. */
@media (max-width: 760px) {
	/* Tři karty ve dvousloupcové mřížce: členka zabere celou šířku, připravovaná
	   místa zůstanou vedle sebe pod ní. */
	.tgrid:has(.tcard--soon) .tcell:first-child { grid-column: 1 / -1; }
	.tcard--soon .tcard__media { aspect-ratio: 1 / 1; }
	.tcard--soon .tcard__name { font-size: 1.15rem; }
	.tcard--soon .tcard__role { font-size: .74rem; }
	/* Starší pravidla překlopí lichou poslední kartu naležato a roztáhnou ji přes
	   celou šířku. U připravovaných míst to text rozlámá po písmenech, proto zpět. */
	.tgrid:has(.tcard--soon) .tcell:nth-child(odd):last-child { grid-column: auto; }
	.tcell:nth-child(odd):last-child .tcard--soon { display: flex; flex-direction: column; align-items: stretch; padding: 14px 14px 20px; }
	.tcell:nth-child(odd):last-child .tcard--soon .tcard__body { text-align: center; padding: 14px 2px 0; }
}


/* --------------------------------------------------------------------------
   33) Mřížka týmu: pevná šířka karty a vycentrovaná řada
   Původní pravidla karty roztahovala na celou šířku kontejneru, takže při pěti
   členkách měly 220 px, ale při třech 384 px. Karta teď drží 220 px bez ohledu
   na počet a řada se centruje — tři karty vypadají stejně jako původních pět.
   Spodní mez 170 px slouží jen k výpočtu, kolik sloupců se vešle; karty se pod ní
   smrsknou jen na nejtěsnějších šířkách těsně nad hranicí mobilního rozvržení.
   -------------------------------------------------------------------------- */
@media (min-width: 761px) {
	.tgrid {
		grid-template-columns: repeat(auto-fit, minmax(170px, 220px));
		justify-content: center;
	}
}


/* --------------------------------------------------------------------------
   34) Příběh členky v okně ceníku: po odstavcích a zkrácený
   Text se vypisoval jedním esc_html do jednoho <p>, takže se zalomení řádků
   v HTML ztratilo a pět odstavců splynulo v jeden blok. Teď se sází po
   odstavcích a zkrátí na čtyři řádky; zbytek se otevře tlačítkem.
   -------------------------------------------------------------------------- */
.pricedlg__bio-text {
	position: relative;
	overflow: hidden;
	max-height: 6.4em;
	line-height: 1.6;
	transition: max-height .45s var(--ease);
}
.pricedlg__bio-text p { margin-bottom: .7em; }
.pricedlg__bio-text p:last-child { margin-bottom: 0; }
/* Zastínění dolní hrany řekne, že text pokračuje, líp než samotné tlačítko. */
.pricedlg__bio-text::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em;
	background: linear-gradient(rgba(251, 248, 243, 0), var(--cream));
	pointer-events: none; transition: opacity .3s;
}
.pricedlg__bio[data-open] .pricedlg__bio-text { max-height: 160em; }
.pricedlg__bio[data-open] .pricedlg__bio-text::after { opacity: 0; }
.pricedlg__more {
	margin-top: 10px; padding: 6px 0;
	background: none; border: 0; cursor: pointer;
	font-family: inherit; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
	color: var(--gold-text);
}
.pricedlg__more:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   35) Fotka na kartě služby: oddálit, ať je vidět, co se na ní děje
   Fotka se roztahovala přes celou výšku karty (498 px), ale vidět je jen horní
   pruh 224 px — zbytek kryje skleněný panel. Ke všemu se brala ve velikosti
   aura-card, což je tvrdý ořez 800×1000 na výšku. Z fotky na šířku se tak
   rovnou zahodilo 40 % šířky a pak se z toho ukázala jen horní polovina.
   Výsledkem byl detail interiéru, na kterém lidé vůbec nebyli vidět.

   Šablona teď bere aura-wide (bez ořezu) a fotka dostane výšku 50 % karty.
   Tvar jejího rámu se tím přiblíží viditelnému pruhu, takže se ořezává
   minimálně. Zůstává cover, aby fotka rám vždy vyplnila i v případě, že
   někdo nahraje fotku na výšku — contain by u ní nechal prázdné pruhy.
   -------------------------------------------------------------------------- */
.svc-card--glass .svc-card__img {
	height: 50%;
	bottom: auto;
	object-position: 50% 50%;
}

/* ---------- 36. Recenze jako posuvný pás ----------
   Osm reálných recenzí se do statické mřížky nevejde, a zkracovat je nechceme.
   Pás používá stejnou mechaniku jako galerie, včetně stejných šipek. */
.reviews-carousel { position: relative; --rev-gap: clamp(20px, 2.6vw, 32px); --rev-sloupce: 3; }

@media (min-width: 641px) {
	.reviews-grid {
		display: flex;
		gap: var(--rev-gap);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}
	.reviews-grid::-webkit-scrollbar { display: none; }
	.reviews-grid > .review-card {
		flex: 0 0 calc((100% - (var(--rev-sloupce) - 1) * var(--rev-gap)) / var(--rev-sloupce));
		scroll-snap-align: start;
	}
	/* Karty v pásu se nesmí odkrývat postupně, uživatel je posouvá sám. */
	html.js .reviews-grid .reveal { opacity: 1; transform: none; transition: none; }
}

@media (min-width: 641px) and (max-width: 960px) { .reviews-carousel { --rev-sloupce: 2; } }

/* ---------- 37. Hero na telefonu: postavy výš nad kartu ----------
   Rám je na telefonu tak vysoký a úzký, že se širokoúhlá fotka vejde celá
   na výšku a ořezává se jen do stran. object-position proto nemá svisle co
   posouvat a lidé končí přesně na hraně krémové karty. Řeší to až transform.
   Ověřeno na výškách 667, 812, 844, 932 a 1000 px: dole vždy zbývá rezerva
   14 až 22 px, takže nikde nevznikne prázdný pruh. */
@media (max-width: 640px) {
	.hero-stage__img { transform: scale(1.16) translateY(-9%); }
}

/* ---------- 38. Telefon: sjednocené zarovnání nadpisů ----------
   Šest sekcí z osmi mělo na telefonu nadpis na střed, O nás a Dárkový poukaz
   vlevo. Na počítači to dává smysl, tam jsou obě sekce dvousloupcové. Po
   zalomení do jednoho sloupce ale ta výjimka ztrácí důvod a působí jako chyba.
   Nadtitulek, nadpis a tlačítko tedy na střed, delší text zůstává vlevo. */
@media (max-width: 640px) {
	.section--onas .eyebrow,
	.section--poukaz .eyebrow {
		display: flex;
		justify-content: center;
	}

	.section--onas .section-title,
	.section--poukaz .section-title,
	.section--onas .about__actions,
	.section--poukaz .voucher__content {
		text-align: center;
	}

	/* Vlastní text na střed nedáváme. Odstavce mají 6 až 7 řádků a u takové
	   délky se každý řádek začíná jinde, což čtení znatelně zpomaluje. */
	.section--poukaz .voucher__text {
		text-align: left;
	}
}