/* ========== EXTRA CSS: hover efekt (project-item) + modal tweaks ========== */

/* 1) hover outline + icon (prémiový, subtilní) */
.project-item { position: relative; overflow: hidden; }
.project-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255,107,107,0.0);
  border-radius: 12px;
  transform: scale(1.06);
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
  pointer-events: none;
  z-index: 5;
}
.project-item:hover::after,
.project-item:focus-within::after { border-color: rgba(255,107,107,0.95); transform: scale(1); box-shadow: 0 10px 40px rgba(107,19,19,0.15); }

/* touch icon in center bottom-right */
.project-item .hover-icon {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 16px;
  opacity: 0;
  transform: translateY(6px) scale(.92);
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.9,.2,1);
  z-index: 10;
  /* mask icon (fallback will show white text) */
  mask: url('assets/touch.svg') center / 60% no-repeat;
  -webkit-mask: url('assets/touch.svg') center / 60% no-repeat;
}
.project-item:hover .hover-icon,
.project-item:focus-within .hover-icon { opacity: 1; transform: translateY(0) scale(1); }

/* make sure images don't cover overlay */
.project-item img { display:block; width:100%; height:auto; z-index: 1; position: relative; }

/* modal tweaks */
#projectModal { transition: opacity .22s ease; }
#projectModal.hidden { opacity: 0; pointer-events: none; }
#projectModal .modal-inner { max-height: 86vh; overflow:auto; background: #0b0b0c; color: #fff; border-radius: 12px; padding: 20px; }
#projectModal img { max-width:100%; display:block; border-radius:8px; margin-bottom:10px; }

/* small responsive adjustments */
@media (max-width:720px){
  .project-item::after { inset: 2px; border-radius:10px; }
  .project-item .hover-icon { bottom: 10px; right: 10px; width:44px;height:44px; }
}