/* Category tiles V4 — pictographic square navigation
   Purpose: instantly recognizable services for visitors regardless of reading ability. */
#categoriesGrid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
#categoriesGrid .cat{
  position:relative;
  aspect-ratio:1 / 1;
  min-height:0;
  width:100%;
  padding:18px 11px 15px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:8px;
  border:1px solid #dce7df;
  border-radius:19px;
  background:linear-gradient(148deg,#ffffff 16%,#f7fbf6 100%);
  box-shadow:0 3px 11px rgba(15,71,52,.035);
  overflow:hidden;
  isolation:isolate;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
#categoriesGrid .cat::before{
  content:"";
  position:absolute;
  width:115%;
  height:115%;
  inset:auto -67% -72% auto;
  border-radius:50%;
  background:radial-gradient(circle,rgba(198,231,214,.7),rgba(198,231,214,0) 70%);
  pointer-events:none;
  opacity:.45;
  transition:opacity .22s ease,transform .22s ease;
}
#categoriesGrid .cat::after{
  content:"";
  position:absolute;
  top:11px;
  inset-inline-end:12px;
  width:7px;
  height:7px;
  background:#d4b47e;
  border-radius:50%;
  opacity:.65;
}
#categoriesGrid .catIcon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:76px;
  height:76px;
  border-radius:22px;
  background:#e9f5ed;
  border:1px solid #d2e8d9;
  color:#0b6858;
  transition:transform .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease;
}
#categoriesGrid .catIcon svg{
  display:block;
  height:53px;
  width:53px;
  overflow:visible;
}
#categoriesGrid .cat strong{
  flex:0 0 auto;
  margin:0;
  text-align:center;
  font-size:clamp(.84rem,1.05vw,1.01rem);
  line-height:1.52;
  font-weight:700;
  color:#11574d;
  letter-spacing:0;
  max-width:100%;
  min-height:2.95em;
  display:flex;
  align-items:center;
  justify-content:center;
  text-wrap:balance;
}
#categoriesGrid .cat .count{
  flex:0 0 auto;
  margin:0;
  font-size:.71rem;
  line-height:1.4;
  color:#648076;
  text-align:center;
}
#categoriesGrid .cat[data-category="stays"] .catIcon,
#categoriesGrid .cat[data-category="finance"] .catIcon,
#categoriesGrid .cat[data-category="personal-services"] .catIcon{
  background:#fff2de;
  border-color:#f1dfbe;
  color:#97692f;
}
#categoriesGrid .cat[data-category="transport"] .catIcon,
#categoriesGrid .cat[data-category="telecom"] .catIcon,
#categoriesGrid .cat[data-category="health"] .catIcon{
  background:#e8f3f4;
  border-color:#d2e5e7;
  color:#16717a;
}
#categoriesGrid .cat:is(:hover,:focus-visible){
  transform:translateY(-6px);
  box-shadow:0 17px 32px rgba(15,77,57,.15);
  border-color:#b9d6c4;
  background:#ffffff;
}
#categoriesGrid .cat:is(:hover,:focus-visible)::before{opacity:.9;transform:scale(1.15)}
#categoriesGrid .cat:is(:hover,:focus-visible) .catIcon{
  background:#dcefe4;
  color:#0a5448;
  transform:translateY(-3px) scale(1.10);
  box-shadow:0 7px 15px rgba(20,81,53,.1);
}
#categoriesGrid .cat:is(:hover,:focus-visible) strong{color:#073f36}
#categoriesGrid .cat:active{transform:translateY(-1px) scale(.98)}
#categoriesGrid .cat[data-category="stays"]:is(:hover,:focus-visible) .catIcon,
#categoriesGrid .cat[data-category="finance"]:is(:hover,:focus-visible) .catIcon,
#categoriesGrid .cat[data-category="personal-services"]:is(:hover,:focus-visible) .catIcon{
  background:#ffe9c5;color:#825620
}
@media(max-width:1250px){
  #categoriesGrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}
  #categoriesGrid .cat{padding:15px 9px}
}
@media(max-width:1020px){
  #categoriesGrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  #categoriesGrid .catIcon{width:69px;height:69px;border-radius:20px}
  #categoriesGrid .catIcon svg{width:49px;height:49px}
}
@media(max-width:760px){
  #categoriesGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
  #categoriesGrid .cat{min-height:0;padding:12px 9px;gap:7px}
  #categoriesGrid .catIcon{width:62px;height:62px;border-radius:17px}
  #categoriesGrid .catIcon svg{width:44px;height:44px}
  #categoriesGrid .cat strong{font-size:.84rem;line-height:1.45}
  #categoriesGrid .cat .count{font-size:.64rem}
}
@media(max-width:530px){
  #categoriesGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  #categoriesGrid .cat{padding:12px 8px;gap:6px;border-radius:16px}
  #categoriesGrid .catIcon{width:60px;height:60px;border-radius:16px}
  #categoriesGrid .catIcon svg{width:43px;height:43px}
  #categoriesGrid .cat strong{font-size:clamp(.78rem,3.4vw,.92rem)}
  #categoriesGrid .cat .count{font-size:.67rem}
}
@media(prefers-reduced-motion:reduce){
  #categoriesGrid .cat,#categoriesGrid .catIcon,#categoriesGrid .cat::before{
    transition:none!important
  }
  #categoriesGrid .cat:hover,#categoriesGrid .cat:focus-visible{transform:none!important}
  #categoriesGrid .cat:is(:hover,:focus-visible) .catIcon{transform:none!important}
}

/* Multilingual category titles: allow non-Latin scripts and longer wording without clipping. */
#categoriesGrid .cat strong{overflow-wrap:anywhere;word-break:normal;hyphens:auto;line-height:1.38;font-size:clamp(.78rem,1.02vw,.97rem);min-height:0;max-width:100%}
@media(max-width:760px){#categoriesGrid .cat strong{font-size:.8rem;line-height:1.35}}
@media(max-width:530px){#categoriesGrid .cat strong{font-size:clamp(.76rem,3.3vw,.9rem);line-height:1.35}}