/* ============================================================
   EVENTWEB — project token + component layer
   Sits on top of the Modernist design system stylesheet.

   Why this file exists: the four page files had drifted to 509
   hardcoded hex values, 93 border-radius declarations and zero
   design-system variables. Everything below re-expresses those
   decisions as tokens so a change lands in one place.

   Accent: the Modernist accent is red #ec3013, but the EVENTWEB
   mark and all four pages are built on blue #1a3ee8. Blue is kept
   as the brand accent because it clears 7.25:1 on white, where the
   red manages 3.76:1 and fails AA for body text. The ramp below
   is the declared override; nothing should hardcode blue again.
   ============================================================ */

:root {
  /* --- ground + ink (Light Mode Default) ---------------------------- */
  --ew-bg: #ffffff;
  --ew-bg-sunken: #f7f8fa;
  --ew-bg-surface: #ffffff;
  --ew-ink: #101215;
  --ew-ink-strong: #000000;

  /* --- neutral ramp (tuned to the white ground) -------------------- */
  --ew-neutral-100: #f7f8fa;
  --ew-neutral-200: #e8e9ed;
  --ew-neutral-300: #e0e2e8;
  --ew-neutral-400: #c3c7d0;
  --ew-neutral-500: #9aa0aa;
  --ew-neutral-600: #6c717c;
  --ew-neutral-700: #4b5160;
  --ew-neutral-800: #2b303b;
  --ew-neutral-900: #101215;

  /* --- accent ramp (brand blue) ------------------------------------ */
  --ew-accent-100: #eef1ff;
  --ew-accent-200: #d6deff;
  --ew-accent-300: #adbcff;
  --ew-accent-400: #6b86f5;
  --ew-accent: #1a3ee8;
  --ew-accent-500: #1a3ee8;
  --ew-accent-600: #122ea8;
  --ew-accent-700: #0e2478;
  --ew-accent-800: #0a1a55;
  --ew-accent-900: #071238;

  /* --- text roles, all AA-verified against their own ground -------- */
  --ew-text: var(--ew-ink);            /* 19.6:1 on white  */
  --ew-text-muted: #6c717c;            /*  4.89:1 on white */
  --ew-text-label: #4b5160;            /*  7.94:1 on white */
  --ew-text-on-dark: #ffffff;
  --ew-text-muted-on-dark: #a9aeb9;    /*  8.68:1 on #0c0e12 */

  /* Dark panel ground, used by the login hero and the board header. */
  --ew-dark: #0c0e12;
  --ew-dark-raised: #141721;
  --ew-dark-line: #242832;

  /* --- category colors ---------------------------------------------
     The brief names five categories. Each carries a color AND a
     letter/label in the markup — color is never the only signal. */
  --ew-cat-academic: #1a3ee8;
  --ew-cat-social: #b3261e;
  --ew-cat-sports: #0b6b3a;
  --ew-cat-religious: #6b3fa0;
  --ew-cat-business: #8a5a00;

  /* --- structure ---------------------------------------------------
     Modernist is a zero-radius system with crisp, refined hairlines.
     Thin 1px borders let cards, navigation, and inputs blend seamlessly. */
  --ew-radius: 0px;
  --ew-rule: 1px;
  --ew-rule-color: var(--ew-ink);
  --ew-hairline: 1px solid var(--ew-neutral-200);

  /* --- spacing (inherits the DS 1.00x scale) ----------------------- */
  --ew-space-1: 4px;
  --ew-space-2: 8px;
  --ew-space-3: 12px;
  --ew-space-4: 16px;
  --ew-space-6: 24px;
  --ew-space-8: 32px;
  --ew-space-10: 40px;

  /* --- type -------------------------------------------------------- */
  --ew-font: "Archivo", system-ui, sans-serif;
  --ew-font-grotesque: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --ew-fs-micro: 12px;   /* floor. nothing renders below this. */
  --ew-fs-small: 13.5px;
  --ew-fs-body: 15px;
  --ew-fs-lead: 16px;

  /* --- motion ------------------------------------------------------ */
  --ew-ease: cubic-bezier(0.2, 0, 0, 1);
  --ew-dur-fast: 120ms;
  --ew-dur: 200ms;
}

/* ============================================================
   DARK MODE TOKEN OVERRIDES
   Rich, high-contrast palette preserving all accessibility & hierarchy
   ============================================================ */

