/*
 * Events board front end.
 *
 * The archive is built to Option A (storage/ref/events-design-export/, chosen
 * by the client on 2026-10-27): the job board's list layout, with a black date
 * tile per event and the events grouped by month. Its sizes are the mock's
 * (src/Main.dc.html at 1366px, src/Mobile.dc.html at 390px, in that folder).
 *
 * Option A doesn't draw the event page or the intake page. They carry its look
 * into the job board's page layouts: the job listing page and Post a job (see
 * *Event page and intake page* below). Colleen's first design
 * (storage/ref/sbuzz-event-board.png) is no longer used anywhere.
 *
 * The vocabulary is the job board's (themes/kmdg/jobs/assets/css/job-board.css):
 * Poppins, square corners, the theme's gold and black restated as custom
 * properties, the theme's 1480px column and 40px gutter. Its rules are restated
 * under eb- classes rather than shared, so the live job board is never touched.
 * Plain CSS, no build step, for the job board's reasons.
 *
 * The intake page also loads the job board's stylesheet, for its Gravity Forms
 * styling under `.jb-form-page`; only the events pages' own parts are here.
 */

.eb-page {
    --eb-gold: #EDBD1D;
    --eb-black: #000000;
    --eb-ink: #231F20;
    --eb-muted: #5A5A5A;
    --eb-placeholder: #6B6B6B;
    --eb-rule: #D4D4D4;
    --eb-hover: #FCF7E7;
    --eb-panel: #F7F7F7;
    --eb-surface: #FFFFFF;
    --eb-font: 'Poppins', Arial, sans-serif;
    --eb-gutter: 40px;

    font-family: var(--eb-font);
    color: var(--eb-black);
}

@media (max-width: 1280px) {
    .eb-page { --eb-gutter: 20px; }
}

/* The theme's white surface, if its own part ever goes missing. */
.eb-surface {
    display: block;
    width: 1480px;
    max-width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
}

.eb-shell {
    max-width: 1480px;
    margin: 0 auto;
    padding-left: var(--eb-gutter);
    padding-right: var(--eb-gutter);
    box-sizing: border-box;
}

.eb-page .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.eb-page a:focus-visible,
.eb-page button:focus-visible,
.eb-page input:focus-visible,
.eb-page select:focus-visible {
    outline: 2px solid var(--eb-black);
    outline-offset: 3px;
}

/* ==========================================================================
   Archive (Option A)
   ========================================================================== */

.eb-archive__body {
    padding-top: 56px;
    padding-bottom: 80px;
}

/* Buttons -------------------------------------------------------------------- */

/* Gold, black on hover: the job board's .jb-btn. */
.eb-action {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid var(--eb-gold);
    border-radius: 0;
    background: var(--eb-gold);
    color: var(--eb-black);
    font-family: var(--eb-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    padding: 15px 26px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.eb-action:hover,
.eb-action:focus {
    background: var(--eb-black);
    border-color: var(--eb-black);
    color: var(--eb-gold);
    text-decoration: none;
}

.eb-action--outline {
    background: transparent;
    border-color: var(--eb-black);
    font-weight: 600;
}

.eb-action--outline:hover,
.eb-action--outline:focus {
    color: #ffffff;
}

/* "Post an event" on the gold panel. */
.eb-action--dark {
    border: 2px solid var(--eb-black);
    background: var(--eb-black);
    color: #ffffff;
    font-size: 17px;
    letter-spacing: 0;
    line-height: 1.3;
    padding: 16px 34px;
}

/* Register, with an arrow for "opens elsewhere". */
.eb-action--register {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    line-height: normal;
    padding: 12px 22px;
}

.eb-action__icon { flex: 0 0 auto; }

/* Page header: the job board's (.jb-page-header) ---------------------------- */

.eb-head {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 3px solid var(--eb-black);
    padding-bottom: 28px;
}

.eb-head__text {
    flex: 1 1 420px;
    min-width: 0;
}

.eb-head__title {
    margin: 0 0 12px;
    font-family: var(--eb-font);
    font-size: 46px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--eb-black);
}

.eb-head__lede {
    margin: 0;
    max-width: 56ch;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.55;
    color: var(--eb-ink);
}

.eb-head .eb-action { flex: 0 0 auto; }

/* Search bar: the job board's (.jb-filters) ------------------------------------ */

/*
 * The dividers are the bar's own background showing through a 1px gap, so they
 * are right however the bar wraps.
 */
.eb-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    margin: 28px 0 0;
    border: 1px solid var(--eb-black);
    background: var(--eb-rule);
}

