/* directory.css
   Purpose: incremental overrides & Index view parity with Events.
   Keep components.css as the stable base; edit this file for ongoing tweaks.
*/

/* Mobile-only: EVENT + NEW moved above FOR (keeps 3 columns on mobile) */
#viewEvents .cell__eventInlineWrap,
#viewIndex .cell__eventInlineWrap{
  display:none; /* shown on mobile only */
  gap: 10px;
  align-items: baseline;
  margin-bottom: 4px;
}
#viewEvents .cell__eventInlineWrap .cell__eventInline,
#viewIndex .cell__eventInlineWrap .cell__eventInline,
#viewEvents .cell__eventInlineWrap .cell__newInline,
#viewIndex .cell__eventInlineWrap .cell__newInline{
  font-size: 12px;          /* smaller than main text */
  line-height: 1.05;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.02em;

  font-weight: 700;
}

/* EVENTS: desktop NEW field (iter308) */
#viewEvents .row.row--events .cell__sub.cell__new,
#viewIndex .row.row--events .cell__sub.cell__new{
  color: #D16C4E;
  font-style: italic;

  font-weight: 700;
}

#viewEvents .cell__eventInlineWrap .cell__newInline,
#viewIndex .cell__eventInlineWrap .cell__newInline{
  color: #D16C4E;
  font-style: italic;
}

#viewEvents .row.row--events,
#viewIndex .row.row--events{
  padding: var(--evRowPadY) var(--evRowPadX);

  display: grid;
  grid-template-columns: 165px 1.7fr 1.35fr 96px;
  column-gap: 12px;
  align-items: center;
}

#viewEvents .table .row.row--events,
#viewIndex .table .row.row--events{
  border-top: 0 !important;
  position: relative;
  isolation: isolate;
}

#viewEvents .table .row.row--events + .row.row--events::before,
#viewIndex .table .row.row--events + .row.row--events::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0 !important;
  height: 1px;
  background: rgba(0,0,0,0.06);
  z-index: 30;
  pointer-events: none;
}

#viewEvents .row.row--events .cell__top,
#viewIndex .row.row--events .cell__top{
  font-weight: 700;
}

#viewEvents .row.row--events .cell--forwhere .cell__top,
#viewIndex .row.row--events .cell--forwhere .cell__top{
  letter-spacing: -0.02em;
  font-stretch: ; /* TESTFONT */
}

#viewEvents .row.row--events .cell__sub,
#viewIndex .row.row--events .cell__sub{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Tighten tracking specifically for numeric DATE line */
#viewEvents .row.row--events .cell--daydate .cell__sub,
#viewIndex .row.row--events .cell--daydate .cell__sub{
  letter-spacing: 0.04em;
}

/* ---------------- Index view: SAT/SUN (mapped into DAY/DATE) ----------------
   Goal:
   - "Sat:" / "Sun:" label matches CITY/NAME (top-line styles)
   - value matches STATE/IG (sub-line styles)
   - keep inline layout on both desktop + mobile; prevent overflow/truncation
*/
#viewIndex .row.row--events .cell--daydate .cell__dayline{
  display: flex;
  /* Index view only: pull the 3rd (rightmost) column's contents left within
     its existing grid column, without changing overall card width or any
     Events-tab column sizing. */
  justify-content: flex-start;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

#viewIndex .row.row--events .cell--daydate .dayLabel{
  flex: 0 0 auto;
}

#viewIndex .row.row--events .cell--daydate .dayValue{
  flex: 0 1 auto;
  min-width: 0;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Index view only: keep SAT/SUN two-line vertical spacing matching Events view */
#viewIndex .row.row--events .cell--daydate .cell__dayline{
  line-height: 1.1;
}
#viewIndex .row.row--events .cell--daydate .cell__dayline + .cell__dayline{
  margin-top: 2px; /* matches .cell__sub margin-top in Events view */
}

#viewEvents,
#viewIndex{
  --evIconPad: 24px;
  --evIconLeft: 6px;
  --evIconSize: 13px;
  --evIconOpacity: 0.65;

  --evRowPadY: 8px;
  --evRowPadX: 6px;

  /* Background "bleed" so the TYPE tint reaches the rounded edge like legacy */
  --evRowBleedX: calc(var(--evRowPadX) + 1px);
  --evRowBleedY: calc(var(--evRowPadY) + 2px);
}

#viewEvents .row.row--events .cell--forwhere,
#viewIndex .row.row--events .cell--forwhere,
#viewEvents .row.row--events .cell--citystate,
#viewIndex .row.row--events .cell--citystate,
#viewEvents .row.row--events .cell--daydate,
#viewIndex .row.row--events .cell--daydate{
  position: relative;
  padding-left: var(--evIconPad); /* room for icon */
}

/* Index view only: nudge the 3rd (DAY/DATE) column's contents further left.
   This continues the same successful approach (moving the content block),
   without changing card width or Events tab column sizing. */
#viewIndex .row.row--events .cell--daydate{
  padding-left: 16px; /* one more incremental left shift */
}


#viewEvents .row.row--events .cell--forwhere::after,
#viewIndex .row.row--events .cell--forwhere::after{
  content: "";
  position: absolute;
  left: var(--evIconLeft);
  top: 50%;
  width: var(--evIconSize);
  height: var(--evIconSize);
  transform: translateY(-50%);
  background: var(--muted);
  opacity: var(--evIconOpacity);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2021h18%22/%3E%3Cpath%20d=%22M5%2021V5a2%202%200%200%201%202-2h6a2%202%200%200%201%202%202v16%22/%3E%3Cpath%20d=%22M9%207h0%22/%3E%3Cpath%20d=%22M9%2011h0%22/%3E%3Cpath%20d=%22M9%2015h0%22/%3E%3Cpath%20d=%22M13%207h0%22/%3E%3Cpath%20d=%22M13%2011h0%22/%3E%3Cpath%20d=%22M13%2015h0%22/%3E%3Cpath%20d=%22M17%2021V9h2v12%22/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2021h18%22/%3E%3Cpath%20d=%22M5%2021V5a2%202%200%200%201%202-2h6a2%202%200%200%201%202%202v16%22/%3E%3Cpath%20d=%22M9%207h0%22/%3E%3Cpath%20d=%22M9%2011h0%22/%3E%3Cpath%20d=%22M9%2015h0%22/%3E%3Cpath%20d=%22M13%207h0%22/%3E%3Cpath%20d=%22M13%2011h0%22/%3E%3Cpath%20d=%22M13%2015h0%22/%3E%3Cpath%20d=%22M17%2021V9h2v12%22/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  pointer-events: none;
  z-index: 3;
}