:root[data-theme="dark"],
[data-theme="dark"] {
  --ew-bg: #090a0f;
  --ew-bg-sunken: #10131a;
  --ew-bg-surface: #141824;
  --ew-ink: #f2f4f8;
  --ew-ink-strong: #ffffff;

  --ew-neutral-100: #121622;
  --ew-neutral-200: #1c2234;
  --ew-neutral-300: #29324a;
  --ew-neutral-400: #495675;
  --ew-neutral-500: #7181a4;
  --ew-neutral-600: #9aa7c4;
  --ew-neutral-700: #c2cde2;
  --ew-neutral-800: #e2e8f5;
  --ew-neutral-900: #f7f9fd;

  --ew-accent-100: #15224e;
  --ew-accent-200: #1c337c;
  --ew-accent-300: #264bb5;
  --ew-accent-400: #4971f7;
  --ew-accent: #3d68ff;
  --ew-accent-500: #3d68ff;
  --ew-accent-600: #6688ff;
  --ew-accent-700: #94adff;
  --ew-accent-800: #c5d4ff;
  --ew-accent-900: #e6edff;

  --ew-text: #f0f3f8;
  --ew-text-muted: #9aa7c4;
  --ew-text-label: #b8c4dc;
  --ew-text-on-dark: #ffffff;
  --ew-text-muted-on-dark: #9aa7c4;

  --ew-dark: #050608;
  --ew-dark-raised: #0b0e14;
  --ew-dark-line: #171b26;

  --ew-rule-color: #29324a;
  --ew-hairline: 1px solid #1c2234;

  --ew-cat-academic: #4971f7;
  --ew-cat-social: #f24840;
  --ew-cat-sports: #14b866;
  --ew-cat-religious: #9c67e8;
  --ew-cat-business: #d99318;
}

/* ============================================================
   BASE
   ============================================================ */

body {
  margin: 0;
  background: var(--ew-bg);
  color: var(--ew-text);
  font-family: var(--ew-font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ew-accent); text-decoration: none; }
a:hover { color: var(--ew-accent-600); }
::selection { background: var(--ew-accent-200); }

/* Keyboard focus is themed, never the browser default. */
*:focus-visible {
  outline: 2px solid var(--ew-accent);
  outline-offset: 2px;
  border-radius: 0;
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.rail { scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }

/* Photographs print black and white, per the Modernist imagery rule. */
.grayscale img,
img.grayscale { filter: grayscale(1) contrast(1.04); }

/* Anything that animates must respect the OS setting. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Screen-reader-only text, for the labels that must exist but not show. */
.ew-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first tab stop on every page. */
.ew-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ew-ink);
  color: #fff;
  padding: var(--ew-space-3) var(--ew-space-4);
  font-size: var(--ew-fs-small);
  font-weight: 700;
}
.ew-skip:focus {
  left: var(--ew-space-4);
  top: var(--ew-space-4);
  color: #fff;
}

/* ============================================================
   RULES + SURFACES
   ============================================================ */

.ew-rule { height: var(--ew-rule); background: var(--ew-rule-color); border: 0; margin: 0; }
.ew-rule-soft { height: 1px; background: var(--ew-neutral-200); border: 0; margin: 0; }

.ew-card {
  background: var(--ew-bg);
  border: var(--ew-rule) solid var(--ew-rule-color);
  border-radius: var(--ew-radius);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ew-card-body { padding: var(--ew-space-4); display: flex; flex-direction: column; gap: var(--ew-space-2); min-width: 0; }
.ew-card-kicker { font-size: var(--ew-fs-micro); font-weight: 700; letter-spacing: 0.12em; color: var(--ew-text-muted); text-transform: uppercase; }
.ew-card-title { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; margin: 0; text-wrap: balance; }
.ew-card-meta { font-size: var(--ew-fs-small); color: var(--ew-text-muted); line-height: 1.5; }

/* ============================================================
   BUTTONS & THEME TOGGLE
   Modernist sets button labels flush left, never centered.
   Every control clears the 44px touch target.
   ============================================================ */

.ew-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ew-space-2);
  min-height: 44px;
  padding: var(--ew-space-3) var(--ew-space-4);
  border: var(--ew-rule) solid transparent;
  border-radius: var(--ew-radius);
  font-family: var(--ew-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  transition: background var(--ew-dur-fast) var(--ew-ease),
              color var(--ew-dur-fast) var(--ew-ease),
              border-color var(--ew-dur-fast) var(--ew-ease);
}

