/* =========================================================
   أمر 76 — هوية "التفصيل" الذهبية (Re-skin مرحلة مستقلة)
   يُحمَّل هذا الملف فقط على صفحات page_type=custom/custom-hub
   (7 صفحات custom-*)، فوق service-design.css — صفر تأثير على
   أي صفحة تركيب أو تجاري. لمسة ذهبية #C98A3E فوق هوية الموقع
   الأساسية (تيل/كريمي)، بلا كسر أي بنية أو تخطيط قائم.
   ========================================================= */

:root {
    --gold: #C98A3E;
    --gold-deep: #9C6A2C;
    --gold-soft: #F3E6D2;
}

/* ----- الهيرو: شريط ذهبي علوي يميّز صفحات التفصيل من أول لحظة ----- */
.hero { position: relative; }
.hero::before {
    content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 5px;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 100%); z-index: 2;
}
.hero .pill { background: rgba(201,138,62,.16); border: 1px solid rgba(201,138,62,.4); }
.hero .pill .dot { background: var(--gold); }

/* ----- خطوات العمل: من "كروت" إلى "Timeline" متصل — معاينة→تصميم→تصنيع→تركيب ----- */
.section--ink .eyebrow { color: var(--gold); }
.grid-4 { position: relative; }
.step, .step--last {
    position: relative; border-top: 3px solid var(--gold);
}
.step i, .step--last i {
    background: rgba(201,138,62,.18); border: 1px solid rgba(201,138,62,.45); color: var(--gold);
}
@media (min-width: 900px) {
    .grid-4::before {
        content: ''; position: absolute; top: 24px; inset-inline: 12%; height: 2px;
        background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 18px);
        z-index: 0;
    }
}

/* ----- منتقي الخامات/الألوان التفاعلي (أمر 80 ⑦) ----- */
.material-picker { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; }
@media (min-width: 768px) { .material-picker { flex-direction: row; align-items: flex-start; gap: 40px; } }
.material-swatches { display: flex; flex-wrap: wrap; gap: 14px 24px; flex: 1; }
.material-swatch {
    display: flex; align-items: center; gap: 10px; background: none; border: 1px solid transparent;
    border-radius: 999px; padding: 4px 10px 4px 4px; cursor: pointer; transition: border-color .15s ease, background .15s ease;
    font-family: var(--ff-body, inherit);
}
.material-swatch:hover { background: var(--gold-soft); }
.material-swatch.is-selected { border-color: var(--gold); background: var(--gold-soft); }
.material-swatch__dot {
    width: 28px; height: 28px; border-radius: 50%; flex: none;
    border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line), 0 3px 8px rgba(34,31,27,.12);
}
.material-swatch b { font-size: 14px; color: var(--ink); font-weight: 700; }
/* شريحة المعاينة — أبعاد ثابتة مُهيَّأة من السيرفر، الجافاسكربت يبدّل اللون/النص فقط بلا تغيير حجم */
.material-picker__preview {
    display: flex; align-items: center; gap: 14px; flex: none;
    background: var(--cream-soft); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 16px 20px; min-width: 220px;
}
.material-picker__chip {
    width: 52px; height: 52px; border-radius: 12px; flex: none;
    border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line), 0 4px 10px rgba(34,31,27,.14);
    transition: background .15s ease;
}
.material-picker__label { display: block; font-size: 12px; color: var(--ink-mute); margin-bottom: 2px; }
.material-picker__preview b { font-size: 16px; color: var(--ink); }

/* ----- البلوك الأول فقط (فقرة القيمة الافتتاحية/الورشة) — كارت ذهبي فاتح مميّز.
   نستهدف الأول تحديداً لا كل البلوكات النصّية، تفادياً لتكرار الصندوق الذهبي على
   كل الصفحة قبل رفع الصور الحقيقية (كل البلوكات نصّية مؤقتاً حتى ذلك الحين). ----- */
.content-figures > .content-figure:first-child .content-figure__text {
    background: var(--gold-soft); border: 1px solid rgba(201,138,62,.35);
    border-radius: var(--radius-lg); padding: 24px 26px;
}
.content-figure--hook .content-figure__text { border-top: 4px solid var(--gold); }

/* ----- "ما يشمله عرض السعر" — إطار ذهبي بدل الأخضر (تفصيل ≠ تركيب) ----- */
.price-honesty__col--in { background: var(--gold-soft); border-color: rgba(201,138,62,.4); }
.price-honesty__col--in .price-honesty__label,
.price-honesty__col--in .price-honesty__item { color: var(--gold-deep); }

/* ----- أمر 78 ⑤🔴: إطار يحترم اتجاه الصورة — العمودي كان يظهر مقزَّماً داخل صندوق
   3:2 ثابت بـobject-fit:contain (لا يكبّر العمودي، يصغّره). هنا كسر الصندوق الموحّد:
   العمودي يأخذ عموداً عمودياً ضيقاً وطويلاً بـcover (يملأ الإطار، مقصوص مركزياً
   بلا تفريغ)، بدل الصندوق العريض المشترك مع الأفقي. مُنطاق على custom-* فقط. ----- */
