/* ==========================================================================
   Events pages - Kevin White for Sheriff
   Kept in its own file so a Blocs re-export of all.css never overwrites it.
   ========================================================================== */

:root {
  --ev-gold: rgba(255, 187, 3, 1);
  --ev-gold-hover: rgba(255, 202, 57, 1);
  --ev-dark: rgba(27, 27, 27, 1);
  --ev-card: rgba(38, 38, 38, 1);
  --ev-line: rgba(255, 255, 255, 0.12);
  --ev-text: rgba(255, 255, 255, 0.78);
}

/* ---------- Events header background ---------- */
/* Applied straight to the bloc (no parallax), so "left top" anchors to the
   top of the header itself and nothing gets cropped behind the navbar.
   Lives here rather than all.css so a Blocs re-export can't wipe it. */
.bg-kevinwhitebg {
  background-color: var(--ev-dark);
  background-image: url("/img/kevinwhitebg.jpg");
  background-position: left top;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ---------- Grid of event cards ---------- */
.ev-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.ev-card {
  display: flex;
  flex-direction: column;
  background-color: var(--ev-card);
  border: 1px solid var(--ev-line);
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ev-card:hover {
  transform: translateY(-4px);
  border-color: var(--ev-gold);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.ev-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #111;
}

.ev-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ev-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 22px 24px;
}

.ev-card-name {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 14px;
}

.ev-meta {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.ev-meta li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ev-text);
  margin-bottom: 8px;
}

.ev-meta li:last-child { margin-bottom: 0; }

.ev-meta .ev-ico {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  fill: var(--ev-gold);
}

.ev-card-summary {
  font-family: "Lato", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ev-text);
  margin: 0 0 22px;
}

.ev-card-actions { margin-top: auto; }

/* ---------- Gold button (matches .itsabutton in all.css) ---------- */
.ev-btn {
  display: inline-block;
  background-color: var(--ev-gold);
  color: #000 !important;
  font-family: "Lato", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 11px 26px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ev-btn:hover,
.ev-btn:focus { background-color: var(--ev-gold-hover); color: #000 !important; }

.ev-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.ev-btn-wide { width: 100%; }

.ev-btn-wire {
  display: inline-block;
  background: transparent;
  color: var(--ev-gold) !important;
  border: 2px solid var(--ev-gold);
  font-family: "Lato", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  padding: 9px 24px;
  border-radius: 10px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.ev-btn-wire:hover { background-color: var(--ev-gold); color: #000 !important; }

/* ---------- "To Be Announced" placeholder card ---------- */
.ev-card-tba {
  border-style: dashed;
  border-color: rgba(255, 187, 3, 0.45);
  background-color: rgba(38, 38, 38, 0.55);
}

.ev-card-tba:hover {
  transform: none;
  border-color: rgba(255, 187, 3, 0.7);
  box-shadow: none;
}

.ev-card-media-tba {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 187, 3, 0.07);
}

.ev-tba-mark {
  width: 54px;
  height: 54px;
  fill: rgba(255, 187, 3, 0.4);
}

.ev-card-tba .ev-card-name { color: rgba(255, 255, 255, 0.72); }
.ev-card-tba .ev-meta li,
.ev-card-tba .ev-card-summary { color: rgba(255, 255, 255, 0.55); }
.ev-card-tba .ev-ico { fill: rgba(255, 187, 3, 0.55); }

.ev-btn-muted {
  display: inline-block;
  background-color: transparent;
  color: rgba(255, 187, 3, 0.75) !important;
  border: 2px dashed rgba(255, 187, 3, 0.45);
  font-family: "Lato", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 24px;
  border-radius: 10px;
  cursor: default;
}

/* ---------- Empty state ---------- */
.ev-empty {
  text-align: center;
  font-family: "Lato", sans-serif;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ev-text);
  padding: 40px 0 10px;
}

.ev-empty strong { color: #fff; display: block; font-size: 24px; margin-bottom: 10px; }

/* ---------- Single event page ---------- */
.ev-hero {
  width: 100%;
  max-height: 620px;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: 18px;
  display: block;
  background-color: #111;
}

.ev-title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 55px;
  line-height: 1.05;
  letter-spacing: -1px;
  color: #fff;
  margin: 34px 0 24px;
}

.ev-detail-meta {
  list-style: none;
  margin: 0 0 30px;
  padding: 22px 24px;
  background-color: var(--ev-card);
  border: 1px solid var(--ev-line);
  border-left: 4px solid var(--ev-gold);
  border-radius: 12px;
}

.ev-detail-meta li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: "Lato", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ev-text);
  margin-bottom: 12px;
}