.ew-btn-primary { background: var(--ew-accent); color: #fff; border-color: var(--ew-accent); }
.ew-btn-primary:hover { background: var(--ew-accent-600); border-color: var(--ew-accent-600); color: #fff; }
.ew-btn-primary:active { background: var(--ew-accent-700); border-color: var(--ew-accent-700); }

.ew-btn-ink { background: var(--ew-ink); color: var(--ew-bg); border-color: var(--ew-ink); }
.ew-btn-ink:hover { background: var(--ew-neutral-800); border-color: var(--ew-neutral-800); color: var(--ew-bg); }

.ew-btn-secondary { background: transparent; color: var(--ew-ink); border-color: var(--ew-rule-color); }
.ew-btn-secondary:hover { background: var(--ew-accent-100); border-color: var(--ew-accent); color: var(--ew-accent-700); }

.ew-btn-ghost { background: transparent; color: var(--ew-text-muted); border-color: transparent; }
.ew-btn-ghost:hover { background: var(--ew-neutral-100); color: var(--ew-ink); }

.ew-btn-block { width: 100%; }

.ew-btn[disabled], .ew-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* Icon-only controls still need a reachable target and a real name. */
.ew-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--ew-rule) solid var(--ew-rule-color);
  border-radius: var(--ew-radius);
  background: var(--ew-bg);
  color: var(--ew-ink);
  cursor: pointer;
  transition: background var(--ew-dur-fast) var(--ew-ease),
              border-color var(--ew-dur-fast) var(--ew-ease),
              color var(--ew-dur-fast) var(--ew-ease);
}
.ew-btn-icon:hover { background: var(--ew-accent-100); border-color: var(--ew-accent); color: var(--ew-accent-700); }

/* Theme toggle switch button */
.ew-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: var(--ew-rule) solid var(--ew-rule-color);
  border-radius: var(--ew-radius);
  background: var(--ew-bg);
  color: var(--ew-ink);
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: background var(--ew-dur-fast) var(--ew-ease),
              border-color var(--ew-dur-fast) var(--ew-ease),
              color var(--ew-dur-fast) var(--ew-ease),
              transform var(--ew-dur-fast) var(--ew-ease);
}

.ew-theme-toggle:hover {
  background: var(--ew-neutral-100);
  border-color: var(--ew-accent);
  color: var(--ew-accent);
}

.ew-theme-toggle:active {
  transform: scale(0.95);
}

.ew-theme-toggle .ew-sun-icon {
  display: none;
}

.ew-theme-toggle .ew-moon-icon {
  display: block;
}

:root[data-theme="dark"] .ew-theme-toggle .ew-sun-icon,
[data-theme="dark"] .ew-theme-toggle .ew-sun-icon {
  display: block;
}

:root[data-theme="dark"] .ew-theme-toggle .ew-moon-icon,
[data-theme="dark"] .ew-theme-toggle .ew-moon-icon {
  display: none;
}

/* ============================================================
   FILTER CHIPS
   The collection wraps — it is never clipped to one row.
   Selection is carried by aria-pressed, not by color alone.
   ============================================================ */

.ew-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ew-space-2);
  min-width: 0;
}

.ew-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ew-space-2);
  min-height: 44px;
  padding: var(--ew-space-2) var(--ew-space-4);
  border: var(--ew-rule) solid var(--ew-neutral-300);
  border-radius: var(--ew-radius);
  background: var(--ew-bg);
  color: var(--ew-text-label);
  font-family: var(--ew-font);
  font-size: var(--ew-fs-small);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ew-dur-fast) var(--ew-ease),
              border-color var(--ew-dur-fast) var(--ew-ease);
}
.ew-chip:hover { border-color: var(--ew-ink); background: var(--ew-neutral-100); }

/* Selected state: filled AND check-marked, so it survives greyscale. */
.ew-chip[aria-pressed="true"] {
  background: var(--ew-ink);
  border-color: var(--ew-ink);
  color: var(--ew-bg);
}
.ew-chip[aria-pressed="true"]:hover { background: var(--ew-neutral-800); border-color: var(--ew-neutral-800); color: var(--ew-bg); }

