.gallery-page{padding:5px 60px;background-color:#fafafa}.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}.filter-bar button{padding:8px 18px;border-radius:20px;border:1px solid #c0c4c5;background:#fff;cursor:pointer;color:#3f3939;transition:all .2s ease;font-size:.95rem}.filter-bar button.active{background:#1882c0;color:#fff;border-color:#1882c0}.filter-bar button:hover{background-color:#0056b3;color:#fff}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px;justify-content:center}@media (max-width:1024px){.card-grid{grid-template-columns:repeat(2,1fr)}}.project-card{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.1);transition:transform .3s ease;cursor:pointer;display:flex;flex-direction:column}.project-card:hover{transform:translateY(-4px)}.card-image{position:relative;width:100%;height:200px;overflow:hidden}.card-title-overlay{position:absolute;inset:0;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;text-align:center;transition:background .4s ease;padding:0 10px}.card-title-overlay h3{color:#fff;font-size:1.2rem;font-weight:600;margin:0;transition:transform .4s ease,text-shadow .4s ease}.project-card:hover .card-title-overlay{background:linear-gradient(rgba(0,0,0,.15),rgba(24,130,192,.45))}.project-card:hover .card-title-overlay h3{transform:scale(1.05);text-shadow:0 0 12px hsla(0,0%,100%,.9)}.card-info{padding:12px 16px 16px;background:#fff;text-align:center}.period-text{color:#333;margin:0;font-size:.9rem;font-weight:500}.tags-row{justify-content:space-between;margin-top:10px;font-size:.85rem}.modal-overlay,.tags-row{display:flex;align-items:center}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);justify-content:center;z-index:1000;animation:fadeIn .25s ease;overscroll-behavior:contain}.modal-content{background:#fff;border-radius:12px;padding:0;width:90%;max-width:720px;text-align:left;box-shadow:0 10px 25px rgba(0,0,0,.3);animation:scaleIn .25s ease;display:flex;flex-direction:column;max-height:85vh;overflow:hidden}.modal-header{padding:24px 24px 10px;border-bottom:none;flex-shrink:0}.modal-header h3{margin:0;font-size:1.3rem;font-weight:700}.modal-body{padding:0 24px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.modal-body::-webkit-scrollbar{display:none}.detail-table{width:100%;border-collapse:separate;border-spacing:0;margin-top:0;margin-bottom:20px;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}.detail-table th{background:#f9fafb;width:30%;text-align:left;border-right:1px solid #e0e0e0;font-weight:600;color:#4b5563}.detail-table td,.detail-table th{padding:12px 16px;border-bottom:1px solid #e0e0e0;vertical-align:top}.detail-table td{color:#1f2937;line-height:1.6}.detail-table tr:last-child td,.detail-table tr:last-child th{border-bottom:none}.modal-actions{padding:15px 24px 20px;border-top:1px solid #eee;text-align:right;flex-shrink:0;background:#fff}.close-btn{padding:8px 32px;background:#1882c0;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:background .2s;font-size:.95rem;font-weight:600}.close-btn:hover{background:#005a9e}.tag-list{display:flex;flex-wrap:wrap;gap:8px}.industry-tag{color:#666;background:#f5f5f5;padding:4px 8px;border-radius:4px}.category-badge{padding:4px 10px;border-radius:12px;color:#fff;font-weight:700;font-size:.75rem;letter-spacing:.5px}.category-badge.cloud{background-color:#0070f3}.category-badge.infrastructure{background-color:#10b981}.category-badge.workplace{background-color:#f59e0b}.category-badge.saas{background-color:#8b5cf6}.category-badge.other{background-color:#9ca3af}.tech-tag{display:inline-block;background:#eff6ff;color:#3b82f6;padding:4px 10px;border-radius:4px;font-size:.85rem;font-weight:500}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@media (max-width:640px){.gallery-page{padding:10px 16px}.filter-bar button{flex:1 1 calc(50% - 10px);text-align:center}.card-grid{grid-template-columns:1fr}.modal-content{width:95%;max-height:90vh}.modal-actions,.modal-body,.modal-header{padding-left:16px;padding-right:16px}.detail-table td,.detail-table th{display:block;width:100%}.detail-table th{background:transparent;border-right:none;border-bottom:none;padding-bottom:4px;padding-top:16px;color:#6b7280;font-size:.85rem}.detail-table td{padding-top:2px;border-bottom:1px solid #f0f0f0}}