/**
 * ASB Events Card View — Figma Design Integration
 */

/* ============================================================
   Design tokens
   ============================================================ */
:root {
  --asb-color-green:        #039343;
  --asb-color-green-hover:  #8cc63e;
  --asb-color-level-pill:   #0083d4;
  --asb-color-pill-bg:      #d9d9d9;
  --asb-color-card-border:  #a4a4a4;
  --asb-color-address-text: #434040;
  --asb-color-muted:        #a4a4a4;
  --asb-color-text:         #000000;
  --asb-card-radius:        10px;
  --asb-card-border:        1px solid var(--asb-color-card-border);
  --asb-font:               'Inter', system-ui, -apple-system, sans-serif;
}

/* ============================================================
   Responsive visibility utilities
   ============================================================ */
.asb-desktop-only { display: inline; }
.asb-mobile-only  { display: none; }

/* ============================================================
   Listing container
   ============================================================ */
.asb-listing {
  background: #fcfcfc !important;
  max-width: 100%;
  margin: 0 auto !important;
  padding: 0.5em 32px !important;
  border-radius: 8px !important;
  font-family: var(--asb-font);
}

.asb-no-events {
  font-family: var(--asb-font);
  font-size: 1rem;
  color: var(--asb-color-muted);
  text-align: center;
  padding: 2rem 0;
}

/* ============================================================
   Result count
   ============================================================ */
.asb-result-count {
  font-family: var(--asb-font);
  font-size: 0.875rem;
  color: var(--asb-color-muted);
  margin-left: auto !important;
  text-align: right;
}

/* ============================================================
   Filter/sort state chips
   ============================================================ */
.asb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  max-width: 220px;
  background: #e8f3ec;
  border: 1px solid #039343;
  border-radius: 12px;
  font-family: var(--asb-font);
  font-size: 12px;
  font-weight: 500;
  color: #039343;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
}

.asb-chip__text {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.asb-chip--clearable {
  cursor: pointer;
  padding-right: 6px;
}

.asb-chip--clearable:hover {
  background: #d4eadd;
}

.asb-chip__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(3, 147, 67, 0.15);
  font-size: 9px;
  line-height: 1;
  transition: background 0.15s;
}

.asb-chip--clearable:hover .asb-chip__clear {
  background: rgba(3, 147, 67, 0.3);
}

.asb-chip__clear i {
  color: #039343;
  font-size: 9px;
}

/* ============================================================
   Search bar outer wrapper
   ============================================================ */
.asb-search-bar-outer {
  max-width: 100%;
  margin: 0 auto !important;
  padding: 16px 32px 0 !important;
  font-family: var(--asb-font);
}

/* ============================================================
   Sort bar
   ============================================================ */
.asb-sort-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.5rem !important;
  font-family: var(--asb-font);
}

.asb-sort-select-wrap {
  position: relative;
  display: inline-block;
}

.asb-sort-select-label {
  position: absolute;
  top: -8px;
  left: 8px;
  padding: 0 4px;
  background: #fcfcfc;
  font-size: 12px;
  color: var(--asb-color-address-text);
  pointer-events: none;
  z-index: 1;
  line-height: 1;
}

.asb-sort-select {
  height: 40px;
  border: 1px solid var(--asb-color-card-border) !important;
  border-radius: 5px !important;
  padding: 0 36px 0 12px !important;
  font-family: var(--asb-font);
  font-size: 14px;
  color: var(--asb-color-text) !important;
  background: #ffffff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 12px center !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  min-width: 165px;
  outline: none;
  margin: 0 !important;
}

.asb-sort-select:focus {
  border-color: var(--asb-color-green) !important;
}

.asb-order-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--asb-color-pill-bg);
  border: none !important;
  border-radius: 15px !important;
  padding: 7px 14px !important;
  font-family: var(--asb-font);
  font-size: 12px;
  color: var(--asb-color-text) !important;
  cursor: pointer;
  white-space: nowrap;
}

.asb-order-pill i {
  font-size: 12px;
  line-height: 1;
}

/* ============================================================
   Event list
   ============================================================ */
.asb-event-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  font-family: var(--asb-font);
}

/* ============================================================
   Event card — image always on left
   ============================================================ */
.asb-event-card {
  display: flex;
  background: #ffffff !important;
  border: var(--asb-card-border) !important;
  border-radius: var(--asb-card-radius) !important;
  min-height: 148px;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
  font-family: var(--asb-font);
}