/* The category dot is decorative; the label beside it carries the meaning. */
.ew-chip-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  display: inline-block;
}

/* ============================================================
   TAGS
   ============================================================ */

.ew-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--ew-space-2);
  border-radius: var(--ew-radius);
  font-size: var(--ew-fs-micro);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ew-tag-free { background: var(--ew-accent-100); color: var(--ew-accent-700); }
.ew-tag-ink { background: var(--ew-ink); color: var(--ew-bg); }
.ew-tag-outline { border: 1px solid var(--ew-neutral-300); color: var(--ew-text-muted); }
.ew-tag-soon { background: #fdecea; color: #8c1d18; }
:root[data-theme="dark"] .ew-tag-soon,
[data-theme="dark"] .ew-tag-soon { background: rgba(242,72,64,0.18); color: #ff7b75; }

/* ============================================================
   FORMS
   Every field has a visible label. Placeholders never stand in
   for one, and errors sit beside the field they belong to.
   ============================================================ */

.ew-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.ew-label {
  font-size: var(--ew-fs-micro);
  font-weight: 700;
  color: var(--ew-text-label);
  letter-spacing: 0.02em;
}

.ew-input,
.ew-select,
.ew-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  border: var(--ew-rule) solid var(--ew-neutral-300);
  border-radius: var(--ew-radius);
  background: var(--ew-bg);
  font-family: var(--ew-font);
  font-size: var(--ew-fs-body);
  color: var(--ew-text);
  padding: var(--ew-space-3) var(--ew-space-4);
  outline: none;
  transition: border-color var(--ew-dur-fast) var(--ew-ease);
}
.ew-input::placeholder, .ew-textarea::placeholder { color: var(--ew-neutral-500); }
.ew-input:hover, .ew-select:hover, .ew-textarea:hover { border-color: var(--ew-neutral-400); }
.ew-input:focus, .ew-select:focus, .ew-textarea:focus { border-color: var(--ew-accent); }

.ew-hint { font-size: var(--ew-fs-micro); color: var(--ew-text-muted); line-height: 1.5; }

.ew-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--ew-fs-micro);
  font-weight: 600;
  color: #8c1d18;
  line-height: 1.5;
}
.ew-input[aria-invalid="true"] { border-color: #8c1d18; }

/* Search field: a real label, a real target, not a 150px stub.
   Note the flex shorthand is deliberately `none`: this sits inside a
   column-direction .ew-field, where a flex-basis would be read as a
   HEIGHT and balloon the box. Width comes from the field wrapper. */
.ew-search {
  display: flex;
  align-items: center;
  gap: var(--ew-space-2);
  flex: none;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  height: 44px;
  border: var(--ew-rule) solid var(--ew-ink);
  border-radius: var(--ew-radius);
  background: var(--ew-bg);
  padding: 0 var(--ew-space-3);
  min-width: 0;
}
.ew-search input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  padding: var(--ew-space-3) 0;
  outline: none;
  color: var(--ew-text);
}

/* ============================================================
   TABLE
   ============================================================ */

.ew-table { width: 100%; border-collapse: collapse; font-size: var(--ew-fs-small); }
.ew-table th {
  text-align: left;
  font-size: var(--ew-fs-micro);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ew-text-muted);
  padding: var(--ew-space-3) var(--ew-space-3);
  border-bottom: var(--ew-rule) solid var(--ew-ink);
  white-space: nowrap;
}
.ew-table td {
  padding: var(--ew-space-3) var(--ew-space-3);
  border-bottom: 1px solid var(--ew-neutral-200);
  vertical-align: middle;
}
.ew-table tr:hover td { background: var(--ew-neutral-100); }

/* ============================================================
   EMPTY STATE
   An empty screen is an invitation to act, so it always
   carries the action that fills it.
   ============================================================ */