/* What folds behind "Filters" on a phone. Wider, its fields sit in the bar's row. */
.eb-filters__more { display: contents; }

.eb-filters__field {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    background: var(--eb-surface);
}

.eb-filters__field--search { flex: 2 1 280px; }
.eb-filters__field--organizer { flex: 1 1 170px; }
.eb-filters__field--state,
.eb-filters__field--when { flex: 1 1 150px; }

.eb-filters__icon {
    flex: 0 0 auto;
    margin-left: 20px;
}

.eb-filters__chevron {
    position: absolute;
    right: 18px;
    pointer-events: none;
}

.eb-filters input,
.eb-filters select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: auto;
    box-sizing: border-box;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 17px 20px;
    font-family: var(--eb-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--eb-black);
}

.eb-filters input { padding-left: 12px; }

.eb-filters select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    text-overflow: ellipsis;
    cursor: pointer;
}

.eb-filters input::placeholder {
    color: var(--eb-placeholder);
    font-weight: 300;
    opacity: 1;
}

.eb-filters input:focus-visible,
.eb-filters select:focus-visible {
    outline: 2px solid var(--eb-black);
    outline-offset: -2px;
}

/* The buttons are black when focused, so their outline is gold. */
.eb-filters button:focus-visible {
    outline: 2px solid var(--eb-gold);
    outline-offset: -4px;
}

/* The theme's reset rings any focused button, even after a tap; the ring is kept for the keyboard. */
.eb-filters button:focus:not(:focus-visible) { outline: none; }

.eb-filters__submit {
    flex: 0 0 auto;
    margin: 0;
    border: none;
    border-radius: 0;
    background: var(--eb-gold);
    color: var(--eb-black);
    font-family: var(--eb-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: normal;
    padding: 17px 34px;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.eb-filters__submit:hover,
.eb-filters__submit:focus {
    background: var(--eb-black);
    color: var(--eb-gold);
}

/* The phone's "Filters" button; shown there once the script has run. */
.eb-filters__toggle { display: none; }

/* Event type pills ------------------------------------------------------------ */

.eb-types {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 20px 0 0;
}

.eb-types__label {
    margin-right: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--eb-muted);
}

.eb-pill {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
    border: 1px solid var(--eb-rule);
    background: var(--eb-surface);
    color: var(--eb-black);
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color .2s ease-in-out;
}

.eb-pill:hover,
.eb-pill:focus {
    border-color: var(--eb-black);
    color: var(--eb-black);
    text-decoration: none;
}

.eb-pill[aria-current="true"] {
    background: var(--eb-gold);
    border-color: var(--eb-black);
    font-weight: 700;
}

/* Active filters --------------------------------------------------------------- */

.eb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 24px 0 0;
}

.eb-chips__label {
    margin-right: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--eb-muted);
}

.eb-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--eb-black);
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--eb-black);
    text-decoration: none;
    background: var(--eb-hover);
    transition: all .2s ease-in-out;
}

.eb-chip:hover,
.eb-chip:focus {
    background: var(--eb-gold);
    color: var(--eb-black);
    text-decoration: none;
}

.eb-chip__remove {
    font-size: 15px;
    line-height: 1;
    color: var(--eb-muted);
}

.eb-chips__clear {
    margin-left: 6px;
    font-size: 14px;
    color: var(--eb-muted);
}

/* Count and order -------------------------------------------------------------- */

.eb-resultbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: baseline;
    justify-content: space-between;
    margin: 24px 0 0;
}

.eb-resultbar p {
    margin: 0;
    font-size: 14px;
    color: var(--eb-muted);
}

.eb-resultbar strong {
    color: var(--eb-black);
    font-weight: 600;
}

.eb-resultbar__narrow { display: none; }

/* Month groups ------------------------------------------------------------------- */

.eb-month { margin: 36px 0 0; }

.eb-month__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 0 0 12px;
    border-bottom: 2px solid var(--eb-black);
}

.eb-month__title {
    margin: 0;
    font-family: var(--eb-font);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--eb-black);
}

.eb-month__count {
    margin: 0;
    font-size: 14px;
    color: var(--eb-muted);
}

