.category-grid-filter {
margin-bottom: 30px;
}
.filter-section {
margin-bottom: 20px;
}
.filter-section h4 {
margin-bottom: 15px;
font-size: 18px;
font-weight: 600;
color: #333;
}
.category-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.category-btn {
display: inline-block;
padding: 8px 16px; background-color: transparent; color: #495057;
text-decoration: none;
border: 1px solid #dee2e6; border-radius: 25px;
font-weight: 500;
font-size: 14px; transition: all 0.3s ease;
white-space: nowrap;
}
.category-btn:hover {
background-color: transparent; border-color: #adb5bd;
color: #495057;
text-decoration: none;
}
.category-btn.active {
background-color: transparent; border-color: #dc3545; color: #dc3545; }
.category-btn.active:hover {
background-color: transparent; border-color: #c82333; color: #c82333; } .grf-categorygrid-list {
margin-top: 30px;
} .grf-categorygrid-list .azienda-grid,
.azienda-grid {
display: grid; grid-template-columns: repeat(1, 1fr);
gap: 20px;
margin-top: 20px;
} @media (min-width: 768px) {
.grf-categorygrid-list .azienda-grid,
.azienda-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
} @media (min-width: 1024px) {
.grf-categorygrid-list .azienda-grid,
.azienda-grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
} @media (min-width: 1366px) {
.grf-categorygrid-list .azienda-grid,
.azienda-grid {
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
} .grf-categorygrid-item {
position: relative;
display: block;
width: 100%;
aspect-ratio: auto;
min-height: 320px; border-radius: 0; overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: none;
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
text-decoration: none;
background-size: cover;
} .grf-categorygrid-item::after {
content: '';
position: absolute;
top: -10%;
left: -10%;
right: -10%;
bottom: -10%;
background-size: cover;
background-position: center;
background-repeat: no-repeat; background-image: none;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 0;
}
.grf-categorygrid-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #ffffff4a;
z-index: 1;
}
.grf-categorygrid-item > * {
position: relative;
z-index: 2;
}
.grf-categorygrid-item:hover {
color: white;
text-decoration: none;
}
.grf-categorygrid-item:hover::after {
transform: scale(1.1);
} .grf-categorygrid-item .azienda-thumb {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.grf-categorygrid-item .azienda-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
} .grf-categorygrid-item.grf-no-bg {
background-color: #f8f9fa;
color: #333;
text-shadow: none;
}
.grf-categorygrid-item.grf-no-bg::before {
display: none;
} .grf-categorygrid-logo-wrap,
.grf-categorygrid-item .grf-categorygrid-logo-wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 100%; max-width: 210px; aspect-ratio: 1 / 1; background: rgba(255,255,255,0);
border-radius: 8px;
overflow: hidden;
padding: 0;
box-sizing: border-box;
} .grf-categorygrid-logo-wrap img,
.grf-categorygrid-item .grf-categorygrid-logo-wrap img {
width: auto;
height: auto;
display: block;
object-fit: contain;
max-width: 210px; max-height: 210px;
}
@media (max-width: 768px) {
.category-buttons {
justify-content: center;
}
.category-btn {
padding: 8px 16px;
font-size: 14px;
} .grf-categorygrid-list .azienda-grid,
.azienda-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px;
}
.grf-categorygrid-item {
min-height: 300px;
}
.grf-categorygrid-logo-wrap {
width: 60%;
max-width: none;
padding: 5%;
}
} @media (max-width: 480px) {
.grf-categorygrid-list .azienda-grid,
.azienda-grid {
grid-template-columns: repeat(1, 1fr) !important;
gap: 10px !important;
}
} @media (min-width: 481px) and (max-width: 768px) {
.grf-categorygrid-list .azienda-grid,
.azienda-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px;
}
} @media (min-width: 769px) and (max-width: 1024px) {
.grf-categorygrid-list .azienda-grid,
.azienda-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px;
}
} @media (min-width: 1025px) {
.grf-categorygrid-list .azienda-grid,
.azienda-grid {
grid-template-columns: repeat(4, 1fr);
}
} .grf-grid-zoom-btn{
position:absolute;
top:8px;
right:8px;
z-index:999;
box-sizing:border-box;
background:rgba(0,0,0,0.45);
border-radius:50%;
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
border:none;
cursor:pointer;
padding:0;
}
.grf-grid-zoom-btn svg{width:20px;height:20px;display:block}
.grf-grid-zoom-btn:focus{outline:2px solid rgba(255,255,255,0.25);outline-offset:2px} .grf-zoom-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.6);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
padding:20px;
box-sizing:border-box;
overflow:auto;
} .grf-zoom-overlay[hidden]{
display:none !important;
}
.grf-zoom-modal{
background:#fff;
width:100%;
border-radius:8px;
max-height:90vh;
overflow:auto;
padding:20px;
box-sizing:border-box;
position:relative;
} .grf-zoom-modal-wrap{
position: relative; display: flex; flex-direction: column;
align-items: center; justify-content: center; overflow: visible; box-sizing: border-box;
max-width:800px;
} .grf-zoom-close{
color: #fff; position: absolute; top: -45px; right: 0; border:none;
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
cursor:pointer;
padding:6px;
z-index:10001;
} .grf-zoom-close svg{width:20px;height:20px;display:block} .grf-zoom-template{
}
.grf-zoom-link{
display:table;
margin:10px auto 10px auto;
padding:10px 14px;
background: #018418;
color:#fff;
border-radius:4px;
text-decoration:none;
transition: all .3s;
}
.grf-zoom-link:hover {
color:#fff;
background: #009246;
} .grf-zoom-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;min-height:140px;box-sizing:border-box}
.grf-spinner{width:48px;height:48px;border:4px solid rgba(0,0,0,0.08);border-top-color: #e54bca;border-radius:50%;animation:grf-spin 1s linear infinite}
@keyframes grf-spin{to{transform:rotate(360deg)}}
.grf-zoom-loading-text{color:#222;font-size:15px;line-height:1.2;text-align:center} .grf-zoom-error{background:#fff0f0;border:1px solid #f1c2c2;color:#8a1f1f;padding:14px;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,0.04);}
.grf-zoom-error strong{display:block;margin-bottom:6px}
.grf-zoom-error-msg{font-size:14px;color:inherit;opacity:0.95} @media (max-width: 480px) {
.grf-categorygrid-list .azienda-grid {
grid-template-columns: repeat(1, 1fr) !important;
gap: 10px !important;
}
}