/**
 * Property CMS — Hero Slider (frontend).
 * Full-bleed hero with fade/slide effects, overlays, arrows and dots.
 */

.pcms-hero {
	--pcms-hero-h: 640px;
	--pcms-hero-speed: 700ms;
	--pcms-hero-arrow: 48px;
	--pcms-hero-primary: #f95b5b;
	position: relative;
	width: 100%;
	height: var(--pcms-hero-h);
	overflow: hidden;
	background: #1a1a1a;
	box-sizing: border-box;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.pcms-hero *, .pcms-hero *::before, .pcms-hero *::after { box-sizing: border-box; }
.pcms-hero:focus { outline: none; }

.pcms-hero__viewport { position: absolute; inset: 0; }

/* Slides */
.pcms-hero__slide { position: absolute; inset: 0; display: flex; }
.pcms-hero--fade .pcms-hero__slide { opacity: 0; transition: opacity var(--pcms-hero-speed) ease; }
.pcms-hero--fade .pcms-hero__slide.is-active { opacity: 1; z-index: 2; }
.pcms-hero--slide .pcms-hero__slide { transform: translateX(100%); transition: transform var(--pcms-hero-speed) cubic-bezier(.5, 0, .1, 1); will-change: transform; }
.pcms-hero--slide .pcms-hero__slide.is-active { transform: translateX(0); z-index: 2; }

.pcms-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.06); transition: transform 7s ease; }
.pcms-hero__slide.is-active .pcms-hero__bg { transform: scale(1); }
.pcms-hero__bg--placeholder { background: linear-gradient(135deg, #2b2b2b, #454545); transform: none; }
.pcms-hero__overlay { position: absolute; inset: 0; }

/* Sample banner (shown to editors only when no slides exist yet) */
.pcms-hero__bg--sample {
	background:
		repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 14px, transparent 14px 28px),
		linear-gradient(135deg, #33373b, #565b61);
	display: flex; align-items: center; justify-content: center;
}
.pcms-hero__ph-ico { color: rgba(255, 255, 255, .22); line-height: 0; }
.pcms-hero__sample-badge {
	position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
	z-index: 20; max-width: 92%;
	padding: 7px 16px; border-radius: 999px;
	background: rgba(17, 24, 39, .72); color: #fff;
	font-size: 12px; font-weight: 600; letter-spacing: .01em; text-align: center;
	backdrop-filter: blur(4px); pointer-events: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.pcms-hero--sample .pcms-hero__cta { cursor: default; }

/* Content */
.pcms-hero__inner { position: relative; z-index: 3; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 44px; height: 100%; display: flex; flex-direction: column; }
.pcms-hero__slide--left .pcms-hero__inner { align-items: flex-start; text-align: left; justify-content: center; }
.pcms-hero__slide--center .pcms-hero__inner { align-items: center; text-align: center; justify-content: center; }
.pcms-hero__slide--right .pcms-hero__inner { align-items: flex-end; text-align: right; justify-content: center; }
.pcms-hero__content { max-width: 680px; color: #fff; }

.pcms-hero__subtitle { font-size: 13px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #fff; margin: 0 0 16px; opacity: .92; }
.pcms-hero__title { font-size: clamp(21px, 3.5vw, 42px); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; color: #fff; margin: 0; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.pcms-hero__desc { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; color: rgba(255, 255, 255, .92); margin: 20px 0 0; max-width: 560px; }
.pcms-hero__slide--center .pcms-hero__desc { margin-left: auto; margin-right: auto; }
.pcms-hero__slide--right .pcms-hero__desc { margin-left: auto; }

.pcms-hero__cta {
	display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
	background: var(--pcms-hero-primary); color: #fff; text-decoration: none;
	font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	padding: 16px 30px; border-radius: 100px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
	transition: transform .16s ease, box-shadow .2s ease, background .2s ease;
}
.pcms-hero__cta svg { transition: transform .18s ease; }
.pcms-hero__cta:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0, 0, 0, .34); }
.pcms-hero__cta:hover svg { transform: translateX(4px); }

/* Staggered reveal on the active slide */
.pcms-hero__slide .pcms-hero__subtitle,
.pcms-hero__slide .pcms-hero__title,
.pcms-hero__slide .pcms-hero__desc,
.pcms-hero__slide .pcms-hero__cta { opacity: 0; transform: translateY(18px); }
.pcms-hero__slide.is-active .pcms-hero__subtitle { animation: pcms-hero-up .7s .15s forwards; }
.pcms-hero__slide.is-active .pcms-hero__title { animation: pcms-hero-up .7s .28s forwards; }
.pcms-hero__slide.is-active .pcms-hero__desc { animation: pcms-hero-up .7s .42s forwards; }
.pcms-hero__slide.is-active .pcms-hero__cta { animation: pcms-hero-up .7s .56s forwards; }
@keyframes pcms-hero-up { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
	.pcms-hero__slide .pcms-hero__subtitle,
	.pcms-hero__slide .pcms-hero__title,
	.pcms-hero__slide .pcms-hero__desc,
	.pcms-hero__slide .pcms-hero__cta { opacity: 1; transform: none; animation: none; }
	.pcms-hero__bg { transition: none; }
}

/* Arrows */
.pcms-hero__arrow {
	position: absolute; z-index: 5;
	width: var(--pcms-hero-arrow); height: var(--pcms-hero-arrow);
	display: grid; place-items: center;
	border: 0; border-radius: 50%; cursor: pointer;
	background: rgba(255, 255, 255, .18); color: #fff;
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	transition: background .2s ease, transform .18s ease, opacity .2s ease;
}
.pcms-hero__arrow svg { pointer-events: none; }
.pcms-hero__arrow.is-disabled { opacity: 0; pointer-events: none; }
/* Positions */
.pcms-hero--arrows-sides-center .pcms-hero__arrow { top: 50%; transform: translateY(-50%); }
.pcms-hero--arrows-sides-center .pcms-hero__arrow--prev { left: 24px; }
.pcms-hero--arrows-sides-center .pcms-hero__arrow--next { right: 24px; }
.pcms-hero--arrows-bottom-right .pcms-hero__arrow { bottom: 28px; }
.pcms-hero--arrows-bottom-right .pcms-hero__arrow--prev { right: calc(28px + var(--pcms-hero-arrow) + 10px); }
.pcms-hero--arrows-bottom-right .pcms-hero__arrow--next { right: 28px; }
.pcms-hero--arrows-bottom-center .pcms-hero__arrow { bottom: 60px; }
.pcms-hero--arrows-bottom-center .pcms-hero__arrow--prev { left: calc(50% - var(--pcms-hero-arrow) - 34px); }
.pcms-hero--arrows-bottom-center .pcms-hero__arrow--next { left: calc(50% + 34px); }
/* Hover effects */
.pcms-hero--ahover-fill .pcms-hero__arrow:hover { background: #fff; color: #1a1a1a; }
.pcms-hero--ahover-scale .pcms-hero__arrow:hover { background: rgba(255, 255, 255, .32); }
.pcms-hero--arrows-sides-center.pcms-hero--ahover-scale .pcms-hero__arrow:hover { transform: translateY(-50%) scale(1.14); }
.pcms-hero--ahover-scale:not(.pcms-hero--arrows-sides-center) .pcms-hero__arrow:hover { transform: scale(1.14); }
.pcms-hero--ahover-slide .pcms-hero__arrow:hover { background: rgba(255, 255, 255, .3); }
.pcms-hero--ahover-slide .pcms-hero__arrow--prev:hover svg { transform: translateX(-3px); }
.pcms-hero--ahover-slide .pcms-hero__arrow--next:hover svg { transform: translateX(3px); }
.pcms-hero__arrow svg { transition: transform .18s ease; }

/* Dots */
.pcms-hero__dots { position: absolute; z-index: 5; bottom: 26px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 10px; }
.pcms-hero__dot { border: 0; cursor: pointer; background: rgba(255, 255, 255, .5); padding: 0; transition: background .2s ease, width .25s ease, transform .2s ease; }
/* dots */
.pcms-hero--dots-dots .pcms-hero__dot { width: 9px; height: 9px; border-radius: 50%; }
.pcms-hero--dots-dots .pcms-hero__dot.is-active { background: #fff; transform: scale(1.25); }
/* bars */
.pcms-hero--dots-bars .pcms-hero__dot { width: 26px; height: 4px; border-radius: 100px; }
.pcms-hero--dots-bars .pcms-hero__dot.is-active { background: #fff; width: 44px; }
/* numbers */
.pcms-hero--dots-numbers .pcms-hero__dot { width: auto; height: auto; background: none; color: rgba(255, 255, 255, .6); font: inherit; font-size: 13px; font-weight: 700; padding: 4px 8px; }
.pcms-hero--dots-numbers .pcms-hero__dot.is-active { color: #fff; border-bottom: 2px solid var(--pcms-hero-primary); }

/* Responsive */
@media (max-width: 782px) {
	.pcms-hero.is-mobile-full { height: 100svh; }
	.pcms-hero__inner { padding: 0 22px; }
	.pcms-hero--arrows-sides-center .pcms-hero__arrow--prev { left: 12px; }
	.pcms-hero--arrows-sides-center .pcms-hero__arrow--next { right: 12px; }
	.pcms-hero__cta { padding: 14px 24px; }
}