/**
 * CCS Detroit - Events Styles
 * ============================================================================
 * Shared styles for Events Main, All Events, and Single Event templates.
 * Uses centralized variables from variables.css.
 * ============================================================================
 */

/* ==========================================================================
   TEC Wrapper Overrides — remove plugin width constraints
   ========================================================================== */

.site-main #tribe-events,
.site-main #tribe-events-pg-template {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Shared Event Components
   ========================================================================== */

/* Event meta line (date, time, venue with icons) */
.event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.event-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ccs-font-body);
    font-size: var(--ccs-text-sm);
    color: var(--ccs-color-text-muted);
}

.event-meta__item .ccs-icon {
    flex-shrink: 0;
}

/* Event action buttons (RSVP + Share) */
.event-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* Calendar / category chips group */
.event-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ==========================================================================
   Events Main Page (.events-main)
   ========================================================================== */

.events-main {
    padding-bottom: 80px;
}

/* --- Hero Carousel --- */
.events-main__carousel {
    position: relative;
    margin-bottom: 4rem;
    padding-bottom: 3rem;
    box-shadow: 0 34px 34px rgba(0, 0, 0, 0.05);
}

.events-main__carousel-inner {
    width: 93%;
    margin: 0 auto;
}

/* Static fallback hero (no current hero events) — no arrows, so drop the
   room reserved for them. */
.events-main__carousel--fallback {
    padding-bottom: 0;
}

.events-main__carousel-slider .splide__slide {
    position: relative;
    overflow: hidden;
}

/* Image grid within each slide — layout & ratios from shared .ccs-image-grid in block-base.css */

.events-main__slide-grid-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Event info overlay — constrained to main image only */
.events-main__slide-grid-item--main {
    position: relative;
}

.events-main__slide-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 80px 48px 40px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
    color: var(--ccs-color-white);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1;
    border-radius: 0 0 var(--ccs-radius-md) var(--ccs-radius-md);
}

.events-main__slide-venue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ccs-font-body);
    font-size: var(--ccs-text-xs);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
}

.events-main__slide-venue .ccs-icon svg {
    color: rgba(255, 255, 255, 0.8);
}

.events-main__slide-title {
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-2xl);
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
}

/* The title is the slide's link into the event. It sits on the dark gradient,
   so pin :link/:visited explicitly (browsers colour <a> by default). */
.events-main__slide-title a,
.events-main__slide-title a:link,
.events-main__slide-title a:visited {
    color: inherit;
    text-decoration: none;
}

.events-main__slide-title a:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.events-main__slide-title a:focus-visible {
    outline: 2px solid var(--ccs-color-white);
    outline-offset: 4px;
    border-radius: 2px;
}

.events-main__slide-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.events-main__slide-meta .event-meta__item {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--ccs-text-xs);
}

.events-main__slide-meta .ccs-icon svg {
    color: rgba(255, 255, 255, 0.8);
}

.events-main__slide-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

/* Overlay button overrides — buttons on dark gradient */
.events-main__slide-overlay .ccs-btn--primary,
.events-main__slide-overlay .ccs-btn--primary:link,
.events-main__slide-overlay .ccs-btn--primary:visited,
.events-main__slide-overlay .ccs-btn--primary:hover {
    color: var(--ccs-color-black);
}

.events-main__slide-overlay .ccs-btn--secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--ccs-color-white);
    --ccs-btn-hover-fill: var(--ccs-color-white);
}

.events-main__slide-overlay .ccs-btn--secondary:hover {
    color: var(--ccs-color-black);
}

/* Disabled ("RSVPs Closed") on the dark gradient — the light-gray default would
   vanish. Solid white text on the darkened panel keeps it well above AA. */
.events-main__slide-overlay .ccs-btn--disabled,
.events-main__slide-overlay .ccs-btn--disabled:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--ccs-color-white);
}

/* Arrow nav uses shared .ccs-slider-nav / .ccs-slider-arrow from block-base.css */

/* --- 2-Column Grid: Filter By (left) | Featured + Upcoming (right) --- */
.events-main__grid {
    display: grid;
    grid-template-columns: 275px 1fr;
    gap: 40px;
    width: 93%;
    margin: 0 auto;
    padding: 0 0 40px;
}

/* Right column: Featured stacked above Upcoming */
.events-main__col-right {
    display: flex;
    flex-direction: column;
    gap: 48px;
    min-width: 0;
}

.events-main__col-heading {
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-lg);
    font-weight: 700;
    margin: 0 0 24px;
}

/* --- Filter By Column --- */
.events-main__col-filters {
    min-width: 0;
}

/* Search — uses shared .ccs-search / .ccs-input from block-base.css */
.events-main__search {
    margin-bottom: 24px;
}

.events-main__filter-group {
    margin-bottom: 24px;
}


.events-main__filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.events-main__filter-list li:first-child {
    border-top: none;
}

.events-main__filter-list a {
    font-family: var(--ccs-font-body);
    font-size: var(--ccs-text-sm);
    color: var(--ccs-color-text);
    text-decoration: none;
    padding: 0.25rem 0;
    display: block;
    transition: var(--ccs-transition);
}

.events-main__filter-list a:hover {
    color: var(--ccs-color-text-muted);
    padding-left: 4px;
}

.events-main__filter-list a:focus-visible {
    outline: 2px solid var(--ccs-color-primary);
    outline-offset: 2px;
    border-radius: var(--ccs-radius-sm);
}

/* --- Featured Section --- */
.events-main__featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.events-main__featured-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--ccs-color-text);
    transition: var(--ccs-transition);
}

.events-main__featured-card:hover .events-main__featured-image {
    transform: scale(1.03);
}

.events-main__featured-card:focus-visible {
    outline: 2px solid var(--ccs-color-primary);
    outline-offset: 4px;
    border-radius: var(--ccs-radius-md);
}

