/**
 * Stock Ticker — Bento Grid Cards
 *
 * Styles for the Lesieur stock ticker widget: a responsive
 * bento grid showing live stock data (price, market cap, dividend)
 * from the Bourse de Casablanca.
 *
 * Layout: 3-column grid on desktop, 2 on tablet, 1 on mobile.
 * Design tokens aligned with Lesieur brand (CLAUDE.md).
 *
 * @package Lesieur
 * @since   2.4.0
 */

/* === Ticker Container === */
.lst-ticker {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin: 2rem auto;
	max-width: 720px;
}

/* === Bento Card === */
.lst-card {
	background: #F7F7F7;
	border-radius: 10px;
	padding: 1.75rem 1rem 1rem;
	text-align: center;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
	position: relative;
	overflow: hidden;
}

.lst-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

/* Subtle top accent line — uses Lesieur primary red */
.lst-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: #C20E1A;
	border-radius: 12px 12px 0 0;
}

/* === Value (big number) === */
.lst-value {
	font-family: 'Poppins', sans-serif;
	font-size: 1.625rem;
	font-weight: 900;
	color: #222221;
	line-height: 1.1;
	margin: 0 0 0.25rem;
}

/* === Label below value === */
.lst-label {
	font-family: 'Poppins', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #583B1D;
	margin: 0;
	letter-spacing: 0.02em;
}

/* === Variation Badge === */
.lst-variation {
	display: inline-block;
	font-family: 'Poppins', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.2rem 0.6rem;
	border-radius: 2rem;
	margin-top: 0.5rem;
}

/* Green for positive variation, red for negative */
.lst-variation--up {
	background: rgba(46, 125, 50, 0.1);
	color: #2E7D32;
}

.lst-variation--down {
	background: rgba(194, 14, 26, 0.1);
	color: #C20E1A;
}

.lst-variation--neutral {
	background: rgba(88, 59, 29, 0.1);
	color: #583B1D;
}

/* === Timestamp === */
.lst-timestamp {
	text-align: center;
	font-family: 'Poppins', sans-serif;
	font-size: 0.8125rem;
	color: #999;
	margin-top: 1rem;
	padding-top: 0.75rem;
}

/* === Error State === */
.lst-error {
	grid-column: 1 / -1;
	text-align: center;
	padding: 2rem;
	color: #999;
	font-style: italic;
}

/* === Responsive — Tablet (< 1024px) === */
@media (max-width: 1024px) {
	.lst-ticker {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Third card spans full width on tablet */
	.lst-card:nth-child(3) {
		grid-column: 1 / -1;
	}

	.lst-value {
		font-size: 1.75rem;
	}
}

/* === Responsive — Mobile (< 767px) === */
@media (max-width: 767px) {
	.lst-ticker {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.lst-card {
		padding: 1.4rem 1rem 1rem;
	}

	.lst-card:nth-child(3) {
		grid-column: auto;
	}

	.lst-value {
		font-size: 1.5rem;
	}

	.lst-label {
		font-size: 0.8125rem;
	}
}