/* China Care Package Card — wrapper styles for inserting cards into post content.
   The .pkg-card / .ph-grid / .btn--primary rules live in the theme's
   health-package.css; this file only handles the embedding context. */

/* Single card inserted via [cct_package]: constrain width so it does not
   stretch full-bleed inside an article body. Vertical margin kept at ~1 line
   so the card sits one line away from the surrounding article text. */
.cct-pkg-card {
	max-width: 420px;
	margin: 0.5em 0;
}

/* ============================================================
   VARIANT D (Comparison) — faithful port of
   china-care/card-system/index.html (Stream C, Variant D).
   The component library is the source of truth; these rules
   mirror its .pkg-card--d exactly. The theme's health-package.css
   ships A/B/C only, so D lives here (self-contained) to keep the
   plugin's default render identical to the library without
   touching the theme or the component library.
   Unlike --c, D keeps subtitle + tags visible (full comparison card).
   ============================================================ */
.pkg-card--d { --hero-ratio:1.7; --pad:18px; --title:17px; --gap:12px; }
.pkg-card--d .pkg-price .amt { font-size:25px; }

/* Reassurance ticks shown above the booking button on every cct_package card.
   font-size pinned to 12px to EXACTLY match the .btn CTA on the blog page
   (the button renders at 12px from the site core stylesheet; the --fs-base
   token is not loaded in article context, so we can't reference it). !important
   is required to beat .article-body li, which would otherwise force 16px. */
.cct-pkg-card .pkg-reassure {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	font-size: 12px !important;
	font-weight: 600;
	line-height: 1.45;
	color: #4a4a48;
}
.cct-pkg-card .pkg-reassure li {
	font-size: 12px !important;
	line-height: 1.45;
}
.pkg-reassure li {
	position: relative;
	padding-left: 22px;
	margin: 4px 0;
}
.pkg-reassure li::before {
	content: "\2713"; /* ✓ */
	position: absolute;
	left: 0;
	top: 0;
	color: #534AB7;
	font-weight: 700;
}

/* Secondary "View package details" link under the primary CTA.
   Keeps the SEO/internal-link value without competing with the booking button. */
.cct-pkg-card .cct-pkg-details {
	display: block;
	margin-top: 10px;
	text-align: center;
	font-size: 13px;
	color: #5f5e5a;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.cct-pkg-card .cct-pkg-details:hover {
	color: #534AB7;
}

/* Grid of package cards inserted via [cct_package_grid].
   Uses an independent grid (NOT the theme's .ph-grid) so it always lays out
   horizontally inside post content, collapsing to one column only on phones. */
.cct-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	align-items: start;
	margin: 1.75rem 0;
}
.cct-grid > .pkg-card {
	width: 100%;
}
@media (max-width: 640px) {
	.cct-grid {
		grid-template-columns: 1fr;
	}
}