/* A bundle's own detail page (server/views/bundle.ejs) - a hero header in
   the same spirit as the home page's .whats-on-bundle card (same default
   gradient), but themeable per-bundle: js/bundle.js sets --bundle-accent
   from the bundle's own themeColor (server/data/bundleStore.js) when one is
   set, or swaps in a background image entirely - both genuinely optional,
   an unthemed bundle just gets the same default gradient .whats-on-bundle
   already uses everywhere else. */

.bundle-hero {
    position: relative;
    padding: 24px 20px 28px 20px;
    color: white;
    background: var(--t-bg, linear-gradient(135deg, var(--bundle-accent, var(--header-blue)) 0%, #4facfe 100%));
    background-size: cover;
    background-position: center;
}

.bundle-hero.has-image {
    /* An image replaces the gradient outright (js/bundle.js sets
       background-image inline) - a translucent scrim keeps the name/badge
       readable over an arbitrary photo without needing to know its colors
       in advance. */
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.55));
}

.back-link.on-hero {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 14px;
    display: inline-block;
}

.bundle-hero-name {
    color: var(--t-heading, #fff);
    font-size: calc(var(--t-fs-heading, 1.4rem) + var(--t-fs-heading-inc, 0rem));
    font-weight: 800;
    margin-bottom: 8px;
}

.bundle-hero-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.bundle-hero-desc {
    color: var(--t-text, rgba(255, 255, 255, 0.9));
    font-size: calc(var(--t-fs-body, 0.9rem) + var(--t-fs-body-inc, 0rem));
    line-height: 1.4;
}

.bundle-content {
    padding: 20px;
}

.bundle-venue-desc {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 4px;
}

/* Inline editing (js/inlineEdit.js) on the hero - css/listing.css has the
   shared .inline-edit-* rules; these just adapt them to sit on the hero's
   own colored/photo background instead of a plain white card, and give
   themeColor (which has no natural text representation to attach a pencil
   to) a small clickable swatch of its own. */
.bundle-hero-theme-swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.85);
    vertical-align: middle;
    margin-left: 10px;
    cursor: pointer;
}
.bundle-hero .inline-edit-pencil,
.bundle-hero .inline-edit-status { color: rgba(255,255,255,0.85); }
.bundle-hero .inline-edit-form {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.3);
}
#bundle-missing-fields { padding-left: 0; padding-right: 0; }

/* The bundle's own location (js/bundle.js's renderBundleLocation) - reuses
   css/listing.css's .detail-map/.detail-directions-btn (already loaded on
   this page) rather than redefining them. */
.bundle-location {
    margin-bottom: 20px;
}
.bundle-address {
    font-size: 14px;
    color: var(--text-dark, #223);
    margin: 0 0 10px 0;
}
.bundle-schedule-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark, #223);
    margin: 10px 0 0 0;
}

/* Subcategory filter chips above the bundle's What's On list */
.bundle-cat-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 14px;
}
.bundle-cat-chip {
    border: 1px solid #dde2e7;
    background: var(--card-white, #fff);
    color: var(--text-dark);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.bundle-cat-chip.active {
    background: var(--primary-blue, #1e6091);
    border-color: var(--primary-blue, #1e6091);
    color: #fff;
}