/* ============================================================
 * gutenberg.css — توافق مكونات Gutenberg / Blocksy Builder
 * يُحمَّل على كل الصفحات بالواجهة وفي المحرّر.
 * ============================================================ */


/* ════════════════════════════════════════════════════════════
 * Gutenberg Block Compat — Phase 2+
 * يُحوِّل بنية WP block editor إلى التخطيط المرئي للموقع الثابت.
 * الأنماط تستخدم wp:group / wp:columns / wp:button التي تُضيف
 * عناصر تغليف وstyles افتراضية قد تتعارض مع vida.css.
 * ════════════════════════════════════════════════════════════ */

/* ── A) إعادة ضبط مسافات WP blocks ── */
.vida-main .wp-block-group,
.vida-main .wp-block-columns {
	margin-block-start: 0;
}
.vida-main > * + * {
	margin-block-start: 0;
}

/* wp:group الذي يحمل كلاس container — نمنع تراكم الـ padding */
.wp-block-group.container {
	padding-block: 0;
}

/* ── B) Grid layouts — نُلغي flex الافتراضي من block-library ── */

/* trust-strip: 4 أعمدة */
.wp-block-columns.trust-strip__grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	flex-wrap: unset;
}
.trust-strip__grid > .wp-block-column {
	flex: unset;
	min-width: unset;
}

/* offers-showcase: 3 أعمدة */
.wp-block-columns.offers-showcase__grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--vida-radius-xl);
	flex-wrap: unset;
}
.offers-showcase__grid > .wp-block-column {
	flex: unset;
	min-width: unset;
}

/* hours-grid: عمودان */
.wp-block-columns.hours-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	flex-wrap: unset;
}
.hours-grid > .wp-block-column {
	flex: unset;
	min-width: unset;
}

/* doctor-grid: 4 أعمدة */
.wp-block-columns.doctor-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	flex-wrap: unset;
}
.doctor-grid > .wp-block-column {
	flex: unset;
	min-width: unset;
}

/* hero__stats: 3 أعمدة */
.wp-block-columns.hero__stats {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	flex-wrap: unset;
}
.hero__stats > .wp-block-column {
	flex: unset;
	min-width: unset;
}

/* services-refined__grid: عمودان */
.wp-block-columns.services-refined__grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	flex-wrap: unset;
}
.services-refined__grid > .wp-block-column {
	flex: unset;
	min-width: unset;
}

/* booking-options: 3 أعمدة */
.wp-block-columns.booking-options {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	flex-wrap: unset;
}
.booking-options > .wp-block-column {
	flex: unset;
	min-width: unset;
}

/* Media queries للأعمدة */
@media (max-width: 880px) {
	.wp-block-columns.trust-strip__grid,
	.wp-block-columns.doctor-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.wp-block-columns.offers-showcase__grid,
	.wp-block-columns.booking-options {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.wp-block-columns.trust-strip__grid,
	.wp-block-columns.offers-showcase__grid,
	.wp-block-columns.doctor-grid,
	.wp-block-columns.booking-options,
	.wp-block-columns.hours-grid,
	.wp-block-columns.services-refined__grid {
		grid-template-columns: 1fr;
	}
	.wp-block-columns.hero__stats {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--vida-radius);
	}
}

/* ── C) wp:button compat selectors ──
   Gutenberg يُنتج: .wp-block-button.btn--* > a.wp-block-button__link.wp-element-button
   vida.css يستهدف: a.btn--* مباشرة
   الحل: نُطبّق styles الزر على الـ <a> الداخلي عبر الأب. */

/* الخصائص الأساسية للـ <a> داخل كل wp:button يحمل .btn */
.vida-main .wp-block-button.btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vida-radius);
	min-height: 48px;
	padding: 11px 22px;
	border: 1px solid transparent;
	border-radius: var(--vida-radius-sm) !important; /* يُلغي Blocksy's 3px */
	font-weight: 700;
	font-family: var(--vida-font);
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	letter-spacing: 0;
	cursor: pointer;
	touch-action: manipulation;
	transition:
		transform var(--vida-transition),
		background var(--vida-transition),
		color var(--vida-transition),
		box-shadow var(--vida-transition),
		border-color var(--vida-transition);
	--theme-button-shadow: none;
	--theme-button-transform: none;
}

.vida-main .wp-block-button.btn .wp-block-button__link svg {
	width: var(--vida-radius-xl);
	height: var(--vida-radius-xl);
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--vida-transition);
}

/* hover / active على مستوى الـ wrapper */
.vida-main .wp-block-button.btn:hover .wp-block-button__link {
	transform: translateY(-2px);
}
.vida-main .wp-block-button.btn:active .wp-block-button__link {
	transform: translateY(0) scale(0.98);
}

