/*
 * Shared design components: section furniture, media frames, the slider, and
 * the small primitives (stats, pills, prose, icon rows) that the homepage
 * introduced and every Phase 2 page reuses.
 *
 * These rules were authored for the front page and moved here verbatim when
 * the inner pages needed them. components.css is enqueued after base.css and
 * before front-page.css, so the homepage cascade is unchanged.
 */

/* --- Shared section furniture ------------------------------------------- */

.grain-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.03;
	pointer-events: none;
	background-image: var(--paper-grain);
}

.grain-layer.is-strong {
	opacity: 0.05;
}

.glow--tr {
	top: 0;
	right: 0;
	width: 600px;
	height: 600px;
	transform: translate(33%, -50%);
}

.glow--bl {
	bottom: 0;
	left: 0;
	width: 800px;
	height: 800px;
	transform: translate(-50%, 33%);
	filter: blur(120px);
}

.feature__body > * + * {
	margin-top: 2.5rem;
}

.feature__body .eyebrow + .section-title {
	margin-top: 2rem;
}

.tick-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	list-style: none;
}

.tick-list li {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(26, 42, 30, 0.8);
}

.tick-list__dot {
	flex: none;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-gold);
}

/* Media frame: the offset hairline border around each slider. */
.media-frame {
	position: relative;
}

.media-frame::before {
	content: "";
	position: absolute;
	inset: -1rem;
	z-index: -1;
	border: 1px solid rgba(196, 163, 90, 0.1);
	border-radius: 4rem;
	transition: inset 1s var(--ease-luxury);
}

.media-frame.is-light::before {
	border-color: rgba(196, 163, 90, 0.2);
}

.media-frame--r100::before {
	border-radius: 6.25rem;
}

.media-frame:hover::before {
	inset: 0;
}

.media-frame__crop {
	overflow: hidden;
	border-radius: 5rem;
	box-shadow: var(--luxury-shadow);
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.media-frame__crop.is-r100 {
	border-radius: 6.25rem;
}

.media-frame__image {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 5s;
}

.media-frame:hover .media-frame__image {
	transform: scale(1.05);
}

/* --- Slider ------------------------------------------------------------- */

.slider {
	position: relative;
	overflow: hidden;
}

.slider.is-r80 {
	border-radius: 5rem;
}

.slider.is-r100 {
	border-radius: 6.25rem;
}

.slider__track {
	position: relative;
	width: 100%;
}

.slider.is-portrait .slider__track {
	aspect-ratio: 4 / 5;
}

/*
 * The wide gallery shape, for sets of landscape frames that are there to be
 * browsed rather than to carry a section on their own.
 *
 * It was called `is-spa` because the homepage wellness slider was its first
 * caller. That slider is portrait now — two of its three photographs were shot
 * upright — so the name pointed at the one place it is no longer used, which
 * left the pasta gallery wearing a class named after the spa.
 */
.slider.is-gallery .slider__track {
	aspect-ratio: 16 / 10;
}

.slider__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s var(--ease-luxury);
}

.slider__image.is-active {
	opacity: 1;
}

.slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	/* Source keeps the arrows visible at rest: w-9 md:w-10, bg-white/85. */
	z-index: 20;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(12px);
	box-shadow: var(--luxury-shadow);
	color: var(--wp--preset--color--brand-wood);
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
}

.slider__arrow:hover {
	background: var(--wp--preset--color--brand-gold);
	color: #fff;
}

/* Bottom scrim so the dots stay legible over bright photography. */
.slider__scrim {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 7rem;
	pointer-events: none;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent);
}

/*
 * Photo credit, inside the frame rather than under it.
 *
 * Under the slider it would need a wrapper element, and the slider is dropped
 * into half a dozen different grids and flex rows that a new wrapper would
 * disturb. Inside, it costs no layout at all — and the scrim that already
 * exists to keep the dots legible does the same job for this.
 *
 * Left, because the dots are centred and the arrows hold both edges.
 */