.content-figures--contain .content-figure__media.is-portrait {
    aspect-ratio: 3 / 4; max-width: 480px; width: 100%; margin-inline: auto;
    background: var(--cream); border-radius: 16px; overflow: hidden;
}
@media (min-width: 768px) {
    .content-figures--contain .content-figure__media.is-portrait { max-height: 640px; }
}
.content-figures--contain .content-figure__media.is-portrait img {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
    display: block; border-radius: 16px;
}

/* ----- أمر 78 ⑥: رتم premium لصور المحتوى — إطار ذهبي خفيف + تسمية "من أعمال ورشتنا" ----- */
.content-figure__media { position: relative; }
.content-figure__media img { border: 2px solid rgba(201,138,62,.3); }
.content-figure__tag {
    position: absolute; top: 14px; inset-inline-start: 14px; z-index: 1;
    background: rgba(18,33,28,.72); color: var(--gold-soft); font-size: 12px; font-weight: 700;
    padding: 5px 12px; border-radius: 999px; backdrop-filter: blur(2px);
}
.content-figure__grid { gap: 32px; }
@media (min-width: 768px) { .content-figure__grid { gap: 56px; } }
.content-figures { gap: 68px; }
@media (min-width: 768px) { .content-figures { gap: 88px; } }

/* ----- أمر 84: أيقونات "ماذا نفصّل" الخطّية (line-icons) بلون ذهبي بدل التعبئة ----- */
.grid-3 .card svg { color: var(--gold); }

/* ----- المعرض/البورتفوليو ----- */
.shot { border-color: rgba(201,138,62,.3); }

/* ----- أمر 82 ③: معرض Masonry — عمود واحد على الموبايل، 2-3 أعمدة على الديسكتوب
   حسب المساحة (عرض عمود أدنى 320px)، بلا قصّ إجباري — كل صورة بارتفاعها الطبيعي
   داخل عرض العمود الثابت (لا aspect-ratio موحّد يشوّه الصور الرأسية أو الأفقية). ----- */
.gallery-masonry {
    columns: 1; column-gap: 12px;
}
@media (min-width: 620px) { .gallery-masonry { columns: 2; } }
@media (min-width: 980px) { .gallery-masonry { columns: 3; } }
.gallery-masonry .gallery-item {
    display: block; width: 100%; break-inside: avoid; margin: 0 0 12px;
    padding: 0; border: none; background: var(--cream); cursor: pointer;
    border-radius: 16px; overflow: hidden; position: relative;
    font: inherit; color: inherit; text-align: start;
    /* أمر 83 ①: aspect-ratio مضبوط inline من PHP حسب أبعاد كل صورة الحقيقية —
       يحجز المساحة قبل التحميل فلا ينهار العمود، وlazy-load يدخل حيّز العرض طبيعياً. */
}
.gallery-masonry .gallery-item img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    border-radius: 16px; border: 2px solid rgba(201,138,62,.3);
    transition: transform .2s ease;
}
.gallery-masonry .gallery-item:hover img,
.gallery-masonry .gallery-item:focus-visible img { transform: scale(1.02); }
.gallery-masonry .gallery-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gallery-masonry .gallery-item em {
    position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1;
    background: linear-gradient(0deg, rgba(18,33,28,.78), transparent);
    color: #fff; font-style: normal; font-size: 13px; padding: 24px 14px 10px;
}

/* ----- الأزرار وCTA ----- */
.hero .btn--amber, .cta .btn--cream:hover { background: var(--gold); }
.hero .btn--amber:hover { background: var(--gold-deep); }

/* ----- أمر 89 ⑦: بطاقة معاينة التفصيل — بديل أداة الحجز الفوري، هوية ذهبية مستقلة ----- */
.consult-card.booking-pro { border-color: rgba(201,138,62,.35); }
.consult-card .booking-pro__label { color: var(--gold-soft); }
.consult-card__actions { display: flex; flex-direction: column; gap: 10px; }
.btn--gold {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--ff-heading); font-weight: 900; border-radius: 13px; padding: 15px 22px;
    font-size: 17px; text-decoration: none; background: var(--gold); color: #fff; border: 0; cursor: pointer;
    transition: background-color .15s ease;
}
.btn--gold:hover { background: var(--gold-deep); }
.btn--gold-outline {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--ff-heading); font-weight: 800; border-radius: 13px; padding: 14px 22px;
    font-size: 16px; text-decoration: none; background: transparent; color: #fff;
    border: 1px solid rgba(255,255,255,.35); cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.btn--gold-outline:hover { border-color: var(--gold); background: rgba(201,138,62,.12); }