/* ==========================================================================
   SITE-WIDE PAGE PADDING & ON-PHOTO LABEL COLORS
   ========================================================================== */

:root {
    --media-event-title: #FAF6EF;
    --media-event-category: #E5CEAD;
    --media-event-meta: rgba(250, 246, 239, 0.88);
    --media-event-shadow: 0 1px 3px rgba(20, 15, 12, 0.45), 0 4px 20px rgba(20, 15, 12, 0.35);
}

/* Comfortable horizontal inset — slightly more on the left for reading rhythm */
.site-page .container,
.site-page .navbar-container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1.5rem, 5.5vw, 4.5rem);
    padding-right: clamp(1.25rem, 4.5vw, 3.75rem);
}

@media (min-width: 768px) {
    .site-page .container,
    .site-page .navbar-container {
        padding-left: clamp(2.25rem, 5.5vw, 4rem);
        padding-right: clamp(2rem, 5vw, 3.5rem);
    }
}

@media (min-width: 1024px) {
    .site-page .container,
    .site-page .navbar-container {
        padding-left: clamp(2.75rem, 6vw, 4.75rem);
        padding-right: clamp(2.5rem, 5.5vw, 4.25rem);
    }
}

@media (min-width: 1400px) {
    .site-page .container,
    .site-page .navbar-container {
        padding-left: clamp(3.25rem, 5vw, 5.25rem);
        padding-right: clamp(3rem, 4.5vw, 4.75rem);
    }
}

@media (max-width: 767px) {
    .site-page .container,
    .site-page .navbar-container {
        padding-left: clamp(1.35rem, 6vw, 1.85rem);
        padding-right: clamp(1.15rem, 5vw, 1.5rem);
    }
}

/* Event names & categories on photos (home stories, films) */
.story-card__headline,
.film-piece .film-title,
.film-spotlight__title {
    color: var(--media-event-title);
    text-shadow: var(--media-event-shadow);
}

.story-card__category,
.film-piece .film-category,
.film-spotlight__badge {
    color: var(--media-event-category);
    text-shadow: 0 1px 12px rgba(20, 15, 12, 0.4);
}

.story-card__location,
.story-card__tag,
.film-spotlight__desc {
    color: var(--media-event-meta);
}

.film-spotlight__title .italic {
    color: var(--media-event-title);
}

.film-spotlight__badge {
    background: rgba(20, 15, 12, 0.45);
}