.asb-event-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.asb-event-card__image {
  flex-shrink: 0;
  width: 256px;
  min-height: 148px;
  position: relative;
  background: #f0f0f0;
}

.asb-event-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   Card content — four semantic rows
   ============================================================ */
.asb-event-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 22px 12px 20px !important;
  min-width: 0;
}

/* ============================================================
   HEADER: event title + distance badge
   ============================================================ */
.asb-event-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.asb-event-card__title {
  font-family: var(--asb-font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--asb-color-text) !important;
  text-decoration: none !important;
  line-height: 1.25 !important;
  flex: 1;
  min-width: 0;
}

.asb-event-card__title:hover {
  text-decoration: underline !important;
}

.asb-event-card__distance {
  font-family: var(--asb-font);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
  line-height: 1.2;
  color: var(--asb-color-text) !important;
  flex-shrink: 0;
}

.asb-event-card__distance .fw-normal {
  display: block;
  font-weight: 400;
  font-size: 14px;
}

/* ============================================================
   WHERE: venue name — address / LGA
   ============================================================ */
.asb-event-card__where {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Reserve space for the icon so address and LGA share the same left edge */
  position: relative;
  padding-left: 19px !important;
}

.asb-event-card__address {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--asb-font);
  font-size: 14px;
  color: var(--asb-color-address-text) !important;
  line-height: 1.3;
}

.asb-event-card__address i {
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 13px;
  flex-shrink: 0;
  width: 13px;
  text-align: center;
  color: var(--asb-color-muted);
}

/* LGA sits on its own line, naturally aligned with the address text */
.asb-event-card__lga {
  display: block;
  font-family: var(--asb-font);
  font-size: 12px;
  font-style: italic;
  color: var(--asb-color-address-text);
  line-height: 1.3;
  color: grey;
  margin-left: 0 !important;
}

/* ============================================================
   WHEN + TYPE: date/day/time left | class type right
   ============================================================ */
.asb-event-card__when-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.asb-event-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6px;
  row-gap: 2px;
  font-family: var(--asb-font);
  font-size: 14px;
  line-height: 1.3;
  color: var(--asb-color-text) !important;
}

.asb-event-card__meta i {
  font-size: 13px;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  color: var(--asb-color-muted);
}

.asb-event-card__meta-nextdate {
  font-weight: 700;
}

.asb-event-card__meta-detail,
.asb-event-card__meta-duration {
  font-weight: 400;
  color: var(--asb-color-address-text);
}

.asb-event-card__type {
  font-family: var(--asb-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--asb-color-text) !important;
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================
   WHO: leader left | tags + level right
   ============================================================ */
.asb-event-card__who {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
}

.asb-event-card__leader {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--asb-font);
  font-size: 14px;
  line-height: 1.3;
  color: var(--asb-color-text) !important;
  flex-wrap: wrap;
}

.asb-event-card__leader i {
  font-size: 14px;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  color: var(--asb-color-muted);
}

.asb-event-card__leader-name {
  font-weight: 700;
}

/* Tags + level pill as a single row */
.asb-event-card__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Post tags: small linked text adjacent to level pill (desktop only) */
.asb-event-card__tags {
  font-family: var(--asb-font);
  font-size: 10px;
  line-height: 1.3;
  text-align: right;
  max-width: 220px;
}

.asb-event-tag {
  color: var(--asb-color-green) !important;
  text-decoration: none !important;
  font-size:10px;
  font-family: var(--asb-font);
}

.asb-event-tag:hover {
  text-decoration: underline !important;
}

.asb-tag-sep {
  font-size: 8px;
  color: var(--asb-color-green);
}

.asb-badge--level {
  display: inline-block;
  background: var(--asb-color-level-pill);
  color: #ffffff;
  font-family: var(--asb-font);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px !important;
  border-radius: 5px !important;
  white-space: nowrap;
  line-height: 1.3;
}

/* ============================================================
   Tablet  (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .asb-listing {
    max-width: 760px;
    padding: 24px 24px 40px !important;
  }

  .asb-search-bar-outer {
    max-width: 760px;
    padding: 16px 24px 0 !important;
  }

  .asb-event-card__image {
    width: 200px;
  }

  .asb-event-card__content {
    padding: 12px 18px 12px 16px !important;
  }

  .asb-event-card__title {
    font-size: 16px !important;
  }
}

/* ============================================================
   Mobile  (<768px, matches Figma iPhone frame)
   ============================================================ */