.ev-detail-meta li:last-child { margin-bottom: 0; }
.ev-detail-meta .ev-ico { width: 19px; height: 19px; margin-top: 3px; fill: var(--ev-gold); flex: 0 0 auto; }
.ev-detail-meta a { color: var(--ev-gold) !important; text-decoration: underline; }

.ev-body p {
  font-family: "Lato", sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ev-text);
  margin-bottom: 18px;
}

.ev-section-title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 34px;
  color: #fff;
  margin: 0 0 8px;
}

/* ---------- RSVP form ---------- */
.ev-rsvp {
  background-color: var(--ev-card);
  border: 1px solid var(--ev-line);
  border-radius: 16px;
  padding: 32px 30px 34px;
}

.ev-rsvp-intro {
  font-family: "Lato", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ev-text);
  margin: 0 0 24px;
}

.ev-field { margin-bottom: 18px; }

.ev-field label {
  display: block;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  margin-bottom: 7px;
}

.ev-field input,
.ev-field select,
.ev-field textarea {
  width: 100%;
  font-family: "Lato", sans-serif;
  font-size: 17px;
  color: #fff;
  background-color: rgba(94, 94, 94, 0.18);
  border: 0;
  border-bottom: 3px solid var(--ev-gold);
  border-radius: 4px 4px 0 0;
  padding: 12px 14px;
  outline: none;
}

.ev-field textarea { min-height: 110px; resize: vertical; }

.ev-field select option { color: #000; }

.ev-field input::placeholder,
.ev-field textarea::placeholder { color: rgba(255, 255, 255, 0.45); }

.ev-field input:focus,
.ev-field select:focus,
.ev-field textarea:focus { background-color: rgba(94, 94, 94, 0.3); }

.ev-field.ev-invalid input,
.ev-field.ev-invalid select,
.ev-field.ev-invalid textarea { border-bottom-color: #ff5a5a; }

.ev-error {
  display: none;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  color: #ff8a8a;
  margin-top: 6px;
}

.ev-field.ev-invalid .ev-error { display: block; }

/* Honeypot - hidden from people, visible to bots */
.ev-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ev-form-msg {
  display: none;
  font-family: "Lato", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 18px;
}

.ev-form-msg.ev-show { display: block; }
.ev-form-msg.ev-ok { background-color: rgba(255, 187, 3, 0.14); border: 1px solid var(--ev-gold); color: #fff; }
.ev-form-msg.ev-bad { background-color: rgba(255, 90, 90, 0.12); border: 1px solid #ff5a5a; color: #ffdada; }

.ev-required { color: var(--ev-gold); }

/* ---------- Attending checkbox ---------- */
.ev-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 4px 0 22px;
}

.ev-check-input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--ev-gold);
  cursor: pointer;
}

.ev-check label {
  font-family: "Lato", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ev-text);
  cursor: pointer;
  margin: 0;
}

/* ---------- Ended / not-found state ---------- */
.ev-notice {
  text-align: center;
  padding: 30px 0;
}

.ev-notice h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 44px;
  color: #fff;
  margin-bottom: 16px;
}

.ev-notice p {
  font-family: "Lato", sans-serif;
  font-size: 19px;
  color: var(--ev-text);
  margin-bottom: 26px;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .ev-title { font-size: 44px; }
}

@media (max-width: 767px) {
  .ev-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ev-title { font-size: 36px; line-height: 1.12; }
  .ev-card-name { font-size: 23px; }
  .ev-hero { aspect-ratio: 4 / 3; border-radius: 12px; }
  .ev-rsvp { padding: 26px 20px 28px; }
  .ev-section-title { font-size: 28px; }
  .ev-btn,
  .ev-btn-muted { width: 100%; }
}

.ev-inline-link { color: var(--ev-gold) !important; text-decoration: underline; }