/* Boka Woo Elementor — style.css
   Responsive, modern grid + hover effects
*/
.boka-wee-grid {
  display: grid;
  gap: 18px;
  margin: 10px 0;
}

/* columns */
.boka-wee-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.boka-wee-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.boka-wee-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.boka-wee-item {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 25px rgba(15,15,15,0.06);
  transition: transform .35s cubic-bezier(.2,.9,.3,1), box-shadow .35s;
  will-change: transform;
}

.boka-wee-item:hover {
  transform: translateY(-8px) rotate(-0.3deg);
  box-shadow: 0 20px 40px rgba(15,15,15,0.09);
}

.boka-wee-media {
  position: relative;
  height: 240px;
  overflow: hidden;
}

.boka-wee-media-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform .8s cubic-bezier(.2,.9,.3,1);
  transform-origin: center;
}

.boka-wee-item:hover .boka-wee-media-inner {
  transform: scale(1.07) rotate(-1deg);
  filter: brightness(0.95) saturate(1.05);
}

.boka-wee-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s;
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.35));
}

.boka-wee-item:hover .boka-wee-overlay {
  opacity: 1;
  pointer-events: auto;
}

.boka-btn {
  pointer-events: auto;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  border: none;
  cursor: pointer;
  transform: translateY(6px);
  transition: transform .35s, box-shadow .35s;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.boka-wee-item:hover .boka-btn {
  transform: translateY(0);
}

/* meta */
.boka-wee-meta {
  padding: 12px 14px 18px;
}
.boka-wee-title {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
}
.boka-wee-price {
  font-size: 14px;
  color: #e53935;
  font-weight: 700;
}

/* responsive */
@media (max-width: 1024px) {
  .boka-wee-grid.cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .boka-wee-grid.cols-4,
  .boka-wee-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .boka-wee-grid.cols-2 { grid-template-columns: repeat(1, 1fr); }
  .boka-wee-media { height: 200px; }
}
@media (max-width: 420px) {
  .boka-wee-media { height: 170px; }
  .boka-wee-title { font-size: 14px; }
}