@media (max-width: 767px) {
  .asb-desktop-only { display: none; }
  .asb-mobile-only  { display: inline; }

  .asb-listing {
    max-width: 100%;
    margin: 0 !important;
    padding: 12px 8px 24px !important;
    border-radius: 0 !important;
  }

  .asb-search-bar-outer {
    max-width: 100%;
    margin: 0 !important;
    padding: 12px 12px 0 !important;
  }

  /* Compact card: narrow image strip, tight content */
  .asb-event-card {
    min-height: 110px;
  }

  .asb-event-card__image {
    width: 61px;
    min-height: 110px;
  }

  .asb-event-card__content {
    padding: 8px 10px 8px 8px !important;
    justify-content: flex-start;
    gap: 4px;
  }

  .asb-event-card__title {
    font-size: 14px !important;
  }

  .asb-event-card__distance {
    font-size: 12px;
  }

  .asb-event-card__distance .fw-normal {
    font-size: 11px;
    color: var(--asb-color-muted);
  }

  .asb-event-card__address {
    font-size: 10px;
  }

  .asb-event-card__meta {
    font-size: 12px;
  }

  .asb-event-card__meta-duration {
    font-size: 12px;
  }

  .asb-event-card__leader {
    font-size: 12px;
  }

  .asb-event-card__leader-phone {
    width: 100%;
    padding-left: 20px !important;
  }

  /* Mobile: keep icon inline and let address text flow to the edge */
  .asb-event-card__where {
    padding-left: 0 !important;
  }

  .asb-event-card__address i {
    position: static;
    margin-top: 2px;
  }

  .asb-event-card__type {
    font-size: 12px;
  }

  .asb-badge--level {
    font-size: 10px;
    padding: 3px 7px !important;
  }

  /* Sort bar: compact */
  .asb-sort-bar {
    gap: 0.5rem;
    margin-bottom: 14px !important;
  }

  .asb-sort-select {
    min-width: 130px;
    font-size: 13px;
    height: 36px;
  }

  .asb-order-pill {
    padding: 6px 10px !important;
    font-size: 11px;
  }
}

/* ============================================================
   Table view — screen styles
   ============================================================ */
.asb-table-wrapper {
  font-family: var(--asb-font);
}

.asb-table-listing {
  background: #fcfcfc;
  max-width: 100%;
  padding: 16px 24px 32px;
  font-family: var(--asb-font);
  overflow-x: auto;
}

/* Controls bar */
.asb-table-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--asb-color-card-border);
  margin-bottom: 12px;
}

.asb-table-controls__left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.asb-table-controls--show {
  justify-content: flex-start;
  border-bottom: none;
  padding: 8px 0;
  gap: 16px;
}

/* Dropdowns */
.asb-table-dropdown {
  position: relative;
  display: inline-block;
}

.asb-table-dropdown__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 180px;
  max-width: 260px;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--asb-color-card-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  margin-top: 4px;
  font-family: var(--asb-font);
}

.asb-table-dropdown__panel button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 14px !important;
  font-family: var(--asb-font);
  font-size: 12px;
  background: #fff;
  border: none !important;
  color: var(--asb-color-text) !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.asb-table-dropdown__panel button:hover,
.asb-table-dropdown__panel button.asb-table-action-btn--active {
  background: var(--asb-color-green) !important;
  color: #fff !important;
}

.asb-table-col-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  color: var(--asb-color-text);
}

.asb-table-col-toggle:hover {
  background: #f5f5f5;
}

.asb-table-col-toggle input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
}

.asb-table-btn {
  font-family: var(--asb-font);
  font-size: 12px;
  padding: 5px 14px !important;
  border: 1px solid var(--asb-color-card-border) !important;
  border-radius: 4px !important;
  background: #fff;
  color: var(--asb-color-text) !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.asb-table-btn:hover {
  background: var(--asb-color-green) !important;
  color: #fff !important;
  border-color: var(--asb-color-green) !important;
}

.asb-table-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px !important;
  font-family: var(--asb-font);
}

/* Sortable, resizable spreadsheet table */

.asb-table {
  table-layout: fixed;
  border-collapse: collapse;
  font-family: var(--asb-font);
  font-size: 13px;
}