/* overflow/radius come from the shared .ccs-media class on the wrap
   (also opts it into the scroll clip-wipe reveal) */
.events-main__featured-image-wrap {
    margin-bottom: 8px;
}

.events-main__featured-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform var(--ccs-transition);
}

.events-main__featured-info {
    padding: 4px 0;
}

.events-main__featured-title,
.events-main__upcoming-title {
    font-family: var(--ccs-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    line-height: 1.1em;
}

.events-main__featured-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.events-main__featured-meta .event-meta__item {
    font-size: var(--ccs-text-xs);
    gap: 4px;
}

.events-main__featured-chips {
    margin-top: 4px;
}

/* --- Upcoming Events Section --- */
.events-main__upcoming-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.events-main__upcoming-item {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--ccs-color-border-light);
    text-decoration: none;
    color: var(--ccs-color-text);
    transition: var(--ccs-transition);
}

.events-main__upcoming-item:first-child {
    border-top: 1px solid var(--ccs-color-border-light);
}

.events-main__upcoming-item:hover {
    background: var(--ccs-color-gray-light);
    padding-left: 8px;
    padding-right: 8px;
    margin-left: -8px;
    margin-right: -8px;
    border-radius: var(--ccs-radius-sm);
}

.events-main__upcoming-item:focus-visible {
    outline: 2px solid var(--ccs-color-primary);
    outline-offset: 2px;
    border-radius: var(--ccs-radius-sm);
}

.events-main__upcoming-thumb {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: var(--ccs-radius-sm);
    display: block;
}

.events-main__upcoming-info {
    min-width: 0;
}

.events-main__upcoming-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.events-main__upcoming-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.375rem;
}

.events-main__upcoming-meta .event-meta__item {
    font-size: var(--ccs-text-xs);
    gap: 4px;
}

.events-main__upcoming-chips {
    margin-top: 4px;
}

.events-main__upcoming-footer {
    margin-top: 24px;
}

/* ==========================================================================
   All Events List View (.events-list)
   ========================================================================== */

.events-list {
    padding: 0 0 5rem;
}

.events-list .ccs-page-intro {
    margin-bottom: 0;
}

/* Header — page-intro pattern, full width with inner containment */
.events-list__header {
    padding-bottom: 1rem;
}

.events-list__header-inner {
    width: 93%;
    margin: 0 auto;
}

/* Shadow divider — full width, same as carousel/single event */
.events-list__divider {
    padding-bottom: 3rem;
    margin-bottom: 4rem;
    box-shadow: 0 34px 34px rgba(0, 0, 0, 0.05);
}

/* Body — contained content below the divider */
.events-list__body {
    width: 93%;
    margin: 0 auto;
}

/* Filter bar — search, dropdown, and button on one line */
.events-list__filters {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 40px;
}

/* Search & select — uses shared .ccs-search / .ccs-input / .ccs-select from block-base.css */
.events-list__search {
    flex: 1 1 0%;
    min-width: 0;
}

.events-list__category-select {
    width: auto;
    flex: 0 0 auto;
}

.events-list__filter-submit {
    flex: 0 0 auto;
}

/* Event rows */
.events-list__events {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.events-list__event {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 32px;
    align-items: start;
    padding: 32px 0;
    border-bottom: 1px solid var(--ccs-color-border-light);
}

.events-list__event:first-child {
    border-top: 1px solid var(--ccs-color-border-light);
}

.events-list__event-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.events-list__event-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.events-list__event-title {
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-xl);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.events-list__event-title a {
    color: var(--ccs-color-text);
    text-decoration: none;
    transition: var(--ccs-transition);
}

.events-list__event-title a:hover {
    color: var(--ccs-color-text-muted);
}

.events-list__event-excerpt {
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-base);
    font-weight: 500;
    color: var(--ccs-color-gray-dark);
    margin: 0 0 1rem;
    line-height: 1.4em;
    max-width: 1080px;
}

/* overflow/radius come from the shared .ccs-media class on the wrap
   (also opts it into the scroll clip-wipe reveal) */

.events-list__event-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

/* Pagination */
.events-list__pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
}

.events-list__pagination a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-sm);
    font-weight: 700;
    color: var(--ccs-color-text);
    text-decoration: none;
    padding: 10px 20px;
    border: 1px solid var(--ccs-color-border);
    border-radius: var(--ccs-radius-pill);
    transition: var(--ccs-transition);
}

.events-list__pagination a:hover {
    background: var(--ccs-color-black);
    color: var(--ccs-color-white);
    border-color: var(--ccs-color-black);
}

/* No events */
.events-list__no-events {
    text-align: center;
    padding: 80px 24px;
    font-family: var(--ccs-font-body);
    font-size: var(--ccs-text-md);
    color: var(--ccs-color-text-muted);
}

/* ==========================================================================
   Single Event (.events-single)
   ========================================================================== */

div.events-single {
    padding: 0 0 5rem;
}

.events-single__upper {
    width: 93%;
    margin: 0 auto;
}

/* Image gallery grid — layout & ratios from shared .ccs-image-grid in block-base.css */
.events-single__gallery {
    margin-bottom: 2rem;
}

.events-single__gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.events-main__filter-label,
.events-single__venue-label,
.events-single__calendars-label,
.events-single__sidebar-heading {
    font-family: var(--ccs-font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #000000;
    margin: 0 0 0.5rem;
}

.events-single__title {
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-3xl);
    font-weight: 700;
    margin: 0 0 24px;
    line-height: 1.1;
}

.events-single__actions {
    margin-bottom: 32px;
}

/* Two-column layout */
.events-single__body {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 48px;
    align-items: start;
}

/* Left column */
.events-single__content {
    min-width: 0;
}

