/* ============================================================
   Parkwellness — Packages Section
   Mobile-first: each row stacks (title, then price+detail, then the
   CTA button). From 700px up a row becomes a single line — fixed-width
   title column so price/detail line up across rows, meta group takes
   the remaining space, CTA button pinned to the right edge.
   ============================================================ */

/* padding-block comes from the global `section` default in main.css
   now (64px desktop / 40px mobile) — not repeated here. */
.pw-packages {
	background-color: var(--color-dark-700);
}

/* -------------------------------------------------------
   Header — eyebrow + heading
   ------------------------------------------------------- */
.pw-packages-header {
	max-width: 640px;
	margin-bottom: 40px;
}

@media (min-width: 900px) {
	.pw-packages-header {
		margin-bottom: 56px;
	}
}

.pw-packages-eyebrow {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-gold-300);
	margin-bottom: 14px;
}

.pw-packages-heading {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.25;
}

.pw-packages-heading-line1,
.pw-packages-heading-line2 {
	display: block;
}

.pw-packages-heading-line1 {
	color: var(--color-cream-50);
}

.pw-packages-heading-line2 {
	color: var(--color-gold-300);
}

/* -------------------------------------------------------
   Rows list
   ------------------------------------------------------- */
.pw-packages-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pw-package-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, 0.15);
}

@media (min-width: 700px) {
	.pw-package-row {
		flex-direction: row;
		align-items: center;
		gap: 24px;
		padding: 20px 28px;
	}
}

/* h3 qualifier — ties specificity with reset.css's ".pw-landing h3"
   margin:0 rule (class + element vs. just a class) instead of reaching
   for !important, same pattern as .pw-class-card-title. */
h3.pw-package-title,
.pw-package-price {
	font-family: var(--font-heading);
	font-style: normal;
	font-weight: 400;
	font-size: 1.5rem;
	letter-spacing: 0.18px;
}

h3.pw-package-title {
	color: var(--color-cream-50);
	flex: 0 0 auto;
}

@media (min-width: 700px) {
	h3.pw-package-title {
		flex: 0 0 200px;
	}

	h3.pw-package-title,
	.pw-package-price {
		font-size: 1.75rem;
	}
}

.pw-package-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	flex: 1;
}

.pw-package-price {
	color: var(--color-gold-300);
}

.pw-package-detail {
	font-family: var(--font-body);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-taupe-200);
}

@media (min-width: 700px) {
	.pw-package-detail {
		font-family: var(--font-body);
		font-style: normal;
		font-weight: 500;
		font-size: 15px;
		line-height: 18px;
	}
}

.pw-package-cta {
	flex: 0 0 auto;
}

@media (min-width: 700px) {
	.pw-package-cta {
		margin-left: auto;
	}
}