/* ============================================================
   IZ Wellness Cards — v2.0.0 (Frontend)
   - توزيع ديسكتوب 2-3-2-3 عبر شبكة 6 أعمدة + span لكل كارت
   - تابلت: 3 بالعرض | موبايل: 2 دائماً
   - أوفرلاي غامق ثابت لإظهار الكتابة البيضاء + الصورة تملأ الكارت
   ============================================================ */

.izwc-grid {
	display: grid;
	gap: var(--izwc-gap, 24px);
	direction: rtl;
	width: 100%;
	position: relative;
	z-index: 1;
}

/* النسخة الإنجليزية: اتجاه من اليسار لليمين */
.izwc-grid.izwc-en {
	direction: ltr;
}

/* وضع النمط 2-3-2-3 على الديسكتوب: شبكة 6 أعمدة */
.izwc-grid.izwc-pattern {
	grid-template-columns: repeat(6, 1fr);
	grid-auto-flow: row;
}
.izwc-grid.izwc-pattern .izwc-card {
	grid-column: span var(--izwc-span, 2); /* 2كروت=>span3 | 3كروت=>span2 */
}

/* وضع الأعمدة الثابتة (layout="grid") */
.izwc-grid.izwc-fixed {
	grid-template-columns: repeat(var(--izwc-cols, 3), 1fr);
}

/* كارت واحد فقط: في المنتصف بعرض محدود */
.izwc-grid.izwc-single {
	grid-template-columns: minmax(0, 520px);
	justify-content: center;
}
.izwc-grid.izwc-single .izwc-card { grid-column: auto; }

/* ---------- الكارت ---------- */
.izwc-card {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--izwc-radius, 14px);
	background: var(--izwc-color, #1d749f);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

/* spacer يحجز ارتفاع الكارت في التدفّق الطبيعي (يمنع تداخل السكشن اللي تحته) */
.izwc-card::before {
	content: "";
	display: block;
	width: 100%;
	padding-top: var(--izwc-pad, 62.5%);
}

.izwc-card .izwc-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	min-height: 100% !important;
	object-fit: cover !important;       /* الصورة تملأ الكارت كله مهما كان مقاسها */
	object-position: center !important;
	transition: transform 0.5s ease, opacity 0.35s ease;
	z-index: 0;
}

/* ---------- الأوفرلاي الغامق الثابت ---------- */
.izwc-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.28) 100%),
		rgba(0, 0, 0, var(--izwc-overlay, 0.45));
	transition: background 0.35s ease;
}

/* ---------- النص ---------- */
.izwc-caption {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2em;
	color: #fff;
}

/* حدود Bubba (تكبر عند المرور/الفتح) */
.izwc-caption::before,
.izwc-caption::after {
	content: '';
	position: absolute;
	inset: 22px;
	opacity: 0;
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}
.izwc-caption::before {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	transform: scale(0, 1);
}
.izwc-caption::after {
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	transform: scale(1, 0);
}

/* العنوان: ظاهر دائماً */
.izwc-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
	color: #fff;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
	transform: translate3d(0, 14px, 0);
	transition: transform 0.35s ease;
	z-index: 1;
}

/* الوصف: يظهر عند المرور/الفتح */
.izwc-desc {
	margin: 0.75em 0 0;
	font-size: 15px;
	line-height: 1.7;
	color: #fff;
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity 0.35s ease, transform 0.35s ease;
	z-index: 1;
}

/* لينك يغطي الكارت بالكامل */
.izwc-link {
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* ---------- حالة المرور (ديسكتوب) ---------- */
@media (hover: hover) {
	.izwc-card:hover .izwc-img,
	.izwc-card:focus-visible .izwc-img {
		transform: scale(1.05);
	}
	.izwc-card:hover .izwc-overlay,
	.izwc-card:focus-visible .izwc-overlay {
		background:
			linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,0.32) 100%),
			rgba(0, 0, 0, calc(var(--izwc-overlay, 0.45) + 0.18));
	}
	.izwc-card:hover .izwc-caption::before,
	.izwc-card:hover .izwc-caption::after,
	.izwc-card:focus-visible .izwc-caption::before,
	.izwc-card:focus-visible .izwc-caption::after {
		opacity: 1;
		transform: scale(1);
	}
	.izwc-card:hover .izwc-title,
	.izwc-card:focus-visible .izwc-title {
		transform: translate3d(0, 0, 0);
	}
	.izwc-card:hover .izwc-desc,
	.izwc-card:focus-visible .izwc-desc {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* ---------- حالة الفتح (لمس) ---------- */
.izwc-card.izwc-open .izwc-overlay {
	background:
		linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,0.32) 100%),
		rgba(0, 0, 0, calc(var(--izwc-overlay, 0.45) + 0.2));
}
.izwc-card.izwc-open .izwc-caption::before,
.izwc-card.izwc-open .izwc-caption::after {
	opacity: 1;
	transform: scale(1);
}
.izwc-card.izwc-open .izwc-title,
.izwc-card.izwc-open .izwc-desc {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* ============================================================
   التابلت: 3 بالعرض دائماً (768px → 1024px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
	.izwc-grid:not(.izwc-single) {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	.izwc-grid.izwc-pattern .izwc-card {
		grid-column: auto !important; /* يلغي الـ span ويخلي 3 متساويين */
	}
	.izwc-title { font-size: 19px; }
	.izwc-desc  { font-size: 14px; }
}

/* ============================================================
   الموبايل: 2 دائماً (≤ 767px)
   ============================================================ */
@media (max-width: 767px) {
	.izwc-grid:not(.izwc-single) {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px;
	}
	.izwc-grid.izwc-pattern .izwc-card {
		grid-column: auto !important;
	}
	.izwc-card {
		--izwc-pad: 133.333%; /* نسبة 3/4 على الموبايل */
		border-radius: 10px;
	}
	.izwc-caption { padding: 0.9em; }
	.izwc-caption::before,
	.izwc-caption::after { inset: 10px; }
	.izwc-title {
		font-size: 13px;
		line-height: 1.45;
	}
	.izwc-desc {
		margin-top: 0.55em;
		font-size: 10.5px;
		line-height: 1.55;
	}
}

/* شاشات صغيرة جداً */
@media (max-width: 359px) {
	.izwc-title { font-size: 12px; }
	.izwc-desc  { font-size: 10px; }
}