.events-single__content-heading {
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-xl);
    font-weight: 700;
    margin: 0 0 16px;
}

.events-single__content-chips {
    margin-bottom: 24px;
}

.events-single__content-text {
    font-family: var(--ccs-font-body);
    font-size: var(--ccs-text-base);
    line-height: 1.7;
}

.events-single__content-text p {
    margin: 0 0 1.5em;
}

.events-single__content-text p:last-child {
    margin-bottom: 0;
}

.events-single__calendars {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--ccs-color-border-light);
}

/* ==========================================================================
   RSVP block (Event Tickets v2) — .events-single__rsvp
   Injected into the #rsvp container on single event pages.
   Markup: event-tickets/src/views/v2/rsvp/**

   TWO THINGS TO KNOW BEFORE EDITING:

   1. TOKENS. Event Tickets v2 is built on --tec-* design tokens, so the cheap
      way to brand it is redefining those on our container instead of fighting
      ~200 rules. Custom properties inherit, so every plugin rule that reads
      var(--tec-…) resolves to our value with no specificity war. That block is
      what turns their indigo (#334aff) — going-check circle, message banner,
      icons, focus rings — into CCS colours.

   2. SPECIFICITY. rsvp.css is enqueued at render time, so it loads AFTER
      events.css and wins every tie. Its rules are `.event-tickets .tribe-…`
      (0,2,0), so a `.events-single__rsvp .tribe-…` rule (also 0,2,0) LOSES.
      Every rule below therefore goes through `.events-single__rsvp
      .event-tickets` (0,3,0) — `.event-tickets` is the plugin's own wrapper
      div inside #rsvp, always present. Don't drop it to "simplify".

   Plugin defaults that specifically had to be undone (all 0,2,0):
     .tribe-tickets__rsvp            padding: spacer-10 grid-gutter-small-half  (asymmetric)
     .tribe-tickets__rsvp-actions    border-top dashed; margin-top/padding spacer-10
     .tribe-tickets__rsvp-actions-wrapper  border-left dashed; width calc(); text-align center
   ========================================================================== */

.events-single__rsvp,
.events-tickets {
    /* Type */
    --tec-font-family-sans-serif: var(--ccs-font-body);

    /* Text */
    --tec-color-text-primary: var(--ccs-color-black);
    --tec-color-text-secondary: var(--ccs-color-text-muted);

    /* Accent — drives the going-check circle, links, focus and icon states.
       Black rather than brand yellow: the check glyph is a baked white SVG,
       and white-on-yellow is ~1.3:1. Yellow stays the CTA fill. */
    --tec-color-accent-primary: var(--ccs-color-black);
    --tec-color-accent-primary-hover: var(--ccs-color-black);
    --tec-color-accent-primary-active: var(--ccs-color-black);
    --tec-color-accent-secondary: var(--ccs-color-black);
    --tec-color-link-accent: var(--ccs-color-black);
    --tec-color-link-accent-hover: var(--ccs-color-black);

    /* Notice tint (their lavender wash) → pastel yellow; black text on it is 15.5:1 */
    --tec-color-accent-primary-background: var(--ccs-color-pastel-yellow);

    /* Icons */
    --tec-color-icon-active: var(--ccs-color-black);
    --tec-color-icon-primary: var(--ccs-color-text-muted);
    --tec-color-icon-focus: var(--ccs-color-black);

    /* Surfaces */
    --tec-color-background: var(--ccs-color-white);
    --tec-color-border-default: rgba(0, 0, 0, 0.12);
    --tec-color-border-secondary: rgba(0, 0, 0, 0.08);
    --tec-border-radius-default: var(--ccs-radius-md);
}

/* Event Tickets injects this right under the Calendars chips, so it needs the
   same separation the Calendars block gives itself (2rem + 1.5rem).
   Gated on :has(*) because the #rsvp div is ALWAYS output — it's the anchor
   target for the RSVP buttons — and is empty on events with no tickets; an
   unconditional margin would leave a dead gap under Calendars on those.
   :empty can't be used here: the PHP leaves whitespace inside the div. */
.events-single__rsvp {
    padding-top: 0;
}

.events-single__rsvp:has(*) {
    margin-top: 2rem;
    padding-top: 1.5rem;
}

.events-single__rsvp .tribe-related-events,
.events-single__rsvp .tribe-events-related-events-title {
    display: none;
}

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-wrapper {
    border: none;
    box-shadow: none;
    padding: 0;
}

.events-single__rsvp .event-tickets .tribe-tickets-loader__dots {
    display: none;
}

/* --------------------------------------------------------------------------
   The RSVP card — white, 2px black border, even 2rem padding on all sides.
   Two columns on desktop (details | actions), stacked on mobile.
   -------------------------------------------------------------------------- */

/* Single column — the RSVP action drops below the details rather than sitting
   in a narrow right-hand column (which is what wrapped "You Are Going" and
   squeezed the button). */
.events-single__rsvp .event-tickets .tribe-tickets__rsvp {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
    margin: 0;
    padding: 2rem;
    background: var(--ccs-color-white);
    border: 2px solid var(--ccs-color-black);
    border-radius: var(--ccs-radius-lg);
}

/* Both children carry .tribe-common-g-col — a flex-grid column with gutter
   padding and width:100%. Zero it and let the grid own the layout. */
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-details-wrapper,
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-actions-wrapper {
    min-width: 0;
    width: auto;
    margin: 0;
    border: 0;
    text-align: left;
    justify-content: flex-start;
}

/* The card owns the padding — the columns shouldn't add gutters on top.
   This needs 0,5,0: the winning plugin rule is
   `.tribe-common--breakpoint-medium.tribe-common .tribe-common-g-row--gutters
   > .tribe-common-g-col` (0,4,0 — TEC adds that breakpoint class at runtime),
   so zeroing padding on the wrapper classes alone (0,3,0) loses. Repeating the
   row class here is what buys the extra weight. */
