/**
 * Supacademy — Carduri Destinatie / Activitate
 * Valorile (culori, marimi, fonturi, spatieri) sunt preluate din designul
 * real din Elementor. Culoarea de accent e o variabila (--sad-accent):
 * varianta SUP (.sad-card--sup) o suprascrie.
 */

.sad-cards-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	justify-content: flex-start;
}

.sad-card {
	--sad-accent: #D2571A; /* accentul; varianta SUP il suprascrie mai jos */

	flex: 0 0 calc(50% - 15px); /* cate 2 pe rand: (100% - gap 30px) / 2 */
	max-width: calc(50% - 15px);
	display: flex;
	background: #DFDFDF;
	border: 2px solid var(--sad-accent);
	border-radius: 30px;
	overflow: hidden;
	box-sizing: border-box;
	/* fontul principal setat global in Elementor; Museo ca rezerva */
	font-family: var(--e-global-typography-primary-font-family, "Museo", sans-serif);
}

/* Varianta SUP: aceeasi structura, doar culoarea difera */
.sad-card--sup {
	--sad-accent: #D2B42E;
}

.sad-card * {
	box-sizing: border-box;
}

/* ---- Stanga (40%): text ---- */
.sad-card__body {
	flex: 0 0 40%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 20px 10px 20px 20px;
	color: #230D28;
}

.sad-card__date {
	margin: 0;
	font-size: 17px;
	font-weight: 300;
	letter-spacing: 0.5px;
}

/* Lista de perioade — expandabila nativ (fara JS), ca sa nu incarce cardul */
.sad-card__periods {
	margin-top: 6px;
	font-size: 15px;
}

.sad-card__periods > summary {
	cursor: pointer;
	color: var(--sad-accent);
	font-weight: 600;
	list-style: none; /* ascunde markerul default al browserului */
}

.sad-card__periods > summary::-webkit-details-marker {
	display: none;
}

.sad-card__periods > summary::before {
	content: "\25B8 "; /* triunghi ▸ */
	font-size: 12px;
}

.sad-card__periods[open] > summary::before {
	content: "\25BE "; /* triunghi ▾ */
}

.sad-card__periods-list {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.sad-card__periods-list li {
	color: #230D28;
	line-height: 1.7;
}

.sad-card__period-label {
	color: var(--sad-accent);
	font-weight: 600;
}

.sad-card__title {
	margin: 5px 0 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
	color: #230D28;
}

.sad-card__price-label {
	margin: 20px 0 0;
	font-size: 17px;
	font-weight: 300;
	letter-spacing: 0.5px;
}

.sad-card__price {
	margin: 5px 0 0;
	font-size: 28px;
	font-weight: 600;
	text-transform: capitalize;
	color: #230D28;
}

.sad-card__button {
	align-self: flex-start;
	margin: 20px 0 0;
	width: 185px;
	max-width: 100%;
	padding: 10px 0;
	text-align: center;
	background: var(--sad-accent);
	color: #fff;
	border-radius: 25px;
	font-family: "Museo", sans-serif;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}

.sad-card__button:hover,
.sad-card__button:focus {
	color: #fff;
	opacity: .92;
}

/* ---- Dreapta (60%): imagine + badge pe fundal colorat ---- */
.sad-card__media {
	flex: 1 1 60%;
	display: flex;
	align-items: stretch;
	background: var(--sad-accent);
	overflow: hidden;
	border-radius: 30px 0px 0px 30px;
}

.sad-card__hero {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	height: 360px !important;
	object-fit: cover !important;
	object-position: center center !important;
	border-radius: 30px !important;
	display: block !important;
}

/* Imaginea PNG/WEBP contine deja iconul rotund SI codul de bare (o singura poza inalta) */
.sad-card__badge {
	flex: 0 0 auto;
	align-self: flex-start;
	width: 100px;
	height: auto;
	margin: 16px 16px 0 12px;
	display: block;
}

/* ---- Sub 800px: cate un card pe rand (altfel ar fi prea inguste) ---- */
@media (max-width: 800px) {
	.sad-card {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* ---- Pe mobil (sub 767px): text sus, imagine jos ---- */
@media (max-width: 767px) {
	.sad-card {
		flex-direction: column;
	}
	.sad-card__body {
		flex: 0 0 auto;
		width: 100%;
		padding: 24px;
	}
	.sad-card__media {
		flex: 0 0 auto;
		width: 100%;
		border-radius: 0px 0px 0px 30px;
	}
	.sad-card__hero {
		height: 100% !important;
		border-radius: 0px 0px 30px 30px !important;
		max-height: 258px;
		width: 70%;
		object-fit: cover !important;
	}
	.sad-card__title {
		font-size: 22px;
	}
	.sad-card__badge {
		max-width: 75px !important;
		margin: 20px;
	}
}