#viewEvents .row.row--events .cell--citystate::before,
#viewIndex .row.row--events .cell--citystate::before{
  content: "";
  position: absolute;
  left: var(--evIconLeft);
  top: 50%;
  width: var(--evIconSize);
  height: var(--evIconSize);
  transform: translateY(-50%);
  background: var(--muted);
  opacity: var(--evIconOpacity);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2021s7-4.5%207-11a7%207%200%201%200-14%200c0%206.5%207%2011%207%2011z%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2210%22%20r=%222.2%22/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2021s7-4.5%207-11a7%207%200%201%200-14%200c0%206.5%207%2011%207%2011z%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2210%22%20r=%222.2%22/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  pointer-events: none;
  z-index: 2;
}

#viewEvents .row.row--events .cell--daydate::before,
#viewIndex .row.row--events .cell--daydate::before{
  content: "";
  position: absolute;
  left: var(--evIconLeft);
  top: 50%;
  width: var(--evIconSize);
  height: var(--evIconSize);
  transform: translateY(-50%);
  background: var(--muted);
  opacity: var(--evIconOpacity);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223.5%22%20y=%224.5%22%20width=%2217%22%20height=%2216%22%20rx=%222%22/%3E%3Cpath%20d=%22M7%203.5v3%22/%3E%3Cpath%20d=%22M17%203.5v3%22/%3E%3Cpath%20d=%22M3.5%209h17%22/%3E%3Cpath%20d=%22M8%2013h3%22/%3E%3Cpath%20d=%22M8%2016h3%22/%3E%3Cpath%20d=%22M13%2013h3%22/%3E%3Cpath%20d=%22M13%2016h3%22/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223.5%22%20y=%224.5%22%20width=%2217%22%20height=%2216%22%20rx=%222%22/%3E%3Cpath%20d=%22M7%203.5v3%22/%3E%3Cpath%20d=%22M17%203.5v3%22/%3E%3Cpath%20d=%22M3.5%209h17%22/%3E%3Cpath%20d=%22M8%2013h3%22/%3E%3Cpath%20d=%22M8%2016h3%22/%3E%3Cpath%20d=%22M13%2013h3%22/%3E%3Cpath%20d=%22M13%2016h3%22/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  pointer-events: none;
  z-index: 2;
}

/* Slightly tighter icon sizing on very small screens */
@media (max-width: 520px){
  #viewEvents{ --evRowPadY: 5px; }

  #viewEvents{ --evRowPadX: 7px; }

  #viewEvents{ --evIconPad: 18px; --evIconLeft: 4px; --evIconSize: 11px; }

  #viewEvents .row.row--events .cell--forwhere::after,
  #viewEvents .row.row--events .cell--citystate::before,
  #viewEvents .row.row--events .cell--daydate::before{
    left: var(--evIconLeft);
    width: var(--evIconSize);
    height: var(--evIconSize);
  }
}

#viewEvents .row.row--events .cell--daydate,
#viewIndex .row.row--events .cell--daydate{
  text-align: left;
  justify-self: start;
}

/* EVENTS view   subtle highlighted first column (matches legacy reference) */
#viewEvents .row.row--events .cell--event,
#viewIndex .row.row--events .cell--event{
  position: relative;
}
#viewEvents .row.row--events .cell--event::before,
#viewIndex .row.row--events .cell--event::before{
  content: "";
  position: absolute;
  left: calc(-1 * var(--evRowBleedX));
  right: 0;
  top: calc(-1 * var(--evRowBleedY));
  bottom: calc(-1 * var(--evRowBleedY));
  background: rgba(232, 221, 198, 0.85);
  border-radius: 0 0 0 0;
  z-index: 0;
  pointer-events: none;
}
#viewEvents .row.row--events .cell--event > *,
#viewIndex .row.row--events .cell--event > *{
  position: relative;
  z-index: 1;
}





/* EVENTS price trigger (info icon + clickable cell when NONMEMBER exists) */
#viewEvents .row.row--events .cell--event > .cell__priceHit,
#viewIndex .row.row--events .cell--event > .cell__priceHit,
#viewEvents .row.row--events .cell--forwhere > .cell__priceHit,
#viewIndex .row.row--events .cell--forwhere > .cell__priceHit{
  position: absolute;
  inset: calc(-1 * var(--evRowBleedY)) 0 calc(-1 * var(--evRowBleedY)) calc(-1 * var(--evRowBleedX));
  z-index: 2;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

#viewEvents .row.row--events .cell__priceHit:focus-visible,
#viewIndex .row.row--events .cell__priceHit:focus-visible{
  outline: 2px solid rgba(35,76,49,0.20);
  outline-offset: -2px;
  border-radius: 8px;
}

#viewEvents .row.row--events .cell--event > .cell__cornerEar--desktop,
#viewIndex .row.row--events .cell--event > .cell__cornerEar--desktop{
  position: absolute;
  right: 0;
  top: -6px;
  z-index: 3;
  width: 0;
  height: 0;
  border-top: 6px solid #D16C4E;
  border-left: 6px solid transparent;
  pointer-events: none;
}

#viewEvents .row.row--events .cell__priceHit--mobile,
#viewEvents .row.row--events .cell__cornerEar--mobile,
#viewIndex .row.row--events .cell__priceHit--mobile,
#viewIndex .row.row--events .cell__cornerEar--mobile{
  display: none !important;
}

