/* ==========================================================================
   Marketing site - public events UI
   Used by Views/Home/EventsList.cshtml (standalone Events List page, which
   renders _EventListPartial.cshtml - card grid filled by webEvents.js) and
   Views/Home/EventDetail.cshtml (event details page).

   Palette is taken from the site's own style.css: #d95f2b accent,
   #2f2a26 ink, #6b6258 muted, #eee6dd hairline, #fbf7f2 cream.
   ========================================================================== */

:root {
    --qc-accent: #d95f2b;
    --qc-accent-dark: #b64a1e;
    --qc-ink: #2f2a26;
    --qc-muted: #6b6258;
    --qc-line: #eee6dd;
    --qc-cream: #fbf7f2;
}

.eventsBlog {
    /* No top padding - .eventsHero below starts flush against the fixed nav and
       supplies its own clearance; only the bottom of the section (after the grid) needs it. */
    padding-bottom: 60px;
}

/* ---- Hero band ----
   Same gradient as the home page's .bannerBlog (style.css) - this is the same visual
   language, just a shorter band since there's no app screenshot/store buttons here.
   The filter card is a child of this (not a sibling pulled up over it), so the hero's
   own bottom padding is what leaves a clear strip of orange visible under the card. */
.eventsHero {
    padding: calc(var(--header-height, 90px) + 40px) 0 56px;
    background: #D95F2B;
    background: linear-gradient(90deg, rgba(217, 95, 43, 1) 0%, rgba(245, 166, 109, 1) 100%);
}

.eventsHero-title {
    margin: 0 0 12px;
    font-size: 40px;
    font-weight: 700;
    color: #fff;
}

.eventsHero-subtitle {
    margin: 0 0 32px;
    font-size: 16px;
    line-height: 1.5;
    color: #FFF3E3;
}

/* ---- Filters ---- */
.eventFilters {
    background: #fff;
    border: 1px solid var(--qc-line);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .05);
}

.eventsListHeading {
    margin: 40px 0 4px;
    text-align: left;
}

.eventFilters label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--qc-muted);
    margin-bottom: 6px;
}

.eventFilters .form-control,
.eventFilters .form-select {
    border-radius: 60px;
    padding: 10px 16px;
    border: 1px solid #e3d9cd;
    font-size: 15px;
}

.eventFilters .form-control:focus,
.eventFilters .form-select:focus {
    border-color: var(--qc-accent);
    box-shadow: 0 0 0 .18rem rgba(217, 95, 43, .15);
}

.eventFilters-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.eventFilters-actions .btn {
    border-radius: 60px;
    padding: 10px 30px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.btn-eventSearch {
    background: var(--qc-accent);
    color: #fff;
}

.btn-eventSearch:hover,
.btn-eventSearch:focus {
    background: var(--qc-accent-dark);
    color: #fff;
}

.btn-eventReset {
    background: var(--qc-ink);
    color: #fff;
}

.btn-eventReset:hover,
.btn-eventReset:focus {
    background: #1c1815;
    color: #fff;
}

.eventSearch {
    position: relative;
}

.eventSearch .form-control {
    padding-right: 44px;
}

.eventSearch .inputicon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: .55;
}

/* ---- Result count / status line ---- */
.eventGrid-count {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--qc-muted);
}

.eventGrid-status {
    margin: 24px 0 0;
    text-align: center;
    font-size: 15px;
    color: var(--qc-muted);
}

/* ---- Event cards ----
   The whole card is an <a> so keyboard focus, middle-click and "open in new tab" all
   work on it. That forces every child to be inline-level (a <div> inside an <a> is
   invalid), which is why the markup in webEvents.CardTemplate uses <span>s that are
   flipped to block/flex here. */
.eventCard {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--qc-line);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.eventCard:hover,
.eventCard:focus-visible {
    transform: translateY(-4px);
    border-color: #e3d2c1;
    box-shadow: 0 14px 32px rgba(47, 42, 38, .12);
    color: inherit;
    text-decoration: none;
}

.eventCard:focus-visible {
    outline: 2px solid var(--qc-accent);
    outline-offset: 2px;
}

.eventCard-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--qc-cream);
    overflow: hidden;
}

.eventCard-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.eventCard:hover .eventCard-media img {
    transform: scale(1.04);
}

/* Placeholder for events with no uploaded image - a tinted wash rather than a
   stock asset, so nothing 404s and it still reads as "image missing". */
.eventCard-media--empty {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 160px;
    background: linear-gradient(135deg, #f6efe6 0%, #efe1d2 55%, #f6efe6 100%);
}

.eventCard-chip {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-block;
    max-width: calc(100% - 24px);
    padding: 5px 14px;
    border-radius: 60px;
    background: rgba(255, 255, 255, .94);
    color: var(--qc-accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.eventCard-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    padding: 16px 16px 18px;
}

.eventCard-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--qc-ink);
    /* Two lines max, so a long title can't push the button out of line with its
       neighbours in the same row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The CTA is pushed to the bottom so every card in a row lines up regardless of
   how much meta text each one carries. */
.eventCard-cta {
    margin-top: auto;
}

/* ---- Date / location meta lines (shared by cards and the details page) ---- */
.eventMeta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eventMeta-row,
.eventMeta li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--qc-muted);
}