.ew-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ew-space-3);
  padding: var(--ew-space-10) var(--ew-space-6);
  border: var(--ew-rule) dashed var(--ew-neutral-300);
  border-radius: var(--ew-radius);
}
.ew-empty-title { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.ew-empty-body { font-size: var(--ew-fs-small); color: var(--ew-text-muted); line-height: 1.55; max-width: 46ch; margin: 0; }

/* ============================================================
   MAP
   Leaflet creates high internal z-indexes (up to 1000). To prevent
   zoom controls and tiles from overlapping the sticky navbar when
   scrolling up, the entire map frame and knust-map element enforce
   isolated stacking contexts at z-index 1.
   ============================================================ */

.ew-map-frame {
  position: relative;
  z-index: 1 !important;
  isolation: isolate;
  border: var(--ew-rule) solid var(--ew-rule-color);
  border-radius: var(--ew-radius);
  overflow: hidden;
  min-height: 560px;
  background: var(--ew-neutral-100);
}

knust-map {
  display: block;
  position: relative;
  width: 100%;
  height: 560px;
  min-height: 560px;
  z-index: 1 !important;
  isolation: isolate;
}

.leaflet-container {
  position: relative;
  z-index: 1 !important;
  isolation: isolate;
  background: var(--ew-neutral-100) !important;
  font-family: var(--ew-font) !important;
}

/* Constrain all Leaflet internal layers so they cannot breach the map frame */
.leaflet-pane,
.leaflet-tile-pane,
.leaflet-overlay-pane,
.leaflet-shadow-pane,
.leaflet-marker-pane,
.leaflet-tooltip-pane,
.leaflet-popup-pane,
.leaflet-map-pane {
  z-index: 2 !important;
}

.leaflet-top,
.leaflet-bottom,
.leaflet-control {
  z-index: 3 !important;
}

/* Custom themed zoom controls */
.leaflet-control-zoom {
  border: var(--ew-rule) solid var(--ew-rule-color) !important;
  border-radius: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden;
  margin: 14px !important;
}

.leaflet-control-zoom a {
  background: var(--ew-bg) !important;
  color: var(--ew-ink) !important;
  border: none !important;
  border-bottom: 1px solid var(--ew-neutral-200) !important;
  border-radius: 0 !important;
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  transition: background var(--ew-dur-fast) var(--ew-ease), color var(--ew-dur-fast) var(--ew-ease);
}

.leaflet-control-zoom a:last-child {
  border-bottom: none !important;
}

.leaflet-control-zoom a:hover {
  background: var(--ew-neutral-100) !important;
  color: var(--ew-accent) !important;
}

.leaflet-control-attribution {
  background: var(--ew-bg) !important;
  color: var(--ew-text-muted) !important;
  font-size: 11px !important;
  opacity: 0.85;
}

.leaflet-control-attribution a {
  color: var(--ew-accent) !important;
}

/* Dark mode map tile filters for a sleek nighttime campus cartography */
:root[data-theme="dark"] .leaflet-tile-pane,
[data-theme="dark"] .leaflet-tile-pane {
  filter: brightness(0.65) invert(1) contrast(2.6) hue-rotate(195deg) saturate(0.38) brightness(0.9);
}

:root[data-theme="dark"] .leaflet-container,
[data-theme="dark"] .leaflet-container {
  background: #11141d !important;
}

@media (max-width: 720px) {
  knust-map { height: 360px; min-height: 360px; }
}

.ew-venue-list { display: flex; flex-direction: column; gap: 0; }
.ew-venue {
  display: flex;
  align-items: center;
  gap: var(--ew-space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--ew-space-3);
  border: 0;
  border-bottom: 1px solid var(--ew-neutral-200);
  background: none;
  font-family: var(--ew-font);
  font-size: var(--ew-fs-small);
  color: var(--ew-text);
  text-align: left;
  cursor: pointer;
  transition: background var(--ew-dur-fast) var(--ew-ease);
}
.ew-venue:hover { background: var(--ew-neutral-100); }
.ew-venue[aria-current="true"] { background: var(--ew-accent-100); color: var(--ew-accent-700); font-weight: 700; }
.ew-venue-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex: 0 0 auto;
  border: var(--ew-rule) solid var(--ew-rule-color);
  background: var(--ew-ink);
  color: var(--ew-bg);
  font-size: var(--ew-fs-micro);
  font-weight: 700;
}
.ew-venue[aria-current="true"] .ew-venue-num { background: var(--ew-accent); border-color: var(--ew-accent); color: #fff; }

/* ============================================================
   CAROUSEL DOTS
   The visible dot stays small; the hit area does not. The arrow
   buttons remain the primary control, these are the shortcut.
   ============================================================ */

.ew-dot {
  position: relative;
  border: none;
  padding: 0;
  cursor: pointer;
  background: none;
}
/* An invisible 44px pad centred on the dot, so the target clears
   the minimum without changing the visual rhythm of the row. */
.ew-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ============================================================
   RESPONSIVE
   Mobile-first guards. The page never scrolls sideways, and it
   gets there by laying out to fit, not by clipping overflow.
   ============================================================ */

html, body { max-width: 100%; }

/* The header is the one row that genuinely cannot fit a phone in
   one line, so below 900px it stacks and the nav scrolls on its
   own axis rather than pushing the page wide. */
@media (max-width: 900px) {
  .ew-header-inner {
    height: auto !important;
    flex-wrap: wrap;
    gap: var(--ew-space-3) !important;
    padding-top: var(--ew-space-3);
    padding-bottom: var(--ew-space-3);
  }
  /* The inline style on the nav sets `flex:1`, which resolves flex-basis
     to 0% and beats a plain flex-basis here — hence the !important, so the
     nav actually claims its own row instead of sharing with the CTA. */
  .ew-header-nav {
    order: 3;
    flex: 0 0 100% !important;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .ew-header-nav::-webkit-scrollbar { display: none; }
  .ew-header-actions { margin-left: auto; }
}

/* ============================================================
   HERO STAT ROW
   Three columns is right on a laptop and a collision on a phone —
   the labels ("ORGANIZERS", "PLACES LEFT") are wider than a third
   of 390px, so the row wraps instead of overlapping.
   ============================================================ */

.ew-herostats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

@media (max-width: 560px) {
  .ew-herostats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ew-space-3) 0;
  }
  /* the borders that separated columns no longer line up once wrapped */
  .ew-herostats > * { border-left: 0 !important; padding-left: 0 !important; }
  .ew-herostats > *:nth-child(2) {
    border-left: 1px solid rgba(255, 255, 255, 0.16) !important;
    padding-left: var(--ew-space-4) !important;
  }
}

