/* ============================================================
   Sand & Bronze — JMI Installation Post (.jmi-post)
   Brief-compliant EDITORIAL layout: hero <img>, inline body images, compact
   "פרטי הפרויקט" fact block. No spec-table / gallery-grid / model-card.
   Loaded on top of blog-single.css (shares the .jmsb-post skin) for
   is_singular('post') && cat 283 && jmi_template_v1.
   ============================================================ */

/* ---- HERO as a real <img> (LCP: eager + fetchpriority=high in the template) ---- */
.jmi-post .inst-hero{
	width:fit-content; max-width:100%; margin:0 auto clamp(28px,4vw,48px); padding:0;
	border-radius:var(--r-lg,22px); overflow:hidden;
	border:1px solid var(--line,rgba(156,116,51,.24)); box-shadow:var(--shadow,0 24px 60px rgba(60,44,18,.14));
	background:var(--bg-2,#efe6d6);
}
/* contain to a tasteful height so tall portrait photos never dominate the fold (no crop) */
.jmi-post .inst-hero-img{
	display:block; width:auto; max-width:100%; height:auto;
	max-height:clamp(360px,56vh,540px); margin-inline:auto;
}
@media(max-width:560px){
	.jmi-post .inst-hero{ border-radius:var(--r,14px); }
	.jmi-post .inst-hero-img{ max-height:64vh; }
}

/* ---- "פרטי הפרויקט" compact fact block (NOT a spec table) ---- */
.jmi-post .jmi-facts{
	margin:clamp(22px,3.5vw,36px) 0; padding:clamp(18px,2.6vw,26px) clamp(20px,3vw,30px);
	background:var(--surface,#fffefb); border:1px solid var(--line,rgba(156,116,51,.24));
	border-inline-start:3px solid var(--gold,#9c7433); border-radius:var(--r,14px);
	box-shadow:var(--shadow,0 14px 40px rgba(84,64,28,.10));
}
.jmi-post .jmi-facts-title{ font-size:1.2rem; color:var(--ink,#2a2418); margin:0 0 .55em; }
.jmi-post .jmi-facts ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5em; }
.jmi-post .jmi-facts li{ font-family:var(--sans,'Rubik',sans-serif); font-size:.98rem; color:var(--ink-2,#5a5140); line-height:1.5; }
.jmi-post .jmi-facts li strong{ color:var(--ink,#2a2418); font-weight:700; margin-inline-end:.3em; }

/* ---- inline body images (figure + caption), interspersed between H2 sections ---- */
.jmi-post .post-body .inst-figure{
	width:fit-content; max-width:100%; margin:clamp(24px,3.5vw,40px) auto; padding:0;
	border-radius:var(--r,14px); overflow:hidden;
	border:1px solid var(--line,rgba(156,116,51,.24)); box-shadow:var(--shadow,0 14px 40px rgba(84,64,28,.12));
	background:var(--bg-2,#efe6d6);
}
/* contain height + center so portrait detail shots stay comfortable, not full-column-tall */
.jmi-post .post-body .inst-figure img{
	display:block; width:auto; max-width:100%; height:auto; margin:0 auto; border-radius:0;
	max-height:clamp(300px,46vh,440px);
}
@media(max-width:560px){ .jmi-post .post-body .inst-figure img{ max-height:56vh; } }
/* lead / wide project image gets a touch more presence than the detail shots */
.jmi-post .post-body .inst-figure.inst-lead img{ max-height:clamp(380px,56vh,560px); }
.jmi-post .post-body .inst-figure figcaption{
	font-family:var(--sans,'Rubik',sans-serif); font-size:.85rem; color:var(--ink-2,#5a5140);
	text-align:center; padding:10px 14px 12px; background:var(--surface,#fffefb);
}

/* soft closing CTA paragraph inside the body */
.jmi-post .post-body .jmi-cta-text{
	margin-top:1.6em; padding-top:1.2em; border-top:1px solid var(--line,rgba(156,116,51,.24));
	font-size:1.06rem; color:var(--ink,#2a2418);
}