/* Client-side festivals & events timeline (events.js), design reference 5b/5d. Lives inside
   the region page's primary-tinted costs+festivals band, so cards are plain hairline-divided
   rows (not filled cards). "Ongoing" / "Upcoming" are pill toggles; "Upcoming" adds month chips.
   Each row: a plain orange date, the name + an optional LONG-TERM / THIS MONTH badge, then the
   address as city + pin + a copy-full-address control. The list area reserves a fixed height so
   switching tabs / paging never shifts the page. */

/* Height is reserved per region by events.js (inline min-height = tallest state), so the
   source line below never moves; --event-list-h is the tallest single list page. */
.event-timeline {
  margin-top: 0;
}

/* --- Ongoing / Upcoming pill toggles ------------------------------------ */

.event-tabs {
  display: flex;
  gap: 7px;
  margin-bottom: 12px;
}

.event-tabs__tab {
  padding: 7px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-soft);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  cursor: pointer;
}

@media (hover: hover) {
  .event-tabs__tab:hover:not(:disabled):not([aria-selected="true"]) {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
}

.event-tabs__tab[aria-selected="true"] {
  color: var(--color-on-dark);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.event-tabs__tab:disabled {
  color: color-mix(in srgb, var(--color-text-soft) 40%, transparent);
  cursor: default;
}

/* --- Month chips inside the Upcoming panel ---------------------------- */

.event-months {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.event-months__tab {
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  color: var(--color-text-soft);
  background: var(--color-bg);
  border: 1px solid var(--color-primary-tint-border-soft);
  border-radius: 20px;
  cursor: pointer;
}

@media (hover: hover) {
  .event-months__tab:hover:not([aria-selected="true"]) {
    color: var(--color-text);
  }
}

.event-months__tab[aria-selected="true"] {
  color: var(--color-on-dark);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* --- Event rows ----------------------------------------------------- */

.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Reserved height so tab switches and paging never move the rest of the page. */
  min-height: var(--event-list-h, 0px);
}

.event-card {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 0;
  /* Fixed #E4E7E4 hairline — the row divider must not thin out to --color-border-soft on the
     tinted costs+festivals band. */
  border-bottom: 1px solid #e4e7e4;
}

.event-card:last-of-type {
  border-bottom: 0;
}

/* Pager hides out-of-page rows with the `hidden` attribute; the grid `display` would otherwise
   beat the UA `[hidden] { display: none }`. */
.event-card[hidden] {
  display: none;
}

.event-card__date {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.event-card__body {
  min-width: 0;
}

.event-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}

/* LONG-TERM / THIS MONTH badge (Ongoing panel only). Design reference 5b: a solid tinted fill,
   no border — green wash for LONG-TERM, warm wash for THIS MONTH. Two render slots (events.js
   emits both): inline after the name from 600px up (design-ref placement), and on the date line
   below 600px where the stacked card leaves the name row no spare width. */
.event-card__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 20px;
}

.event-card__badge--long {
  color: var(--color-primary);
  background: var(--color-primary-tint);
}

.event-card__badge--month {
  color: var(--color-accent-chip);
  background: var(--color-accent-tint);
}

.event-card__badge--on-date {
  display: none;
}

@media (max-width: 599.98px) {
  .event-card__badge--on-date {
    display: inline-block;
  }

  .event-card__badge--on-name {
    display: none;
  }
}

/* --- Address: [pin] city [copy] ------------------------------------- */

.event-place {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
  max-width: 100%;
  font-size: 13px;
  color: var(--color-text-muted);
}

.event-place__icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.event-place__city {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-place__city--ko {
  font-family: var(--font-family-ko);
}

.event-place__copy {
  margin-left: 4px;
  display: inline-flex;
  flex-shrink: 0;
  padding: 1px;
  color: var(--color-text-muted);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.12s ease;
}

/* Green is reserved for the just-copied state. Hover turns it green only while the pointer is
   actually over the icon; keyboard focus just makes it fully opaque so it stays gray once the
   copied cue clears. Scoped to real-hover devices only (CSS Media Queries 4) — touch browsers
   apply :hover on tap and don't clear it until a different element is tapped, which left the icon
   stuck green after the 2s .is-copied confirmation had already reverted (same root cause as the
   region-detail-map ski/surf pins, region-detail-map.css). */
@media (hover: hover) {
  .event-place__copy:hover {
    color: var(--color-primary);
    opacity: 1;
  }
}

.event-place__copy:focus-visible {
  opacity: 1;
}

/* Just-copied cue — green icon plus the visible "Full address copied" confirmation (same string
   on phone and desktop). copy.js clears .is-copied after 2s, and only one row at a time. */
.event-place.is-copied .event-place__copy {
  color: var(--color-primary);
  opacity: 1;
}

.event-place__copy svg {
  width: 12px;
  height: 12px;
}

/* Visible on both viewports (was sr-only) — the copy confirmation. Empty except right after a
   copy. */
.event-place__status {
  margin-left: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  white-space: nowrap;
}

.event-place__status:empty {
  display: none;
}

/* Desktop: icon + tooltip only — the label stays hidden here always; .event-place__status
   (a sibling, outside the button) carries the confirmation instead. Phone overrides this in its
   own media block below to show the label and drive the confirmation through it in place. */
.event-place__copy-label {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .event-place__copy {
    transition: none;
  }
}

/* --- Pager (list > 5) — the existing ‹ 1 / 3 › control, restyled --------- */

.event-pager {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
}

/* Identical to the region-page hero-gallery prev/next arrows (region-page.css
   .region-hero-gallery__nav) — same 34px square, --radius-md corners, border/hover colours, and
   now the same ‹ › glyphs and [prev][count][next] order too — one stepper control, two contexts.
   The 44px tap target comes from a pseudo-element on phone (below). Keep in sync with
   .region-hero-gallery__nav. */
.event-pager__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-text-soft);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.event-pager__btn:hover:not(:disabled),
.event-pager__btn:focus-visible:not(:disabled) {
  background: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Border stays full strength — only the glyph drops to ~40% ink, so a disabled arrow reads as
   unavailable, not broken. */
.event-pager__btn:disabled {
  color: color-mix(in srgb, var(--color-text-soft) 40%, transparent);
  cursor: default;
}

/* Same Muted colour as the region-hero-gallery counter (region-page.css's
   .region-gallery__counter, also a "1 / N" pagination readout) — this was full Ink, noticeably
   heavier/brighter than its hero-gallery counterpart despite being the same kind of control. */
.event-pager__status {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* "1–5 of 17" range line, trailing the pager. */
.event-pager__range {
  margin-left: 4px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.event-pager__range:empty {
  display: none;
}

/* --- Zero-events empty state --------------------------------------- */

/* Body text, same as the rental-costs .cost-note beside it. */
.event-empty {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-soft);
}

.region-loading {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* --- Phone: grow control hit areas to >=44px (DESIGN.md § Accessibility) ------------
   Padding only — the Ongoing/Upcoming pills and pager buttons keep their designed look, the tap
   target grows. */
@media (max-width: 767.98px) {
  /* 40px visible pill (still taller than the month chips, ~34px, so main/sub levels read);
     the 44px tap target comes from the ::before below. */
  .event-tabs__tab {
    position: relative;
    min-height: 40px;
    padding-block: 0;
  }

  /* 44px tap target without resizing the visible pill — an invisible centred hit area
     (DESIGN.md § Mobile). */
  .event-pager__btn::before,
  .event-tabs__tab::before,
  .event-months__tab::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    min-width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  .event-months__tab {
    position: relative;
  }
}

/* --- 900 and below: the copy control carries its "Copy full address" label like it does on
   phone, not just a tooltip, and grows to a 44px tap target with padding pulled back by a
   negative margin. --- */
@media (max-width: 900px) {
  .event-place__copy {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* pull the oversized target back so it doesn't inflate the address row */
    margin: -11px 0 -11px 2px;
    padding: 11px 6px;
    opacity: 1;
  }

  .event-place__copy-label {
    display: inline;
    font-size: 0.8125rem;
  }

  /* .event-place__status (the desktop confirmation slot, a sibling outside the button with its
     own margin-left) is what desktop uses since its label stays permanently hidden — but reusing
     it here, as a second element popping in beside a now icon-only button, landed at a visibly
     different indent than where the label text used to sit. Hide it on phone; the label itself
     carries the confirmation in place instead (copy.js writes the same "Full address
     copied" string into both elements, so nothing needs to change here in the future). */
  .event-place__status {
    display: none;
  }
}

/* --- Phone: rows stack (date → name → place) ----------------------- */

@media (max-width: 599.98px) {
  .event-card {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .event-place {
    flex-wrap: wrap;
    gap: 2px 10px;
  }
}