.eventMeta-icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    /* Icons are stroked outlines drawn in the accent colour via currentColor. */
    color: var(--qc-accent);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Primary ticket button (cards + details sidebar) ---- */
.btn-eventTicket {
    display: block;
    width: 100%;
    padding: 11px 20px;
    border: 0;
    border-radius: 8px;
    background: var(--qc-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s ease;
}

.btn-eventTicket:hover,
.btn-eventTicket:focus {
    background: var(--qc-accent-dark);
    color: #fff;
}

.btn-eventTicket:disabled,
.btn-eventTicket[disabled] {
    background: #d8cec2;
    color: #fff;
    cursor: not-allowed;
}

/* ---- Load more ---- */
.eventGrid-more {
    margin-top: 32px;
    text-align: center;
}

.btn-eventLoadMore {
    padding: 11px 34px;
    border: 1px solid #e3d9cd;
    border-radius: 8px;
    background: #fff;
    color: var(--qc-ink);
    font-size: 15px;
    font-weight: 600;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.btn-eventLoadMore:hover:not(:disabled),
.btn-eventLoadMore:focus:not(:disabled) {
    background: var(--qc-accent);
    border-color: var(--qc-accent);
    color: #fff;
}

.btn-eventLoadMore:disabled {
    opacity: .6;
    cursor: progress;
}

/* ==========================================================================
   Event Details page (Views/Home/EventDetail.cshtml)
   ========================================================================== */

/* The nav is fixed-top and this page has no hero to sit under it. */
.eventDetailPage {
    padding: calc(var(--header-height, 90px) + 32px) 0 72px;
    background: var(--qc-cream);
}

/* Events List page (Views/Home/EventsList.cshtml). No padding-top here - .eventsHero
   (inside _EventListPartial) sits flush against the fixed nav and clears it itself, the
   same way the home page's .bannerBlog does. Background stays the site's plain white
   (style.css body { background: #fff }); .eventsHero paints its own orange over the top
   of it, the rest of the page (cards, "Upcoming Events") is the same white as before. */
.eventsListPage {
    background: #fff;
}

.eventDetail-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--qc-ink);
    text-decoration: none;
}

.eventDetail-back:hover {
    color: var(--qc-accent);
}

/* ---- Image slider ---- */
.eventDetail-gallery {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: var(--qc-cream);
    box-shadow: 0 10px 30px rgba(47, 42, 38, .10);
}

.eventDetail-slide img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

.eventDetail-slide .eventCard-media--empty {
    aspect-ratio: 16 / 7;
    min-height: 220px;
}

/* Before slick initialises, every slide is in normal flow and the gallery would render
   as a tall stack of images. Hiding all but the first keeps the first paint correct;
   slick removes the need for this by wrapping them in its own track. */
.eventDetail-gallery--slider:not(.slick-initialized) .eventDetail-slide:not(:first-child) {
    display: none;
}

.eventDetail-chip {
    z-index: 2;
    top: 16px;
    left: 16px;
    font-size: 13px;
}

.eventDetail-gallery .slick-dots {
    bottom: 14px;
}

.eventDetail-gallery .slick-dots li button:before {
    color: #fff;
    opacity: .55;
    font-size: 9px;
}

.eventDetail-gallery .slick-dots li.slick-active button:before {
    color: #fff;
    opacity: 1;
}

/* Prev/Next arrow buttons are turned off (arrows: false in EventDetail.cshtml's
   slick init) - navigation is swipe/autoplay + the dots below. Hidden here too as
   a belt-and-braces in case slick ever renders them regardless. */
.eventDetail-gallery .slick-prev,
.eventDetail-gallery .slick-next {
    display: none !important;
}

/* ---- Title + meta ---- */
.eventDetail-body {
    margin-top: 28px;
}

.eventDetail-title {
    margin: 0 0 12px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--qc-ink);
}

.eventDetail-meta {
    /* Side by side when there is room, stacked on narrow screens. */
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin-bottom: 22px;
}

.eventDetail-meta li {
    font-size: 14px;
}

/* ---- About this event ---- */
.eventDetail-card {
    background: #fff;
    border: 1px solid var(--qc-line);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .05);
}

.eventDetail-cardTitle {
    margin: 0 0 14px;
    font-size: 19px;
    font-weight: 700;
    color: var(--qc-ink);
}

.eventDetail-card p {
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.75;
    color: #4a443d;
    /* Organiser copy can contain very long unbroken strings (URLs, hashtags). */
    overflow-wrap: break-word;
}

.eventDetail-card p:last-child {
    margin-bottom: 0;
}

/* ---- Ticket sidebar ---- */
.eventDetail-ticketCard {
    position: sticky;
    top: calc(var(--header-height, 90px) + 20px);
    background: #fff;
    border: 1px solid var(--qc-line);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .05);
}

.eventDetail-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.eventDetail-price strong {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--qc-ink);
}

