/* ==========================================================================
   Course Loop Card Styles — course-styles.css
   Loaded on: course archive + single course pages (see functions.php).

   This file is the SINGLE SOURCE OF TRUTH for all shared CSS custom
   properties. archive-courses.css depends on this file and must NOT
   redeclare any of these variables (doing so causes the last-loaded
   value to win globally, creating subtle colour inconsistencies).

   Token notes:
     --cc-amber          #f59e0b  — bright yellow-amber, used for star ratings
     --cc-amber-featured #d97706  — darker orange-amber, used for Featured /
                                    Pinned badge labels in archive-courses.css
   ========================================================================== */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
	--cc-primary:         #0080F6;
	--cc-primary-h:       #006ccf;
	--cc-dark:            #1e293b;
	--cc-bg:              #f9fafb;
	--cc-white:           #ffffff;
	--cc-border:          #e2e8f0;
	--cc-muted:           #64748b;
	--cc-body:            #475569;
	--cc-green:           #059669;

	/* Two amber shades — keep both here so archive-courses.css can consume them */
	--cc-amber:           #f59e0b; /* star ratings, bright amber                 */
	--cc-amber-featured:  #d97706; /* Featured / Pinned badges, darker orange    */

	--cc-radius:          14px;
	--cc-radius-sm:       8px;
	--cc-radius-pill:     100px;

	--cc-shadow-sm:       0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
	--cc-shadow-md:       0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.05);
	--cc-shadow-blue:     0 8px 32px rgba(0,128,246,.14), 0 2px 8px rgba(0,0,0,.05);
}

/* ══════════════════════════════════════════════════════════════════════════
   CARD SHELL
══════════════════════════════════════════════════════════════════════════ */
.citichoice-modern-card {
	background:    var(--cc-white);
	border-radius: var(--cc-radius);
	overflow:      hidden;
	box-shadow:    var(--cc-shadow-sm);
	transition:    box-shadow .3s ease, transform .3s ease, border-color .3s;
	display:       flex;
	flex-direction: column;
	height:        100%;
	border:        1px solid var(--cc-border);
}

.citichoice-modern-card:hover {
	transform:    translateY(-3px);
	box-shadow:   var(--cc-shadow-blue);
	border-color: rgba(0,128,246,.25);
}

/* ══════════════════════════════════════════════════════════════════════════
   IMAGE PANEL  (16:9, price pill overlay)
══════════════════════════════════════════════════════════════════════════ */
.card-header-image {
	position:     relative;
	width:        100%;
	aspect-ratio: 16 / 9;
	overflow:     hidden;
	background:   var(--cc-dark);
	flex-shrink:  0;
}

.card-header-image .header-thumbnail {
	position:        absolute;
	inset:           0;
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: center;
	display:         block;
	transition:      transform .5s ease;
}

.citichoice-modern-card:hover .header-thumbnail {
	transform: scale(1.04);
}

