/*
 * Public Virtual Trips (Phase 8C-2). The site theme is dark (body text is white) and its .card does NOT set a text
 * colour, so every light panel below sets both background AND colour explicitly instead of relying on Bootstrap
 * component defaults. Page-level text sits on the dark background; content panels are white with dark text.
 */
.vt-public { color: #fff; padding-bottom: 2rem; }
.vt-public a { color: #9ec5fe; }
.vt-public a:hover { color: #cfe2ff; }
.vt-public :focus-visible { outline: 3px solid #ffc107; outline-offset: 2px; }

.vt-breadcrumb { font-size: .9rem; color: #ced4da; }
.vt-title { font-weight: 700; margin-bottom: .5rem; overflow-wrap: anywhere; }
.vt-summary { white-space: pre-line; max-width: 62rem; font-size: 1.1rem; overflow-wrap: anywhere; }
.vt-empty { padding: 1.25rem; border: 1px dashed #6c757d; border-radius: .5rem; color: #ced4da; }
.vt-h2 { font-size: 1.5rem; margin: 1.5rem 0 .75rem; }

/* light panels: explicit background + colour */
.vt-panel, .vt-stop, .vt-trip-card { background: #fff; color: #212529; border-radius: .5rem; }
.vt-panel a, .vt-stop a, .vt-trip-card a { color: #0a58ca; }
.vt-panel a:hover, .vt-stop a:hover, .vt-trip-card a:hover { color: #084298; }
.vt-panel :focus-visible, .vt-stop :focus-visible, .vt-trip-card :focus-visible { outline-color: #0d6efd; }

/* list */
.vt-trip-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; padding: 0; margin: 1.5rem 0; list-style: none; }
.vt-trip-card { overflow: hidden; display: flex; flex-direction: column; }
.vt-trip-cover-link { display: block; }
.vt-trip-cover { display: block; width: 100%; height: 190px; object-fit: cover; background: #e9ecef; }
.vt-trip-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.vt-trip-title { font-size: 1.25rem; margin: 0; overflow-wrap: anywhere; }
.vt-trip-summary { margin: 0; color: #343a40; overflow-wrap: anywhere; }
.vt-trip-meta { margin: auto 0 0; font-size: .85rem; color: #495057; }

/* detail */
.vt-cover { margin: 1rem 0; }
.vt-cover img { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: .5rem; background: #e9ecef; }
.vt-daylist { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1rem; list-style: none; }
.vt-daylist a { display: inline-block; padding: .25rem .65rem; border: 1px solid #6c757d; border-radius: 2rem; text-decoration: none; font-size: .9rem; }

.vt-map { height: 420px; width: 100%; border-radius: .5rem; border: 1px solid #495057; background: #e9ecef; }
.vt-map-fallback { padding: 1rem; border: 1px dashed #6c757d; border-radius: .5rem; color: #ced4da; }
.vt-marker { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
             background: #dc3545; color: #fff; border: 2px solid #fff; font-weight: 700; font-size: .8rem;
             box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.vt-public .leaflet-popup-content a { color: #0a58ca; }
.vt-public .leaflet-popup-content { color: #212529; margin: .6rem .9rem; }
.vt-popup-image { display: block; width: 160px; max-width: 100%; height: auto; margin-top: .4rem; border-radius: .25rem; }

.vt-stop { padding: 1.25rem; margin-bottom: 1.5rem; scroll-margin-top: 1rem; }
.vt-stop-day { margin: 0; font-size: .85rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #b02a37; }
.vt-stop-name { margin: 0 0 .25rem; font-size: 1.6rem; overflow-wrap: anywhere; }
.vt-ja { font-weight: 400; color: #495057; margin-left: .35rem; }
.vt-stop-meta { margin: 0 0 .75rem; font-size: .9rem; color: #495057; }
.vt-story { font-style: italic; color: #343a40; }
.vt-stop-image { margin: 0 0 1rem; }
.vt-stop-image img { display: block; width: 100%; max-height: 520px; object-fit: contain; background: #e9ecef; border-radius: .4rem; }
.vt-caption { white-space: pre-line; overflow-wrap: anywhere; margin-bottom: 1rem; }
.vt-engagement { padding: .75rem 1rem; margin-bottom: 1rem; background: #f1f3f5; border-radius: .4rem; }
.vt-question { font-weight: 700; margin: 0 0 .35rem; overflow-wrap: anywhere; }
.vt-engagement ul { margin: 0; padding-left: 1.25rem; }
.vt-hashtags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem; }
.vt-hashtags span { font-size: .85rem; padding: .1rem .55rem; border-radius: 1rem; background: #e7f1ff; color: #084298; overflow-wrap: anywhere; }
.vt-h4 { font-size: 1.05rem; margin: 1rem 0 .5rem; }

/* gallery */
.vt-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; padding: 0; margin: 0; list-style: none; }
.vt-figure { margin: 0; }
.vt-gallery-item { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: .35rem; }
.vt-gallery-item img { display: block; width: 100%; height: 140px; object-fit: cover; border-radius: .35rem; background: #e9ecef; }
.vt-figcaption { margin-top: .3rem; font-size: .8rem; color: #495057; overflow-wrap: anywhere; }
.vt-fig-caption { display: block; }
.vt-attr { display: block; }
.vt-attr > * + *::before { content: " \00B7  "; color: #6c757d; text-decoration: none; }

.vt-sources ul { margin: 0; padding-left: 1.25rem; overflow-wrap: anywhere; }
.vt-stop-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding-top: .75rem; border-top: 1px solid #dee2e6; font-size: .9rem; }

/* lightbox */
.vt-lightbox .modal-content { background: #fff; color: #212529; }
.vt-lightbox-image { max-height: 65vh; width: auto; max-width: 100%; object-fit: contain; }
.vt-lightbox-caption { text-align: left; font-size: .9rem; color: #343a40; overflow-wrap: anywhere; margin-top: .75rem; }
.vt-lightbox-caption a { color: #0a58ca; }
.vt-lightbox-caption .vt-attr > * + *::before { content: " \00B7  "; color: #6c757d; }

@media (max-width: 576px) {
    .vt-map { height: 300px; }
    .vt-stop { padding: 1rem; }
    .vt-stop-name { font-size: 1.35rem; }
    .vt-gallery { grid-template-columns: repeat(2, 1fr); }
    .vt-trip-list { grid-template-columns: 1fr; }
}