.asb-table-th {
  position: relative;
  text-align: left;
  padding: 8px 20px 8px 10px !important; /* right padding reserves space for resizer */
  background: #f0f0f0;
  border: 1px solid #d0d0d0 !important;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  color: var(--asb-color-text) !important;
}

.asb-table-th:hover {
  background: #e6e6e6;
}

.asb-table-th--active {
  background: #e0ede7;
  color: var(--asb-color-green) !important;
}

.asb-table-th--active.asb-table-th--asc span::after  { content: ' ↑'; }
.asb-table-th--active.asb-table-th--desc span::after { content: ' ↓'; }

/* Column label — grab cursor indicates drag-to-reorder */
.asb-table-th > span {
  cursor: grab;
  display: inline-block;
}

.asb-table-th > span:active {
  cursor: grabbing;
}

/* SortableJS ghost: the placeholder slot while dragging */
.asb-col-ghost {
  opacity: 0.35;
  background: #D8EAE1 !important;
}

/* SortableJS drag class: the floating element following the cursor */
.asb-col-dragging {
  background: #c8e4d4 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  border-radius: 4px;
  opacity: 1 !important;
}

/* Column resize handle */
.asb-col-resizer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  user-select: none;
  background: transparent;
  border-left: 2px solid transparent;
  transition: border-color 0.1s;
}

.asb-col-resizer:hover,
.asb-col-resizer:active {
  border-left-color: var(--asb-color-green);
  background: rgba(3, 147, 67, 0.08);
}

.asb-table-td {
  padding: 6px 10px !important;
  border: 1px solid #e0e0e0 !important;
  vertical-align: top;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--asb-color-text) !important;
}

.asb-table-td:hover {
  white-space: normal; /* reveal clipped content on hover */
}

.asb-table-row:nth-child(even) .asb-table-td {
  background: #f8f8f8;
}

.asb-table-link {
  color: var(--asb-color-green) !important;
  text-decoration: none !important;
}

.asb-table-link:hover {
  text-decoration: underline !important;
}

/* ============================================================
   "Hide page" mode — body class toggled by Alpine hideHeaders
   ============================================================ */
body.asb-table-hide-headers #masthead,
body.asb-table-hide-headers .site-header,
body.asb-table-hide-headers header.site-header,
body.asb-table-hide-headers #colophon,
body.asb-table-hide-headers .site-footer,
body.asb-table-hide-headers footer.site-footer,
body.asb-table-hide-headers .site-navigation,
body.asb-table-hide-headers .main-navigation,
body.asb-table-hide-headers .tribe-common-header,
body.asb-table-hide-headers .tribe-events-header,
body.asb-table-hide-headers .tribe-events-calendar-month__header,
body.asb-table-hide-headers .tribe-events-pg-template > *:not(.tribe-events) { display: none !important; }

body.asb-table-hide-headers .asb-search-bar-outer { display: none !important; }

body.asb-table-hide-headers .asb-table-listing {
  padding: 8px !important;
  margin: 0 !important;
}

body.asb-table-hide-headers .asb-table {
  width: 100%;
}

/* ============================================================
   @media print — clean output when user prints the page
   ============================================================ */
@media print {
  /* Always hide site chrome, search bar, sort bar, and controls */
  #masthead,
  .site-header,
  #colophon,
  .site-footer,
  .asb-search-bar-outer,
  .asb-search-bar,
  .asb-sort-bar,
  .asb-table-controls,
  .asb-col-resizer,
  .asb-result-count { display: none !important; }

  /* Full-bleed table */
  .asb-table-listing {
    padding: 0 !important;
    background: none !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .asb-table-wrapper {
    font-size: 10pt;
  }

  .asb-table {
    width: 100% !important;
    table-layout: fixed !important;
    font-size: 9pt;
  }

  .asb-table-th {
    background: #eeeeee !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    padding: 6px 8px !important;
  }

  .asb-table-td {
    white-space: normal !important; /* allow text to wrap when printing */
  }

  /* Suppress theme print.css from expanding link URLs in table cells */
  .asb-table-link::after,
  .asb-event-tag::after { content: none !important; }

  /* Avoid breaking rows mid-page */
  .asb-table-row { page-break-inside: avoid; break-inside: avoid; }

  @page { margin: 1.5cm; }
}