.eventDetail-price span {
    font-size: 14px;
    color: var(--qc-muted);
}

.eventDetail-priceNote {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--qc-muted);
}

/* ---- Ticket tiers (sidebar) ----
   Every tier the event has is listed - concession first, then standard - so a visitor
   can see both prices at once instead of just the cheapest available one. */
.eventDetail-ticketsTitle {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--qc-ink);
}

.ticketTiers {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ticketTier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--qc-line);
    border-radius: 12px;
    background: #fff;
}

.ticketTier-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ticketTier-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--qc-ink);
    /* Organiser-entered labels can be long or a single unbroken word. */
    overflow-wrap: break-word;
}

.ticketTier-right {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.ticketTier-price {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--qc-ink);
    white-space: nowrap;
}

/* Sold-out tiers stay on the page (the price is still useful context) but go grey and
   carry a badge, so they can't be mistaken for something still buyable. */
.ticketTier--soldOut {
    background: #f5f3f0;
    border-color: #e7e2db;
}

.ticketTier--soldOut .ticketTier-name {
    color: #9a938a;
}

.ticketTier--soldOut .ticketTier-price {
    color: #9a938a;
    text-decoration: line-through;
}

.ticketTier-badge {
    padding: 2px 8px;
    border-radius: 60px;
    background: #e7e2db;
    color: #6b6258;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.eventDetail-when {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 0;
    padding: 12px;
    border-radius: 12px;
    background: var(--qc-cream);
}

.eventDetail-whenDate {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    padding: 6px 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(47, 42, 38, .10);
}

.eventDetail-whenMonth {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--qc-accent);
}

.eventDetail-whenDay {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--qc-ink);
}

.eventDetail-whenText {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.eventDetail-whenText strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--qc-ink);
}

.eventDetail-whenText span {
    font-size: 13px;
    color: var(--qc-muted);
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .eventDetail-ticketCard {
        position: static;
    }

    .eventDetail-title {
        font-size: 25px;
    }
}

@media (max-width: 575px) {
    .eventsBlog {
        padding-bottom: 40px;
    }

    .eventsHero {
        padding: calc(var(--header-height, 90px) + 24px) 0 40px;
    }

    .eventsHero-title {
        font-size: 30px;
    }

    .eventFilters-actions .btn {
        flex: 1 1 auto;
    }

    .eventDetail-card,
    .eventDetail-ticketCard {
        padding: 18px;
    }
}

/* Google Places suggestions must sit above the sticky header. */
.pac-container {
    z-index: 9999 !important;
}

/* The nav is fixed-top, so jumping straight to a hash (e.g. loading /#aboutUs, or a
   browser that ignores the JS offset scroll) would otherwise land the section right
   under it, cutting off its heading. --header-height is kept in sync with the real
   header height by the script at the bottom of Index.cshtml. */
section[id] {
    scroll-margin-top: var(--header-height, 90px);
}

/* ---- App download prompt ----
   Reached from an event card's details page via /?getTickets=1#banner - booking only
   happens in the app. The banner background is solid/gradient orange (#D95F2B ->
   #F5A66D, see .bannerBlog in style.css). A glow in that same orange is invisible
   against it - white is what actually reads on this background (it's why the site's
   own banner text/icons are white). Scale is added on top so the highlight is still
   obvious even if a display crushes the glow. */
#app-download {
    display: inline-flex;
    border-radius: 16px;
}

@keyframes appDownloadPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 14px rgba(255, 255, 255, .6);
        transform: scale(1.06);
    }
}

#app-download.app-download-highlight {
    animation: appDownloadPulse .9s ease-in-out 2;
}

/* ==========================================================================
   Legal pages (Views/Home/Privacy.cshtml, Views/Home/TermsAndConditions.cshtml)

   These pages embed Termly-generated markup verbatim - every heading, paragraph
   and link inside [data-custom-class] keeps its own inline font/color rules.
   Everything here only styles the wrapper around that content (page background,
   card, spacing) and generic tag defaults (line-height, list markers, link
   underline) that Termly's inline styles don't touch, so the legal text itself
   is never edited.
   ========================================================================== */
.legalPage {
    padding: 48px 0 72px;
    background: var(--qc-cream);
}

.legalPage-card {
    max-width: 860px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--qc-line);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(47, 42, 38, .06);
}

.legalPage-card .container {
    max-width: none;
}

.legalPage-card [data-custom-class="body"] {
    line-height: 1.6;
}

.legalPage-card [data-custom-class="body"] h1 {
    margin-bottom: 4px;
}

.legalPage-card [data-custom-class="body"] h2 {
    margin: 32px 0 12px;
}

.legalPage-card [data-custom-class="body"] h3 {
    margin: 20px 0 10px;
}

.legalPage-card [data-custom-class="body"] ul {
    padding-left: 22px;
}

.legalPage-card [data-custom-class="body"] li {
    margin-bottom: 6px;
}

.legalPage-card [data-custom-class="body"] a[data-custom-class="link"] {
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 575px) {
    .legalPage {
        padding: 32px 0 40px;
    }

    .legalPage-card {
        border-radius: 12px;
    }
}