.eb-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--eb-rule);
}

.eb-rows__item {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--eb-rule);
}

.eb-rows__item::before { content: none; }

/* An event ------------------------------------------------------------------------ */

/* The negative margin lets the hover tint bleed into the gutter while the rules stay flush. */
.eb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
    align-items: flex-start;
    padding: 28px 20px;
    margin: 0 -20px;
    transition: background .2s ease-in-out;
}

.eb-row:hover { background: var(--eb-hover); }

/* Date tile. Hidden from screen readers; the row carries the date as text. */
.eb-tile {
    flex: 0 0 96px;
    width: 96px;
    height: 104px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--eb-black);
    color: #ffffff;
    text-align: center;
}

.eb-tile__month {
    padding: 1px 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--eb-gold);
}

.eb-tile__day {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.eb-tile--range .eb-tile__day { font-size: 28px; }

.eb-tile__weekday {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--eb-rule);
}

.eb-row__main {
    flex: 999 1 380px;
    min-width: 0;
}

.eb-row__title {
    margin: 0 0 8px;
    font-family: var(--eb-font);
    font-size: 23px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--eb-black);
    text-wrap: pretty;
}

.eb-row__title a {
    color: inherit;
    text-decoration: none;
}

.eb-row__title a:hover,
.eb-row__title a:focus {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--eb-gold);
    text-decoration-thickness: 2px;
}

.eb-row__org {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--eb-ink);
}

/* The organizer's mark: its logo, else its initials on its colour. */
.eb-mark {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
}

/* A wordmark needs more than a 30px square: up to 96px wide, at the same height. */
.eb-mark--logo {
    flex: 0 0 auto;
    width: auto;
    max-width: 96px;
}

.eb-mark--logo img {
    display: block;
    width: auto;
    max-width: 96px;
    height: 30px;
    object-fit: contain;
}

.eb-row__meta,
.eb-single__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--eb-muted);
}

.eb-tag {
    border: 1px solid var(--eb-black);
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.3;
    color: var(--eb-black);
}

.eb-row__place,
.eb-single__place {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.eb-row__pin,
.eb-single__pin { flex: 0 0 auto; }

.eb-row__desc {
    margin: 12px 0 0;
    max-width: 70ch;
    font-size: 15px;
    line-height: 1.6;
    color: var(--eb-muted);
}

.eb-row__aside {
    flex: 1 1 190px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.eb-row__cost-label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--eb-muted);
}

.eb-row__cost {
    margin: 2px 0 16px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--eb-black);
}

.eb-row__details {
    padding-bottom: 2px;
    border-bottom: 2px solid var(--eb-gold);
    font-size: 14px;
    font-weight: 600;
    color: var(--eb-black);
    text-decoration: none;
    transition: all .2s ease-in-out;
}

.eb-action--register + .eb-row__details { margin-top: 14px; }

.eb-row__details:hover,
.eb-row__details:focus {
    border-bottom-color: var(--eb-black);
    color: var(--eb-black);
    text-decoration: none;
}

/* Pagination: the job board's ------------------------------------------------------ */

.eb-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 40px;
}

.eb-pagination .page-numbers {
    min-width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid var(--eb-rule);
    color: var(--eb-black);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all .2s ease-in-out;
}

.eb-pagination a.page-numbers:hover,
.eb-pagination a.page-numbers:focus {
    border-color: var(--eb-black);
    color: var(--eb-black);
    text-decoration: none;
}

.eb-pagination .page-numbers.current {
    background: var(--eb-gold);
    border-color: var(--eb-black);
    font-weight: 700;
}

.eb-pagination .page-numbers.dots {
    border-color: transparent;
    color: var(--eb-muted);
}

.eb-pagination .prev.page-numbers,
.eb-pagination .next.page-numbers {
    padding: 0 20px;
    font-weight: 600;
}

.eb-pagination .next.page-numbers { margin-left: 4px; }

/* The phone's paging: "More events" and "← Previous". */
.eb-pager { display: none; }

/* No results ------------------------------------------------------------------------ */

.eb-empty { margin-top: 36px; }

.eb-empty__title {
    margin: 0 0 10px;
    font-family: var(--eb-font);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--eb-black);
}

.eb-empty__body {
    margin: 0 0 24px;
    max-width: 56ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--eb-ink);
}

