/* ============================================================================
   ZimAura — What's On (/events)
   ----------------------------------------------------------------------------
   Loaded only on the events pages, on top of styles.css.

   The brief was clean and simple, so this leans on white space and one strong
   accent rather than on colour. Everything resolves from the same theme tokens
   as the rest of the public site (--terracotta, --gold, --charcoal, --sandy),
   so re-theming the website surface re-themes this too.
   ========================================================================= */

.ev {
  --line: var(--sandy);
  --line-soft: color-mix(in srgb, var(--sandy) 50%, var(--white));
  --muted: var(--warm-gray);
  --tint: color-mix(in srgb, var(--terracotta) 7%, var(--white));
  --tint-line: color-mix(in srgb, var(--terracotta) 22%, var(--white));
  --ink: color-mix(in srgb, var(--charcoal) 90%, #000);
  --on-ink: color-mix(in srgb, var(--cream) 92%, #fff);
  --on-ink-muted: color-mix(in srgb, var(--cream) 55%, transparent);
}

/* The banner.

   Not the site's `.page-hero`: that is built for a full-bleed photograph and
   is 50vh tall, and the short variant puts its heading straight under the
   fixed header, where the two collide. There is also no stock photograph that
   honestly represents "everything happening in Zimbabwe" — so this leans on
   type and one gold rule instead, which is both cleaner and truer. */
.ev-banner {
  padding: calc(var(--nav-height) + 58px) 24px 54px;
  background:
    radial-gradient(120% 180% at 88% -40%, color-mix(in srgb, var(--gold) 20%,
    transparent), transparent 62%),
    linear-gradient(155deg, color-mix(in srgb, var(--charcoal) 76%, #000),
    var(--ink));
  color: var(--on-ink);
  text-align: center;
}

.ev-banner-inner {
  max-width: 640px;
  margin: 0 auto;
}

.ev-banner .kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 18px;
}

.ev-banner .kicker::before,
.ev-banner .kicker::after {
  content: "";
  width: 26px;
  height: 1px;
  background: color-mix(in srgb, var(--gold) 55%, transparent);
}

.ev-banner h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--on-ink);
}

.ev-banner p {
  margin-top: 16px;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--on-ink-muted);
}

.ev-page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* ── Toolbar ──────────────────────────────────────────────────────────────
   One row: the view switch, the filters, and the count. Sticky, because on a
   long list of a country's events the filters are what you keep coming back
   to. */

.ev-toolbar {
  position: sticky;
  top: var(--nav-height);
  z-index: 30;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  margin-bottom: 36px;
}

.ev-toolbar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* List / Calendar switch. */
.ev-views {
  display: inline-flex;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  background: var(--white);
  flex-shrink: 0;
}

.ev-view {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}

.ev-view:hover {
  color: var(--charcoal);
}

.ev-view[aria-current="page"] {
  background: var(--terracotta);
  color: #fff;
}

.ev-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.ev-search {
  position: relative;
  flex: 1;
  min-width: 190px;
  max-width: 320px;
}

.ev-search i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.82rem;
  pointer-events: none;
}

.ev-search input {
  width: 100%;
  padding: 10px 16px 10px 38px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--charcoal);
}

.ev-search input:focus {
  outline: none;
  border-color: var(--terracotta);
}

.ev-select {
  padding: 10px 34px 10px 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--charcoal);
  cursor: pointer;
  appearance: none;
  /* Inline chevron, so no icon font is needed inside a native select. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}

.ev-select:focus {
  outline: none;
  border-color: var(--terracotta);
}

.ev-apply {
  padding: 10px 22px;
  border: none;
  border-radius: 999px;
  background: var(--terracotta);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.ev-apply:hover {
  background: var(--terracotta-dark);
}

.ev-clear {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.ev-clear:hover {
  color: var(--terracotta);
}

.ev-count {
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
  margin-left: auto;
}

/* ── Month headings ─────────────────────────────────────────────────────── */

.ev-month {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 52px 0 24px;
}

.ev-month:first-of-type {
  margin-top: 0;
}

.ev-month h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  color: var(--charcoal);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* A hairline running to the right margin — the one flourish on the page. */
.ev-month::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

.ev-month .n {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Event cards ────────────────────────────────────────────────────────── */

.ev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 28px;
}

