/* Types de formats — Yoga Beyt card grid */

.tdf-section {
	max-width: 1840px;
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}

.tdf-section *,
.tdf-section *::before,
.tdf-section *::after {
	box-sizing: border-box;
}

/* Section title */
.tdf-title {
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-size: 48px;
	line-height: 54px;
	font-weight: 400;
	letter-spacing: -1.92px;
	color: #3e3e3e;
	margin: 0 0 40px;
}

/* Grid */
.tdf-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
}

/* Card */
.tdf-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.06);
	transition: transform .25s ease, box-shadow .25s ease;
}

.tdf-card:hover,
.tdf-card:focus {
	transform: translateY(-4px);
	box-shadow: 0 26px 55px rgba(0, 0, 0, 0.10);
	background: #ffffff !important;
	background-color: #ffffff !important;
}

/* Media */
.tdf-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 430 / 408;
	overflow: hidden;
}

.tdf-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tdf-card__img--placeholder {
	background: linear-gradient(160deg, #e6bc84 0%, #b98a5a 60%, #3b1e11 100%);
}

/* Body */
.tdf-card__body {
	padding: 24px 16px 28px;
	flex: 1 1 auto;
}

.tdf-card__heading {
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-size: 26px;
	line-height: 28px;
	font-weight: 400;
	letter-spacing: -1.04px;
	color: #3b1e11;
	margin: 0 0 12px;
}

.tdf-card__desc {
	font-family: "Raleway", sans-serif;
	font-size: 18px;
	line-height: 22px;
	font-weight: 600;
	letter-spacing: -0.36px;
	color: rgba(0, 0, 0, 0.66);
	margin: 0;
}

/* CTA button */
.tdf-cta {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.tdf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 162px;
	height: 54px;
	padding: 0 32px;
	border-radius: 30px;
	background: #3b1e11;
	color: #ffffff;
	font-family: "Raleway", sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.36px;
	text-decoration: none;
	transition: background .25s ease, transform .25s ease;
}

.tdf-btn:hover,
.tdf-btn:focus {
	background: #2c160c !important;
	background-color: #2c160c !important;
	transform: translateY(-2px);
	color: #ffffff;
}

.tdf-empty {
	font-family: "Raleway", sans-serif;
	color: rgba(0, 0, 0, 0.6);
}

/* Responsive */
@media (max-width: 1200px) {
	.tdf-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
	.tdf-title { font-size: 40px; line-height: 46px; letter-spacing: -1.4px; }
}

@media (max-width: 680px) {
	.tdf-grid { grid-template-columns: 1fr; gap: 24px; }
	.tdf-title { font-size: 32px; line-height: 38px; letter-spacing: -1px; margin-bottom: 28px; }
}