@media (max-width: 520px){
  #viewEvents .row.row--events .cell__priceHit--desktop,
  #viewEvents .row.row--events .cell__cornerEar--desktop,
  #viewIndex .row.row--events .cell__priceHit--desktop,
  #viewIndex .row.row--events .cell__cornerEar--desktop{
    display: none !important;
  }

  #viewEvents .row.row--events .cell--forwhere > .cell__priceHit--mobile,
  #viewIndex .row.row--events .cell--forwhere > .cell__priceHit--mobile{
    display: block !important;
    inset: calc(-1 * var(--evRowBleedY)) 0 calc(-1 * var(--evRowBleedY)) calc(-1 * var(--evRowBleedX));
  }

  #viewEvents .row.row--events .cell--forwhere > .cell__cornerEar--mobile,
  #viewIndex .row.row--events .cell--forwhere > .cell__cornerEar--mobile{
    display: block !important;
    position: absolute;
    right: 0;
    top: -4px;
    z-index: 3;
    width: 0;
    height: 0;
    border-top: 5px solid #D16C4E;
    border-left: 5px solid transparent;
    pointer-events: none;
  }
}

/* Pricing popup */


body.pricingPopupOpen{
  overflow: hidden;
}

.pricingOverlay{
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0,0,0,0.03);
}

.pricingOverlay[hidden]{
  display: none;
}

.pricingPopup{
  position: fixed;
  width: min(400px, calc(100vw - 20px));
  background: #f7f7f7;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  color: #111;
  overflow: visible;
}

.pricingPopup__close{
  position: absolute;
  left: -20px;
  top: -20px;
  width: 48px;
  height: 56px;
  border: 0 !important;
  border-radius: 999px;
  background: #f1f1f1;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  color: #8f8f8f;
  font: inherit;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.pricingPopup__title{
  padding: 12px 16px 5px;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #9b9b9b;
}

.pricingPopup__rule{
  height: 2px;
  margin: 0 18px;
  background: rgba(0,0,0,0.22);
}

.pricingPopup__label{
  padding: 5px 18px 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.1;
  font-weight: 800;
  color: #9b9b9b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pricingPopup__grid{
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: stretch;
  column-gap: 0;
  padding: 12px 16px 5px;
}

.pricingPopup__priceBlock{
  text-align: center;
  min-width: 0;
}

.pricingPopup__price{
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.pricingPopup__priceLabel{
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #9b9b9b;
  text-transform: uppercase;
}

.pricingPopup__divider{
  width: 1px;
  background: rgba(0,0,0,0.12);
  margin: 4px 0;
}

.pricingPopup__presaleRow{
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  padding: 5px 16px 12px;
  text-align: center;
}

.pricingPopup__presaleLabel{
  font-size: 11px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #9b9b9b;
  text-transform: uppercase;
}

.pricingPopup__presaleValue{
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.pricingPopup__payments{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  justify-items: center;
  padding: 10px 16px 8px;
  background: #e7e7e7;
  min-height: 74px;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

.pricingPopup__payments--single{
  grid-template-columns: 1fr;
}

.pricingPopup__payments--double{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pricingPopup__payments:has(.pricingPopup__payItem:nth-child(2):last-child){
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pricingPopup__payments--empty{
  min-height: 24px;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

.pricingPopup__payItem{
  display: grid;
  justify-items: center;
  gap: 6px;
}

.pricingPopup__payIcon{
  width: 52px;
  height: 36px;
  color: #111;
}

.pricingPopup__payIcon svg{
  width: 100%;
  height: 100%;
  display: block;
}

.pricingPopup__payLabel{
  font-size: 11px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

@media (max-width: 640px){
  .pricingOverlay{
    padding: 12px;
    background: rgba(0,0,0,0.08);
  }

  .pricingPopup{
    position: fixed;
    left: 12px !important;
    right: 12px !important;
    top: 50% !important;
    width: auto;
    transform: translateY(-50%);
    max-height: calc(100vh - 24px);
    overflow: visible;
    border-radius: 22px;
  }

  .pricingPopup__close{
    left: 12px;
    top: -18px;
    width: 48px;
    height: 48px;
    font-size: 18px;
  }

  .pricingPopup__title{
    padding-top: 16px;
    font-size: 15px;
  }

  .pricingPopup__price{
    font-size: 24px;
  }

  .pricingPopup__presaleValue{
    font-size: 18px;
  }

  .pricingPopup__payments{
    min-height: 70px;
  }

  .pricingPopup__payIcon{
    width: 48px;
    height: 34px;
  }
}



@media (max-width: 520px){
  #viewEvents,
#viewIndex{
    --evRowPadX: 5px;
    --evRowBleedX: calc(var(--evRowPadX) + 1px);
  }
  #viewEvents .row.row--events,
#viewIndex .row.row--events{
    grid-template-columns: 1.6fr 1fr 66px;
    column-gap: 10px;
  }

#viewEvents .cell--event,
#viewIndex .cell--event{ display:none; }
#viewEvents .cell__eventInlineWrap,
#viewIndex .cell__eventInlineWrap{ display:flex; }
#viewEvents .row.row--events .cell--forwhere,
#viewIndex .row.row--events .cell--forwhere{
  position: relative;
}
#viewEvents .row.row--events .cell--forwhere::before,
#viewIndex .row.row--events .cell--forwhere::before{
  content: "";
  position: absolute;
  left: calc(-1 * var(--evRowBleedX));
  right: 0;
  top: calc(-1 * var(--evRowBleedY));
  bottom: calc(-1 * var(--evRowBleedY));
  background: rgba(232, 221, 198, 0.85);
  border-radius: 0 0 0 0;
  z-index: 0;
  pointer-events: none;
}
#viewEvents .row.row--events .cell--forwhere > *,
#viewIndex .row.row--events .cell--forwhere > *{
  position: relative;
  z-index: 1;
}

  #viewEvents .row.row--events .cell__sub,
#viewIndex .row.row--events .cell__sub{
    font-size: 11px;
  }
}

@media (max-width: 520px){
  /* Set Events-only row font baseline for all non EVENT/NEW fields */
  #viewEvents,
#viewIndex{
    --rowFont: 8px;
  }

  /* Ensure Events rows and cell lines inherit the baseline */
  #viewEvents .row.row--events,
#viewIndex .row.row--events{
    font-size: var(--rowFont);
  }
  #viewEvents .row.row--events .cell__top,
#viewIndex .row.row--events .cell__top,
#viewEvents .row.row--events .cell__sub,
#viewIndex .row.row--events .cell__sub{
    font-size: inherit;
  }

  /* EVENT + NEW inline strip */
  #viewEvents .row.row--events .cell__eventInline,
