/*
Events listing pages and the shared event card.

A real stylesheet rather than a <style> block inside Segment.cshtml, because the hub
renders the same _EventCard partial from a different page: CSS scoped to one page left
every card on the hub unstyled. One file, linked by both, is also one file to change
when the card changes.
*/

/* ---- Listing pages: topic, day, night, area (Phase D) ---------------- */

/* The listing header is a gradient panel in the same palette as the hub's hero, so a
   visitor going hub -> friday-night stays inside one section instead of dropping onto
   a plain white page. Rounded and inside the container rather than full-bleed, because
   the breadcrumb sits above it. */
.events-listing-header {
    background: linear-gradient(135deg, #7B1FA2 0%, #4A148C 100%);
    color: #fff;
    border-radius: 20px;
    padding: 32px 34px;
    margin: 12px 0 28px;
}
.events-listing-title {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.2;
}
.events-listing-tagline {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255,255,255,.92);
    margin: 0 0 12px;
}
/* The date is the thing a reader checks first on a day or night page, so it gets a
   pill rather than another line of body text. */
.events-listing-date {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,.16);
    border-radius: 999px;
    padding: 6px 14px;
    margin: 0 0 14px;
}
.events-listing-intro {
    font-size: 16px;
    color: rgba(255,255,255,.88);
    margin: 0;
    max-width: 68ch;
    line-height: 1.6;
}

.events-listing-video {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 24px 0;
    border-radius: 16px;
    overflow: hidden;
    background: #111827;
}
.events-listing-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.events-listing-group { margin: 32px 0; }
.events-listing-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}
.events-listing-group-head h2 {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}
.events-listing-group-head a {
    font-size: 14px;
    font-weight: 600;
    color: #7B1FA2;
    text-decoration: none;
    white-space: nowrap;
}
.events-listing-group-head a:hover { text-decoration: underline; }

/* An ungrouped listing still needs an h2 between the h1 and the cards' h3s, or the
   document outline skips a level. It is announced but not shown. */
