/* Events row layout
   NAMI Southern Nevada. Client theme, not Human Lens.

   Palette is the official NAMI identity set:
     NAMI Blue        Pantone Reflex Blue   #0c499c
     StigmaFree Green Pantone 376           #94d500
     NAMI Teal        Pantone 321           #0099a8   (unused, kept for reference)

   NAMI guidance puts blue as the dominant color and green as secondary, so
   green appears only as the pill fill. Green is a light value, so text on it
   must stay near black. White on #94d500 fails contrast badly. */

.ev-rows {
  --ev-blue: #0c499c;
  --ev-green: #94d500;

  --ev-brand: var(--ev-green); /* pill fill */
  --ev-brand-ink: #0b0b0b; /* text on the pill */

  --ev-text: #101010;
  --ev-muted: #4d4d4d;

  --ev-surface: #ffffff;
  --ev-chip: #f1f1f1;
  --ev-line: #e4e4e4;

  --ev-radius: 15px;
  --ev-gap: 0.75rem;

  color: var(--ev-text);
}

.ev-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Reset. Themes and Elementor kits commonly add bullets, list indents and
   heading margins that break this layout. */

.ev-rows *,
.ev-rows *::before,
.ev-rows *::after {
  box-sizing: border-box;
}

.ev-rows ul {
  list-style: none;
  padding: 0;
}

.ev-rows li {
  list-style: none;
  margin: 0;
  text-indent: 0;
}

.ev-rows li::before {
  content: none;
}

.ev-rows h2,
.ev-rows h3,
.ev-rows h4,
.ev-rows p {
  margin-top: 0;
}

/* ---------- Rows ---------- */

.ev-rows__list {
  list-style: none;
  margin: 0 0 40.39px;
  padding: 0;
  display: grid;
  gap: var(--ev-gap);
}

.ev-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 20px;
  background: var(--ev-surface);
  border: 1px solid var(--ev-line);
  border-radius: var(--ev-radius);
}

/* Date chip */

.ev-row__date {
  flex: 0 0 3.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0;
  background: var(--ev-chip);
  border-radius: 10px;
  line-height: 1.1;
}

.ev-row__month {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #000000 !important;
}

.ev-row__day {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--ev-text);
}

/* Title and meta */

.ev-row__body {
  flex: 1 1 auto;
  min-width: 0;
}

.ev-row__title {
  margin: 0 0 0.125rem;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3;
  color: var(--ev-text);
}

.ev-row__meta {
  display: block;
  font-size: 0.9375rem;
  font-weight: 400;
  color: #000000;
  overflow-wrap: anywhere;
}

/* ---------- Pill ---------- */

.ev-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 11rem;
  padding: 15px 10px;
  background: var(--ev-brand);
  color: var(--ev-brand-ink);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 14px;
  text-decoration: none;
  transition: filter 140ms ease;
}

a.ev-pill:hover,
a.ev-pill:focus-visible {
  filter: brightness(0.93);
}

/* Both pills are green by default, matching the current design.
   Free and Virtual answer different questions, cost and format, so telling
   them apart by color is worth considering. Uncomment for blue Virtual. */

/*
.ev-pill--virtual {
	background: var(--ev-blue);
	color: #ffffff;
}
*/

/* ---------- View all ---------- */

.ev-more {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: var(--ev-brand);
  color: var(--ev-brand-ink);
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 15px;
  text-decoration: none;
  transition: filter 140ms ease;
}

.ev-more:hover,
.ev-more:focus-visible {
  filter: brightness(0.93);
}

.ev-more__arrow {
  font-size: 1.125rem;
  line-height: 1;
}

.ev-rows__empty {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1rem;
  background: var(--ev-surface);
  border: 1px solid var(--ev-line);
  border-radius: var(--ev-radius);
  color: var(--ev-muted);
}

/* ---------- Focus and motion ---------- */

.ev-rows a:focus-visible {
  outline: 3px solid var(--ev-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ev-pill,
  .ev-more {
    transition: none;
  }
}

/* ---------- Small screens ---------- */

@media (max-width: 720px) {
  .ev-row {
    flex-wrap: wrap;
  }

  .ev-pill {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .ev-pill {
    margin-left: 0;
  }
}