#viewIndex .row.row--events .cell__eventInline{
    font-size: 6px;
  }
  #viewEvents .row.row--events .cell__newInline,
#viewIndex .row.row--events .cell__newInline{
    font-size: 4px;
  }
}

/* EVENTS cardbody: tighten tracking for width-sensitive fields */
#viewEvents .cell__where,
#viewIndex .cell__where,
#viewEvents .cell__state,
#viewIndex .cell__state,
#viewEvents .cell__date,
#viewIndex .cell__date,
#viewEvents .cell__for,
#viewIndex .cell__for{
  letter-spacing: -0.035em;
}

/* NOTE: Render uses .cell--citystate (middle) and .cell--daydate (right). */
#viewEvents .row.row--events .cell--citystate,
#viewIndex .row.row--events .cell--citystate,
#viewEvents .row.row--events .cell--daydate,
#viewIndex .row.row--events .cell--daydate{
  padding-left: var(--evIconPad); /* icon + consistent text gap */
}

/* Mobile alignment: lower columns 2 & 3 to align with the FOR/WHERE stack (below EVENT/NEW strip) */
@media (max-width: 520px){
  #viewEvents .row.row--events .cell--citystate,
  #viewEvents .row.row--events .cell--daydate{
    padding-top: 10px;
  }
}

#viewEvents,
#viewIndex{
  --evForWhereShiftX: 4px;
}
#viewEvents .row.row--events .cell--forwhere,
#viewIndex .row.row--events .cell--forwhere{
  padding-left: calc(var(--evIconPad) - var(--evForWhereShiftX));
}
#viewEvents .row.row--events .cell--forwhere::after,
#viewIndex .row.row--events .cell--forwhere::after{
  left: calc(var(--evIconLeft) - var(--evForWhereShiftX));
}

#viewEvents,
#viewIndex{
  --evMidShift: 8px;
}

#viewEvents .row.row--events .cell--citystate,
#viewIndex .row.row--events .cell--citystate{
  padding-left: calc(var(--evIconPad) - var(--evMidShift));
}

#viewEvents .row.row--events .cell--citystate::before,
#viewIndex .row.row--events .cell--citystate::before{
  left: calc(var(--evIconLeft) - var(--evMidShift));
}

@media (max-width: 520px){
  #viewEvents .row.row--events .cell--citystate::before,
#viewIndex .row.row--events .cell--citystate::before{
    left: calc(var(--evIconLeft) - var(--evMidShift));
  }
}

/* EVENTS: mobile NEW emphasis (iter309) */
@media (max-width: 520px){
  #viewEvents .cell__eventInlineWrap .cell__newInline{
    font-size: calc(15px + 2px);
  }
}

.viewToggle.viewToggle--locked{
  opacity: 0.6;
  cursor: not-allowed;
}
.viewToggle.viewToggle--locked .viewToggle__tab{
  pointer-events: none;
}
.viewToggle.viewToggle--locked .viewToggle__thumb{
  opacity: 0.85;
}


@media (min-width: 769px){
  /* Desktop-only: slightly reduce NEW label size */
  #viewEvents .row.row--events .cell__sub.cell__new,
#viewIndex .row.row--events .cell__sub.cell__new,
#viewEvents .cell__eventInlineWrap .cell__newInline,
#viewIndex .cell__eventInlineWrap .cell__newInline{
    font-size: 11px;
  }
}


/* EVENTS pill only: display options in UPPERCASE (display-only) */
#eventsPill3Menu .menu__item{
  text-transform: uppercase;
}

.header__inner{
  position: relative;
}

/* Position in the "blue box" area: to the LEFT of the viewToggle, without moving anything */
.headerSocial{
  position: absolute;
  top: 50%;
  /* Nudge DOWN into the visual "blue box" without affecting layout (absolute/out-of-flow). */
  transform: translateY(-50%) translateY(10px);
  /* Move icons visually to the RIGHT by reducing the right offset. */
  right: calc(var(--pagePad) + 190px);
  display: flex;
  gap: 10px;
  z-index: 5;
  pointer-events: auto;
}

.headerSocial__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  opacity: 1;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.headerSocial__link:hover{ opacity: 0.65; }

.headerSocial__icon{
  width: 20px;
  height: 20px;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Keep placement sane on smaller widths (avoid overlapping the counts/toggle) */
@media (max-width: 900px){
  .headerSocial{ right: calc(var(--pagePad) + 175px); }
}
@media (max-width: 560px){
  .headerSocial{ right: calc(var(--pagePad) + 165px); gap: 8px; transform: translateY(-50%) translateY(8px); }
  .headerSocial__icon{ width: 18px; height: 18px; }
}

/* MOBILE override: move icons to top-right (goal layout) */
@media (max-width: 640px){
  .headerSocial{
    /* dock to top-right of the header row */
    top: -23px;
    right: 14px;

    transform: none;
  }

  .headerSocial a{
    /* keep your slight scaling change (adjust if you want) */
    transform: scale(0.70);
    transform-origin: center;
  }
}

/* section: past events // purpose: visually de-emphasize inactive items (mobile highlight strip) */
@media (max-width: 520px){
  #viewEvents .group--past .row.row--events .cell--forwhere::before{
    background: transparent !important;
  }
}

