/* tiles.css: colourful pressable tiles, square cards, helper tiles, honest "illustration" labels.
   Loaded after service-pages.css on every page. Colours come from the :root tokens in site.css. */
:root{
  --c-navy:#1e3050; --c-blue:#2c4a7c; --c-copper:#8f5a35; --c-green:#1d5a36; --c-brown:#6b4226;
  --c-gold:#e6b04f; --c-sky:#dbe4f5; --c-sand:#efe3d4;
}

/* ---------- tiles ---------- */
.tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));margin-top:32px}
.tile{position:relative;display:flex;flex-direction:column;gap:6px;min-height:150px;padding:22px;border-radius:var(--r-md);text-decoration:none;color:#fff;background:var(--c-navy);overflow:hidden;transition:transform var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease)}
.tile h3{color:inherit;font-size:1.2rem;line-height:1.3}
.tile p{font-size:.95rem;line-height:1.5;overflow-wrap:anywhere}
.tile .ico{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.18);display:grid;place-items:center;margin-bottom:6px}
.tile .ico svg{width:26px;height:26px;stroke-width:1.6}
.tile .num{font-family:var(--font-head);font-size:2.6rem;line-height:1}
.tile .go{margin-top:auto;padding-top:8px;font-weight:600;font-size:.95rem}
a.tile{cursor:pointer}
a.tile:hover{transform:translateY(-4px);box-shadow:0 16px 30px -14px rgba(30,48,80,.5)}
a.tile:active{transform:scale(.98);transition-duration:var(--t-press)}
a.tile:focus-visible,.sq-card:focus-visible,.kw-row a:focus-visible,.tag a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.t-navy{background:var(--c-navy)} .t-blue{background:var(--c-blue)} .t-copper{background:var(--c-copper)}
.t-green{background:var(--c-green)} .t-brown{background:var(--c-brown)}
.t-gold{background:var(--c-gold);color:#1a2942} .t-sky{background:var(--c-sky);color:#1a2942} .t-sand{background:var(--c-sand);color:#3b2314}
.t-gold .ico,.t-sky .ico,.t-sand .ico{background:rgba(30,48,80,.12)}
.tiles.big{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.tiles.big .tile{min-height:190px}
@media(prefers-reduced-motion:reduce){a.tile:hover,a.tile:active{transform:none}}

/* ---------- square image cards (blog, services) ---------- */
.sq-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);margin-top:32px}
@media(min-width:800px){.sq-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:800px){.sq-grid.four{grid-template-columns:repeat(4,1fr)}}
.sq-card{position:relative;display:block;aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;color:#fff;text-decoration:none;background:var(--c-navy);isolation:isolate;cursor:pointer}
.sq-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease);z-index:0}
.sq-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(16,33,58,.94) 0%,rgba(16,33,58,.5) 52%,rgba(16,33,58,.05) 100%)}
.sq-card::before{content:"איור להמחשה";position:absolute;top:10px;inset-inline-start:10px;z-index:3;font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);color:#3b2314}
.sq-card .sq-body{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:16px;display:grid;gap:8px}
.sq-card .cat{justify-self:start;font-size:.75rem;font-weight:700;padding:3px 12px;border-radius:var(--r-pill);background:var(--cat,var(--c-blue));color:#fff}
.sq-card h3{color:#fff;font-size:1.05rem;line-height:1.35}
.sq-card .when{font-size:.8rem;opacity:.85}
.sq-card:hover img{transform:scale(1.05)}
.sq-card:hover{box-shadow:0 16px 30px -14px rgba(30,48,80,.6)}
.cat-paint{--cat:var(--c-blue)} .cat-handy{--cat:var(--c-copper)} .cat-furn{--cat:var(--c-green)} .cat-curt{--cat:var(--c-brown)}
@media(prefers-reduced-motion:reduce){.sq-card:hover img{transform:none}}
.sec-more{display:flex;justify-content:center;margin-top:28px}

/* ---------- honest labels: every illustration says so ---------- */
#hero::before{content:"איור להמחשה";position:absolute;z-index:4;bottom:14px;inset-inline-end:14px;font-size:.75rem;font-weight:600;padding:4px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);color:#3b2314}
.svc-card,.photo-card{position:relative}
.svc-card::before,.photo-card::before{content:"איור להמחשה";position:absolute;top:10px;inset-inline-start:10px;z-index:5;font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);color:#3b2314}

/* ---------- helper ("choose what you need"): big colour squares ---------- */
#helper .chips{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
#helper .chip{position:relative;flex-direction:column;justify-content:center;text-align:center;gap:10px;min-height:132px;padding:16px 12px;border:0;border-radius:var(--r-md);color:#fff;background:var(--c-blue);box-shadow:0 8px 18px -12px rgba(30,48,80,.6)}
#helper .chip:nth-child(5n+1){background:var(--c-blue)}
#helper .chip:nth-child(5n+2){background:var(--c-copper)}
#helper .chip:nth-child(5n+3){background:var(--c-green)}
#helper .chip:nth-child(5n+4){background:var(--c-navy)}
#helper .chip:nth-child(5n+5){background:var(--c-brown)}
#helper .chip svg{width:34px;height:34px}
#helper .chip .tick{position:absolute;top:10px;inset-inline-end:10px;margin:0;opacity:.6;background:transparent;border-color:#fff;color:#fff}
#helper .chip[aria-pressed="true"]{outline:4px solid var(--c-gold);outline-offset:2px;transform:translateY(-2px)}
#helper .chip[aria-pressed="true"] .tick{opacity:1;background:var(--c-gold);color:#1a2942;border-color:var(--c-gold)}
#helper .chip:hover{transform:translateY(-3px)}
#helper .field input,#helper .field textarea{min-height:52px}
.helper-steps{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.helper-steps span{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--border);font-weight:600;color:var(--foreground);font-size:.95rem}
.helper-steps b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c-gold);color:#1a2942;font-size:.9rem}

/* ---------- colourful versions of older plain blocks ---------- */
.facts{background:transparent;border:0;padding:22px 0 0}
.facts ul{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;padding-inline:max(20px,env(safe-area-inset-right))}
.facts li{border-radius:var(--r-md);color:#fff;padding:16px 18px}
.facts li:nth-child(4n+1){background:var(--c-blue)} .facts li:nth-child(4n+2){background:var(--c-copper)}
.facts li:nth-child(4n+3){background:var(--c-green)} .facts li:nth-child(4n+4){background:var(--c-navy)}
.facts svg{color:#fff}
.svc-grid .svc-card{border-top:6px solid var(--c-blue)}
.svc-grid .svc-card:nth-child(4n+2){border-top-color:var(--c-copper)}
.svc-grid .svc-card:nth-child(4n+3){border-top-color:var(--c-green)}
.svc-grid .svc-card:nth-child(4n+4){border-top-color:var(--c-brown)}
.svc-card h3{font-size:1.45rem}
.svc-card .more{display:inline-flex;align-items:center;min-height:44px}
.tag{padding:0}
.tag a{display:flex;align-items:center;min-height:44px;padding:0 16px;color:inherit;text-decoration:none;border-radius:inherit}
.tag a:hover{filter:brightness(1.15)}
.compare .panel{border-radius:var(--r-md)}
.panel.yes{background:var(--c-green);color:#fff}.panel.yes h3,.panel.yes li svg{color:#fff}
.panel.no{background:var(--c-copper);color:#fff}.panel.no h3,.panel.no li svg{color:#fff}
.hours-list{max-width:none;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.hours-list li{border:0;color:#fff}
.hours-list li:nth-child(4n+1){background:var(--c-blue)}.hours-list li:nth-child(4n+2){background:var(--c-copper)}
.hours-list li:nth-child(4n+3){background:var(--c-green)}.hours-list li:nth-child(4n+4){background:var(--c-navy)}
.hours-list svg{color:#fff;width:28px;height:28px}
.hours-list a{color:#fff}
.band{background:var(--c-navy);color:#dbe4f5;border-radius:var(--r-lg);padding:32px;display:grid;gap:14px;justify-items:start;margin-top:40px}
.band h2,.band h3{color:#fff}
.band .cta-row{justify-content:flex-start;margin-top:6px}

/* ---------- keyword links row (footer of every page) ---------- */
.kw-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:28px}
.kw-row .kw-title{width:100%;text-align:center;font-size:.85rem;color:#c9d6ee}
.kw-row a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;text-decoration:none;font-size:.9rem;transition:background var(--t-hover) var(--ease),color var(--t-hover) var(--ease)}
.kw-row a:hover{background:#fff;color:var(--primary)}

/* ---------- review form ---------- */
.rev-form{margin-top:32px;max-width:620px;padding:28px;border-radius:var(--r-lg);background:var(--c-sky);display:grid;gap:4px}
.rev-form h2{font-size:1.5rem}
.stars-pick{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.star{width:56px;height:56px;border-radius:var(--r-md);border:2px solid #fff;background:#fff;color:#b8bfcc;font-size:1.9rem;line-height:1;cursor:pointer;transition:background var(--t-hover) var(--ease),color var(--t-hover) var(--ease),transform var(--t-press) var(--ease)}
.star[aria-pressed="true"]{background:var(--c-gold);color:#1a2942;border-color:var(--c-gold)}
.star:active{transform:scale(.94)}
.star:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.rev-form .cta-row{justify-content:flex-start}
.rev-note{font-size:.85rem;margin-top:10px}

/* ---------- blog cards on the blog page ---------- */
.post-meta .cat-chip{display:inline-block;padding:2px 12px;border-radius:var(--r-pill);background:var(--cat,var(--c-blue));color:#fff;font-weight:600;font-size:.8rem}