/*
 * Falukost 2026 — price section
 * All rules namespaced under .fk-price so nothing leaks into general.css.
 * Mobile-first: 96% of traffic is mobile, so the stacked layout is the base
 * and the 3-across grid is the enhancement at >=768px.
 */

.fk-price {
	--fk-navy: #12324f;
	--fk-text: #55636f;
	--fk-muted: #7b8894;
	--fk-green: #2f7d52;
	--fk-green-btn: #43a06a;
	--fk-green-btn-hover: #368a59;
	--fk-green-bg: #edf7f1;
	--fk-border: #e2e6ea;
	background: #fff;
	padding: 54px 18px 60px;
	font-family: inherit;
	color: var(--fk-text);
	-webkit-font-smoothing: antialiased;
}

.fk-price * {
	box-sizing: border-box;
}

.fk-price__inner {
	max-width: 1120px;
	margin: 0 auto;
}

/* ---------- heading ---------- */

.fk-price__title {
	margin: 0 0 16px;
	font-size: 27px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--fk-navy);
	text-align: center;
	letter-spacing: -0.2px;
}

.fk-price__sub {
	margin: 0 auto 22px;
	max-width: 620px;
	font-size: 15px;
	line-height: 1.6;
	text-align: center;
	color: var(--fk-text);
}

.fk-price__badge {
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	margin: 0 auto 34px;
	padding: 9px 20px;
	border-radius: 999px;
	background: var(--fk-green-bg);
	color: var(--fk-green);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

/* badge is a link to the booking form: availability is checked live, not hardcoded */
.fk-price a.fk-price__badge {
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.fk-price a.fk-price__badge:hover,
.fk-price a.fk-price__badge:focus {
	background: var(--fk-green);
	color: #fff;
	text-decoration: none;
}

/* ---------- cards ---------- */

.fk-price__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-bottom: 30px;
}

.fk-card {
	border: 1px solid #e2e6ea;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.fk-card__head {
	padding: 22px 22px 20px;
}

.fk-card__name {
	margin: 0 0 9px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--fk-navy);
}

.fk-card__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--fk-muted);
}

/* featured 12-month tier */

.fk-card__feature {
	padding: 18px 22px 20px;
	background: var(--fk-green-bg);
	border-top: 1px solid #dcebe2;
	border-bottom: 1px solid #dcebe2;
}

.fk-card__label {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--fk-green);
}

.fk-card__price {
	margin: 0 0 6px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--fk-navy);
	letter-spacing: -0.5px;
}

.fk-card__per {
	font-size: 15px;
	font-weight: 400;
	color: var(--fk-muted);
	letter-spacing: 0;
}

.fk-card__save {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--fk-green);
}

/* other tiers */

.fk-card__tiers {
	padding: 4px 22px 18px;
}

.fk-card__tier {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid #eef1f4;
	font-size: 15px;
}

.fk-card__tier:last-child {
	border-bottom: 0;
}

.fk-card__tier-name {
	color: var(--fk-text);
}

.fk-card__tier-price {
	font-weight: 700;
	color: var(--fk-navy);
	white-space: nowrap;
}

/* ---------- footnote + CTA ---------- */

.fk-price__note {
	margin: 0 auto 26px;
	max-width: 760px;
	font-size: 13px;
	line-height: 1.6;
	text-align: center;
	color: var(--fk-muted);
}

.fk-price__cta-wrap {
	text-align: center;
}

.fk-price__cta,
.fk-price a.fk-price__cta {
	display: inline-block;
	padding: 17px 34px;
	border-radius: 999px;
	background: var(--fk-green-btn);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border: 0;
	transition: background-color 0.15s ease;
}

.fk-price a.fk-price__cta:hover,
.fk-price a.fk-price__cta:focus {
	background: var(--fk-green-btn-hover);
	color: #fff;
	text-decoration: none;
}

.fk-price__cta-note {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--fk-muted);
}

/* ---------- tablet / desktop ---------- */

@media screen and (min-width: 768px) {
	.fk-price {
		padding: 70px 24px 76px;
	}

	.fk-price__title {
		font-size: 34px;
	}

	.fk-price__sub {
		font-size: 16px;
	}

	.fk-price__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
		margin-bottom: 34px;
	}

	.fk-card__price {
		font-size: 30px;
	}
}