/* reset & base */
* {margin: 0;padding: 0;box-sizing: border-box;}
body {background: #f1f6fc;font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;min-height: 100vh;display: flex;flex-direction: column;align-items: center;}

.page-header {width: 100%;margin-top: 80px;max-width: 1150px;margin-bottom: 0.8rem;}
.search-filter-bar {display: flex;flex-wrap: wrap;align-items: center;gap: 1rem;margin-top: 1rem;background: white;padding: 0.8rem 1.2rem;border-radius: 60px;box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);border: 1px solid #e2eaf3;}
.search-box {max-width: 480px;margin: 0 auto;flex: 1 1 240px;display: flex;align-items: center;gap: 0.5rem;margin-top: 1rem;background: #f5f8fd;padding: 0.3rem 0.8rem;border-radius: 10px;border: 1px solid #3a3b3d;transition: 0.2s;}
.search-box:focus-within {border-color: #6c8fc7;background: white;box-shadow: 0 0 0 3px rgba(60, 110, 180, 0.08);}
.search-box input {border: none;background: transparent;padding: 0.6rem 0.2rem;font-size: 0.9rem;width: 100%;outline: none;color: #122236;font-weight: 450;}
.search-box input::placeholder {color: #8fa0b6;font-weight: 400;}

.category-group {display: flex;flex-wrap: wrap;gap: 0.5rem;align-items: center;margin-left: auto;}
.category-btn {background: #eef3fc;border: 1px solid transparent;padding: 0.4rem 1rem;border-radius:60px;font-size: 0.75rem;font-weight: 500;color: #1f3b60;cursor: pointer;transition: 0.15s;white-space: nowrap;letter-spacing: .01em;}
.category-btn:hover {background: #dfe9fd;border-color: #b6ccf0;}
.category-btn.active {background: #1d3b6f;color: white;border-color: #1d3b6f;}
.category-btn.active:hover {background: #14305a;}

/*.clear-btn {background: transparent;border: 1px solid #d0dae8;padding: 0.4rem 0.8rem;border-radius: 60px;font-size: 0.7rem;color: #4a6382;cursor: pointer;transition: 0.15s;white-space: nowrap;}
.clear-btn:hover {background: #e9eef6;border-color: #b0c0d6;}
.result-count {font-size: 0.8rem;color: #4f6b8a;margin-left: 0.4rem;font-weight: 450;}*?

/* ----- responsive grid ----- */
.portfolio-grid {display: grid;gap: 1.5rem;width: 100%;max-width: 1150px;margin: 0.5rem auto 0;}
@media (min-width: 1150px) {.portfolio-grid { grid-template-columns: repeat(4, 1fr); }}
@media (min-width: 768px) and (max-width: 1024px) {.portfolio-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }}
@media (max-width: 600px) {.portfolio-grid { grid-template-columns: repeat(1, 1fr); gap: 1rem; }
  body { padding: 1.2rem 0.8rem; }
  .search-filter-bar { border-radius: 28px; padding: 0.8rem 1rem; flex-direction: column; align-items: stretch; }.category-group { margin-left: 0; justify-content: center; }}

/* ----- portfolio item ----- */
.portfolio-item {background: white;border-radius: 1.5rem;box-shadow: 0 8px 24px -8px rgba(0, 20, 40, 0.10);padding: 1rem 1rem 1.2rem;transition: transform 0.2s ease, box-shadow 0.2s, opacity 0.25s;display: flex;
  flex-direction: column;align-items: center;text-align: center;opacity: 1;}
.portfolio-item.hidden {display: none;}
.portfolio-item:hover {transform: translateY(-4px);box-shadow: 0 16px 36px -12px rgba(0, 20, 50, 0.18);}
.image-object-wrapper {position: relative;width: 100%;background: #dce3ed;border-radius: 1rem;overflow: hidden;margin-bottom: 0.65rem;cursor: pointer;box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  transition: box-shadow 0.2s;}
.image-object-wrapper:hover {box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);}
.image-object-wrapper img {display: block;width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}
.portfolio-item:hover .image-object-wrapper img {transform: scale(1.02);}

.item-title {font-weight: 600;font-family: 'Signika';font-size: 1.2rem;color: #0f1e33;margin-bottom: 13px;}
.link-btn {display: inline-flex;align-items: center;justify-content: center;gap: 1rem;background: #eef3fc;color: #1d3b6f;border: 1px solid transparent;padding: 0.3rem 0.8rem;border-radius: 10px;font-size: 0.9rem;
  font-weight: 500;transition: 0.15s;flex: 1 1 auto;min-width: 40px;text-decoration: none;}

/* ----- OVERLAY (gallery + description + prev/next + close) ----- */
.overlay {position: fixed;inset: 0;background: rgba(8, 18, 34, 0.7);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);display: none;justify-content: center;align-items: center;z-index: 9999;padding: 1.2rem;
  animation: fadeOverlay 0.25s ease;}
.overlay.show { display: flex; }
.overlay-card {background: #ffffff;max-width: 660px;width: 100%;border-radius: 2rem;padding: 1.6rem 1.6rem 1.8rem;box-shadow: 0 40px 80px rgba(0,0,0,0.5);position: relative;animation: scaleCard 0.2s ease;}
.close-overlay {position: absolute;top: 0.8rem;right: 1rem;background: #f0f3f8;border: none;width: 38px;height: 38px;border-radius: 40px;font-size: 1.3rem;cursor: pointer;color: #1f2a41;display: flex;align-items: center;
  justify-content: center;transition: 0.15s;z-index: 10;}
.close-overlay:hover {background: #e0e6f0;transform: rotate(90deg);}

.gallery-container {position: relative;width: 100%;aspect-ratio: 4 / 3;background: #e8edf5;border-radius: 1.2rem;overflow: hidden;margin: 0.3rem 0 0.9rem;}
.gallery-container img {width: 100%;height: 100%;object-fit: cover;display: block;transition: opacity 0.15s;}
.gallery-nav {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 0.5rem;pointer-events: none;}
.gallery-nav button {pointer-events: auto;background: rgba(255, 255, 255, 0.85);backdrop-filter: blur(4px);border: none;width: 34px;height: 34px;border-radius: 60px;font-size: 1.3rem;color: #152b44;cursor: pointer;
  transition: 0.15s;display: flex;align-items: center;justify-content: center;box-shadow: 0 4px 12px rgba(0,0,0,0.08);border: 1px solid rgba(255,255,255,0.3);}
.gallery-nav button:hover { background: white; transform: scale(1.04); }
.gallery-nav button:active { transform: scale(0.94); }

.description-area {text-align: left;margin-top: 0.2rem;}
.description-area p {color: #2f405b;line-height: 1.2;font-size: 0.9rem;}

@keyframes fadeOverlay {0% { opacity: 0; }100% { opacity: 1; }}
@keyframes scaleCard {0% { opacity: 0; transform: scale(0.93) translateY(10px); }100% { opacity: 1; transform: scale(1) translateY(0); }}
@media (max-width: 480px) {.overlay-card {padding: 1rem;} .gallery-nav button {width: 30px; height: 30px; font-size: 0.8rem;} .link-btn {font-size: 0.9rem;color: #B0372C;padding: 0.4rem 1.5rem;} .portfolio-item {padding: 0.7rem;}
.page-header {margin-top: 65px;}}