/* =========================================================
   CoachDesk — Grille de cards Coaching Pack [np_coaching_packs]
   ========================================================= */

.np-packs-grid {
	--np-green: var(--cd-primary, #117c87);
	--np-green-d: var(--cd-primary-dark, #0e6470);
	--np-navy: var(--cd-navy, #0f1b2d);
	--np-ink: var(--cd-ink, #1f2733);
	--np-muted: var(--cd-muted, #5f6a74);
	--np-line: var(--cd-line, #e7eaee);
	--np-bg: var(--cd-bg, #f4f6f8);

	display: grid;
	gap: 20px;
	font-size: 14px;
	line-height: 1.5;
	/* Each card takes the height of ITS content. By default the grid stretches them
	   all to the height of the tallest in the row: a card with no option found itself
	   with a blank between its last bar and its price (measured: 211 px on a row of
	   three). The description, which carried `flex: 1`, absorbed that gap before it
	   was removed. Better uneven card bottoms than a hole in the middle. */
	align-items: start;
}

.np-packs-grid * { box-sizing: border-box; }

/* ---- Card ---- */

.np-pcard2 {
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 2px rgba(20, 40, 60, 0.035), 0 6px 18px rgba(20, 40, 60, 0.045);
	background: #fff;
	border-radius: 0;
	overflow: hidden;
	transition: box-shadow 0.15s;
}

/* The visual identity: no 1px ring on hover — an elevation (like every card). */
.np-pcard2:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 34px rgba(var(--cd-navy-rgb),0.13);
}

/* ---- Header navy ---- */

.np-pcard2-head {
	background: var(--np-navy);
	padding: 20px 18px 18px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.np-pcard2-head-text {
	flex: 1;
	min-width: 0;
}

.np-pcard2-head-icon {
	width: 46px;
	height: 46px;
	border-radius: 0;
	background: rgba(255, 255, 255, 0.1);
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 22px;
	line-height: 1;
}

.np-pcard2-chip {
	display: inline-block;
	background: rgba(var(--cd-primary-rgb),0.25);
	/* Contrast: #138a96 on the navy header gave only 4.2:1 (the AA threshold is 4.5
	   for this body size). Light teal = 8.3:1, the identity preserved. */
	color: #4fc3d0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 0;
	margin-bottom: 10px;
}

.np-pcard2-title {
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 4px;
	line-height: 1.3;
}

.np-pcard2-meta {
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	margin: 0;
}

/* ---- Stats bar ---- */

.np-pcard2-stats {
	display: flex;
	box-shadow: inset 0 -1px 0 var(--np-line);
}

.np-pcard2-stat {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 12px 8px;
	box-shadow: inset -1px 0 0 var(--np-line);
	gap: 2px;
}

.np-pcard2-stat:last-child {
	box-shadow: none;
}

.np-pcard2-val {
	font-size: 20px;
	font-weight: 600;
	color: var(--np-green);
	line-height: 1;
}

.np-pcard2-lbl {
	font-size: 10px;
	color: var(--np-muted);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ---- Corps ---- */

.np-pcard2-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 16px 18px;
}

/* ---- Options achetables ---- */

/* THE SAME SYSTEM AS THE STATS BAR: columns of equal width, the value above, the
   heading in small capitals below, separated by the same rule. Placed under the
   description and ABOVE the price: that is where, just before looking at the
   amount, the client wonders what they can add.
   Negative margins: the block comes out of the padding of `.np-pcard2-body` so as
   to take up the whole width of the card, like the stats bar, which for its part
   is outside the body. */
.np-pcard2-opts {
	margin: 0 -18px 16px;
}

/* At the head of the body, the band also cancels the TOP padding (16 px): it then
   comes to sit under the stats bar and the two form a single continuous table,
   instead of floating with a blank above. */
.np-pcard2-body > .np-pcard2-opts:first-child {
	margin-top: -16px;
}

.np-pcard2-optlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	/* A rule at the BOTTOM only, like the stats bar. With a rule on top as well, the
	   two strokes found themselves 16 px apart (the body's top padding) and read as a
	   double border. */
	box-shadow: inset 0 -1px 0 var(--np-line);
}

/* `align-items: stretch` (the default) and NOT `center`: centred, each span sizes
   itself on its content and can therefore go beyond the column — measured on a
   280 px card: “Anthropometric assessment” was 114 px in a box of 77 and crossed
   the neighbouring rule. Stretched, the spans are exactly the width of the column
   and it is `text-align: center` that centres the text. */
.np-pcard2-optlist li {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 12px 8px;
	box-shadow: inset -1px 0 0 var(--np-line);
	gap: 2px;
}

.np-pcard2-optlist li:last-child {
	box-shadow: none;
}

/* `order`: the HTML puts the heading before the value, the display reverses them. */
.np-pcard2-opt-v {
	order: 1;
	/* 20 px like the stats would make “up to 3 · + 150 د.م.” overflow a column of
	   118 px; 15 px fits and keeps the value dominant. */
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--np-green);
	text-align: center;
	/* `anywhere` and not `break-word`: only `anywhere` reduces the min-content width,
	   hence really stops a long word widening its column. */
	overflow-wrap: anywhere;
	hyphens: auto;
}

.np-pcard2-opt-l {
	order: 2;
	font-size: 10px;
	color: var(--np-muted);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.3;
	overflow-wrap: anywhere;
	hyphens: auto;
}

/* ---- Footer : prix + bouton ---- */

.np-pcard2-footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
}

.np-pcard2-pricing {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.np-pcard2-price {
	font-size: 18px;
	font-weight: 600;
	color: var(--np-ink);
}

.np-pcard2-price-sub {
	font-size: 11px;
	color: var(--np-muted);
}

.np-pcard2-btn {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	background: var(--np-green);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0;
	white-space: nowrap;
	transition: background 0.15s;
	flex-shrink: 0;
}

.np-pcard2-btn:hover,
.np-pcard2-btn:focus {
	background: var(--np-green-d);
	color: #fff;
	text-decoration: none;
}

/* ---- Message vide ---- */

.np-packs-empty {
	color: var(--np-muted, var(--np-muted));
	font-size: 14px;
	padding: 24px 0;
}

/* ---- Responsive ---- */

@media (max-width: 680px) {
	.np-packs-grid {
		grid-template-columns: 1fr !important;
	}
}

@media (min-width: 681px) and (max-width: 960px) {
	.np-packs-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}