/* Kitchens and baths page (src/pages/services/kitchens-baths.html). Builder C. */

/* ---------- cabinet shop photos (400px originals: kept small) ---------- */
.shop-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);align-items:start;max-width:600px}
.shop-photos .photo:nth-child(2){margin-top:var(--sp-8)}

/* ---------- induction drawing on a dark tile ---------- */
.kb-ill .solid{fill:var(--ink)}
.kit-tiles .ill{height:120px;width:auto;max-width:none;margin-bottom:var(--sp-2);align-self:flex-start}

/* ---------- 3D bathroom drawing ---------- */
.render{border-radius:var(--r-lg);padding:clamp(16px,3vw,40px);margin:0}
.render svg{width:100%;height:auto;padding:0}
.render figcaption{margin-top:var(--sp-4);font-family:var(--f-label);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-3)}
.render-ill text{font-family:var(--f-label);font-weight:700;font-size:12px;letter-spacing:.2em;fill:var(--orange);stroke:none}
.render-ill .w-l{fill:var(--ink-3)}
.render-ill .w-r{fill:var(--ink-2)}
.render-ill .w-f{fill:var(--ink-2)}
.render-ill .grid{stroke-opacity:.22}
.render-ill .b-top{fill:var(--ink-3)}
.render-ill .b-front{fill:var(--ink-2)}
.render-ill .b-side{fill:var(--ink)}
.render-ill .mirror{fill:var(--ink-3);stroke-opacity:.6}
.render-ill .glass{fill:var(--glow);fill-opacity:.25;stroke:var(--orange)}

@media (max-width:900px){
  .render{max-width:600px}
}
@media (max-width:640px){
  .shop-photos .photo:nth-child(2){margin-top:var(--sp-6)}
  .shop-photos .photo figcaption{letter-spacing:.1em}
  .kit-tiles .ill{height:96px}
}

/* three tiles at tablet width: the third spans the row instead of sitting alone */
@media (min-width:640.02px) and (max-width:900px){
  .tile-grid:not(.cols-2):not(.cols-4) > .tile:nth-child(3):last-child{grid-column:1 / -1}
}