.ev-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.ev-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--tint-line);
}

.ev-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--terracotta) 22%,
    var(--cream-dark)), var(--cream-dark));
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--terracotta) 55%, var(--white));
  font-size: 1.8rem;
  overflow: hidden;
}

/* The date block. Reads first, which is what an events list is for. */
.ev-date {
  position: absolute;
  top: 14px;
  left: 14px;
  min-width: 58px;
  padding: 9px 10px 8px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--white) 94%, transparent);
  backdrop-filter: blur(8px);
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  line-height: 1;
}

.ev-date .d {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--charcoal);
  font-variant-numeric: tabular-nums;
}

.ev-date .m {
  display: block;
  margin-top: 4px;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--terracotta);
}

/* A run of days, for a festival. */
.ev-date .r {
  display: block;
  margin-top: 3px;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.ev-flag {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 92%, transparent);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.ev-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.ev-eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--terracotta);
}

.ev-card-body h3 {
  font-family: var(--font-serif);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--charcoal);
  letter-spacing: -0.005em;
}

.ev-card-body p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ev-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.82rem;
  color: var(--muted);
}

.ev-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ev-meta i {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--terracotta) 65%, var(--muted));
}

.ev-card-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ev-price {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--charcoal);
}

.ev-price small {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.78rem;
}

.ev-price.is-free {
  color: var(--deep-green);
}

.ev-go {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--terracotta);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ev-card:hover .ev-go i {
  transform: translateX(3px);
}

.ev-go i {
  transition: transform 0.2s;
}

/* ── Featured strip ─────────────────────────────────────────────────────── */

.ev-featured {
  /* It is a link wrapping a whole block of prose, so the inherited underline
     and link colour have to be cleared here as they are on .ev-card. */
  text-decoration: none;
  color: inherit;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  margin-bottom: 44px;
  box-shadow: var(--shadow-sm);
}

.ev-featured-media {
  position: relative;
  min-height: 320px;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--terracotta) 26%,
    var(--cream-dark)), var(--cream-dark));
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--terracotta) 50%, var(--white));
  font-size: 2.4rem;
}

.ev-featured-body {
  padding: 38px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}

.ev-featured-body h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--charcoal);
  letter-spacing: -0.015em;
}

.ev-featured-body p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Calendar ───────────────────────────────────────────────────────────── */

.ev-cal {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
}

.ev-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 26px;
  background:
    radial-gradient(120% 200% at 100% -60%, color-mix(in srgb, var(--gold) 20%,
    transparent), transparent 60%),
    linear-gradient(150deg, color-mix(in srgb, var(--charcoal) 74%, #000),
    var(--ink));
  color: var(--on-ink);
  flex-wrap: wrap;
}

.ev-cal-head h2 {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ev-cal-head .sub {
  font-size: 0.82rem;
  color: var(--on-ink-muted);
  margin-top: 4px;
}

.ev-cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ev-cal-nav a {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 15px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--on-ink) 20%, transparent);
  color: var(--on-ink);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.18s;
}

.ev-cal-nav a:hover {
  background: color-mix(in srgb, var(--on-ink) 12%, transparent);
}

.ev-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
}

.ev-dow {
  background: var(--cream-dark);
  padding: 11px 8px;
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.ev-day {
  background: var(--white);
  min-height: 124px;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ev-day.is-outside {
  background: var(--cream-dark);
}

.ev-day.is-outside .ev-daynum {
  color: color-mix(in srgb, var(--muted) 42%, var(--white));
}

.ev-daynum {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding: 2px;
}

.ev-day.is-today .ev-daynum {
  background: var(--terracotta);
  color: #fff;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  padding: 0;
}

.ev-pip {
  display: block;
  font-size: 0.73rem;
  line-height: 1.3;
  padding: 5px 8px;
  border-radius: 5px;
  background: var(--tint);
  border-left: 2px solid var(--terracotta);
  color: var(--terracotta-dark);
  text-decoration: none;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ev-pip:hover {
  background: color-mix(in srgb, var(--terracotta) 15%, var(--white));
}

.ev-pip.is-featured {
  background: color-mix(in srgb, var(--gold) 15%, var(--white));
  border-left-color: var(--gold);
  color: color-mix(in srgb, var(--gold) 72%, #000);
}

.ev-more {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 600;
  padding-left: 8px;
}

/* The agenda beneath the grid — and the only view below 720px. */
.ev-agenda {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ev-row {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 15px 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.ev-row:hover {
  border-color: var(--tint-line);
  box-shadow: var(--shadow-sm);
}

.ev-row-date {
  text-align: center;
  border-right: 1px solid var(--line-soft);
  padding-right: 16px;
}

.ev-row-date .d {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  color: var(--charcoal);
  font-variant-numeric: tabular-nums;
}

.ev-row-date .m {
  display: block;
  margin-top: 4px;
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 700;
}

.ev-row-body h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.25;
  margin-bottom: 5px;
}

/* ── Detail page ────────────────────────────────────────────────────────── */

.ev-hero {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  padding: 44px 0;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--terracotta) 30%,
    var(--ink)), var(--ink));
  background-size: cover;
  background-position: center;
  color: var(--on-ink);
  margin-top: var(--nav-height);
}

.ev-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, transparent 35%,
    color-mix(in srgb, var(--ink) 88%, transparent) 100%);
}

