/* hero: mirrors the homepage's hero treatment, no inline styles */
.cat-hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(15,11,7,.35) 0%, rgba(15,11,7,.35) 45%, rgba(15,11,7,.86) 100%);
}
.cat-hero-in {
    position: relative; z-index: 2;
    padding-top: calc(9rem + env(safe-area-inset-top, 0px));
    padding-bottom: clamp(3rem, 7vw, 5rem);
}
.cat-hero-title {
    font-size: clamp(2.6rem, 7vw, 5.2rem);
    line-height: 1.03;
    letter-spacing: -.015em;
    max-width: 20ch;
}

/* occasions: three-across version of the homepage's two-pillar grid */
.occasions { display: grid; gap: 1.6rem; }
@media (min-width: 820px) { .occasions { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }


.gallery-caption {
    margin-top: .75rem;
    font-family: var(--font-display);
    font-size: .92rem;
    color: var(--ink-soft);
    text-align: center;
}
/* occasions: light cards, replacing the homepage's dark .pillar for this section */
.occasions { display: grid; gap: 1.75rem; }
@media (min-width: 820px) { .occasions { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

.occasion-card {
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(32,27,20,.08);
    display: flex;
    flex-direction: column;
}
.occasion-photo { aspect-ratio: 4/3; }
@media (min-width: 1024px) { .occasion-photo { aspect-ratio: 4/5; } }

.occasion-body { padding: 1.75rem 1.5rem 2rem; }
@media (min-width: 1024px) { .occasion-body { padding: 2rem 1.75rem 2.25rem; } }

.occasion-chip {
    font-size: .82rem;
    padding: .35rem .75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
}
.gallery-card .ph { width: 18rem; height: 24rem; }
@media (min-width: 1024px) { .gallery-card .ph { width: 100%; height: 100%; aspect-ratio: 4/5; } }

.hero-photo {
    background-image: url('/assets/img/catering/catering-stol-dekoriran.jpg');
    background-size: cover;
    background-position: center;
}