/* section: search suggestions // purpose: dropdown quick-picks for Events search */
.suggestWrap{
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
}

/* Mobile: keep Events search pill width behavior unchanged */
@media (max-width: 520px){
  .suggestWrap{
    flex: 1 1 auto;
    min-width: 0;
  }
  .suggestWrap > .pill--search{
    flex: 1 1 auto;
    min-width: 0;
  }
}

#eventsSearchSuggest.suggest{
  color: inherit;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  padding: 10px;
  z-index: 80;
}

#eventsSearchSuggest .suggest__item{
  width: 100%;
  display: block;
  text-align: left;
  border: 0 !important;
  background: none !important;
  padding: 12px 12px;
  border-radius: 12px;
  font: inherit;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

#eventsSearchSuggest .suggest__item:hover{
  background: rgba(0,0,0,0.06);
}

#eventsSearchSuggest .suggest__item:active{
  background: rgba(0,0,0,0.10);
}


/* =========================================================
   section: dropdown polish
   purpose: inset divider under dropdown headers + quick search header/bullets
   ========================================================= */

/* Shared divider element (used by search suggest header) */
.menu__divider{
  height: 1px;
  margin: 6px 14px 8px;
  background: rgba(0,0,0,0.12);
}

/* Static header used inside the Quick Searches suggest box */
.menu__header--static{
  padding: 10px 14px 6px;
}

.menu__header--static .menu__title{
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6f6f6f;
}

/* Quick Searches dropdown (search suggestions) */
.suggest{
  /* match pill menu feel */
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  overflow: hidden;
}

.suggest .suggest__item{
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px 10px 32px; /* room for bullet */
  background: none !important;
  border: 0 !important;
  color: inherit;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.suggest .suggest__item::before{
  content: "+";
  position: absolute;
  margin-left: -18px;
  color: #9a9a9a;
}

/* Hover / active polish */
.suggest .suggest__item:hover{
  background: rgba(0,0,0,0.04);
}


/* =========================================================
   section: dropdown polish (v2)
   purpose: inset divider under pill headers + quick search bullets + mobile fit
   ========================================================= */

/* Inset divider under every pill menu header (non-edge-to-edge)
   Uses background line so it works on flex containers across browsers. */
.menu__header{
  background-image: linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0.12));
  background-repeat: no-repeat;
  background-size: calc(100% - 28px) 1px; /* 14px inset on both sides */
  background-position: 14px calc(100% - 0px);
}

/* Shared divider element (used by search suggest header) */
.menu__divider{
  height: 1px;
  margin: 6px 14px 8px;
  background: rgba(0,0,0,0.12);
}

/* Static header used inside the Quick Searches suggest box */
.menu__header--static{
  padding: 10px 14px 6px;
  background-image: none; /* avoid double divider */
}

.menu__header--static .menu__title{
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6f6f6f;
  white-space: nowrap; /* prevent wrapping on small screens */
}

/* Quick Searches dropdown (search suggestions) */
.suggest .suggest__item{
  position: relative; /* required for bullet positioning */
  padding-left: 32px; /* room for bullet */
}

.suggest .suggest__item::before{
  content: "+";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #b0b0b0;
  font-size: 14px;
  line-height: 1;
}

/* Mobile: keep the Quick Searches header from wrapping */
@media (max-width: 520px){
  .menu__header--static .menu__title{
    font-size: 11px;
    letter-spacing: .05em;
  }
}


/* =========================================================
   section: quick searches typography
   purpose: match pill dropdown option sizing + spacing
   ========================================================= */

.suggest .suggest__item{
  font-size: 13px;
  line-height: 1.15;
  padding-top: 8px;
  padding-bottom: 8px;
}

.suggest .suggest__item::before{
  font-size: 12px;
}

/* Match pill menu header weight/spacing a bit tighter */
.menu__header--static{
  padding-top: 8px;
  padding-bottom: 6px;
}

.menu__header--static .menu__title{
  font-size: 11px;
}


/* =========================================================
   section: quick searches typography (force)
   purpose: ensure sizing/spacing overrides apply (specificity)
   ========================================================= */

#eventsSearchSuggest .suggest__item,
#eventsSearchSuggest .suggest .suggest__item{
  font-size: 13px !important;
  line-height: 1.15 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

#eventsSearchSuggest .suggest__item::before,
#eventsSearchSuggest .suggest .suggest__item::before{
  font-size: 12px !important;
}

#eventsSearchSuggest .menu__header--static{
  padding-top: 8px !important;
  padding-bottom: 6px !important;
}

#eventsSearchSuggest .menu__header--static .menu__title{
  font-size: 11px !important;
}


/* =========================================================
   section: past events desktop highlight (force)
   purpose: ensure beige accent is removed for past events on desktop
   ========================================================= */

@media (min-width: 521px){
  #viewEvents .group--past .row.row--events .cell--event,
  #viewEvents .group--past .row.row--events .cell--event::before{
    background: transparent !important;
  }
}

/* =========================================================
   INDEX mobile parity with EVENTS
   (mirrors the Events card rules from components.css so Index is 1:1)
   ========================================================= */

#viewIndex .cell__eventInlineWrap{
  display:none; /* shown on mobile only */
  gap: 10px;
  align-items: baseline;
  margin-bottom: 4px;
}
#viewIndex .cell__eventInlineWrap .cell__eventInline,
#viewIndex .cell__eventInlineWrap .cell__newInline{
  font-size: 12px;          /* smaller than main text */
  line-height: 1.05;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.02em;

  font-weight: 700;
}

/* EVENTS: desktop NEW field (iter308) */
#viewIndex .row.row--events .cell__sub.cell__new{
  color: #D16C4E;
  font-style: italic;

  font-weight: 700;
}

#viewIndex .cell__eventInlineWrap .cell__newInline{
  color: #D16C4E;
  font-style: italic;
}

#viewIndex .row.row--events{
  padding: var(--evRowPadY) var(--evRowPadX);

  display: grid;
  grid-template-columns: 165px 1.7fr 1.35fr 96px;
  column-gap: 12px;
  align-items: center;
}