.slider__credit {
	position: absolute;
	left: 1.25rem;
	bottom: 1rem;
	z-index: 15;
	margin: 0;
	max-width: calc(100% - 7rem);
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
	pointer-events: none;
}

/* In a mixed-source slider, only the credit belonging to the visible slide. */
.slider__credit--slide {
	opacity: 0;
	transition: opacity 1s var(--ease-luxury);
}

.slider__credit--slide.is-active {
	opacity: 1;
}

@media (max-width: 767px) {
	.slider__credit {
		left: 1rem;
		bottom: 0.75rem;
		max-width: calc(100% - 6rem);
		font-size: 0.625rem;
	}
}

.slider__arrow svg {
	width: 1.25rem;
	height: 1.25rem;
}

.slider__arrow--prev {
	left: 0.75rem;
}

.slider__arrow--next {
	right: 0.75rem;
}

.slider__dots {
	position: absolute;
	z-index: 20;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 0.5rem;
}

.slider__dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: width 0.4s, background-color 0.4s;
}

.slider__dot.is-active {
	width: 1.5rem;
	background: var(--wp--preset--color--brand-gold);
}

@media (min-width: 768px) {
	.slider__arrow {
		width: 2.5rem;
		height: 2.5rem;
	}

	.slider__arrow--prev {
		left: 1rem;
	}

	.slider__arrow--next {
		right: 1rem;
	}

	.slider__dots {
		bottom: 1.5rem;
	}
}

@media (max-width: 767px) {
	.slider.is-r80,
	.slider.is-r100 {
		border-radius: 2.5rem;
	}

	.media-frame::before {
		display: none;
	}

	.media-frame__crop,
	.media-frame__crop.is-r100 {
		border-radius: 2.5rem;
	}
}


.stat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.5rem;
}

.stat__value {
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.875rem;
	font-style: italic;
	color: var(--wp--preset--color--brand-gold);
}

.stat__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.5625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.4;
}

.pill {
	position: absolute;
	top: 2.5rem;
	right: 2.5rem;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	background: rgba(26, 42, 30, 0.6);
	backdrop-filter: blur(12px);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-cream);
}

.pill__dot {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-gold);
}

.icon-row {
	display: flex;
	gap: 3rem;
	list-style: none;
}

.icon-row li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.icon-row__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border: 1px solid rgba(196, 163, 90, 0.2);
	border-radius: 999px;
	color: var(--wp--preset--color--brand-gold);
}

.icon-row__circle svg {
	width: 1.5rem;
	height: 1.5rem;
}

.icon-row__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.5625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.6;
}

.prose {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--wp--preset--color--brand-stone);
}

.prose--dim {
	color: rgba(245, 240, 232, 0.6);
}

.prose--wide {
	max-width: 42rem;
	font-size: 1.25rem;
}

.section-title--xl {
	font-size: 3.75rem; /* text-6xl md:text-8xl */
}

@media (min-width: 768px) {
	.section-title--xl {
		font-size: 6rem;
	}
}

.lead--bright {
	color: rgba(245, 240, 232, 0.8);
	font-weight: 300;
}

/* --- Slider variants used by the inner pages ---------------------------- */

.slider.is-landscape .slider__track {
	aspect-ratio: 4 / 3;
}

/*
 * Landscape photography at its own shape.
 *
 * 3:2 is what came out of the camera, so `object-fit: cover` has nothing to
 * throw away — no cropped-off summit, no lost foreground. A cinematic 21:9 was
 * tempting here and is exactly wrong for these frames: it would cut a third of
 * the height out of pictures whose subject is the height, sky down to meadow.
 *
 * Narrow screens get 4:3, because a 3:2 strip across a 390 px phone is too
 * short to read as a landscape at all.
 */
.slider.is-vista .slider__track {
	aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
	.slider.is-vista .slider__track {
		aspect-ratio: 3 / 2;
	}
}

/*
 * Square, for a set that mixes orientations.
 *
 * The wellness photographs are one landscape and two portraits, so any frame
 * with a strong direction throws away most of half the set: 4:3 kept 55% of
 * the height of the sauna and the steam cabin, which is the difference between
 * a cabin and a strip of cabin wall. A square is the only shape that treats
 * both fairly, and it costs the landscape frame its outer thirds rather than
 * its subject.
 */