@media (max-width: 720px) {
  :root { --ew-space-10: 20px; }
  .ew-btn-block { width: 100%; }
  .ew-table thead { display: none; }
  .ew-table tr { display: grid; gap: 4px; padding: var(--ew-space-3) 0; border-bottom: 1px solid var(--ew-neutral-200); }
  .ew-table td { border: 0; padding: 2px 0; }
  /* The venue rail sits above the map instead of beside it. */
  .ew-map-frame { grid-column: auto !important; min-height: 360px; }
}

/* ============================================================
   ORGANIZER CONSOLE RESPONSIVE
   Ensures the entire event management and listing form has 100%
   full-width breathing room on mobile screens without being squeezed.
   ============================================================ */

.ew-org-layout {
  display: grid;
  grid-template-columns: 244px 1fr;
  min-height: 100vh;
}

.ew-org-sidebar {
  background: var(--ew-bg);
  border-right: 1px solid var(--ew-neutral-200);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-sizing: border-box;
}

.ew-org-nav-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ew-org-main {
  padding: 26px 32px 56px;
  min-width: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

.ew-org-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
  gap: 22px;
  margin-top: 24px;
  align-items: start;
}

@media (max-width: 1020px) {
  .ew-org-editor-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .ew-org-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .ew-org-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--ew-neutral-200);
    padding: 14px 16px;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--ew-bg);
  }

  .ew-org-sidebar-brand-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .ew-org-sidebar-semester,
  .ew-org-sidebar-user,
  .ew-org-nav-label {
    display: none !important;
  }

  .ew-org-nav-group {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 8px;
    width: 100%;
    padding-bottom: 2px;
  }

  .ew-org-nav-group::-webkit-scrollbar {
    display: none;
  }

  .ew-org-nav-group button {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
    padding: 9px 15px !important;
    border: 1px solid var(--ew-neutral-300) !important;
    font-size: 13.5px !important;
  }

  .ew-org-main {
    padding: 16px 14px 48px;
    width: 100%;
  }

  .ew-org-table-header {
    display: none !important;
  }

  .ew-org-table-row {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 16px 14px !important;
  }

  .ew-org-table-row > * {
    width: 100%;
  }

  .ew-org-table-actions {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
  }

  .ew-org-table-actions button {
    flex: 1;
    text-align: center;
    padding: 11px 14px !important;
    min-height: 44px;
  }
}

@media (max-width: 600px) {
  .ew-org-option-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}