#viewIndex .table .row.row--events{
  border-top: 0 !important;
  position: relative;
  isolation: isolate;
}

#viewIndex .table .row.row--events + .row.row--events::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0 !important;
  height: 1px;
  background: rgba(0,0,0,0.06);
  z-index: 30;
  pointer-events: none;
}

#viewIndex .row.row--events .cell__top{
  font-weight: 700;
}

#viewIndex .row.row--events .cell--forwhere .cell__top{
  letter-spacing: -0.02em;
  font-stretch: ; /* TESTFONT */
}

#viewIndex .row.row--events .cell__sub{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Tighten tracking specifically for numeric DATE line */
#viewIndex .row.row--events .cell--daydate .cell__sub{
  letter-spacing: 0.04em;
}

#viewIndex{
  --evIconPad: 24px;
  --evIconLeft: 6px;
  --evIconSize: 13px;
  --evIconOpacity: 0.65;

  --evRowPadY: 8px;
  --evRowPadX: 6px;

  /* Background "bleed" so the TYPE tint reaches the rounded edge like legacy */
  --evRowBleedX: calc(var(--evRowPadX) + 1px);
  --evRowBleedY: calc(var(--evRowPadY) + 2px);
}

#viewIndex .row.row--events .cell--forwhere,
#viewIndex .row.row--events .cell--citystate,
#viewIndex .row.row--events .cell--daydate{
  position: relative;
  padding-left: var(--evIconPad); /* room for icon */
}

#viewIndex .row.row--events .cell--forwhere::after{
  content: "";
  position: absolute;
  left: var(--evIconLeft);
  top: 50%;
  width: var(--evIconSize);
  height: var(--evIconSize);
  transform: translateY(-50%);
  background: var(--muted);
  opacity: var(--evIconOpacity);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2021h18%22/%3E%3Cpath%20d=%22M5%2021V5a2%202%200%200%201%202-2h6a2%202%200%200%201%202%202v16%22/%3E%3Cpath%20d=%22M9%207h0%22/%3E%3Cpath%20d=%22M9%2011h0%22/%3E%3Cpath%20d=%22M9%2015h0%22/%3E%3Cpath%20d=%22M13%207h0%22/%3E%3Cpath%20d=%22M13%2011h0%22/%3E%3Cpath%20d=%22M13%2015h0%22/%3E%3Cpath%20d=%22M17%2021V9h2v12%22/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2021h18%22/%3E%3Cpath%20d=%22M5%2021V5a2%202%200%200%201%202-2h6a2%202%200%200%201%202%202v16%22/%3E%3Cpath%20d=%22M9%207h0%22/%3E%3Cpath%20d=%22M9%2011h0%22/%3E%3Cpath%20d=%22M9%2015h0%22/%3E%3Cpath%20d=%22M13%207h0%22/%3E%3Cpath%20d=%22M13%2011h0%22/%3E%3Cpath%20d=%22M13%2015h0%22/%3E%3Cpath%20d=%22M17%2021V9h2v12%22/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  pointer-events: none;
  z-index: 3;
}

#viewIndex .row.row--events .cell--citystate::before{
  content: "";
  position: absolute;
  left: var(--evIconLeft);
  top: 50%;
  width: var(--evIconSize);
  height: var(--evIconSize);
  transform: translateY(-50%);
  background: var(--muted);
  opacity: var(--evIconOpacity);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2021s7-4.5%207-11a7%207%200%201%200-14%200c0%206.5%207%2011%207%2011z%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2210%22%20r=%222.2%22/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2021s7-4.5%207-11a7%207%200%201%200-14%200c0%206.5%207%2011%207%2011z%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2210%22%20r=%222.2%22/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  pointer-events: none;
  z-index: 2;
}

#viewIndex .row.row--events .cell--daydate::before{
  content: "";
  position: absolute;
  left: var(--evIconLeft);
  top: 50%;
  width: var(--evIconSize);
  height: var(--evIconSize);
  transform: translateY(-50%);
  background: var(--muted);
  opacity: var(--evIconOpacity);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223.5%22%20y=%224.5%22%20width=%2217%22%20height=%2216%22%20rx=%222%22/%3E%3Cpath%20d=%22M7%203.5v3%22/%3E%3Cpath%20d=%22M17%203.5v3%22/%3E%3Cpath%20d=%22M3.5%209h17%22/%3E%3Cpath%20d=%22M8%2013h3%22/%3E%3Cpath%20d=%22M8%2016h3%22/%3E%3Cpath%20d=%22M13%2013h3%22/%3E%3Cpath%20d=%22M13%2016h3%22/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223.5%22%20y=%224.5%22%20width=%2217%22%20height=%2216%22%20rx=%222%22/%3E%3Cpath%20d=%22M7%203.5v3%22/%3E%3Cpath%20d=%22M17%203.5v3%22/%3E%3Cpath%20d=%22M3.5%209h17%22/%3E%3Cpath%20d=%22M8%2013h3%22/%3E%3Cpath%20d=%22M8%2016h3%22/%3E%3Cpath%20d=%22M13%2013h3%22/%3E%3Cpath%20d=%22M13%2016h3%22/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  pointer-events: none;
  z-index: 2;
}

/* Slightly tighter icon sizing on very small screens */
@media (max-width: 520px){
  #viewIndex{ --evRowPadY: 5px; }

  #viewIndex{ --evRowPadX: 7px; }

  #viewIndex{ --evIconPad: 18px; --evIconLeft: 4px; --evIconSize: 11px; }

  #viewIndex .row.row--events .cell--forwhere::after,
  #viewIndex .row.row--events .cell--citystate::before,
  #viewIndex .row.row--events .cell--daydate::before{
    left: var(--evIconLeft);
    width: var(--evIconSize);
    height: var(--evIconSize);
  }
}

#viewIndex .row.row--events .cell--daydate{
  text-align: left;
  justify-self: start;
}

