/* TASK302 "spaces" team: the LIVE blocks of the city / cladding / worktops / service pages, in the designer's language
   (design/tpl/city.php, design/tpl/service.php; helpers design/inc/t302-spaces.php). Loaded after the designer's site.css. */

/* hero / call-to-action buttons with the LIVE labels: the designer's k-btn, allowed to wrap */
.t3sp-city .k-hero .k-row,.t3sp-svc .k-hero .k-row,.t3sp-cta-btns{flex-wrap:wrap;gap:12px}
.t3sp-btn .ic{flex:none}

/* hub cards (LIVE card texts) as the designer's photo tiles; the tile number is drawn by CSS, not added to the link text */
.t3sp-tiles{counter-reset:t3sp}
.t3sp-tiles > .sv-s{counter-increment:t3sp}
.t3sp-tiles .k-itc::before{content:counter(t3sp,decimal-leading-zero);direction:ltr;align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.18em;color:#E6CF9A}
.t3sp-tiles .k-itc{padding-inline-end:26px}
.t3sp-go{position:absolute;left:0;bottom:1px;font-size:18px;line-height:1;color:#E6CF9A;transition:transform .3s}
.t3sp-tiles .sv-s:hover .t3sp-go,.t3sp-tiles .sv-s:focus-visible .t3sp-go{transform:translateX(-4px)}
.t3sp-cards .k-sh{margin-bottom:26px}
.t3sp-cards-h{margin-bottom:18px}
.t3sp-city .t3sp-tiles > .sv-s{height:300px}
.t3sp-more{margin-top:22px}

/* the page's works (its own photos, alt and captions) when there are more than three: two even columns */
@media (min-width:761px){
	.ct-pj.t3sp-pj-many{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:340px}
}

/* "עוד ב…" (LIVE sibling links) as the designer's chips */
.t3sp-family .k-sh{margin-bottom:18px}
.t3sp-chips{list-style:none;margin:0;padding:0}
.t3sp-chips li{margin:0}

/* the LIVE bottom call to action inside the designer's lead band */
.t3sp-cta .k-lead{margin-top:14px}
.t3sp-cta-btns{display:flex;margin-top:26px}
.t3sp-nap{margin:18px 0 0;font-size:14px;color:rgba(251,248,242,.62)}

/* the page's own content (LIVE, verbatim) in the designer's prose column */
.t3sp-prose .sp-section,.t3sp-prose .wt-section{margin:0 0 34px}
.t3sp-prose .sp-section > h2:first-child,.t3sp-prose .wt-section > h2:first-child{margin-top:0}
.t3sp-prose h2{font-size:24px;letter-spacing:-.01em}
/* the page's own photos: large and stacked, as on the designer's copy (his .sv-prose / .bp-prose image rules) */
.t3sp-prose .sp-figure,.t3sp-prose .wt-figure{margin:18px 0 24px}
.t3sp-prose figcaption{text-align:right}
/* tables */
.t3sp-prose .sp-table-wrap,.t3sp-prose .wt-table-wrap{overflow-x:auto;margin:12px 0 22px;border-radius:20px;background:#FFFDF8;box-shadow:0 0 0 1px rgba(28,23,18,.09),0 30px 60px -44px rgba(60,40,10,.45)}
.t3sp-prose .sp-table,.t3sp-prose .wt-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.7}
.t3sp-prose .sp-table th,.t3sp-prose .sp-table td,.t3sp-prose .wt-table th,.t3sp-prose .wt-table td{padding:13px 18px;text-align:right;vertical-align:top;border-bottom:1px solid rgba(28,23,18,.08);color:rgba(28,23,18,.8)}
.t3sp-prose .sp-table thead th,.t3sp-prose .wt-table thead th{background:linear-gradient(180deg,#F5EEE1,#EFE4CF);color:#1C1712;font-weight:700;font-size:14px;letter-spacing:.02em}
.t3sp-prose .sp-table tbody tr:last-child td,.t3sp-prose .wt-table tbody tr:last-child td{border-bottom:0}
.t3sp-prose .sp-table td:first-child,.t3sp-prose .wt-table td:first-child{font-weight:700;color:#1C1712}
/* the planning drawings (inline SVG figures of the cladding pages) */
.t3sp-prose .jmsb-planning-figure{border-radius:20px !important}
/* a FAQ that is part of the page's own text (the worktops guide): shown, in the designer's FAQ look */
.t3sp-prose .jmsb-faq{display:block;margin:6px 0 0;max-width:none}
.t3sp-prose .jmsb-faq-item{border:0;border-bottom:1px solid rgba(28,23,18,.12);border-radius:0;margin:0;background:none;overflow:visible}
.t3sp-prose .jmsb-faq-item summary{position:relative;list-style:none;cursor:pointer;padding:18px 0;padding-inline-end:46px;font-size:17px;font-weight:700;color:#1C1712}
.t3sp-prose .jmsb-faq-item summary:hover{color:#8A6A35}
.t3sp-prose .jmsb-faq-item summary::-webkit-details-marker{display:none}
.t3sp-prose .jmsb-faq-item summary::after{content:"+";position:absolute;inset-inline-start:auto;inset-inline-end:0;top:50%;transform:translateY(-50%);width:30px;height:30px;margin:0;display:grid;place-items:center;border-radius:50%;font-size:18px;font-weight:400;line-height:1;color:#8A6A35;box-shadow:inset 0 0 0 1px rgba(185,143,69,.45)}
.t3sp-prose .jmsb-faq-item[open] summary::after{content:"\2212";color:#F3DFA9;background:#1C1712;box-shadow:none}
.t3sp-prose .jmsb-faq-a{padding:0 0 18px;line-height:1.8;color:rgba(28,23,18,.78)}
.t3sp-prose .jmsb-faq-a p{margin:0}

/* owner 4.11.2026: his band heading over the LIVE one (the reviews band is his own markup, k-g3 / k-rc) */
.t3sp-cta .k-h2.t3sp-cta-sub{margin-top:30px;font-size:28px;line-height:1.25}
.t3sp-cta .k-ticks + .k-h2.t3sp-cta-sub{margin-top:34px}
.t3sp-cta .k-lead + .k-ticks{margin-top:22px}

/* owner 4.11.2026 (decision 24): his hero eyebrow first, the LIVE space eyebrow under it as a quieter second line */
.k-eb.t3sp-eb2{display:flex;margin-top:10px;font-size:11.5px;letter-spacing:.2em;color:rgba(212,175,106,.72)}
.k-eb.t3sp-eb2::before{width:18px;opacity:.6}
/* his hero buttons first; the LIVE buttons in a second row */
.k-row.t3sp-row2{margin-top:12px}

@media (max-width:760px){
	.t3sp-cta .k-h2.t3sp-cta-sub{font-size:22px}
	.t3sp-even > :first-child{grid-column:auto}
	.t3sp-even > .sv-s:first-child{height:250px}
	.t3sp-city .t3sp-tiles > .sv-s{height:250px}
	.t3sp-prose h2{font-size:21px}
	.t3sp-prose .sp-table th,.t3sp-prose .sp-table td,.t3sp-prose .wt-table th,.t3sp-prose .wt-table td{padding:11px 12px;font-size:14px}
	.t3sp-cta-btns .k-btn{flex:1 1 100%;justify-content:center}
}

/* owner 4.11.2026 (decision 24, "במובייל הכל אופטימלי"): tap targets of at least 44px on these pages without moving the design:
   the section links get a taller invisible hit area, the chips grow to 44px */
.t3sp-city .k-sh .k-link,.t3sp-svc .k-sh .k-link{position:relative}
.t3sp-city .k-sh .k-link::after,.t3sp-svc .k-sh .k-link::after{content:"";position:absolute;inset:-10px -6px}
.t3sp-city .k-chip,.t3sp-svc .k-chip{height:auto;min-height:44px}
@media (max-width:760px){
	/* the LIVE button labels are long: they wrap inside the button instead of running past the side gutter */
	.t3sp-city .k-hero .k-btn,.t3sp-svc .k-hero .k-btn,.t3sp-cta-btns .k-btn{max-width:100%;height:auto;min-height:54px;white-space:normal;line-height:1.3;text-align:center;padding-block:9px}
	.k-row.t3sp-row2{margin-top:2px}
	.k-eb.t3sp-eb2{margin-top:8px;font-size:11px;letter-spacing:.16em}
}