/* TASK302 · installation posts (design/tpl/single-installation.php): the page's own blocks in the designer's language.
   Scoped to the project page body class (jm-single-installation). Loaded after site.css. */

/* hero photo = the post's first photo, with its own caption over the designer's dark gradient */
.jm-single-installation .pj-img{margin:0}
.jm-single-installation .pj-img.pj-cap::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,11,8,.72),rgba(14,11,8,0) 42%);pointer-events:none}
.jm-single-installation .pj-img .k-itc em{font-size:14px;line-height:1.55;color:rgba(251,248,242,.82)}

/* facts: the post's "הפרויקט בקצרה" heading as the designer's small label, its rows in his boxes */
.jm-single-installation .pj-fh{margin:30px 0 0;font-size:13px;font-weight:700;letter-spacing:.24em;color:#D4AF6A}
.jm-single-installation .pj-fh + .pj-facts{margin-top:14px}
.jm-single-installation .pj-facts{grid-auto-flow:dense}
.jm-single-installation .pj-facts > div.w{grid-column:span 3}
.jm-single-installation .pj-facts dd{line-height:1.45}
.jm-single-installation .pj-fl{list-style:none;padding:0;grid-template-columns:1fr}
.jm-single-installation .pj-fl > li{padding:13px 16px;border-radius:18px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:15px;line-height:1.55;color:rgba(251,248,242,.86)}
.jm-single-installation .pj-fl > li strong{display:block;font-size:12px;font-weight:600;color:rgba(251,248,242,.5);margin-bottom:2px}

/* story: a facts block that did not match the expected shape stays visible in the text */
.jm-single-installation .pj-prose .jmi-facts{display:block}
.jm-single-installation .pj-prose table{width:100%;border-collapse:collapse}

/* strip: every photo of the post (4 and more in a 6-column grid: rows of three, last row shared) */
@media (min-width:761px){
.jm-single-installation .pj-strip.pj-strip-n{grid-template-columns:repeat(6,minmax(0,1fr))}
.jm-single-installation .pj-strip.pj-strip-n > *{grid-column:span 2}
.jm-single-installation .pj-strip.pj-strip-4 > *{grid-column:span 3}
.jm-single-installation .pj-strip.pj-strip-5 > :nth-child(n+4){grid-column:span 3}
}
.jm-single-installation .pj-strip .k-itc em{display:block;font-size:13.5px;line-height:1.5;color:rgba(251,248,242,.85)}

/* the post's own Q&A: H3 questions inside the designer's accordion */
.jm-single-installation .pj-qh{margin:0;font:inherit;color:inherit;letter-spacing:normal}
.jm-single-installation .k-a a{color:#75592B;text-decoration:underline;text-underline-offset:3px}
.jm-single-installation .pj-faq-note{margin-top:26px;font-size:15px;line-height:1.75;font-weight:300;color:rgba(28,23,18,.62)}
.jm-single-installation .pj-faq-note p{margin:0 0 12px}

/* related posts: the designer's photo cards with the date, the title and the link line */
.jm-single-installation .pj-rc{position:relative}
.jm-single-installation .pj-rc > .k-badge{position:absolute;top:16px;right:16px;z-index:3;pointer-events:none}
.jm-single-installation .pj-rel .k-itc small{letter-spacing:.12em}
.jm-single-installation .pj-rel .pj-go{margin-top:8px;font-size:13px;font-weight:600;color:#E6CF9A}

/* lead band: the page's own buttons under its text */
.jm-single-installation .pj-cta{margin-top:26px}

@media (max-width:760px){
.jm-single-installation .pj-fh{margin-top:22px;font-size:12px}
.jm-single-installation .pj-facts > div.w{grid-column:1 / -1}
.jm-single-installation .pj-img .k-itc em{font-size:12.5px}
.jm-single-installation .pj-strip .k-itc em{font-size:12px}
.jm-single-installation .pj-strip .k-it:has(figcaption){height:230px}
.jm-single-installation .pj-strip .k-itc{right:12px;left:12px;bottom:10px}
}

/* ================= round 2 (owner 4.11, decision 24) ================= */

/* ---------- gallery (design/tpl/gallery.php): the designer's tile with LIVE's card text and his real "התקנה שלנו" badge ---------- */
/* the designer's eyebrow "גלריית התקנות" with LIVE's eyebrow next to it (dark hero) */
.gl-hd .t302-ebs{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.gl-hd .t302-ebs .k-pill{height:28px;font-size:12.5px}
/* the <li> is the grid cell (the badge sits next to the link, so the link text stays LIVE's) */
.gl-grid.t302-gg{grid-auto-rows:290px}
.gl-grid.t302-gg > li{display:block;position:relative;min-width:0}
.gl-grid.t302-gg > li[hidden]{display:none}
.gl-grid.t302-gg > li.tall{grid-row:span 2}
.gl-grid.t302-gg > li.wide{grid-column:span 2}
.t302-gg .t302-gt{height:100%}
.t302-gg > li > .k-badge{top:16px;right:16px;z-index:3;pointer-events:none}
.t302-gt .ar{display:inline-block;font-weight:400}
.t302-gt::after{background:linear-gradient(0deg,rgba(14,11,8,.9),rgba(14,11,8,.62) 42%,rgba(14,11,8,0) 78%)}
.t302-gt .k-itc{gap:0}
.t302-gt .k-itc small{letter-spacing:.06em}
.t302-gt .k-itc small span + span::before{content:"·";margin-inline:7px}
.t302-gt .k-itc b{font-size:18px;line-height:1.3}
.t302-gt .t302-ex{margin-top:6px;font-size:13.5px;line-height:1.5;color:rgba(251,248,242,.82)}
.t302-gt .t302-rd{margin-top:8px;font-size:13px;font-weight:800;color:#E6CF9A}
@media (min-width:761px){
.gl-grid.t302-gg > li.full{grid-column:1 / -1}
}
/* phones: the designer's grid as his page shows it (2 columns, dense; his tall tiles over two rows, his wide tiles across
   both columns), rows as tall as LIVE's card text needs */
@media (max-width:760px){
.gl-grid.t302-gg{grid-auto-rows:auto;gap:10px}
.gl-grid.t302-gg > li{grid-column:auto !important;grid-row:auto !important}
.gl-grid.t302-gg > li.tall{grid-row:span 2 !important}
.gl-grid.t302-gg > li:is(.wide,.full){grid-column:span 2 !important}
.t302-gg .t302-gt{height:100%;min-height:210px;border-radius:18px;display:flex;flex-direction:column;justify-content:flex-end}
.t302-gg .t302-gt img{position:absolute;inset:0;height:100%}
.t302-gt .k-itc{position:relative;inset:auto;padding:92px 12px 13px}
.gl-grid.t302-gg > li:is(.wide,.full) .k-itc{padding-top:120px}
.t302-gt .k-itc small{font-size:10.5px;letter-spacing:.03em}
.t302-gt .k-itc small span + span::before{margin-inline:5px}
.t302-gt .k-itc b{font-size:14.5px;line-height:1.3}
.t302-gt .t302-ex{margin-top:5px;font-size:12.5px;line-height:1.45}
.t302-gt .t302-rd{margin-top:6px;font-size:12px}
.t302-gg > li > .k-badge{top:10px;right:10px;height:24px;padding:0 9px;font-size:10.5px}
.t302-gg .gl-open{top:10px;left:10px;width:30px;height:30px}
}

/* ---------- project page: the page's own call to action under the article, in the designer's dark article box ---------- */
.t302-pj-cta{padding-top:0}
.t302-pj-box{padding:36px 38px;border-radius:26px;background:#1A150F;color:#FBF8F2;box-shadow:0 40px 70px -40px rgba(70,46,12,.55)}
.t302-pj-box .k-h2{margin:0 0 12px;font-size:32px !important;line-height:1.15;color:#FBF8F2}
.t302-pj-box .k-h2 em{background-image:linear-gradient(100deg,#B98F45 0%,#F6E3B0 35%,#D4AF6A 60%,#FFF1CC 80%,#C9A35E 100%)}
.t302-pj-box p{margin:0;font-size:16.5px;line-height:1.7;color:rgba(251,248,242,.78)}
.t302-pj-box .pj-cta{margin-top:24px;flex-wrap:wrap;gap:12px}
.t302-pj-box .k-btn.o{color:#FBF8F2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);background:rgba(255,255,255,.04)}
/* the designer's related projects followed by LIVE's "התקנות נוספות": the second section sits closer to the first */
.t302-pj-rel2{padding-top:0}
@media (max-width:760px){
.t302-pj-box{padding:26px 22px;border-radius:22px}
.t302-pj-box .k-h2{font-size:25px !important}
.t302-pj-box p{font-size:15.5px}
.t302-pj-box .pj-cta .k-btn{flex:1 1 100%}
}