.ev-hero-grid { display:grid; grid-template-columns:20rem 1fr 21rem; min-height:17rem; }
.ev-main-grid { display:grid; grid-template-columns:1fr 19rem; gap:2.5rem; align-items:start; }
.ev-card-grid  { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }

.ev-card { display:flex; flex-direction:column; background:var(--bg-card-subtle); border:1px solid var(--border-normal); border-radius:0.75rem; overflow:hidden; transition:transform 0.22s, border-color 0.22s, box-shadow 0.22s; }
.ev-card:hover { transform:translateY(-4px); border-color:rgba(239,68,68,0.35); box-shadow:0 12px 32px var(--shadow-card); }
.ev-card-img   { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.45s; }
.ev-card:hover .ev-card-img { transform:scale(1.07); }

.ev-bookmark { position:absolute; top:0.75rem; right:0.75rem; width:1.8rem; height:1.8rem; border-radius:50%; background:rgba(0,0,0,0.48); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(6px); transition:background 0.15s; z-index:1; }
.ev-bookmark:hover { background:rgba(239,68,68,0.75); }

/* Arrows: vertically centered in the TOP portion of hero image, not over text */
.ev-nav-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:1.7rem; height:1.7rem; border-radius:50%;
  background:rgba(0,0,0,0.32); border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:rgba(255,255,255,0.78);
  opacity:0; transition:opacity 0.25s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.ev-hero-center:hover .ev-nav-arrow,
.ev-nav-arrow:focus-visible { opacity:0.85; }
.ev-nav-arrow:hover { background:rgba(0,0,0,0.55); color:#fff; opacity:1; }
.ev-nav-prev { left:0.4rem; }
.ev-nav-next { right:0.4rem; }
.ev-nav-prev:hover { transform:translateY(-50%) translateX(-1px); }
.ev-nav-next:hover { transform:translateY(-50%) translateX(1px); }

/* Hero carousel slides + dots */
.ev-slide { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity 0.55s ease; z-index:1; }
.ev-slide-active { opacity:1; pointer-events:auto; z-index:2; }
.ev-dot {
  width:0.3rem; height:0.3rem; border-radius:2rem;
  background:rgba(255,255,255,0.35); border:none; padding:0;
  cursor:pointer; transition:width 0.3s ease, background 0.3s ease;
}
.ev-dot-active { width:1.5rem; background:#ef4444; }
.ev-dot:hover { background:rgba(255,255,255,0.6); }
.ev-dot-active:hover { background:#ef4444; }

.ev-toggle { width:2.2rem; height:1.15rem; background:var(--border-strong); border-radius:2rem; position:relative; cursor:pointer; transition:background 0.2s; }
.ev-toggle::after { content:''; position:absolute; top:0.175rem; left:0.175rem; width:0.8rem; height:0.8rem; border-radius:50%; background:white; transition:transform 0.2s; box-shadow:0 1px 4px rgba(0,0,0,0.35); }
.ev-toggle.active { background:#ef4444; }
.ev-toggle.active::after { transform:translateX(1.025rem); }

section:hover .ev-hero-img { transform:scale(1.04); }

/* Calendar */
.ev-cal-hdr  { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.65rem; }
.ev-cal-nav  { background:none; border:none; cursor:pointer; color:var(--text-secondary); padding:0.15rem 0.42rem; border-radius:0.3rem; font-size:0.92rem; line-height:1; transition:color 0.15s; }
.ev-cal-nav:hover { color:#ef4444; }
.ev-cal-mo   { font-size:0.74rem; font-weight:700; color:var(--text-primary); }
.ev-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:0.1rem; text-align:center; }
.ev-dow      { font-size:0.52rem; font-weight:700; color:var(--text-faintest); padding:0.2rem 0; text-transform:uppercase; letter-spacing:0.04em; }
.ev-day      { font-size:0.62rem; color:var(--text-muted); width:1.5rem; height:1.5rem; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; margin:0 auto; transition:background 0.12s, color 0.12s; }
.ev-day:hover { background:var(--bg-input); color:var(--text-primary); }
.ev-day.today { background:#ef4444; color:white; font-weight:800; }
.ev-day.has-ev { position:relative; }
.ev-day.has-ev::after { content:''; position:absolute; bottom:0.07rem; left:50%; transform:translateX(-50%); width:0.28rem; height:0.28rem; border-radius:50%; background:#ef4444; }
.ev-day.my-ev::after { background:#3b82f6; }
.ev-day.today::after { background:rgba(255,255,255,0.75); }
.ev-day.empty { cursor:default; pointer-events:none; }

@media (max-width:1280px) { .ev-hero-grid { grid-template-columns:17rem 1fr 18rem; } .ev-card-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:1100px) {
  .ev-hero-left { padding: 1.75rem 1.75rem 1.25rem !important; }
  .ev-hero-left h1 { font-size: 2.2rem !important; }
}
@media (max-width:1024px) {
  .ev-hero-grid {
    grid-template-columns:1fr 18rem !important;
    grid-template-areas: "left right" "center center" !important;
    min-height:auto !important;
  }
  .ev-hero-left   { grid-area:left;   border-right:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); padding:1.5rem 1.5rem 1.25rem !important; }
  .ev-hero-right  { grid-area:right;  border-left:none !important; border-bottom:1px solid var(--border-subtle); padding:1.25rem 1.4rem !important; }
  .ev-hero-center { grid-area:center; min-height:18rem; }
  .ev-hero-left h1 { font-size:1.9rem !important; margin-bottom:0.4rem !important; }
  .ev-hero-left > p { font-size:0.78rem !important; max-width:none !important; margin-bottom:1rem !important; }
  .ev-hero-center h2 { font-size:1.5rem !important; max-width:none !important; }
  .ev-hero-center > div:last-child { padding:0 1.5rem 1.5rem !important; }
  .ev-main-grid { grid-template-columns:1fr; }
  .ev-card-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px) {
  .ev-hero-grid { grid-template-columns:1fr !important; grid-template-areas: "left" "right" "center" !important; }
  .ev-hero-left  { border-right:none !important; }
}
@media (max-width:600px)  {
  .ev-hero-left { padding:1.25rem 1.25rem 1rem !important; }
  .ev-hero-left h1 { font-size:1.65rem !important; }
  .ev-hero-right { padding:1rem 1.25rem !important; }
  .ev-hero-center { min-height:15rem; }
  .ev-hero-center h2 { font-size:1.25rem !important; margin-bottom:0.4rem !important; }
  .ev-hero-center > div:last-child { padding:0 1.25rem 1.25rem !important; }
  .ev-nav-arrow { width:1.7rem; height:1.7rem; }
  .ev-nav-prev { left:0.5rem; }
  .ev-nav-next { right:0.5rem; }
  .ev-card-grid { grid-template-columns:1fr; }
}