/* EVENTS view   subtle highlighted first column (matches legacy reference) */
#viewIndex .row.row--events .cell--event{
  position: relative;
}
#viewIndex .row.row--events .cell--event::before{
  content: "";
  position: absolute;
  left: calc(-1 * var(--evRowBleedX));
  right: 0;
  top: calc(-1 * var(--evRowBleedY));
  bottom: calc(-1 * var(--evRowBleedY));
  background: rgba(232, 221, 198, 0.85);
  border-radius: 0 0 0 0;
  z-index: 0;
  pointer-events: none;
}
#viewIndex .row.row--events .cell--event > *{
  position: relative;
  z-index: 1;
}


@media (max-width: 520px){
  #viewIndex{
    --evRowPadX: 5px;
    --evRowBleedX: calc(var(--evRowPadX) + 1px);
  }
  #viewIndex .row.row--events{
    grid-template-columns: 1.6fr 1fr 66px;
    column-gap: 10px;
  }

#viewIndex .cell--event{ display:none; }
#viewIndex .cell__eventInlineWrap{ display:flex; }
#viewIndex .row.row--events .cell--forwhere{
  position: relative;
}
#viewIndex .row.row--events .cell--forwhere::before{
  content: "";
  position: absolute;
  left: calc(-1 * var(--evRowBleedX));
  right: 0;
  top: calc(-1 * var(--evRowBleedY));
  bottom: calc(-1 * var(--evRowBleedY));
  background: rgba(232, 221, 198, 0.85);
  border-radius: 0 0 0 0;
  z-index: 0;
  pointer-events: none;
}
#viewIndex .row.row--events .cell--forwhere > *{
  position: relative;
  z-index: 1;
}

  #viewIndex .row.row--events .cell__sub{
    font-size: 11px;
  }
}

@media (max-width: 520px){
  /* Set Events-only row font baseline for all non EVENT/NEW fields */
  #viewIndex{
    --rowFont: 8px;
  }

  /* Ensure Events rows and cell lines inherit the baseline */
  #viewIndex .row.row--events{
    font-size: var(--rowFont);
  }
  #viewIndex .row.row--events .cell__top,
  #viewIndex .row.row--events .cell__sub{
    font-size: inherit;
  }

  /* EVENT + NEW inline strip */
  #viewIndex .row.row--events .cell__eventInline{
    font-size: 6px;
  }
  #viewIndex .row.row--events .cell__newInline{
    font-size: 4px;
  }
}

/* EVENTS cardbody: tighten tracking for width-sensitive fields */
#viewIndex .cell__where,
#viewIndex .cell__state,
#viewIndex .cell__date,
#viewIndex .cell__for{
  letter-spacing: -0.035em;
}

/* NOTE: Render uses .cell--citystate (middle) and .cell--daydate (right). */
#viewIndex .row.row--events .cell--citystate,
#viewIndex .row.row--events .cell--daydate{
  padding-left: var(--evIconPad); /* icon + consistent text gap */
}

/* Mobile alignment: lower columns 2 & 3 to align with the FOR/WHERE stack (below EVENT/NEW strip) */
@media (max-width: 520px){
  #viewIndex .row.row--events .cell--citystate,
  #viewIndex .row.row--events .cell--daydate{
    padding-top: 10px;
  }
}

#viewIndex{
  --evForWhereShiftX: 4px;
}
#viewIndex .row.row--events .cell--forwhere{
  padding-left: calc(var(--evIconPad) - var(--evForWhereShiftX));
}
#viewIndex .row.row--events .cell--forwhere::after{
  left: calc(var(--evIconLeft) - var(--evForWhereShiftX));
}

#viewIndex{
  --evMidShift: 8px;
}

#viewIndex .row.row--events .cell--citystate{
  padding-left: calc(var(--evIconPad) - var(--evMidShift));
}

#viewIndex .row.row--events .cell--citystate::before{
  left: calc(var(--evIconLeft) - var(--evMidShift));
}

@media (max-width: 520px){
  #viewIndex .row.row--events .cell--citystate::before{
    left: calc(var(--evIconLeft) - var(--evMidShift));
  }
}

/* EVENTS: mobile NEW emphasis (iter309) */
@media (max-width: 520px){
  #viewIndex .cell__eventInlineWrap .cell__newInline{
    font-size: calc(15px + 2px);
  }
}

.viewToggle.viewToggle--locked{
  opacity: 0.6;
  cursor: not-allowed;
}
.viewToggle.viewToggle--locked .viewToggle__tab{
  pointer-events: none;
}
.viewToggle.viewToggle--locked .viewToggle__thumb{
  opacity: 0.85;
}


@media (min-width: 769px){
  /* Desktop-only: slightly reduce NEW label size */
  #viewIndex .row.row--events .cell__sub.cell__new,
  #viewIndex .cell__eventInlineWrap .cell__newInline{
    font-size: 11px;
  }
}


/* EVENTS pill only: display options in UPPERCASE (display-only) */
#eventsPill3Menu .menu__item{
  text-transform: uppercase;
}

.header__inner{
  position: relative;
}

/* Position in the "blue box" area: to the LEFT of the viewToggle, without moving anything */
.headerSocial{
  position: absolute;
  top: 50%;
  /* Nudge DOWN into the visual "blue box" without affecting layout (absolute/out-of-flow). */
  transform: translateY(-50%) translateY(10px);
  /* Move icons visually to the RIGHT by reducing the right offset. */
  right: calc(var(--pagePad) + 190px);
  display: flex;
  gap: 10px;
  z-index: 5;
  pointer-events: auto;
}

.headerSocial__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  opacity: 1;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.headerSocial__link:hover{ opacity: 0.65; }