.slider.is-square .slider__track {
	aspect-ratio: 1 / 1;
}

.slider.is-r32 {
	border-radius: 2rem;
}

.slider.is-r40 {
	border-radius: 2.5rem;
}

.slider.is-r48 {
	border-radius: 3rem;
}

@media (max-width: 767px) {
	.slider.is-r32,
	.slider.is-r40,
	.slider.is-r48 {
		border-radius: 2rem;
	}
}

@media (min-width: 768px) {
	.slider.is-landscape.is-r80 .slider__track {
		aspect-ratio: 16 / 11;
	}
}

/*
 * Credit for a single photograph (see template-parts/parts/photo-credit.php).
 *
 * Sits over the bottom-left of whatever frame contains it, on the same
 * reasoning as .slider__credit: no wrapper, no layout cost, and legible over
 * photography because every frame that uses it already carries a wash or a
 * scrim at the bottom. Positioning relies on the containing frame being a
 * positioned element, which the media frames all are.
 */
.photo-credit {
	position: absolute;
	left: 1.25rem;
	bottom: 1rem;
	z-index: 6;
	margin: 0;
	max-width: calc(100% - 2.5rem);
	color: rgba(255, 255, 255, 0.95);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	line-height: 1.3;
	/*
	 * Heavier than the slider's, because there is no scrim here. A slider
	 * credit sits on .slider__scrim; these frames have none, and the location
	 * photograph puts this text over bright gravel. Two shadows - a tight one
	 * for edge definition, a wide soft one to darken the ground behind the
	 * glyphs - keep it readable without painting a box over the picture.
	 */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.65);
	pointer-events: none;
}

@media (max-width: 767px) {
	.photo-credit {
		left: 1rem;
		bottom: 0.75rem;
		font-size: 0.625rem;
	}
}

/*
 * Framed variant: bottom-RIGHT, and both halves of that matter.
 *
 * Right, because the two frames that use this - the home location block and
 * the About opener - each carry a round gold badge hung off the bottom-left
 * corner, and a credit at the default inset disappears behind it.
 *
 * Inset further than the default, because these frames are heavily rounded
 * (6.25rem on the location frame) and the usual 1.25rem would put the text in
 * the corner's transparent sweep.
 */
.photo-credit--framed {
	left: auto;
	right: 3rem;
	bottom: 2rem;
	max-width: 60%;
	text-align: right;
}

@media (max-width: 767px) {
	.photo-credit--framed {
		right: 1.75rem;
		bottom: 1.25rem;
	}
}

/* --- Panel actions ------------------------------------------------------ */

/*
 * A panel foot that carries a primary button and a secondary text link. They
 * stack on a phone, where two controls side by side would each be too narrow
 * to read, and sit on one baseline from 640px up.
 */
.panel__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}

@media (min-width: 640px) {
	.panel__actions {
		flex-direction: row;
		align-items: center;
		gap: 2rem;
	}
}

/*
 * "Preveri stanje bona" — the secondary errand, wherever vouchers are shown.
 *
 * It lives here rather than in vouchers.css because /paketi/ carries the same
 * link and does not load that sheet; one definition is what keeps the two
 * places from drifting apart. The colour is stated for light ground and
 * restated inside a dark panel, which is the only context where it inverts.
 */
.ps-balance-link {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding-bottom: 0.375rem;
	border-bottom: 1px solid var(--wp--preset--color--brand-gold-dim);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-wood);
	transition: color 0.3s, border-color 0.3s;
}

.ps-balance-link:hover {
	color: var(--wp--preset--color--brand-gold);
	border-color: var(--wp--preset--color--brand-gold);
}

.panel--dark .ps-balance-link {
	color: var(--wp--preset--color--brand-cream);
	border-color: rgba(196, 163, 90, 0.4);
}

.panel--dark .ps-balance-link:hover {
	color: var(--wp--preset--color--brand-gold);
	border-color: var(--wp--preset--color--brand-gold);
}