/**
 * Lugnalandet – avslutande läges- och bokningsband på stugsidan.
 *
 * Egen CSS: temats style.css är en kompilerad Tailwind-bundle och saknar
 * flera av de utility-klasser layouten behöver.
 */

.stugor-cta {
	position: relative;
	overflow: hidden;
	border-radius: 1.25rem;
	border: 1px solid var(--color-border, hsl(220 13% 91%));
	background:
		radial-gradient(90% 120% at 100% 0%, hsl(35 55% 58% / 0.12), transparent 62%),
		radial-gradient(70% 100% at 0% 100%, hsl(35 55% 58% / 0.06), transparent 60%),
		var(--color-card, #fff);
	box-shadow: 0 1px 2px hsl(220 10% 20% / 0.06), 0 24px 60px hsl(220 10% 10% / 0.18);
}

/* Hårfin guldlinje längs överkanten. */
.stugor-cta::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(to right, transparent, hsl(35 55% 58% / 0.85) 25%, hsl(35 55% 58% / 0.85) 75%, transparent);
}

.stugor-cta__inner {
	display: grid;
	/* minmax(0,1fr) i stället för auto: annars växer spåret med innehållet
	   och kortet spiller utanför skärmen på smala vyer. */
	grid-template-columns: minmax(0, 1fr);
	gap: 2.25rem;
	padding: 2.25rem;
}

.stugor-cta__inner > * {
	min-width: 0;
}

@media (min-width: 768px) {
	.stugor-cta__inner { padding: 3rem; }
}

@media (min-width: 960px) {
	.stugor-cta__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 3.5rem;
	}
}

/* ── Vänster: läget ───────────────────────────────────────────────────── */
.stugor-cta__place {
	display: flex;
	align-items: flex-start;
	gap: 1.125rem;
}

.stugor-cta__pin {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	color: var(--color-gold, #c9a227);
	background: hsl(35 55% 58% / 0.12);
	border: 1px solid hsl(35 55% 58% / 0.28);
}

.stugor-cta__eyebrow {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-gold, #c9a227);
}

.stugor-cta__text {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--color-foreground, #1a1a1a);
	max-width: 34ch;
}

/* ── Höger: pris och knappar ──────────────────────────────────────────── */
.stugor-cta__action {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

@media (min-width: 960px) {
	.stugor-cta__action {
		padding-left: 3.5rem;
		border-left: 1px solid var(--color-border, hsl(220 13% 91%));
		align-items: flex-end;
		text-align: right;
	}
}

.stugor-cta__price-label {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-muted-foreground, #6b7280);
	margin-bottom: 0.25rem;
}

.stugor-cta__price {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.stugor-cta__amount {
	font-family: var(--font-heading, inherit);
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1;
	color: var(--color-gold, #c9a227);
	white-space: nowrap;
}

.stugor-cta__unit {
	font-size: 0.9375rem;
	color: var(--color-muted-foreground, #6b7280);
	white-space: nowrap;
}

.stugor-cta__buttons {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

@media (min-width: 960px) {
	.stugor-cta__buttons { justify-content: flex-end; }
}

/* Pilen glider fram vid hover. */
.stugor-cta__arrow {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.stugor-cta__cta:hover .stugor-cta__arrow,
.stugor-cta__cta:focus-visible .stugor-cta__arrow {
	transform: translateX(4px);
}

.stugor-cta__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	color: var(--color-muted-foreground, #6b7280);
	text-decoration: none;
	transition: color 0.2s ease;
}

.stugor-cta__phone:hover {
	color: var(--color-gold, #c9a227);
}

@media (prefers-reduced-motion: reduce) {
	.stugor-cta__arrow { transition: none; }
	.stugor-cta__cta:hover .stugor-cta__arrow { transform: none; }
}