/* =========================================================
   آموزش — دوره‌ها و پکیج‌ها (Education / Courses page) —
   page-specific styles. Only enqueued on
   page-education-courses.php (see functions.php), so this file
   has zero effect on the homepage or any other page. Every
   color/radius/spacing value below reuses the theme's own design
   tokens already defined in main.css's :root.
   ========================================================= */

.education-page-main {
	background: var(--color-bg);
	padding-top: clamp(20px, 3vw, 50px);
	padding-bottom: clamp(40px, 5vw, 90px);
}

/* ---------- HERO ---------- */
.education-hero {
	max-width: 900px;
	margin: 0 auto clamp(40px, 5vw, 80px);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(14px, 1.6vw, 22px);
	padding: 0 var(--container-padding);
}

.education-hero__title {
	margin: 0;
	color: var(--color-yellow);
	font-size: clamp(24px, 3vw, 42px);
	font-weight: 700;
	line-height: 1.35;
}

/* Subtitle capsule: dark fill + yellow border/text, so the "yellow and
   charcoal" combination lives in a single pill rather than two colors
   competing for the same space. */
.education-hero__subtitle {
	display: inline-block;
	background: var(--color-dark);
	color: var(--color-yellow);
	border: 1.5px solid var(--color-yellow);
	border-radius: var(--radius-pill);
	padding: clamp(10px, 1vw, 14px) clamp(24px, 2.6vw, 40px);
	font-size: clamp(13px, 1vw, 16px);
	font-weight: 700;
}

/* ---------- SECTION HEADINGS (shared) ---------- */
.education-page-section {
	max-width: 1200px;
	margin: 0 auto clamp(50px, 6vw, 100px);
	padding: 0 var(--container-padding);
}

.education-page-section__title {
	color: var(--color-yellow);
	font-size: clamp(20px, 2vw, 32px);
	margin-bottom: clamp(24px, 3vw, 44px);
	text-align: center;
}

/* ---------- COURSES GRID: alternating dark/yellow cards with a
   cover-image slot, same visual family as the خدمات page's
   service-card (rounded, lift-on-hover, pill button). ---------- */
.course-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 2vw, 28px);
}

.course-card {
	border-radius: clamp(24px, 2.6vw, 44px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course-card:hover,
.course-card:focus-within {
	transform: translateY(-8px);
}

.course-card--dark {
	background: var(--color-dark);
	color: var(--color-white);
}

.course-card--dark:hover,
.course-card--dark:focus-within {
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.course-card--yellow {
	background: var(--color-yellow);
	color: var(--color-text-on-yellow);
}

.course-card--yellow:hover,
.course-card--yellow:focus-within {
	box-shadow: 0 16px 36px rgba(252, 184, 39, 0.35);
}

.course-card__cover-wrap {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.08);
}

.course-card--dark .course-card__cover-wrap { background: rgba(255, 255, 255, 0.06); }

.course-card__cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease;
}

.course-card:hover .course-card__cover,
.course-card:focus-within .course-card__cover {
	transform: scale(1.08);
}

.course-card__body {
	padding: clamp(18px, 2vw, 26px);
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-grow: 1;
}

.course-card__title {
	margin: 0;
	font-size: clamp(15px, 1.1vw, 19px);
	font-weight: 700;
}

.course-card__specs {
	margin: 0;
	font-size: clamp(12.5px, 0.9vw, 14.5px);
	line-height: 1.75;
	opacity: 0.85;
	flex-grow: 1;
}

.course-card__price {
	margin: 4px 0 0;
	font-size: clamp(13px, 0.95vw, 15px);
	font-weight: 700;
}

.course-card--dark .course-card__price { color: var(--color-yellow); }
.course-card--yellow .course-card__price { color: var(--color-text-on-yellow); }

.course-card__btn {
	margin-top: 10px;
	display: inline-block;
	text-align: center;
	border-radius: var(--radius-pill);
	padding: clamp(9px, 0.85vw, 13px) clamp(20px, 2vw, 30px);
	font-size: clamp(12px, 0.8vw, 14px);
	font-weight: 700;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.course-card--dark .course-card__btn {
	border: 1.5px solid var(--color-yellow);
	color: var(--color-yellow);
}

.course-card--dark .course-card__btn:hover,
.course-card--dark .course-card__btn:focus-visible {
	background: var(--color-yellow);
	color: var(--color-text-on-yellow);
	transform: translateY(-2px);
}

.course-card--yellow .course-card__btn {
	border: 1.5px solid var(--color-dark);
	color: var(--color-text-on-yellow);
}

.course-card--yellow .course-card__btn:hover,
.course-card--yellow .course-card__btn:focus-visible {
	background: var(--color-dark);
	color: var(--color-white);
	transform: translateY(-2px);
}

/* ---------- PACKAGES GRID: intentionally different treatment from
   courses (outlined/tinted instead of solid fill) so the two grids
   read as distinct content types at a glance, per the brief's
   "reversed contrast" request — same tokens, different emphasis. ---------- */
.package-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 2vw, 28px);
}

.package-card {
	border-radius: clamp(24px, 2.6vw, 44px);
	padding: clamp(22px, 2.4vw, 36px) clamp(18px, 2vw, 26px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: clamp(10px, 1.2vw, 16px);
	background: transparent;
	transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.package-card:hover,
.package-card:focus-within {
	transform: translateY(-6px);
}

.package-card--dark {
	border: 2px solid var(--color-dark);
	color: var(--color-white);
	background: rgba(43, 43, 43, 0.5);
}

.package-card--dark:hover,
.package-card--dark:focus-within {
	background: var(--color-dark);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

.package-card--yellow {
	border: 2px solid var(--color-yellow);
	color: var(--color-white);
	background: rgba(252, 184, 39, 0.08);
}

.package-card--yellow:hover,
.package-card--yellow:focus-within {
	background: rgba(252, 184, 39, 0.18);
	box-shadow: 0 16px 36px rgba(252, 184, 39, 0.25);
}

.package-card__title {
	margin: 0;
	font-size: clamp(15px, 1.1vw, 19px);
	font-weight: 700;
	color: var(--color-yellow);
}

.package-card__desc {
	margin: 0;
	font-size: clamp(12.5px, 0.9vw, 14.5px);
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.8);
	flex-grow: 1;
}

.package-card__price {
	margin: 0;
	font-size: clamp(13px, 0.95vw, 15px);
	font-weight: 700;
	color: var(--color-white);
}

.package-card__btn {
	margin-top: 6px;
	display: inline-block;
	background: var(--color-yellow);
	color: var(--color-text-on-yellow);
	border-radius: var(--radius-pill);
	padding: clamp(9px, 0.85vw, 13px) clamp(22px, 2.2vw, 32px);
	font-size: clamp(12px, 0.8vw, 14px);
	font-weight: 700;
	transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.package-card__btn:hover,
.package-card__btn:focus-visible {
	background: var(--color-white);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
	.course-grid { grid-template-columns: repeat(3, 1fr); }
	.package-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.course-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.course-grid { grid-template-columns: 1fr; }
	.package-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.course-card,
	.course-card__cover,
	.package-card,
	.course-card__btn,
	.package-card__btn {
		transition: none !important;
	}
}