/* Homepage hero slider (inc-hero.php). One composition for every slide; the markup works without JS (first slide visible). */
.pers-hs {
	--pers-hs-pad: clamp(32px, 7vw, 112px);
	position: relative;
	background: #e2e7ed;
	overflow: hidden;
}
.pers-hs__slides { position: relative; height: clamp(420px, 41vw, 540px); }
.pers-hs__slide {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	grid-template-rows: minmax(0, 1fr);
	align-items: center;
	background: var(--pers-hs-bg, #e2e7ed);
	opacity: 0;
	visibility: hidden;
	transition: opacity .9s var(--pers-ease), visibility 0s .9s;
}
.pers-hs__slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s var(--pers-ease); }

.pers-hs__text { padding-left: var(--pers-hs-pad); }
.pers-hs__title {
	margin: 0;
	font-size: clamp(30px, 3.5vw, 50px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--pers-ink);
	text-wrap: balance;
}
.pers-hs__ref { margin: 16px 0 0; font-size: 15px; font-weight: 500; letter-spacing: .06em; color: var(--pers-graphite); }
.pers-hs__desc { margin: 20px 0 0; max-width: 30ch; font-size: clamp(17px, 1.5vw, 21px); font-weight: 300; line-height: 1.5; color: var(--pers-muted); text-wrap: pretty; }
.pers-hs__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 32px;
	height: 48px;
	padding: 0 32px;
	border: 1px solid var(--pers-ink);
	background: transparent;
	color: var(--pers-ink);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .5s var(--pers-ease), border-color .5s var(--pers-ease), color .5s var(--pers-ease);
}
.pers-hs__btn:hover { background: var(--pers-copper-deep); border-color: var(--pers-copper-deep); color: #fff; }
.pers-hs__btn:focus-visible { outline: 2px solid var(--pers-copper); outline-offset: 3px; }

.pers-hs__img { align-self: stretch; min-height: 0; padding: var(--pers-hs-vpad, 48px) calc(var(--pers-hs-pad) * .5) var(--pers-hs-vpad, 48px) 0; } /* wide pieces (earrings, bracelets) keep air on the right */
.pers-hs__img img { display: block; width: 88%; height: 100%; margin: 0 auto; object-fit: contain; }

/* the first slide appears at once (it is the LCP element); only changes between slides are animated */
.pers-hs.is-playing .pers-hs__slide.is-active .pers-hs__text > * { animation: pers-hs-rise .9s var(--pers-ease) both; }
.pers-hs.is-playing .pers-hs__slide.is-active .pers-hs__text > :nth-child(2) { animation-delay: .06s; }
.pers-hs.is-playing .pers-hs__slide.is-active .pers-hs__text > :nth-child(3) { animation-delay: .12s; }
.pers-hs.is-playing .pers-hs__slide.is-active .pers-hs__text > :nth-child(4) { animation-delay: .18s; }
.pers-hs.is-playing .pers-hs__slide.is-active .pers-hs__img img { animation: pers-hs-settle 1.1s var(--pers-ease) both; }
@keyframes pers-hs-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes pers-hs-settle { from { opacity: 0; transform: translateX(24px); } }

/* controls: matte glass, the same material as the gallery arrows and the back-to-top button */
.pers-hs__nav,
.pers-hs__arrow {
	background: rgba(255, 255, 255, .4);
	border: 1px solid rgba(255, 255, 255, .6);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pers-hs__nav, .pers-hs__arrow { background: rgba(255, 255, 255, .62); }
}
.pers-hs__nav { position: absolute; left: var(--pers-hs-pad); bottom: 24px; display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 16px; border-radius: 16px; }
.pers-hs__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 5px; background: rgba(35, 31, 32, .3); cursor: pointer; transition: width .6s var(--pers-ease), background .4s; }
/* a larger touch target than the dot itself */
.pers-hs__dot { position: relative; }
.pers-hs__dot::before { content: ""; position: absolute; inset: -9px -4px; }
.pers-hs__dot:focus { background: rgba(35, 31, 32, .3); }
.pers-hs__dot:hover { background: rgba(35, 31, 32, .55); }
.pers-hs__dot.is-active, .pers-hs__dot.is-active:focus, .pers-hs__dot.is-active:hover { width: 32px; background: var(--pers-ink); }
.pers-hs__dot:focus-visible { outline: 2px solid var(--pers-copper); outline-offset: 2px; }

.pers-hs__arrows { position: absolute; right: clamp(16px, 3vw, 40px); bottom: 20px; display: flex; gap: 8px; }
.pers-hs__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 2px;
	color: var(--pers-ink);
	cursor: pointer;
	transition: background .5s var(--pers-ease), border-color .5s var(--pers-ease), transform .3s var(--pers-ease);
}
.pers-hs__arrow svg { stroke-width: 1.25; }
/* the parent theme paints every button:focus dark; a clicked arrow keeps focus, so pin the focus look to the glass */
.pers-hs__arrow:focus { background: rgba(255, 255, 255, .4); border-color: rgba(255, 255, 255, .6); color: var(--pers-ink); }
.pers-hs__arrow:hover, .pers-hs__arrow:active { background: rgba(255, 255, 255, .75); border-color: rgba(255, 255, 255, .9); color: var(--pers-ink); }
.pers-hs__arrow:focus-visible { outline: 2px solid var(--pers-copper); outline-offset: 3px; }
.pers-hs__arrow:active { transform: scale(.96); }

@media (max-width: 1023px) {
	.pers-hs__slides { height: 400px; }
	.pers-hs__desc { max-width: 24ch; }
}

/* phone: same composition, compact; the description is left out */
@media (max-width: 767px) {
	.pers-hs { --pers-hs-pad: 20px; }
	.pers-hs__slides { height: 288px; } /* room for a four-line title (long names like «Van Cleef & Arpels / Серьги Vintage Alhambra») above the dots */
	.pers-hs__slide { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
	.pers-hs__title { font-size: 21px; }
	.pers-hs__ref { margin-top: 8px; font-size: 12px; }
	.pers-hs__desc { display: none; }
	.pers-hs__btn { margin-top: 18px; height: 40px; padding: 0 20px; font-size: 12px; }
	.pers-hs { --pers-hs-vpad: 20px; }
	.pers-hs__img { padding-right: 8px; }
	.pers-hs__img img { width: 100%; }
	.pers-hs__nav { bottom: 15px; height: 26px; gap: 9px; padding: 0 12px; border-radius: 13px; }
	.pers-hs__arrows { display: none; } /* phones swipe; the dots stay as the gesture-free control */
	.pers-hs__dot { width: 7px; height: 7px; border-radius: 4px; }
	.pers-hs__dot.is-active, .pers-hs__dot.is-active:focus, .pers-hs__dot.is-active:hover { width: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.pers-hs__slide, .pers-hs__slide * { animation: none !important; transition: none !important; }
}