.events-single__rsvp .event-tickets .tribe-tickets__rsvp.tribe-common-g-row--gutters > .tribe-common-g-col,
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-ar.tribe-common-g-row--gutters > .tribe-common-g-col {
    padding-left: 0;
    padding-right: 0;
}

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

/* --- Typography --- */

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-title {
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-lg);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ccs-color-black);
    margin: 0;
}

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-description {
    font-family: var(--ccs-font-body);
    font-size: var(--ccs-text-base);
    line-height: 1.5;
    color: var(--ccs-color-text-muted);
    margin: 0;
}

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-description p {
    margin: 0;
}

/* "1 GOING" — number + label on one baseline */
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-attendance {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.25rem 0 0;
}

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-attendance-number {
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-xl);
    font-weight: 700;
    line-height: 1;
    color: var(--ccs-color-black);
    margin: 0;
}

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-attendance-going {
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ccs-color-text-muted);
    margin: 0;
}

/* "Last day to RSVP" / "3 left" */
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-availability {
    font-family: var(--ccs-font-body);
    font-size: var(--ccs-text-sm);
    color: var(--ccs-color-text-muted);
    margin: 0.25rem 0 0;
}

/* --- Actions column --- */

/* Undo the dashed rule + spacer-10 padding/margin the plugin puts here. */
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
}

/* "RSVP Here" label above the button */
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-actions-rsvp > span {
    display: block;
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-sm);
    font-weight: 700;
    color: var(--ccs-color-black);
    margin: 0 0 0.5rem;
    white-space: nowrap;
}

/* Primary CTA — brand yellow pill, black label (15.5:1). The plugin's
   .tribe-common-c-btn sets colour from --tec-color-background on hover, which
   our token maps to white — so pin the label black in every state. */
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-actions-button-going {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0.75rem 1.75rem;
    font-family: var(--ccs-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--ccs-color-primary);
    color: var(--ccs-color-black);
    border: 2px solid var(--ccs-color-primary);
    border-radius: var(--ccs-radius-pill);
    cursor: pointer;
    transform: none;
    transition: background var(--ccs-transition), border-color var(--ccs-transition);
}

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-actions-button-going:hover,
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-actions-button-going:focus,
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-actions-button-going:active {
    background: var(--ccs-color-white);
    color: var(--ccs-color-black);
    border-color: var(--ccs-color-black);
    transform: none;
}

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-actions-button-going:focus-visible {
    outline: 2px solid var(--ccs-color-black);
    outline-offset: 2px;
}

/* --- Confirmed state: "You Are Going" --- */

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-actions-success-going {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    text-align: left;
}

/* Circle background comes from --tec-color-accent-primary (black); the check
   glyph is a white SVG baked into the plugin's background-image. */
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-actions-success-going-check-icon {
    width: 2rem;
    height: 2rem;
    margin: 0;
    flex-shrink: 0;
}

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-actions-success-going-text {
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-base);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ccs-color-black);
    margin: 0;
    text-transform: none;
    white-space: nowrap;
}

/* "Not going?" toggle under the confirmation */
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-actions-success-going-toggle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
}

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-actions-success-going-toggle-label {
    font-family: var(--ccs-font-body);
    font-size: var(--ccs-text-sm);
    color: var(--ccs-color-text-muted);
    cursor: pointer;
}

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-actions-success-going-toggle-label-underline {
    text-decoration: underline;
    text-underline-offset: 0.15em;
    color: var(--ccs-color-black);
}

/* --- Message banner (success / error / must-login) --- */

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-message {
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    margin: 0 0 1.5rem;
    border-radius: var(--ccs-radius-md);
    font-family: var(--ccs-font-body);
    font-size: var(--ccs-text-sm);
    line-height: 1.5;
    color: var(--ccs-color-black);
}

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-message--error,
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-message--error.tribe-tickets__rsvp-message {
    background-color: var(--ccs-color-pastel-coral);
}

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-message--success-icon,
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-message--error-icon,
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-message--must-login-icon {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    flex-shrink: 0;
}

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-message-link {
    color: var(--ccs-color-black);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* --- "Your RSVPs" attendee list --- */

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-attendees,
.events-single__rsvp .event-tickets .tec-tickets__attendees-list-wrapper {
    margin: 2rem 0 0;
    padding: 0;
}

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-attendees-wrapper {
    margin: 0;
    padding: 0;
}

.events-single__rsvp .event-tickets .tec-tickets__attendees-list-wrapper h4 {
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-lg);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ccs-color-black);
    margin: 0 0 1rem;
}

.events-single__rsvp .event-tickets .tec-tickets__attendees-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.events-single__rsvp .event-tickets .tec-tickets__attendees-list-item {
    padding: 1.25rem 1.5rem;
    background: var(--ccs-color-white);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--ccs-radius-md);
}

.events-single__rsvp .event-tickets .tec-tickets__attendees-list-item-attendee-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-family: var(--ccs-font-body);
    font-size: var(--ccs-text-sm);
    color: var(--ccs-color-text-muted);
}

/* Attendee name is the first child and the emphasis of the row. */
.events-single__rsvp .event-tickets .tec-tickets__attendees-list-item-attendee-details > *:first-child {
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-base);
    font-weight: 700;
    color: var(--ccs-color-black);
}

/* "You have 1 RSVP for this Event. View RSVP" */
.events-single__rsvp .tribe-link-view-attendee {
    font-family: var(--ccs-font-body);
    font-size: var(--ccs-text-sm);
    color: var(--ccs-color-text-muted);
    margin: 0 0 1.5rem;
}

