/* ==========================================================
   OMEGAPIX COMPONENTS
   Shared reusable components used across service pages
========================================================== */

/* ==========================================================
   EVENT GRID
========================================================== */

.ox-event-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:40px;
}

.ox-event-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    transition:.3s ease;
}

.ox-event-card:hover{
    transform:translateY(-8px);
}

.ox-event-card img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;
}

.ox-event-card h3{
    padding:20px;
    margin:0;
}

/* ==========================================================
   GALLERY GRID
========================================================== */

.ox-gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:40px;
}

.ox-gallery-grid img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:24px;
    display:block;
}

/* ==========================================================
   PACKAGE GRID
========================================================== */

.ox-package-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:40px;
}

.ox-package-card{
    background:white;
    border-radius:24px;
    padding:40px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.ox-package-card.featured{
    border:2px solid var(--ox-coral);
}

/* ==========================================================
   CTA WRAPPER
========================================================== */

.ox-cta{
    text-align:center;
    max-width:900px;
    margin:0 auto;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 992px){

    .ox-event-grid,
    .ox-gallery-grid,
    .ox-package-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width: 768px){

    .ox-event-grid,
    .ox-gallery-grid,
    .ox-package-grid{
        grid-template-columns:1fr;
    }

}