.headerSocial__icon{
  width: 20px;
  height: 20px;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Keep placement sane on smaller widths (avoid overlapping the counts/toggle) */
@media (max-width: 900px){
  .headerSocial{ right: calc(var(--pagePad) + 175px); }
}
@media (max-width: 560px){
  .headerSocial{ right: calc(var(--pagePad) + 165px); gap: 8px; transform: translateY(-50%) translateY(8px); }
  .headerSocial__icon{ width: 18px; height: 18px; }
}

/* MOBILE override: move icons to top-right (goal layout) */
@media (max-width: 640px){
  .headerSocial{
    /* dock to top-right of the header row */
    top: -23px;
    right: 14px;

    transform: none;
  }

  .headerSocial a{
    /* keep your slight scaling change (adjust if you want) */
    transform: scale(0.70);
    transform-origin: center;
  }
}

/* section: past events // purpose: visually de-emphasize inactive items (mobile highlight strip) */
@media (max-width: 520px){
  #viewIndex .group--past .row.row--events .cell--forwhere::before{
    background: transparent !important;
  }
}

/* section: search suggestions // purpose: dropdown quick-picks for Events search */
.suggestWrap{
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
}

/* Mobile: keep Events search pill width behavior unchanged */
@media (max-width: 520px){
  .suggestWrap{
    flex: 1 1 auto;
    min-width: 0;
  }
  .suggestWrap > .pill--search{
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ---- Index parity: ensure TYPE column visibility matches Events (desktop only) ---- */
@media (min-width: 521px){
  #viewIndex #indexEventsRoot .cell--event{ display:block; }
}

/* ---- Index directory: WHERE is an Instagram handle, so use an Instagram icon (same sizing/coloring) ---- */
#viewIndex .row.row--events .cell--forwhere::after{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223.5%22%20y=%223.5%22%20width=%2217%22%20height=%2217%22%20rx=%225%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%223.2%22/%3E%3Cpath%20d=%22M17.5%206.7h0%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223.5%22%20y=%223.5%22%20width=%2217%22%20height=%2217%22%20rx=%225%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%223.2%22/%3E%3Cpath%20d=%22M17.5%206.7h0%22/%3E%3C/svg%3E");
}

/* INDEX-only (mobile): clamp long IG / handle text so it cannot expand the first column.
   Uses 26ch as an approximate 26-character visual width and shows ellipsis when clipped.
   Scoped to #viewIndex so EVENTS view is not affected. */
@media (max-width: 520px){
  #viewIndex .row > div{ min-width: 0; }
  #viewIndex .cell--forwhere{ min-width: 0; }

  /* Directory "IG" may render as .cell__ig (directory layout) OR as .cell__where (events-style layout). */
  #viewIndex .cell__ig,
  #viewIndex .cell__where{
    display: block;
    max-width: 30ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ---------- INDEX only: IG link should never turn default blue ---------- */
#viewIndex a.cell__where,
#viewIndex .cell__where a{
  color: inherit;
}

}


/* ---------- INDEX (mobile) IG underline ----------
   Mobile browsers (esp. iOS) can fail to paint text-decoration underlines inside overflow/ellipsis boxes.
   So we render the underline as a border on the actual IG <a> element.
   INDEX-only + mobile-only. Does NOT affect EVENTS.
--------------------------------------------------- */
@media (max-width: 520px){
  #viewIndex a.cell__whereLink{
    color: inherit;
    text-decoration: none;              /* avoid unreliable mobile underline painting */
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;               /* keeps border visible */
    display: inline-block;             /* ensures border paints */
  }
}

#viewIndex .row.row--events .cell--daydate::before{
  left: -2px !important; /* keeps the same ~5px gap between icon and text */
}

/* --- Right column (Index only) shift ---
   Goal:
   - Keep the icon-to-text spacing identical on desktop AND mobile
   - Nudge the entire DAY/DATE (rightmost) column cluster further left
   - Do NOT change grid columns, card/body width, or Events view

   Approach:
   - Apply the same shift amount to BOTH the cell padding-left (text start)
     and the icon pseudo-element left position.
   - Use variables so mobile icon sizing/padding overrides remain consistent.
*/
#viewIndex{
  --evRightShift: 10px; /* increased slightly for one more left shift */
}

#viewIndex .row.row--events .cell--daydate{
  padding-left: calc(var(--evIconPad) - var(--evRightShift)) !important;
}

#viewIndex .row.row--events .cell--daydate::before{
  left: calc(var(--evIconLeft) - var(--evRightShift)) !important;
}

/* Index view only: align SUN value start with SAT value start (responsive)
   Desktop looked perfect at 36px, but on mobile that width can push the value too far right.
   So we keep 36px on desktop/tablet and tighten slightly on mobile while preserving alignment.
*/
#viewIndex .row.row--events .cell--daydate .dayLabel{
  display: inline-block;
  width: 36px; /* desktop/tablet */
}

@media (max-width: 520px){
  #viewIndex .row.row--events .cell--daydate .dayLabel{
    width: 30px; /* mobile: same alignment, tighter spacing */
  }
}

/* --- Index view: tighten SAT/SUN value spacing on mobile (Index ONLY) ---
   Goal: values start closer to "Sat:" / "Sun:" while keeping alignment.
   This does NOT affect Events tab.
*/
@media (max-width: 520px){
  #viewIndex .row.row--events .cell--daydate .cell__dayline{
    gap: 3px; /* was 6px; tighter label→value spacing */
  }
  #viewIndex .row.row--events .cell--daydate .dayLabel{
    width: 22px; /* tighter reserved label width on mobile */
  }
}

/* ================================
   DESKTOP ONLY — INDEX VIEW ONLY
   Move the entire DAY/DATE column block (icon + Sat/Sun labels + values) left,
   and undo the prior value-only shift to prevent crowding.
   This does NOT affect Events view and does NOT affect mobile.
================================== */
@media (min-width: 901px){
  /* Shift whole column (includes ::before calendar icon) */
  #viewIndex .row.row--events .cell--daydate{
    transform: translateX(-12px);
  }

  /* Ensure values are not shifted independently (prevents crowding) */
  #viewIndex .row.row--events .cell--daydate .dayValue{
    transform: none;
  }
}


@media (max-width: 640px){
  .pricingPopup__payments{
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
  }
}