.eb-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* "Hosting a security event?" ------------------------------------------------------- */

.eb-host {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 40px;
    align-items: center;
    justify-content: space-between;
    margin-top: 72px;
    padding: 48px;
    background: var(--eb-gold);
}

.eb-host__text {
    flex: 1 1 420px;
    min-width: 0;
}

.eb-host__title {
    margin: 0 0 10px;
    font-family: var(--eb-font);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--eb-black);
}

.eb-host__copy {
    margin: 0;
    max-width: 58ch;
    font-size: 17px;
    line-height: 1.55;
    color: var(--eb-black);
}

.eb-host .eb-action { flex: 0 0 auto; }

/* ==========================================================================
   Event page and intake page
   ========================================================================== */

/*
 * Option A draws only the archive. These two pages carry its look (the black
 * date tile, the organizer's mark, the outlined type tag, gold buttons) into the
 * job board's own page layouts: the job listing page (.jb-single) and Post a job
 * (.jb-form-head), whose sizes are restated here.
 */

/* A gold button across its container: the panel's Register (.jb-btn--block). */
.eb-action--block {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 16px 20px;
    font-size: 16px;
}

/* Event page: the job listing page's layout ------------------------------------- */

.eb-single__inner {
    padding-top: 40px;
    padding-bottom: 80px;
}

.eb-back {
    font-size: 14px;
    font-weight: 600;
    color: var(--eb-muted);
    text-decoration: none;
}

.eb-back:hover,
.eb-back:focus {
    color: var(--eb-black);
    text-decoration: none;
}

/* The date tile stands where the job listing has the company's logo. */
.eb-single__header {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    margin: 24px 0 0;
    padding-bottom: 32px;
    border-bottom: 3px solid var(--eb-black);
}

.eb-single__heading {
    flex: 1 1 auto;
    min-width: 0;
}

.eb-single__title {
    margin: 0 0 14px;
    font-family: var(--eb-font);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--eb-black);
    text-wrap: pretty;
    overflow-wrap: break-word;
}

/* The date and time in words. Beside the tile they are for screen readers only; a phone shows them. */
.eb-single__when {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.eb-single__pin { display: flex; }
.eb-single__pin svg { display: block; }

.eb-single__org {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--eb-ink);
}

/* The archive's mark, a size up: 36px, wordmarks up to 120px wide. */
.eb-single__org .eb-mark {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    font-size: 13px;
}

.eb-single__org .eb-mark--logo {
    flex-basis: auto;
    width: auto;
    max-width: 120px;
}

.eb-single__org .eb-mark--logo img {
    height: 36px;
    max-width: 120px;
}

.eb-notice {
    margin: 28px 0 0;
    border-left: 4px solid var(--eb-black);
    background: var(--eb-panel);
    padding: 14px 18px;
    font-size: 16px;
    font-weight: 500;
}

.eb-notice a { color: var(--eb-black); }

.eb-single__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: start;
    margin-top: 40px;
}

.eb-section { margin-bottom: 40px; }
.eb-section:last-child { margin-bottom: 0; }

.eb-section__rule {
    width: 32px;
    height: 4px;
    margin-bottom: 14px;
    background: var(--eb-gold);
}

.eb-section__title {
    margin: 0 0 14px;
    font-family: var(--eb-font);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--eb-black);
    text-wrap: pretty;
}

.eb-prose {
    max-width: 68ch;
    margin: 0;
    font-size: 17px;
    line-height: 1.75;
    color: var(--eb-black);
}

.eb-prose > :first-child { margin-top: 0; }
.eb-prose > :last-child { margin-bottom: 0; }
.eb-prose p { margin: 0 0 16px; }

.eb-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    max-width: 68ch;
}

.eb-bullets li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 12px;
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
}

.eb-bullets li::before {
    content: '\2014';
    color: var(--eb-gold);
    font-weight: 700;
}

.eb-sample-note {
    margin: 40px 0 0;
    padding-top: 16px;
    border-top: 1px dashed var(--eb-rule);
    font-size: 14px;
    color: var(--eb-muted);
}

/* The credit an imported event's source asks for (a CC BY calendar), under the description. */
.eb-credit {
    margin: 32px 0 0;
    font-size: 14px;
    color: var(--eb-muted);
}

.eb-credit a {
    color: inherit;
    text-decoration: underline;
}