.events-single__rsvp .tribe-link-view-attendee a {
    color: var(--ccs-color-black);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* --------------------------------------------------------------------------
   RSVP form — rendered INSTEAD of the card when "Going" is clicked
   (v2/rsvp/content.php renders one or the other, never both), so it needs its
   own panel treatment rather than a slot inside the card.
   -------------------------------------------------------------------------- */

/* The panel. NOTE: there is NO `.tribe-tickets__rsvp-form` element — the <form>
   in v2/rsvp/form/form.php carries only a name attribute, and the outer div is
   `.tribe-tickets__rsvp-form-wrapper`. Styling the former silently matched
   nothing, which is how the 2px border went missing on this step. */
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-form-wrapper,
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-ar {
    width: 100%;
    margin: 0;
    padding: 2rem;
    background: var(--ccs-color-white);
    border: 2px solid var(--ccs-color-black);
    border-radius: var(--ccs-radius-lg);
}

/* Column layout for the simple form only — .tribe-tickets__rsvp-ar is a
   g-row (form + sidebar) and must keep its own row direction. */
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-form-wrapper,
.events-single__rsvp .event-tickets .tribe-tickets__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-form-title,
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-ar-form-title {
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-base);
    font-weight: 700;
    color: var(--ccs-color-black);
    margin: 0 0 0.5rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.events-single__rsvp .event-tickets .tribe-tickets__form-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.events-single__rsvp .event-tickets .tribe-tickets__form-field-label,
.events-single__rsvp .event-tickets .tribe-common-form-control-text__label {
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-sm);
    font-weight: 700;
    color: var(--ccs-color-black);
}

/* Text inputs — match .ccs-input standards */
.events-single__rsvp .event-tickets .tribe-common-form-control-text__input,
.events-single__rsvp .event-tickets .tribe-tickets__form-field-input,
.events-single__rsvp .event-tickets input[type="text"],
.events-single__rsvp .event-tickets input[type="email"],
.events-single__rsvp .event-tickets input[type="number"],
.events-single__rsvp .event-tickets select {
    width: 100%;
    height: 40px;
    line-height: 28px;
    padding: 0 1rem;
    border: 2px solid transparent;
    border-radius: var(--ccs-radius-md);
    outline: none;
    background-color: var(--ccs-color-gray-light);
    color: var(--ccs-color-black);
    font-family: var(--ccs-font-body);
    font-size: var(--ccs-text-sm);
    box-shadow: none;
    transition: border-color var(--ccs-transition), box-shadow var(--ccs-transition);
}

.events-single__rsvp .event-tickets input::placeholder {
    color: #9e9ea7;
}

.events-single__rsvp .event-tickets .tribe-common-form-control-text__input:hover,
.events-single__rsvp .event-tickets .tribe-tickets__form-field-input:hover,
.events-single__rsvp .event-tickets input[type="text"]:hover,
.events-single__rsvp .event-tickets input[type="email"]:hover,
.events-single__rsvp .event-tickets input[type="number"]:hover,
.events-single__rsvp .event-tickets select:hover {
    border-color: rgba(0, 0, 0, 0.15);
}

.events-single__rsvp .event-tickets .tribe-common-form-control-text__input:focus,
.events-single__rsvp .event-tickets .tribe-tickets__form-field-input:focus,
.events-single__rsvp .event-tickets input[type="text"]:focus,
.events-single__rsvp .event-tickets input[type="email"]:focus,
.events-single__rsvp .event-tickets input[type="number"]:focus,
.events-single__rsvp .event-tickets select:focus {
    border-color: var(--ccs-color-primary);
    background-color: var(--ccs-color-white);
    box-shadow: 0 0 0 4px rgba(255, 223, 28, 0.15);
}

.events-single__rsvp .event-tickets input[type="number"] {
    max-width: 120px;
}

/* Button row. DOM order is cancel-then-submit (v2/rsvp/form/buttons.php) and
   the plugin right-aligns it; flip with `order` so the primary action reads
   first, left-aligned like the rest of the site. */
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-form-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin: 0.5rem 0 0;
    padding: 0;
}

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-form-buttons > * {
    margin: 0;
}

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-form-button--submit {
    order: 1;
}

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-form-button--cancel {
    order: 2;
}

/* Submit / Finish — primary pill */
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-form-button,
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-form-button--submit,
.events-single__rsvp .event-tickets button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0.75rem 1.75rem;
    font-family: var(--ccs-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    background: var(--ccs-color-primary);
    color: var(--ccs-color-black);
    border: 2px solid var(--ccs-color-primary);
    border-radius: var(--ccs-radius-pill);
    cursor: pointer;
    transform: none;
    transition: background var(--ccs-transition), border-color var(--ccs-transition), color var(--ccs-transition);
}

.events-single__rsvp .event-tickets .tribe-tickets__rsvp-form-button--submit:hover,
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-form-button--submit:focus,
.events-single__rsvp .event-tickets button[type="submit"]:hover,
.events-single__rsvp .event-tickets button[type="submit"]:focus {
    background: var(--ccs-color-white);
    color: var(--ccs-color-black);
    border-color: var(--ccs-color-black);
    transform: none;
}

/* Cancel — secondary pill (plugin styles it as a bare text link) */
.events-single__rsvp .event-tickets button[type="reset"],
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-form-button--cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0.75rem 1.75rem;
    font-family: var(--ccs-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    background: transparent;
    color: var(--ccs-color-black);
    border: 2px solid var(--ccs-color-black);
    border-radius: var(--ccs-radius-pill);
    cursor: pointer;
    transform: none;
    transition: background var(--ccs-transition), color var(--ccs-transition);
}

.events-single__rsvp .event-tickets button[type="reset"]:hover,
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-form-button--cancel:hover,
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-form-button--cancel:focus {
    background: var(--ccs-color-black);
    color: var(--ccs-color-white);
    transform: none;
}

