:root {
    --club-green:  #2d4a22;
    --club-orange: #c8601a;
    --club-light:  #f7f4f0;
}

html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }
body { margin-bottom: 0; }

/* Navbar */
.bg-club-dark { background-color: var(--club-green) !important; }
.navbar-tagline { font-size: 0.7rem; font-weight: 400; opacity: 0.7; margin-left: 0.5rem; }

/* Accent buttons */
.btn-club { background-color: var(--club-orange); border-color: var(--club-orange); color: #fff; }
.btn-club:hover { background-color: #a84f15; border-color: #a84f15; color: #fff; }

/* Hero photo strip — continuous scroll, 5 photos visible at a time */
.hero-carousel {
    position: relative;
    height: 420px;
    overflow: hidden;
    background-color: var(--club-green);
}
.hero-carousel-track {
    display: flex;
    height: 100%;
    width: max-content;
    animation: hero-scroll 180s linear infinite;
}
.hero-carousel-img {
    flex: 0 0 20vw;
    width: 20vw;
    min-width: 0; /* without this, the image's own intrinsic width overrides flex-basis, breaking the 5-across fit */
    height: 100%;
    object-fit: cover;
    object-position: center;
}
@keyframes hero-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* photo list is duplicated, so -50% is exactly one full loop */
}
@media (prefers-reduced-motion: reduce) {
    .hero-carousel-track { animation: none; }
}
@media (max-width: 576px) {
    .hero-carousel-img { flex-basis: 50vw; } /* ~2 across instead of 5 on narrow screens */
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
    display: flex;
    align-items: flex-end;
    padding-bottom: 2rem;
}

/* Trip cards */
.trip-card { overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; }
.trip-card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,0,0,0.22); }
.trip-card .card-img-top { height: 200px; object-fit: cover; transition: transform 0.3s ease; }
.trip-card:hover .card-img-top { transform: scale(1.06); }
.trip-card .no-photo { height: 200px; background-color: var(--club-light); display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 2.5rem; }
.trip-card .card-title { transition: color 0.15s; }
.trip-card:hover .card-title { color: var(--club-orange); }
.badge-location { background-color: var(--club-green); }

/* Year filter — chip list only grows over time (one more year, every year), so it scrolls
   sideways at every screen size instead of wrapping to more and more rows. Newest-first
   order (see Event.GetYears()) means the most useful chips are visible without scrolling. */
.year-filter-wrap { position: relative; }
.year-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
}
.year-filter .btn { border-radius: 20px; font-size: 0.85rem; flex-shrink: 0; }
.year-filter .btn.active { background-color: var(--club-green); border-color: var(--club-green); color: #fff; }
/* Fade hints that there's more to scroll — sit over year-filter-wrap (which doesn't
   scroll), not year-filter itself, so they stay put while the chips scroll underneath. */
.year-filter-wrap::before,
.year-filter-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0.25rem; /* matches .year-filter's padding-bottom above */
    width: 32px;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.15s;
}
.year-filter-wrap::before {
    left: 0;
    background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1));
}
.year-filter-wrap::after {
    right: 0;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
}
/* .at-start / .at-end are toggled by site.js based on actual scroll position */
.year-filter-wrap.at-start::before {
    opacity: 0;
}
.year-filter-wrap.at-end::after {
    opacity: 0;
}

/* Photo grid */
.photo-grid .photo-thumb {
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 4/3;
}
.photo-grid .photo-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.2s;
}
.photo-grid .photo-thumb:hover img { transform: scale(1.05); }

/* Admin */
.admin-bar { background-color: #333; color: #aaa; font-size: 0.8rem; padding: 0.3rem 0; }

/* Footer */
.footer-club { background-color: var(--club-light); border-top: 1px solid #ddd; }

/* Photo upload zone */
.upload-zone {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    color: #999;
    transition: border-color 0.2s, background-color 0.2s;
}
.upload-zone.dragover { border-color: var(--club-orange); background-color: #fff8f3; color: #333; }