.ev-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.ev-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.018em;
  max-width: 20ch;
}

.ev-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 18px;
  font-size: 0.95rem;
  color: var(--on-ink-muted);
}

.ev-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.ev-hero-meta i {
  color: var(--gold);
}

.ev-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  align-items: start;
}

.ev-prose h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 14px;
}

.ev-prose p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--charcoal-light);
  white-space: pre-line;
}

.ev-aside {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ev-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  overflow: hidden;
}

.ev-panel-head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft);
}

.ev-panel-head h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--charcoal);
}

.ev-panel-body {
  padding: 20px 22px;
}

.ev-kv + .ev-kv {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.ev-kv .k {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.ev-kv .v {
  font-size: 0.98rem;
  color: var(--charcoal);
  font-weight: 600;
  margin-top: 5px;
  line-height: 1.45;
}

.ev-kv .v small {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 3px;
}

.ev-ticket {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
}

.ev-ticket + .ev-ticket {
  border-top: 1px solid var(--line-soft);
}

.ev-ticket .name {
  font-weight: 600;
  color: var(--charcoal);
  font-size: 0.93rem;
}

.ev-ticket .desc {
  font-size: 0.81rem;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.5;
}

.ev-ticket .amt {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--charcoal);
  white-space: nowrap;
}

.ev-soldout {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-gray);
}

/* ── Empty state ────────────────────────────────────────────────────────── */

.ev-empty {
  text-align: center;
  padding: 76px 28px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.ev-empty i {
  display: block;
  font-size: 2.2rem;
  color: color-mix(in srgb, var(--terracotta) 42%, var(--white));
  margin-bottom: 20px;
}

.ev-empty h2 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 10px;
}

.ev-empty p {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.7;
  max-width: 50ch;
  margin: 0 auto 26px;
}

.ev-empty-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .ev-detail {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .ev-aside {
    position: static;
  }

  .ev-featured {
    grid-template-columns: minmax(0, 1fr);
  }

  .ev-featured-media {
    min-height: 230px;
  }

  .ev-featured-body {
    padding: 28px 26px;
  }
}

@media (max-width: 860px) {
  /* The toolbar wraps to three rows at this width. Pinned, that is a third of
     a phone screen permanently spent on filters, so it scrolls away instead. */
  .ev-toolbar {
    position: static;
  }

  /* Stacked rather than wrapped: letting the view switch and the filters share
     a wrapping row interleaves them, so the switch ends up between two
     dropdowns. One row each keeps the order readable. */
  .ev-toolbar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
  }

  .ev-views {
    align-self: flex-start;
  }

  .ev-filters {
    width: 100%;
  }

  .ev-search {
    max-width: none;
    flex-basis: 100%;
  }

  .ev-count {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 720px) {
  .ev-page {
    padding: 28px 16px 60px;
  }

  /* The month grid stops being readable at this width; the agenda list under
     it carries exactly the same events in one column. */
  .ev-cal-grid {
    display: none;
  }

  .ev-row {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
  }

  .ev-row .ev-flag-inline {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .ev-hero {
    min-height: 40vh;
    padding: 32px 0;
  }

  .ev-month {
    margin: 40px 0 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ev * {
    transition-duration: 0.01ms !important;
  }
}