.events-single__rsvp .event-tickets button[type="reset"]:focus-visible,
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-form-button--cancel:focus-visible,
.events-single__rsvp .event-tickets button[type="submit"]:focus-visible {
    outline: 2px solid var(--ccs-color-black);
    outline-offset: 2px;
}

/* Attendee-registration quantity stepper */
.events-single__rsvp .event-tickets .tribe-tickets__rsvp-ar-quantity-input-number {
    font-family: var(--ccs-font-heading);
    font-weight: 700;
    color: var(--ccs-color-black);
}

/* Right sidebar */
.events-single__sidebar {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--ccs-color-gray-light);
    border-radius: var(--ccs-radius-lg);
    padding: 32px;
}

.events-single__sidebar-section {
    padding: 20px 0;
    border-bottom: 1px solid var(--ccs-color-border-light);
}

.events-single__sidebar-section:first-child {
    padding-top: 0;
}

.events-single__sidebar-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}


.events-single__sidebar-text {
    font-family: var(--ccs-font-body);
    font-size: var(--ccs-text-base);
    line-height: 1.5;
    margin: 0 0 8px;
}

.events-single__sidebar-text:last-child {
    margin-bottom: 0;
}

.events-single__sidebar-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.events-single__sidebar-link {
    font-family: var(--ccs-font-body);
    font-size: var(--ccs-text-sm);
    color: var(--ccs-color-text);
    text-decoration: underline;
    transition: var(--ccs-transition);
}

.events-single__sidebar-link:hover {
    color: var(--ccs-color-text-muted);
}

.events-single__cal-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

/* Full-width shadow divider between content and featured events */
.events-single__divider {
    padding-bottom: 3rem;
    margin-bottom: 4rem;
    box-shadow: 0 34px 34px rgba(0, 0, 0, 0.05);
}

/* Featured events section on single event page — full width */
.events-single__featured {
    padding-bottom: 2rem;
}

.events-single__featured-inner {
    width: 93%;
    margin: 0 auto;
}

.events-single__featured-heading {
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-lg);
    font-weight: 700;
    margin: 0 0 1.5rem;
}

/* ==========================================================================
   Tickets / RSVP Manager (.events-tickets)
   /event/{slug}/tickets/ — Event Tickets' "My Tickets" screen.
   Template: {theme}/tribe-events/tickets/orders.php

   The inner .tribe-* / .tec-tickets__* classes come from the plugin's
   sub-templates (orders-rsvp.php, my-tickets/*.php) and can't be renamed, so
   they're restyled here.

   SPECIFICITY: Event Tickets enqueues its CSS from `the_content()` (see
   tribe_asset_enqueue_group('tribe-tickets-page-assets')), i.e. AFTER
   events.css — so it wins every tie. rsvp-v1.css is the aggressive one:

     .tribe-submit-tickets-form                          { margin-top: 20px }   0,1,0
     .tribe-tickets__tickets-page-wrapper                { border-top; padding-top } 0,1,0
     .tribe-rsvp-list > .tribe-item                      { display:flex; border; … }  0,2,0
     .tribe-tickets__form .tribe-answer label            { display: block }     0,2,0
     .tribe-tickets__form .tribe-answer select.tribe-answer-select { … }        0,3,1
     .tribe-rsvp .tec-tickets__my-tickets-list-title     { … }                  0,2,0

   Everything below is therefore prefixed `.events-tickets .events-tickets__panel`
   (0,2,0 on its own) so each rule clears its plugin counterpart outright rather
   than tying. Don't "simplify" these selectors — the extra class is load-bearing.
   ========================================================================== */

.events-tickets__body {
    margin-bottom: var(--wp--preset--spacing--lg);
}

/* No margin — .ccs-header__left is a flex column and its 1rem gap spaces the
   eyebrow / heading / schedule stack. */
.events-tickets__schedule {
    margin: 0;
}

/* Panel wrapping the whole form. The page sits in the standard 93% gutter
   (ccs-contain--default) so it lines up with the breadcrumb; the panel caps its
   own width and stays left-aligned rather than centering in a wide viewport.
   The border-top/padding-top resets undo .tribe-tickets__tickets-page-wrapper. */
.events-tickets .events-tickets__panel {
    max-width: 48rem;
    margin-left: 0;
    padding: 2rem;
    border-top: 0;
    background: var(--ccs-color-gray-light);
    border-radius: var(--ccs-radius-lg);
}

.events-tickets__submit,
.events-tickets__footer,
.events-tickets .tribe-events-notices {
    max-width: 48rem;
    margin-left: 0;
}

/* --- Purchaser group --- */

.events-tickets .tribe-rsvp + .tribe-rsvp {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* "Reserved by Name (email) on date" */
.events-tickets .events-tickets__panel .user-details {
    font-family: var(--ccs-font-body);
    font-size: var(--ccs-text-sm);
    line-height: 1.6;
    color: var(--ccs-color-text-muted);
    margin: 0 0 1.5rem;
}

.events-tickets .events-tickets__panel .user-details a {
    color: inherit;
    text-decoration: underline;
}

.events-tickets .events-tickets__panel .user-details a:hover {
    color: var(--ccs-color-black);
}

/* "RSVPs" / "Tickets" list heading */
.events-tickets .events-tickets__panel .tec-tickets__my-tickets-list-title-container {
    padding: 0;
    margin-bottom: 1rem;
}

.events-tickets .events-tickets__panel .tec-tickets__my-tickets-list-title {
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-lg);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ccs-color-black);
}

/* --- Attendee rows --- */