/* The panel: a hairline box under a gold cap. Below the theme's fixed header, which is --header-height tall. */
.eb-panel {
    position: sticky;
    top: calc(var(--header-height, 0px) + 24px);
    border: 1px solid var(--eb-black);
    background: var(--eb-surface);
}

.eb-panel__cap {
    height: 6px;
    background: var(--eb-gold);
}

.eb-panel__inner { padding: 26px 24px; }

.eb-panel__eyebrow {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--eb-muted);
}

.eb-panel__cost {
    margin: 0 0 22px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
}

.eb-facts {
    display: grid;
    gap: 14px;
    margin: 0 0 24px;
}

/* An ended event has no Register under the facts. */
.eb-facts:last-child { margin-bottom: 0; }

/* With no cost above them, the gold cap heads the facts; a rule under it would double it. */
.eb-facts:first-child > .eb-fact:first-child {
    border-top: none;
    padding-top: 0;
}

.eb-fact {
    display: grid;
    gap: 2px;
    border-top: 1px solid var(--eb-rule);
    padding-top: 12px;
}

.eb-fact dt {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--eb-muted);
}

.eb-fact dd {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
}

.eb-panel__note {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--eb-muted);
}

.eb-single__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--eb-rule);
}

.eb-single__footer p {
    margin: 0;
    font-size: 15px;
    color: var(--eb-muted);
}

.eb-single__footer p a {
    color: var(--eb-black);
    font-weight: 600;
}

/* Intake page: Post a job's header ------------------------------------------------ */

/*
 * The form is the job board's in all but the page frame: the step rail, the step
 * headings, the fields, the footer bar and the confirmation are all drawn by
 * job-board.css (`.jb-form-page`), which the intake page loads. Here: the header
 * and body around it, and two fixes for side-by-side fields, which the job
 * board's one-field-per-row form never needed.
 */
.eb-form-page__body {
    padding-top: 48px;
    padding-bottom: 72px;
}

.eb-form-page--confirm .eb-form-page__body {
    padding-top: 72px;
    padding-bottom: 88px;
}

.eb-form-head {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-end;
    justify-content: space-between;
}

.eb-form-head__main { flex: 1 1 460px; }

.eb-form-head__title {
    margin: 0 0 12px;
    font-family: var(--eb-font);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--eb-black);
    text-wrap: pretty;
}

.eb-form-head__lede {
    margin: 0;
    max-width: 60ch;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.55;
    color: var(--eb-ink);
}

/* The edit link's header has two paragraphs in its lede (EditLink). */
.eb-form-head__lede > p { margin: 0; }
.eb-form-head__lede > p + p { margin-top: 10px; }

.eb-form-head__note {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--eb-muted);
    text-align: right;
}

/*
 * Side-by-side fields share a grid row, and the theme lays each field out as a
 * wrapping flex row, so a taller neighbour (a hint, an error) would spread a
 * field's label away from its input. Keep each field's lines at the top.
 */
.eb-form-page.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield {
    align-content: flex-start;
}