/* Placeholder when no featured image is set */
.header-placeholder {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      linear-gradient(135deg, var(--cc-dark) 0%, #0f172a 55%, var(--cc-primary) 140%);
}

.placeholder-text {
	font-size:      72px;
	font-weight:    900;
	color:          rgba(255,255,255,.15);
	letter-spacing: 4px;
}

/* ── Price pill overlay ───────────────────────────────────────────────── */
/* Mirrors .cc-price-pill in archive-courses.css exactly.
   get_price_html() outputs del+ins for sale prices; CSS stacks them.
   yayCurrency filters the symbol + value — we control visual layout only. */
.card-price-pill {
	position:    absolute;
	bottom:      14px;
	left:        14px;
	background:  var(--cc-white);
	border-radius: 10px;
	padding:     7px 12px;
	box-shadow:  0 4px 20px rgba(0,0,0,.18);
	display:     flex;
	flex-direction: column;
	align-items: flex-start;
	gap:         1px;
	z-index:     2;
}

.card-price-pill .woocommerce-Price-currencySymbol {
	font-size:   inherit;
	font-weight: inherit;
}

.card-price-pill .woocommerce-Price-amount {
	font-size:   16px;
	font-weight: 800;
	color:       var(--cc-dark);
	line-height: 1;
	display:     inline-flex;
	align-items: baseline;
	gap:         1px;
}

/* Original struck-through price (sale state) */
.card-price-pill del {
	display: block;
	line-height: 1;
}

.card-price-pill del .woocommerce-Price-amount,
.card-price-pill del .woocommerce-Price-amount * {
	text-decoration: line-through;
}
.card-price-pill del .woocommerce-Price-amount {
	font-size:   11px;
	font-weight: 500;
	color:       var(--cc-muted);
	opacity:     .85;
}

/* Sale price */
.card-price-pill ins {
	text-decoration: none;
	display:         block;
	background:      none;
	line-height:     1;
}
.card-price-pill ins .woocommerce-Price-amount {
	font-size:   16px;
	font-weight: 800;
	color:       var(--cc-dark);
}

/* Free — single price-amount with no sibling del/ins */
.card-price-pill .woocommerce-Price-amount:only-child {
	color: var(--cc-green);
}

/* ══════════════════════════════════════════════════════════════════════════
   CARD BODY
══════════════════════════════════════════════════════════════════════════ */
.card-body {
	padding:        22px 22px 20px;
	display:        flex;
	flex-direction: column;
	gap:            10px;
	flex:           1;
}

/* ── Category badge — inline, same style as .cc-cat-static ──────────────── */
.card-badge-category {
	display:          inline-block;
	width:            fit-content;
	background:       rgba(0,128,246,.10);
	color:            var(--cc-primary);
	border-radius:    4px;
	font-size:        11px;
	font-weight:      700;
	letter-spacing:   .04em;
	text-transform:   uppercase;
	padding:          4px 10px;
	line-height:      1.4;
}

/* ── Title ───────────────────────────────────────────────────────────────── */
.card-title {
	font-size:             20px;
	font-weight:           700;
	color:                 var(--cc-dark) !important;
	-webkit-text-fill-color: var(--cc-dark) !important;
	background-image:      none !important;
	background-clip:       initial !important;
	-webkit-background-clip: initial !important;
	margin:                0;
	line-height:           1.2;
	letter-spacing:        -.02em;
	display:               -webkit-box;
	-webkit-line-clamp:    2;
	-webkit-box-orient:    vertical;
	overflow:              hidden;
}

/* ── Subtitle — mirrors bootcamp cc-feat-subtitle, scaled for the smaller card */
.card-subtitle {
	font-size:   15px;
	color:       var(--cc-body);
	line-height: 1.5;
	margin:      4px 0 0;
	font-weight: 600;
}

/* ── Excerpt ─────────────────────────────────────────────────────────────── */
.card-excerpt {
	font-size:          13.5px;
	color:              var(--cc-body);
	line-height:        1.65;
	margin:             0;
	flex:               1;
	display:            -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   META CHIPS ROW
   Horizontal row, no-wrap on desktop; scrollable on mobile.
   Mirrors .cc-feat-meta from archive-courses.css.
══════════════════════════════════════════════════════════════════════════ */
.card-meta-chips {
	display:   flex;
	flex-wrap: wrap;
	gap:       7px;
	margin-top: 2px;
}

.card-chip {
	display:       inline-flex;
	align-items:   center;
	gap:           5px;
	font-size:     12px;
	color:         var(--cc-body);
	font-weight:   500;
	background:    var(--cc-bg);
	border:        1px solid var(--cc-border);
	padding:       5px 10px;
	border-radius: var(--cc-radius-pill);
	white-space:   nowrap;
	line-height:   1;
}

.card-chip i             { font-size: 11px; color: var(--cc-primary); }
.card-chip--rating i     { color: var(--cc-amber); }           /* bright yellow */
.card-chip--salary i     { color: var(--cc-green); }

.card-chip-count {
	color:       var(--cc-muted);
	font-weight: 400;
	font-size:   11px;
}

/* ══════════════════════════════════════════════════════════════════════════
   CARD FOOTER  (delivery badges + CTA)
══════════════════════════════════════════════════════════════════════════ */
.card-footer {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	padding-top:     16px;
	border-top:      1px solid var(--cc-border);
	gap:             10px;
	margin-top:      auto;
	flex-wrap:       nowrap; /* always one row, matching bootcamp mobile */
}

/* Delivery badges */
.delivery-badges {
	display:    flex;
	gap:        5px;
	flex-wrap:  nowrap;
	flex-shrink: 1;
	min-width:  0;
}

.badge-online,
.badge-physical {
	display:        inline-block;
	padding:        4px 8px;
	font-size:      10.5px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .04em;
	border-radius:  4px;
	white-space:    nowrap;
}

.badge-online   { background: rgba(0,128,246,.10);  color: var(--cc-primary); }
.badge-physical { background: rgba(139,92,246,.10); color: #7c3aed; }

/* CTA button — mirrors .cc-btn-primary */
.btn-view-details {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	font-family:     inherit;
	font-size:       13px;
	font-weight:     600;
	padding:         9px 16px;
	background:      var(--cc-primary);
	color:           #fff !important;
	-webkit-text-fill-color: #fff !important;
	background-image: none !important;
	background-clip: initial !important;
	-webkit-background-clip: initial !important;
	border:          none;
	border-radius:   var(--cc-radius-sm);
	cursor:          pointer;
	text-decoration: none;
	transition:      background .2s, transform .15s, box-shadow .2s;
	box-shadow:      0 2px 8px rgba(0,128,246,.28);
	white-space:     nowrap;
	flex-shrink:     0;
}

.btn-view-details:hover {
	background:      var(--cc-primary-h);
	transform:       translateY(-1px);
	box-shadow:      0 4px 16px rgba(0,128,246,.38);
	color:           #fff !important;
	-webkit-text-fill-color: #fff !important;
	text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

	.card-body    { padding: 18px 18px 16px; gap: 8px; }

	.card-title    { font-size: 18px; }
	.card-subtitle { font-size: 12.5px; }
	.card-excerpt  { font-size: 13px; -webkit-line-clamp: 2; }

	/* Chips: no-wrap + horizontal scroll */
	.card-meta-chips {
		flex-wrap:                nowrap;
		overflow-x:               auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width:          none;
		gap:                      6px;
		padding-bottom:           2px;
	}
	.card-meta-chips::-webkit-scrollbar { display: none; }

	.card-chip {
		flex-shrink: 0;
		font-size:   11.5px;
		padding:     4px 9px;
	}

	/* Footer: always one row */
	.card-footer {
		flex-direction: row;
		align-items:    center;
		flex-wrap:      nowrap;
		gap:            8px;
		padding-top:    14px;
	}

	.badge-online,
	.badge-physical {
		font-size: 10px;
		padding:   3px 7px;
	}

	.btn-view-details {
		font-size: 12.5px;
		padding:   8px 13px;
	}
}

@media (max-width: 400px) {
	.card-title { font-size: 16px; }

	.btn-view-details {
		font-size: 12px;
		padding:   7px 11px;
	}
}