/* Primary — ذهبي بتدرج */
.vida-main .wp-block-button.btn--primary .wp-block-button__link {
	background: linear-gradient(135deg, var(--vida-gold) 0%, #e8a84a 100%) !important;
	color: var(--vida-bg) !important;
	border-color: transparent;
	box-shadow: 0 14px 32px rgba(221, 153, 51, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.vida-main .wp-block-button.btn--primary:hover .wp-block-button__link {
	background: linear-gradient(135deg, #c78325 0%, #d8953a 100%) !important;
	color: var(--vida-bg) !important;
	box-shadow: 0 18px 38px rgba(221, 153, 51, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.vida-main .wp-block-button.btn--primary:focus-visible .wp-block-button__link {
	background: linear-gradient(135deg, #c78325 0%, #d8953a 100%) !important;
	box-shadow: 0 0 0 3px rgba(221, 153, 51, 0.35);
}
.vida-main .wp-block-button.btn--primary:hover .wp-block-button__link svg {
	transform: translateX(-2px);
}

/* Secondary — teal شفاف */
.vida-main .wp-block-button.btn--secondary .wp-block-button__link {
	background: rgba(12, 184, 182, 0.12) !important;
	color: var(--vida-teal-dark) !important;
	border-color: rgba(12, 184, 182, 0.34);
}
.vida-main .wp-block-button.btn--secondary:hover .wp-block-button__link {
	background: rgba(12, 184, 182, 0.2) !important;
	color: var(--vida-teal-dark) !important;
	border-color: rgba(12, 184, 182, 0.5);
}
.vida-main .wp-block-button.btn--secondary:focus-visible .wp-block-button__link {
	background: rgba(12, 184, 182, 0.24) !important;
	border-color: var(--vida-teal);
}

/* Light — أبيض */
.vida-main .wp-block-button.btn--light .wp-block-button__link {
	background: var(--vida-bg) !important;
	color: var(--vida-ink-deep) !important;
	border-color: rgba(255, 255, 255, 0.85);
	box-shadow: 0 10px 24px rgba(22, 37, 48, 0.12);
}
.vida-main .wp-block-button.btn--light:hover .wp-block-button__link {
	background: var(--vida-bg-soft) !important;
	color: var(--vida-teal-dark) !important;
	border-color: rgba(12, 184, 182, 0.45);
	box-shadow: 0 14px 32px rgba(22, 37, 48, 0.16);
}
.vida-main .wp-block-button.btn--light:focus-visible .wp-block-button__link {
	background: var(--vida-bg-soft) !important;
	border-color: var(--vida-teal);
	color: var(--vida-teal-dark) !important;
}

/* Ghost — شفاف مع إطار أبيض للخلفيات الداكنة */
.vida-main .wp-block-button.btn--ghost .wp-block-button__link {
	background: rgba(255, 255, 255, 0.08) !important;
	color: var(--vida-bg) !important;
	border-color: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 24px rgba(22, 37, 48, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.vida-main .wp-block-button.btn--ghost:hover .wp-block-button__link {
	background: rgba(255, 255, 255, 0.18) !important;
	border-color: var(--vida-bg);
	box-shadow: 0 14px 32px rgba(22, 37, 48, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.vida-main .wp-block-button.btn--ghost:focus-visible .wp-block-button__link {
	background: rgba(255, 255, 255, 0.22) !important;
	border-color: var(--vida-bg);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
.vida-main .wp-block-button.btn--ghost:hover .wp-block-button__link svg {
	transform: translateX(-2px);
}

/* wp-block-button wrapper — inline وبدون margin زائدة */
.vida-main .wp-block-button.btn {
	display: inline-block;
	margin: 0;
}

/* ── إلغاء هالة Blocksy على كل أزرار الموقع ──────────────────────────────
   Blocksy يضع ::before مع filter:blur(11px) يتحكم به --theme-button-shadow.
   القاعدة أعلاه تعتمد على class .btn في الـ wrapper. هذه القاعدة أشمل
   وتضمن الإلغاء حتى لو لم يحمل الـ wrapper class .btn. */
.vida-main .wp-block-button__link {
	--theme-button-shadow: none;
	--theme-button-transform: none;
}
.vida-main .wp-block-button__link::before {
	display: none !important;
}

/* ── زر secondary (تواصل واتساب) في القسم الداكن — مطابق للأصل ──────────
   تيل فاتح (var(--vida-teal)) مقروء على الخلفية الداكنة لـ contact-cta-section. */
.contact-cta-section .wp-block-button.btn--secondary .wp-block-button__link {
	color: var(--vida-teal) !important;
	background: rgba(12, 184, 182, 0.12) !important;
	border-color: rgba(12, 184, 182, 0.5) !important;
}
.contact-cta-section .wp-block-button.btn--secondary:hover .wp-block-button__link {
	background: rgba(12, 184, 182, 0.22) !important;
}

/* wp-block-buttons (الحاوي) — gap موحد */
.vida-main .wp-block-buttons {
	gap: 12px;
	flex-wrap: wrap;
	margin-block: 0;
}

/* ── D) إلغاء Blocksy styles على wp:image داخل الأنماط ── */
.vida-main .wp-block-image {
	margin: 0;
}
.vida-main .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.vida-page-shell {
	display: contents;
	margin: 0;
	padding: 0;
}

/* ── E) إعادة ضبط margins جوتنبرج الافتراضية في المحرر ──
   جوتنبرج يُضيف margins على figure.wp-block-image وعلى
   wp-block-group داخل constrained layout، مما يُفسد تخطيط
   الأقسام المصمّمة يدويًا مثل about-hero. */
.editor-styles-wrapper .wp-block-image {
	margin: 0;
}

.editor-styles-wrapper .wp-block-image figure {
	margin: 0;
}

/* إلغاء padding من constrained layout على الأقسام التي تستخدم .container */
.editor-styles-wrapper .wp-block-group.container {
	padding-inline: 0;
	max-width: 100%;
}

/* إلغاء هوامش جوتنبرج بين الكتل الداخلية للأقسام */
.editor-styles-wrapper .about-hero .wp-block-image,
.editor-styles-wrapper .about-hero .wp-block-group {
	margin-block-start: 0;
	margin-block-end: 0;
}