/* A hint under its input rather than above it, so side-by-side inputs line up. */
.eb-form-page.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield.eb-hint-below .gfield_description:not(.validation_message) {
    order: 4;
    margin: 7px 0 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* The panel moves above the text, as on the job listing page. */
@media (max-width: 1024px) {
    .eb-single__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .eb-panel {
        position: static;
        order: -1;
    }
}

/*
 * The bar no longer fits on one row: the search on its own, the three
 * dropdowns, then Search across the width, rather than a lone button on a grey row.
 */
@media (max-width: 940px) {
    .eb-filters__field--search { flex: 1 1 100%; }
    .eb-filters__field--organizer,
    .eb-filters__field--state,
    .eb-filters__field--when { flex: 1 1 0; }
    .eb-filters__submit { flex: 1 1 100%; }
}

/*
 * Where the row's three parts no longer fit side by side (96 + 380 + 190 and the
 * gaps), the aside wraps under the text; it reads left to right from there.
 */
@media (max-width: 769px) {
    .eb-row__aside {
        align-items: flex-start;
        text-align: left;
    }
}

/* Phone: Option A's Mobile artboard, drawn at 390px. */
@media (max-width: 640px) {
    .eb-archive { --eb-gutter: 16px; }

    .eb-archive__body {
        padding-top: 28px;
        padding-bottom: 48px;
    }

    /* Header */
    .eb-head {
        display: block;
        padding-bottom: 24px;
    }

    .eb-head__title {
        margin-bottom: 10px;
        font-size: 36px;
    }

    .eb-head__lede { font-size: 16px; }

    .eb-head .eb-action {
        display: block;
        margin-top: 20px;
        padding: 15px 20px;
        font-size: 16px;
    }

    /* Search bar: the search and "Filters"; the rest folds below. */
    .eb-filters { margin-top: 20px; }

    .eb-filters__field--search { flex: 1 1 0; }

    .eb-filters__icon {
        width: 16px;
        height: 16px;
        margin-left: 14px;
    }

    .eb-filters input {
        padding: 15px 10px;
        line-height: normal;
    }

    .eb-filters--js .eb-filters__toggle {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 50px;
        margin: 0;
        border: none;
        border-radius: 0;
        background: var(--eb-black);
        color: #ffffff;
        padding: 0 16px;
        font-family: var(--eb-font);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.2;
        cursor: pointer;
    }

    .eb-filters__more {
        flex: 1 1 100%;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .eb-filters--js:not(.eb-filters--open) .eb-filters__more { display: none; }

    .eb-filters .eb-filters__field--organizer,
    .eb-filters .eb-filters__field--state,
    .eb-filters .eb-filters__field--when,
    .eb-filters .eb-filters__submit { flex: 0 0 auto; }

    .eb-filters__submit { padding: 15px 20px; }

    /* Type pills: one row that scrolls sideways, edge to edge. */
    .eb-types {
        flex-wrap: nowrap;
        margin: 16px calc(-1 * var(--eb-gutter)) 0;
        padding: 0 var(--eb-gutter) 4px;
        overflow-x: auto;
    }

    .eb-types__label { display: none; }

    .eb-pill {
        flex: 0 0 auto;
        padding: 10px 16px;
    }

    /* Count */
    .eb-resultbar {
        flex-wrap: nowrap;
        gap: 12px;
        margin-top: 18px;
    }

    .eb-resultbar p { font-size: 13px; }

    .eb-resultbar__range,
    .eb-resultbar__wide { display: none; }

    .eb-resultbar__narrow { display: inline; }

    /* Months */
    .eb-month { margin-top: 28px; }

    .eb-month__head {
        flex-wrap: nowrap;
        gap: 12px;
        padding-bottom: 10px;
    }

    .eb-month__title { font-size: 22px; }
    .eb-month__count { font-size: 13px; }

    .eb-rows { border-top: none; }

    /* A row: the tile, then everything else in one column beside it. */
    .eb-row {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 14px 16px;
        padding: 22px 0;
        margin: 0;
    }

    .eb-tile {
        flex-basis: 64px;
        width: 64px;
        height: 76px;
        gap: 2px;
    }

    .eb-tile__month {
        padding: 0;
        font-size: 11px;
        letter-spacing: .14em;
    }

    /* "Dec–Jan" has to fit 64px. */
    .eb-tile--months .eb-tile__month { letter-spacing: .02em; }

    .eb-tile__day { font-size: 28px; }
    .eb-tile--range .eb-tile__day { font-size: 19px; }
    .eb-tile__weekday { font-size: 10px; }

    .eb-row__title {
        font-size: 19px;
        line-height: 1.25;
    }

    .eb-row__org {
        gap: 8px;
        font-size: 14px;
    }

    .eb-mark {
        flex-basis: 24px;
        width: 24px;
        height: 24px;
        font-size: 9px;
    }

    .eb-mark--logo {
        flex-basis: auto;
        width: auto;
        max-width: 80px;
    }

    .eb-mark--logo img {
        height: 24px;
        max-width: 80px;
    }

    .eb-row__meta {
        gap: 6px 10px;
        margin-top: 10px;
        font-size: 12px;
        letter-spacing: .06em;
    }

    .eb-tag {
        padding: 2px 6px;
        font-size: 10px;
    }

    .eb-row__pin { display: none; }

    .eb-row__desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.55;
    }

    /* Cost and Register on one line under the text; "Event details" goes (the title links there). */
    .eb-row__aside {
        grid-column: 2;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .eb-row__aside--bare,
    .eb-row__details { display: none; }

    .eb-row__cost-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
        white-space: nowrap;
    }

    .eb-row__cost {
        margin: 0;
        font-size: 17px;
        line-height: 1.2;
    }

    .eb-row__aside .eb-action--register {
        padding: 10px 18px;
        font-size: 14px;
    }

    /* Paging: "More events" across the width, "← Previous" beside it after page 1. */
    .eb-pagination { display: none; }

    .eb-pager {
        display: flex;
        gap: 8px;
        margin-top: 24px;
    }

    .eb-pager .eb-action { padding: 15px 20px; }
    .eb-pager__next { flex: 1 1 auto; }
    .eb-pager__prev:only-child { flex: 1 1 auto; }

    /* Panel */
    .eb-host {
        display: block;
        margin-top: 48px;
        padding: 28px 20px;
    }

    .eb-host__title {
        font-size: 26px;
        line-height: 1.15;
    }

    .eb-host__copy {
        margin-bottom: 20px;
        font-size: 15px;
    }

    .eb-host .eb-action {
        display: block;
        padding: 14px 20px;
        font-size: 16px;
    }

    /*
     * The event page header: the type tag, the name and the organizer across the
     * width, then two rows that each lead with a square badge: the date tile beside
     * the date and time in words, and a pin beside the venue and city. Nothing is
     * squeezed into a narrow column beside the tile, whatever the name's length.
     */
    .eb-single__inner {
        padding-top: 28px;
        padding-bottom: 56px;
    }

    .eb-single__header {
        display: grid;
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 0 14px;
        margin-top: 20px;
        padding-bottom: 24px;
    }

    .eb-single__heading,
    .eb-single__meta { display: contents; }

    .eb-single__meta .eb-tag {
        order: 1;
        grid-column: 1 / -1;
        justify-self: start;
        margin-bottom: 12px;
    }

    .eb-single__title {
        order: 2;
        grid-column: 1 / -1;
        margin: 0;
        font-size: 30px;
        line-height: 1.12;
    }

    .eb-single__org {
        order: 3;
        grid-column: 1 / -1;
        gap: 10px;
        margin-top: 14px;
        font-size: 16px;
    }

    .eb-single__org .eb-mark {
        flex-basis: 26px;
        width: 26px;
        height: 26px;
        font-size: 10px;
    }

    .eb-single__org .eb-mark--logo {
        flex-basis: auto;
        width: auto;
        max-width: 96px;
    }

    .eb-single__org .eb-mark--logo img {
        height: 26px;
        max-width: 96px;
    }

    /* The badges. */
    .eb-single__header .eb-tile {
        order: 4;
        grid-column: 1;
        width: 60px;
        height: 60px;
        margin-top: 24px;
    }

    .eb-single__header .eb-tile__day { font-size: 24px; }
    .eb-single__header .eb-tile--range .eb-tile__day { font-size: 18px; }

    .eb-single__pin {
        flex: 0 0 60px;
        width: 60px;
        height: 60px;
        align-items: center;
        justify-content: center;
        background: var(--eb-panel);
    }

    .eb-single__pin svg {
        width: 22px;
        height: 22px;
        stroke: var(--eb-black);
    }

    /* Beside the tile, centred on it. */
    .eb-single__when {
        order: 5;
        grid-column: 2;
        align-self: center;
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
        display: flex;
        flex-direction: column;
        margin: 24px 0 0;
    }

    .eb-single__when time,
    .eb-single__venue,
    .eb-single__city:only-child {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: 0;
        color: var(--eb-black);
    }

    .eb-single__time,
    .eb-single__city {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;
        color: var(--eb-muted);
    }

    /* Under the date: the badge, then the venue over the city. */
    .eb-single__place {
        order: 6;
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 14px;
        align-items: center;
        margin-top: 12px;
        letter-spacing: 0;
        text-transform: none;
    }

    .eb-single__where {
        display: flex;
        flex-direction: column;
    }

    .eb-single__venue { order: -1; }
    .eb-single__sep { display: none; }

    .eb-single__grid { margin-top: 28px; }

    .eb-panel__inner { padding: 22px 20px; }

    /* The intake page: Post a job's phone header. */
    .eb-form-page__body {
        padding-top: 40px;
        padding-bottom: 56px;
    }

    .eb-form-head { gap: 16px; }
    .eb-form-head__title { font-size: 30px; }
    .eb-form-head__lede { font-size: 16px; }
    .eb-form-head__note { text-align: left; }
}