.events-tickets .events-tickets__panel .tribe-rsvp-list,
.events-tickets .events-tickets__panel .tribe-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.events-tickets .events-tickets__panel .tec__tickets-my-tickets-rsvp-attendee-list-wrapper {
    margin: 0;
}

/* rsvp-v1.css makes .tribe-item a flex row with `order` on its children, which
   reshuffles this markup. Back to normal flow — .tribe-answer does the row. */
.events-tickets .events-tickets__panel .tribe-rsvp-list > .tribe-item {
    display: block;
    min-height: 0;
    margin: 0;
    padding: 1.5rem;
    background: var(--ccs-color-white);
    border: 0;
    border-radius: var(--ccs-radius-md);
}

.events-tickets .events-tickets__panel .tribe-rsvp-list > .tribe-item:last-child {
    margin-bottom: 0;
    border: 0;
}

.events-tickets .events-tickets__panel .tribe-rsvp-list > .tribe-item > div {
    flex: none;
    order: initial;
    white-space: normal;
}

/* Restricted RSVPs (past deadline / capacity) — readable, clearly inert. */
.events-tickets .events-tickets__panel .tribe-rsvp-list > .tribe-item.tribe-disabled {
    background: var(--ccs-color-gray-light);
    opacity: 0.7;
}

.events-tickets .events-tickets__panel .tribe-disabled select {
    cursor: not-allowed;
}

/* "Attendee 1" */
.events-tickets .events-tickets__panel .list-attendee {
    display: block;
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ccs-color-text-muted);
    margin-bottom: 0.75rem;
}

/* Label + select + type on one row */
.events-tickets .events-tickets__panel .tribe-answer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    font-family: var(--ccs-font-body);
}

/* rsvp-v1.css sets `display: block` on this label (0,2,0) — that, plus the
   select's width, is what pushed "RSVP:" onto its own line. */
.events-tickets .events-tickets__panel .tribe-answer label {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    font-family: var(--ccs-font-body);
    font-size: var(--ccs-text-base);
    font-weight: 500;
    line-height: 1.4;
    color: var(--ccs-color-black);
}

/* Matches .ccs-select in block-base.css. Must beat rsvp-v1.css's
   `.tribe-tickets__form .tribe-answer select.tribe-answer-select` (0,3,1) and
   tickets-forms.css's `.event-tickets .tribe-tickets__form select` (0,2,1) —
   including their explicit background-size and their own arrow image. */
.events-tickets .events-tickets__panel .tribe-answer select.tribe-answer-select {
    width: auto;
    min-width: 10rem;
    max-width: 100%;
    height: 40px;
    margin-left: 0;
    padding: 0 2.5rem 0 1rem;
    border: 2px solid transparent;
    border-radius: var(--ccs-radius-md);
    outline: none;
    background-color: var(--ccs-color-gray-light);
    color: var(--ccs-color-black);
    font-family: var(--ccs-font-body);
    font-size: var(--ccs-text-sm);
    line-height: 1.4;
    transition: border-color var(--ccs-transition), background-color var(--ccs-transition), box-shadow var(--ccs-transition);
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239e9ea7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: auto;
}

.events-tickets .events-tickets__panel .tribe-answer select.tribe-answer-select:hover {
    border-color: rgba(0, 0, 0, 0.15);
}

.events-tickets .events-tickets__panel .tribe-answer select.tribe-answer-select:focus {
    border-color: var(--ccs-color-primary);
    background-color: var(--ccs-color-white);
    box-shadow: 0 0 0 4px rgba(255, 223, 28, 0.15);
}

/* "Type: General Admission" */
.events-tickets .events-tickets__panel .ticket-type {
    font-family: var(--ccs-font-body);
    font-size: var(--ccs-text-sm);
    color: var(--ccs-color-text-muted);
}

.events-tickets .events-tickets__panel .tribe-answer .type-label {
    font-weight: 500;
    padding-right: 0.25rem;
}

/* --- Submit + footer --- */

/* rsvp-v1.css ships `.tribe-submit-tickets-form { margin-top: 20px }` at 0,1,0
   and loads later, so a bare .events-tickets__submit rule loses the tie.
   The button is a distinct step from the attendee list — give it real room. */
.events-tickets .events-tickets__submit {
    margin-top: 3rem;
}

.events-tickets .events-tickets__footer {
    margin-top: 2rem;
}

/* Re-assert the .ccs-btn pill: the submit button lives inside
   .tribe-tickets__form, which TEC styles from its later-loading sheets. */
.events-tickets .events-tickets__panel button.ccs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 0;
    padding: 0.75rem 1.5rem;
    border-radius: var(--ccs-radius-pill);
    font-family: var(--ccs-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    overflow: hidden;
    position: relative;
}

.events-tickets .events-tickets__panel button.ccs-btn--primary,
.events-tickets .events-tickets__panel button.ccs-btn--primary:hover,
.events-tickets .events-tickets__panel button.ccs-btn--primary:focus {
    background-color: var(--ccs-color-primary);
    border: 1px solid var(--ccs-color-primary);
    color: var(--ccs-color-black);
}

/* --- Notices (tribe_the_notices) --- */

.events-tickets .tribe-events-notices {
    margin: 0 0 2rem;
    padding: 1rem 1.25rem;
    background: var(--ccs-color-pastel-yellow);
    border-radius: var(--ccs-radius-md);
    font-family: var(--ccs-font-body);
    font-size: var(--ccs-text-sm);
    color: var(--ccs-color-black);
    list-style: none;
}

.events-tickets .tribe-events-notices li {
    list-style: none;
}

.events-tickets .tribe-events-notices p {
    margin: 0;
}

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

