/* ================================================================
   أقسامُ المصمّم / The designer's blocks   (upgrade66، inc/designer.php)

   ★ تُحمَّل على واجهة الفرع وحدها (`parts/header.php`)، وكلُّ صنفٍ هنا تحت `dz-`
   فلا يمسّ ما في `main.css`. والألوانُ رموزُ المظهر نفسه (القاعدة ١٩-هـ): لونُ
   الفرع ودرجاتُه وورقُه — فقالبٌ داكنٌ أو فاتح يجد الأقسامَ على لونه بلا سطرٍ ثانٍ.
   ★ ولا `var()` بلا بديلٍ لما يكتبه الخادمُ وحده (`--on-brand`، `--tint`) — القاعدة ١٥.
   ★ Loaded on the branch front page only; every class is `dz-` so nothing in
   main.css is touched. Colours are the theme's own tokens.
   ================================================================ */

/* ── مقابضُ الأسلوب المشتركة ── */
.dz-bg-plain { background: var(--surface); }
.dz-bg-tint  { background: var(--surface-alt); }
.dz-bg-brand { background: var(--brand-600); color: var(--on-brand, #fff); }
.dz-bg-dark  { background: #171513; color: #EDE8E2; }
.dz-bg-brand :is(h2, h3, .prose, p, .dz-eyebrow, .section-head a),
.dz-bg-dark  :is(h2, h3, .prose, p, .dz-eyebrow, .section-head a) { color: inherit; }
.dz-bg-brand .btn-brand { background: #fff; color: var(--brand-700); border-color: #fff; }
.dz-bg-dark  .dz-feat, .dz-bg-brand .dz-feat { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }
.dz-bg-dark  .dz-feat p, .dz-bg-brand .dz-feat p { color: inherit; opacity: .82; }

.section.dz-pad-sm { padding-block: clamp(28px, 4vw, 44px); }
.section.dz-pad-lg { padding-block: clamp(84px, 10vw, 140px); }

.dz-w-narrow > .container { max-width: 46rem; }
.dz-w-wide   > .container { max-width: 1440px; }
.dz-al-center { text-align: center; }
.dz-al-center .dz-actions { justify-content: center; }
.dz-al-center .dz-head { margin-inline: auto; }

/* الإظهارُ بالجهاز — حدُّ الهاتف هو حدُّ قائمة الموقع نفسه */
@media (max-width: 767.98px) { .dz-only-desktop { display: none !important; } }
@media (min-width: 768px)    { .dz-only-mobile  { display: none !important; } }

/* ── عناصرُ مشتركة ── */
.dz-eyebrow {
    display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
    color: var(--brand-600); margin-bottom: .6rem;
}
html[lang="ar"] .dz-eyebrow { letter-spacing: 0; }
.dz-head { max-width: 46rem; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.dz-head h2 { margin: 0 0 .5rem; }
.dz-head .prose { margin: 0; }
.dz-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }

/* ── نصّ ── */
.dz-text > .container { max-width: 52rem; }
.dz-text.dz-w-wide > .container { max-width: 1200px; }
.dz-text.dz-w-narrow > .container { max-width: 38rem; }
.dz-text h2 { margin: 0 0 .8rem; }
.dz-text .prose { margin: 0; font-size: 1.04rem; }

/* ── لافتةٌ بصورة ── */
.dz-banner .dz-banner-card {
    position: relative; overflow: hidden; border-radius: var(--hero-r, 26px);
    display: flex; align-items: flex-end; isolation: isolate;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-grad-to, var(--brand-700, #A6321F)));
    color: #fff;
}
.dz-banner.dz-h-sm .dz-banner-card { min-height: clamp(200px, 26vw, 280px); }
.dz-banner.dz-h-md .dz-banner-card { min-height: clamp(260px, 36vw, 420px); }
.dz-banner.dz-h-lg .dz-banner-card { min-height: clamp(340px, 50vw, 560px); }
.dz-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* ★ الحجابُ طبقةٌ بين الصورة والنصّ يكفل التباين (القاعدة ١٧) — والصورةُ تحته بأرقامٍ صريحة */
.dz-banner-card.has-img::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, rgba(12, 10, 9, var(--dz-ov, .62)), rgba(12, 10, 9, calc(var(--dz-ov, .62) * .35)));
}
.dz-ov-light  { --dz-ov: .38; }
.dz-ov-medium { --dz-ov: .62; }
.dz-ov-strong { --dz-ov: .84; }
.dz-banner-txt { padding: clamp(1.4rem, 4vw, 3rem); max-width: 40rem; }
.dz-banner.dz-al-center .dz-banner-card { justify-content: center; text-align: center; }
.dz-banner.dz-al-center .dz-banner-txt { margin-inline: auto; }
.dz-banner-txt h2 { color: #fff; margin: 0 0 .6rem; font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.2; }
.dz-banner-txt p { color: rgba(255, 255, 255, .88); margin: 0 0 1.2rem; font-size: 1.04rem; }
.dz-banner-txt .dz-eyebrow { color: #fff; opacity: .86; }
.dz-banner-txt .btn-brand { background: #fff; color: #171513; border-color: #fff; }
.dz-banner.dz-w-wide > .container { max-width: none; padding-inline: 0; }
.dz-banner.dz-w-wide .dz-banner-card { border-radius: 0; }

/* ── مزايا ── */
.dz-feat-grid { display: grid; gap: clamp(.8rem, 2vw, 1.2rem); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.dz-feat-grid.dz-cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
@media (min-width: 992px) {
    .dz-feat-grid.dz-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dz-feat-grid.dz-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.dz-feat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); padding: 1.25rem; }
.dz-al-center .dz-feat { text-align: center; }
.dz-feat-ico {
    width: 2.8rem; height: 2.8rem; border-radius: var(--r-md, 12px); display: inline-grid; place-items: center;
    background: var(--brand-50); color: var(--brand-600); font-size: 1.3rem; margin-bottom: .8rem;
}
.dz-bg-brand .dz-feat-ico, .dz-bg-dark .dz-feat-ico { background: rgba(255, 255, 255, .12); color: #fff; }
.dz-feat h3 { font-size: 1.05rem; margin: 0 0 .3rem; }
.dz-feat p { margin: 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.7; }

/* ── معرض ── */
.dz-gal-grid { display: grid; gap: clamp(.5rem, 1.4vw, .9rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
    .dz-gal-grid.dz-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dz-gal-grid.dz-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.dz-gal-item { margin: 0; overflow: hidden; border-radius: var(--r-md, 12px); background: var(--surface-alt); }
.dz-gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 1 / 1; }
.dz-r-landscape .dz-gal-item img { aspect-ratio: 4 / 3; }
.dz-r-portrait  .dz-gal-item img { aspect-ratio: 3 / 4; }

/* ── دعوةٌ لفعل ── */
.dz-cta-card {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem;
    border-radius: var(--hero-r, 26px); padding: clamp(1.4rem, 4vw, 2.6rem);
}
.dz-cta-txt { flex: 1 1 18rem; min-width: 0; }
.dz-cta-txt h2 { margin: 0 0 .4rem; font-size: clamp(1.35rem, 3vw, 2rem); }
.dz-cta-txt p { margin: 0; }
.dz-cta .dz-actions { margin-top: 0; }
.dz-al-center .dz-cta-card { flex-direction: column; text-align: center; }
.dz-tone-brand .dz-cta-card { background: linear-gradient(135deg, var(--brand-500), var(--brand-grad-to, var(--brand-700, #A6321F))); color: var(--on-brand, #fff); }
.dz-tone-brand .dz-cta-card h2, .dz-tone-brand .dz-cta-card p { color: inherit; }
.dz-tone-dark .dz-cta-card { background: #171513; color: #EDE8E2; }
.dz-tone-dark .dz-cta-card h2 { color: #fff; }
.dz-tone-dark .dz-cta-card p { color: #C9C1B8; }
.dz-tone-light .dz-cta-card { background: var(--surface); border: 1px solid var(--line); }
.dz-tone-light .dz-cta-card p { color: var(--ink-soft); }
.dz-cta .dz-btn-1, .dz-cta .dz-btn-2 { border-radius: var(--r-pill, 999px); font-weight: 700; padding: .7rem 1.3rem; }
.dz-tone-brand .dz-btn-1, .dz-tone-dark .dz-btn-1 { background: #fff; color: #171513; border: 1px solid #fff; }
.dz-tone-brand .dz-btn-2, .dz-tone-dark .dz-btn-2 { background: transparent; color: inherit; border: 1px solid rgba(255, 255, 255, .55); }
.dz-tone-light .dz-btn-1 { background: var(--brand-500); color: var(--on-brand, #fff); border: 1px solid var(--brand-500); }
.dz-tone-light .dz-btn-2 { background: transparent; color: var(--ink); border: 1px solid var(--line); }

/* ── أقسامُ المنيو ── */
.dz-cats { display: grid; gap: clamp(.6rem, 1.6vw, 1rem); grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 100%), 1fr)); }
.dz-cat {
    position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 3; border-radius: var(--r-lg, 16px);
    display: flex; align-items: flex-end; text-decoration: none; color: #fff;
    background: linear-gradient(150deg, var(--brand-500), var(--brand-grad-to, var(--brand-700, #A6321F)));
}
.dz-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .35s ease; }
.dz-cat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(12, 10, 9, .72), rgba(12, 10, 9, .05) 70%); }
.dz-cat > i { position: absolute; inset-block-start: .8rem; inset-inline-end: .9rem; font-size: 1.6rem; opacity: .55; }
.dz-cat:hover img { transform: scale(1.04); }
.dz-cat-txt { padding: .8rem .9rem; display: flex; flex-direction: column; min-width: 0; }
.dz-cat-txt b { font-size: 1rem; line-height: 1.3; }
.dz-cat-txt small { opacity: .8; font-size: .78rem; }

/* ── الموقعُ والخريطة ── */
.dz-map { display: grid; gap: clamp(1rem, 3vw, 2rem); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 992px) { .dz-map { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .dz-map.no-embed { grid-template-columns: minmax(0, 1fr); } }
.dz-map-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); padding: clamp(1.2rem, 3vw, 2rem); }
.dz-map-card h2 { margin: 0 0 .8rem; }
.dz-map-addr { display: flex; gap: .5rem; align-items: baseline; color: var(--ink-soft); margin: 0 0 .6rem; }
.dz-map-card .btn { margin-top: .6rem; }
.dz-map-frame { width: 100%; min-height: 300px; height: 100%; border: 0; border-radius: var(--r-lg, 16px); background: var(--surface-alt); }

/* ── فيديو ── */
.dz-video-box { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg, 16px); overflow: hidden; background: #000; }
.dz-video-play, .dz-video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.dz-video-play img { width: 100%; height: 100%; object-fit: cover; opacity: .86; }
.dz-play {
    position: absolute; inset: 0; margin: auto; width: 4.4rem; height: 4.4rem; border-radius: 50%;
    display: grid; place-items: center; background: var(--brand-500); color: var(--on-brand, #fff); font-size: 2.2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* ── فاصل ── */
.dz-spacer.dz-sp-sm { height: 24px; } .dz-spacer.dz-sp-md { height: 48px; }
.dz-spacer.dz-sp-lg { height: 88px; } .dz-spacer.dz-sp-xl { height: 136px; }
.dz-spacer { display: flex; align-items: center; }
.dz-spacer > .container { width: 100%; }
.dz-spacer hr { border: 0; border-top: 1px solid var(--line); margin: 0; opacity: 1; }

/* ── لوحُ القسم الفارغ (معاينة المصمّم وحدها) ── */
.dz-empty-box {
    border: 2px dashed var(--line); border-radius: var(--r-lg, 16px); padding: 2.2rem 1rem; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: .3rem; color: var(--ink-soft);
}
.dz-empty-box i { font-size: 1.7rem; color: var(--brand-500); }
.dz-empty-box b { color: var(--ink); }

/* ── الواجهةُ من المصمّم (هيكلُ القالب): المحاذاةُ والارتفاع — صنفان على القسم، والافتراضُ بلا صنف ── */
.hero-al-center > .container { text-align: center; }
.hero-al-center :is(.branch-hero-facts, .branch-hero-cta, .branch-hero-social, .ghero-stats, .ghero-cta) { justify-content: center; }
.hero-al-center :is(h1, .lead) { margin-inline: auto; }
.hero-al-center .eyebrow { justify-content: center; }
/* ★ الارتفاعُ على لوح الواجهة لا القسم: اللوحُ هو ما يُرى، والقسمُ حوله هامشٌ من الورق */
.hero-h-tall > .container, .hero-h-full > .container { display: flex; flex-direction: column; justify-content: center; }
.hero-h-tall > .container { min-height: clamp(26rem, 62vh, 40rem); }
.hero-h-full > .container { min-height: calc(100svh - var(--header-h, 72px) - 3rem); }