.visually-hidden-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.events-listing-empty {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px;
    margin: 24px 0;
}
.events-listing-empty h2 { font-size: 18px; margin: 0 0 8px; color: #111827; }
.events-listing-empty p { margin: 0; color: #4b5563; max-width: 60ch; }

.events-listing-links { margin: 32px 0 48px; }
.events-listing-links h2 { font-size: 18px; margin: 0 0 12px; color: #111827; }
.events-listing-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.events-listing-links li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 8px 14px;
}
.events-listing-links a {
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.events-listing-links a:hover { color: #7B1FA2; }
.events-listing-link-count {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
}

/* ---- Event card (shared by the hub and every listing page) ------------ */

/* align-items: start so a text-only card sizes to its content instead of stretching
   to match whichever card in its row has an image. */
.events-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    align-items: start;
    gap: 20px;
}

.event-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}
.event-card:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.event-card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.event-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #7B1FA2 0%, #4A148C 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.event-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The imageless card's only ornament: a slim bar in the event's category colour,
   supplied per card as --event-accent. */
.event-card-accent {
    height: 5px;
    background: var(--event-accent, #7B1FA2);
}
.event-card--textonly .event-card-title { font-size: 17px; }

.event-card-flag {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 4px 9px;
    border-radius: 6px;
    color: #fff;
}
.event-card-flag--free { background: #10B981; }
.event-card-flag--soldout { background: #EF4444; }

.event-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.event-card-title { font-size: 16px; font-weight: 600; color: #111827; margin: 0; line-height: 1.3; }

.event-card-when { margin: 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; }
.event-card-date { font-weight: 600; color: #7B1FA2; }
.event-card-time { color: #6b7280; }

.event-card-where { margin: 0; font-size: 13px; color: #374151; display: flex; flex-wrap: wrap; gap: 6px; }
.event-card-venue { font-weight: 500; }
.event-card-area { color: #6b7280; }
.event-card-area::before { content: "· "; }

.event-card-summary {
    margin: 2px 0 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}

.event-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: auto 0 0;
    padding-top: 10px;
}
.event-card-category {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--event-accent, #9ca3af);
}
/* The entry flag lives on the image on a card that has one; on a text-only card it
   moves here rather than disappearing. */
.event-card-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 3px 8px;
    border-radius: 5px;
    color: #fff;
}
.event-card-tag--free { background: #10B981; }
.event-card-tag--soldout { background: #EF4444; }

.event-card-business {
    display: block;
    padding: 10px 16px;
    border-top: 1px solid #f3f4f6;
    font-size: 13px;
    font-weight: 500;
    color: #7B1FA2;
    text-decoration: none;
}
.event-card-business:hover { background: #faf5ff; }

@media (max-width: 560px) {
    .events-listing-title { font-size: 26px; }
    .events-card-grid { grid-template-columns: 1fr; }
}

/* ---- Breadcrumb ------------------------------------------------------
   Lives here, not in a page's <style> block, for the reason at the top of this
   file: the hub and the segment pages render the same markup, so a rule scoped
   to one of them leaves the other unstyled. It did — the hub shipped its
   breadcrumb as a bare <ol>, numbered "1. 2. 3." down the page, because these
   rules sat inside Segment.cshtml where Index.cshtml could not reach them.

   list-style: none is what removes the numbers; the flex row and the "/"
   separator are what make it read as a breadcrumb rather than a list. */
.event-breadcrumb { padding-top: 16px; }
.event-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #6b7280;
}
.event-breadcrumb li + li::before {
    content: "/";
    margin-right: 6px;
    color: #d1d5db;
}
.event-breadcrumb a { color: #6b7280; text-decoration: none; }
.event-breadcrumb a:hover { color: #7B1FA2; text-decoration: underline; }
.event-breadcrumb [aria-current="page"] { color: #111827; font-weight: 600; }

/* ---- Hub: browse card grids -----------------------------------------
   The "browse by day / after dark / quick filters / by area" sections.

   Layout follows the anguillaferrytimes.com pattern the operator asked for: an
   eyebrow + heading on the left with a short lede on the right, then a grid of
   cards, each an icon tile over a title and one line of subtext. The palette is
   Destinito's purple rather than that site's orange, so the section still reads
   as part of this page's hero.

   In the shared stylesheet, not a page <style> block. These are hub-only rules
   today, but the last two CSS bugs on this page were both "styles trapped in one
   page's <style> block" and one of them silently swallowed every rule after it. */

.events-browse { margin: 36px 0; }

.events-browse-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 32px;
    margin-bottom: 18px;
}

/* The short rule before the label is the reference's device for marking a section
   opener; ::before keeps it out of the markup. */
.events-browse-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #7B1FA2;
}
.events-browse-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: #c4b5fd;
    border-radius: 2px;
}

.events-browse-head h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    line-height: 1.25;
}

.events-browse-lede {
    margin: 0;
    max-width: 42ch;
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
}

/* auto-fit rather than a fixed column count: the four sections hold 4, 5, 7 and
   however-many-areas cards, and each should fill its row without a media query
   per breakpoint. */
.events-browse-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.browse-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 18px;
    background: #fbfaff;
    border: 1px solid #ece9f6;
    border-radius: 14px;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.browse-card:hover {
    border-color: #c4b5fd;
    box-shadow: 0 6px 18px rgba(123, 31, 162, .10);
    transform: translateY(-1px);
}

.browse-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    border-radius: 11px;
    background: #f3e8ff;
    color: #7B1FA2;
    font-size: 16px;
}

.browse-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}

.browse-card-note {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.45;
    color: #6b7280;
}

@media (max-width: 560px) {
    .events-browse-head h2 { font-size: 20px; }
    .events-browse-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
    .browse-card { padding: 14px; }
    .browse-card-icon { width: 34px; height: 34px; margin-bottom: 10px; font-size: 14px; }
}

/* ---- Hub: weekly schedule table -------------------------------------
   A schedule is read down a column — what time, where, how much — so it is a real
   <table> with real headers rather than a grid of cards pretending to be one. That
   also makes it navigable by screen reader, which a stack of divs would not be. */

.events-week { margin: 36px 0; }

.events-week-range {
    margin: 6px 0 0;
    font-size: 14px;
    color: #6b7280;
}

/* The seven day links. Scrolls sideways on a narrow screen instead of wrapping to
   three ragged rows. */
.events-week-days {
    list-style: none;
    margin: 0 0 14px;
    padding: 0 0 2px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
}
.events-week-days a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    border: 1px solid #ece9f6;
    border-radius: 10px;
    background: #fbfaff;
    text-decoration: none;
    white-space: nowrap;
}
.events-week-days a:hover { border-color: #c4b5fd; background: #f5f3ff; }
.events-week-day-name { font-size: 13px; font-weight: 700; color: #111827; }
.events-week-day-date { font-size: 12px; color: #6b7280; }

.events-week-scroll { overflow-x: auto; }

.events-week-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.events-week-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b7280;
    padding: 10px 14px;
    background: #f8f7fc;
    border-bottom: 1px solid #ece9f6;
    white-space: nowrap;
}
.events-week-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f3f2f9;
    vertical-align: top;
}
.events-week-table tbody tr:hover { background: #fbfaff; }

.events-week-daycell { white-space: nowrap; }
.events-week-daycell a { font-weight: 600; color: #111827; text-decoration: none; }
.events-week-daycell a:hover { color: #7B1FA2; text-decoration: underline; }
.events-week-daycell span { display: block; font-size: 12px; color: #6b7280; }

.events-week-time { white-space: nowrap; font-weight: 600; color: #7B1FA2; }

.events-week-name a { font-weight: 600; color: #111827; text-decoration: none; }
.events-week-name a:hover { color: #7B1FA2; text-decoration: underline; }

.events-week-venue-name { display: block; color: #374151; }
.events-week-venue-area { display: block; font-size: 12px; color: #6b7280; }

/* Category keeps the row's own accent colour, the same source _EventCard uses, so an
   event reads the same in the table and on its card. */
.events-week-cat {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--event-accent, #7B1FA2);
    background: color-mix(in srgb, var(--event-accent, #7B1FA2) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--event-accent, #7B1FA2) 22%, #fff);
    white-space: nowrap;
}

.events-week-entry {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.events-week-entry--free    { color: #047857; background: #d1fae5; }
.events-week-entry--soldout { color: #b91c1c; background: #fee2e2; }
.events-week-entry--paid    { color: #6b7280; background: #f3f4f6; }

/* Below 720px a six-column table stops being readable however far it scrolls, so each
   row restacks as a block and the column headers come back as per-cell labels from the
   data-label attributes. */
@media (max-width: 720px) {
    .events-week-table thead { display: none; }
    .events-week-table, .events-week-table tbody, .events-week-table tr, .events-week-table td {
        display: block;
        width: 100%;
    }
    .events-week-table tr {
        margin-bottom: 10px;
        border: 1px solid #ece9f6;
        border-radius: 12px;
        padding: 6px 4px;
        background: #fbfaff;
    }
    .events-week-table td {
        display: flex;
        gap: 12px;
        align-items: baseline;
        border-bottom: 0;
        padding: 5px 12px;
    }
    .events-week-table td::before {
        content: attr(data-label);
        flex: 0 0 74px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #9ca3af;
    }
    /* A cell with nothing to say is dropped rather than showing a bare label. Flagged
       with a class in the markup, not :empty — Razor leaves whitespace inside the cell
       and CSS counts whitespace as content, so :empty never matches. */
    .events-week-table td.events-week-cell-empty { display: none; }
    .events-week-daycell span { display: inline; margin-left: 6px; }
}