@media (max-width: 1100px) {
    .events-main__grid {
        grid-template-columns: 220px 1fr;
        gap: 28px;
    }

    .events-main__featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 960px) {
    /* Events Main — collapse to single column, filters become horizontal */
    .events-main__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .events-main__col-filters {
        order: -1;
    }

    .events-main__filter-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
    }

    .events-main__filter-list li {
        border-bottom: none;
        border-right: 1px solid var(--ccs-color-border-light);
        padding-right: 12px;
        margin-right: 12px;
    }

    .events-main__filter-list li:first-child {
        border-top: none;
    }

    .events-main__filter-list li:last-child {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
    }

    .events-main__slide-overlay {
        padding: 48px 32px 24px;
    }

    /* All Events */
    .events-list__event {
        grid-template-columns: 1fr 280px;
        gap: 24px;
    }

    /* Single Event */
    .events-single__body {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .events-single__sidebar {
        order: -1;
    }
}

@media (max-width: 768px) {
    /* Intro action rows (hero slide overlay on the landing, single-event
       header): buttons stack and fill the width on mobile. Desktop keeps
       the inline row. The share control is a wrapper around its .ccs-btn,
       so it stretches too. */
    .event-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .event-actions .ccs-btn,
    .event-actions [data-ccs-share] {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Match the site contain regime on mobile (100% + 16px gutter) instead
       of full-bleed — the carousel aligns with the rest of the content. */
    .events-main__carousel-inner {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Events Main — single column featured, stacked meta */
    .events-main__featured-grid {
        grid-template-columns: 1fr;
        /* Standardized stacked-card rhythm (token in plugin block-base.css) */
        row-gap: var(--ccs-grid-gap-mobile, 2rem);
    }

    .events-main__featured-meta,
    .events-main__upcoming-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    /* Base wrap & ratios handled by shared .ccs-image-grid in block-base.css */

    /* Events carousel: taller main image for overlay, absolute image fill */
    .events-main__slide-grid .ccs-image-grid__item--main {
        min-height: 500px;
    }

    .events-main__slide-grid-item--main > .events-main__slide-grid-image {
        position: absolute;
        inset: 0;
    }

    /* Overlay becomes in-flow — 350px of image always visible above */
    .events-main__slide-overlay {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        margin-top: 350px;
        padding: 32px 20px 20px;
    }

    /* Events side images: taller than shared default */
    .events-main__slide-grid .ccs-image-grid__item:not(.ccs-image-grid__item--main) {
        height: 200px;
    }

    .events-single__gallery .ccs-image-grid__item:not(.ccs-image-grid__item--main) {
        height: 200px;
    }


    /* All Events */
    .events-list__event {
        grid-template-columns: 1fr;
    }

    .events-list__event-image-wrap {
        order: -1;
    }

    .events-list__filters {
        flex-wrap: wrap;
    }

    .events-list__search {
        flex: 1 1 100%;
    }

    .events-list__category-select {
        flex: 1 1 auto;
        width: auto;
    }

    /* Single Event */
    .events-single__title {
        font-size: var(--ccs-text-2xl);
    }

    /* Tickets / RSVP manager — selectors carry the same .events-tickets__panel
       weight as the base rules so they still clear Event Tickets' later CSS. */
    .events-tickets .events-tickets__panel {
        padding: 1.25rem;
    }

    .events-tickets .events-tickets__panel .tribe-rsvp-list > .tribe-item {
        padding: 1.25rem;
    }

    /* Stack the RSVP label + select + type so the select isn't squeezed. */
    .events-tickets .events-tickets__panel .tribe-answer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .events-tickets .events-tickets__panel .tribe-answer label {
        width: 100%;
        justify-content: space-between;
    }

    .events-tickets .events-tickets__panel .tribe-answer select.tribe-answer-select {
        flex: 1 1 auto;
        min-width: 9rem;
    }

    .events-tickets .events-tickets__submit .ccs-btn,
    .events-tickets .events-tickets__footer .ccs-btn {
        width: 100%;
    }

    /* RSVP card — already single-column; just tighten the padding. Same
       .event-tickets weight as the base rules so it still clears rsvp.css. */
    .events-single__rsvp .event-tickets .tribe-tickets__rsvp {
        padding: 1.5rem;
    }

    .events-single__rsvp .event-tickets .tribe-tickets__rsvp-form-wrapper,
    .events-single__rsvp .event-tickets .tribe-tickets__rsvp-ar {
        padding: 1.5rem;
    }

    .events-single__rsvp .event-tickets .tribe-tickets__rsvp-actions-button-going,
    .events-single__rsvp .event-tickets .tribe-tickets__rsvp-form-button--submit,
    .events-single__rsvp .event-tickets .tribe-tickets__rsvp-form-button--cancel {
        width: 100%;
    }
}

@media (max-width: 480px) {
    /* .event-actions full-width stacking moved up to the ≤768px block. */

    .events-main__upcoming-item {
        grid-template-columns: 4rem 1fr;
        gap: 0.625rem;
    }

    .events-main__upcoming-thumb {
        width: 4rem;
        height: 4rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .events-main__featured-card:hover .events-main__featured-image {
        transform: none;
    }

    .events-main__carousel-slider .splide__slide {
        transition: none;
    }
}

/* ── Editor preview ─────────────────────────────────────────────────────────
   The block editor applies its own heading sizes (h1/h2/h3 etc.) that win
   specificity over the class-based font-size rules below — events titles
   end up oversized in the editor canvas. Mirror the frontend sizes scoped
   to `.editor-styles-wrapper`. */

.editor-styles-wrapper .events-main__slide-title {
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-2xl);
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
}

.editor-styles-wrapper .events-main__featured-title,
.editor-styles-wrapper .events-main__upcoming-title {
    font-family: var(--ccs-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1em;
    margin: 0 0 0.5rem;
}

.editor-styles-wrapper .events-list__event-title {
    font-family: var(--ccs-font-heading);
    font-size: var(--ccs-text-xl);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}