/* event-single.css */

/* Back arrow */
.single-back{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);
  padding:var(--sp-4) 0;transition:color var(--t-fast);
}
.single-back:hover{color:var(--text-primary)}

/* Banner */
.ev-single-banner{
  aspect-ratio:16/6;background:var(--grey-200);overflow:hidden;
  border-radius:0;display:block;position:relative;
}
.ev-single-banner img{width:100%;height:100%;object-fit:cover;display:block}

/* Layout */
.ev-single-wrap{
  display:grid;grid-template-columns:1fr 300px;
  gap:var(--sp-10);align-items:start;
  padding-block:var(--sp-8) var(--sp-16);
}
.ev-single-main{}
.ev-single-aside{position:sticky;top:calc(var(--navbar-h) + var(--sp-4))}

/* Title row */
.ev-single-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-6);padding-bottom:var(--sp-5);border-bottom:1px solid var(--border)}
.ev-single-title{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2rem);font-weight:800}
.ev-single-actions{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}
.ev-single-star,.ev-single-share,.ev-single-cal{
  width:36px;height:36px;border-radius:var(--r-full);
  border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);cursor:pointer;
  transition:all var(--t-fast);background:transparent;
}
.ev-single-star:hover,.ev-single-star.active{color:var(--yellow-hover);border-color:var(--yellow-hover)}
.ev-single-share:hover{color:var(--text-primary);border-color:var(--text-secondary)}
.ev-single-cal:hover{color:var(--navy);border-color:var(--navy)}
.ev-single-edit{
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 var(--sp-4);
  border-radius:var(--r-full);border:1.5px solid var(--navy);
  color:var(--navy);font-size:var(--text-sm);font-weight:600;
  background:transparent;transition:all var(--t-fast);white-space:nowrap;
}
.ev-single-edit:hover{background:var(--navy);color:#fff}

/* Section blocks */
.ev-section{margin-bottom:var(--sp-8)}
.ev-section-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;margin-bottom:var(--sp-4)}
.ev-section-divider{border:none;border-top:1px solid var(--border);margin:var(--sp-8) 0}

/* Date & Time */
.ev-dt-row{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--text-base);color:var(--text-primary);margin-bottom:var(--sp-2)}
.ev-dt-row svg{flex-shrink:0;color:var(--text-muted)}
.ev-add-cal{font-size:var(--text-sm);color:var(--blue);font-weight:500;transition:opacity var(--t-fast)}
.ev-add-cal:hover{opacity:.7}
.ev-add-cal-group{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-2)}

/* Location */
.ev-loc-addr{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--text-base);margin-bottom:var(--sp-4)}
.ev-loc-addr svg{flex-shrink:0;margin-top:3px;color:var(--text-muted)}
.ev-map{width:100%;aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden;background:var(--grey-100);border:1px solid var(--border)}
.ev-map iframe{width:100%;height:100%;border:none;display:block}
.ev-map-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:var(--text-sm)}

/* Host */
.ev-host{display:flex;align-items:center;gap:var(--sp-4)}
.ev-host__avatar{width:52px;height:52px;border-radius:var(--r-full);overflow:hidden;background:var(--grey-200);flex-shrink:0}
.ev-host__avatar img{width:100%;height:100%;object-fit:cover}
.ev-host__name{font-family:var(--font-display);font-size:var(--text-base);font-weight:700;margin-bottom:2px}
.ev-host__friends{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--sp-2)}
.ev-host__friends.is-hidden{display:none}
.ev-host__btns{display:flex;gap:var(--sp-2)}
.ev-host__btn{
  font-size:var(--text-sm);font-weight:500;
  padding:var(--sp-1) var(--sp-4);border-radius:var(--r-md);
  border:1.5px solid var(--border);color:var(--text-secondary);
  background:transparent;cursor:pointer;transition:all var(--t-fast);
}
.ev-host__btn:hover{border-color:var(--navy);color:var(--navy)}
.ev-host__btn--disabled{opacity:.5;cursor:not-allowed}
.ev-host__btn--disabled:hover{border-color:var(--border);color:var(--text-secondary)}
/* Connect (BuddyPress Friends) — default = "Add Friend" (navy filled) */
.ev-host__btn--follow{background:var(--navy);color:#fff;border-color:var(--navy)}
.ev-host__btn--follow:hover{background:var(--navy-hover)}
/* Already friends: quiet outline — click to remove */
.ev-host__btn--follow.status-is_friend{background:#fff;color:var(--navy);border-color:var(--border)}
.ev-host__btn--follow.status-is_friend:hover{background:#fff;border-color:var(--navy)}
/* Request sent: muted — click to cancel */
.ev-host__btn--follow.status-pending{background:#fff;color:var(--text-muted);border-color:var(--border)}
.ev-host__btn--follow.status-pending:hover{background:#fff;color:var(--navy);border-color:var(--navy)}
/* They've requested you: highlight to accept */
.ev-host__btn--follow.status-awaiting_response{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}
.ev-host__btn--follow.status-awaiting_response:hover{filter:brightness(.96)}

/* Description */
.ev-desc{font-size:var(--text-base);line-height:1.75;color:var(--text-secondary)}
.ev-desc p+p{margin-top:var(--sp-4)}
.ev-desc strong,.ev-desc b{color:var(--text-primary)}

/* Tags */
.ev-tags{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.ev-tag{
  font-size:var(--text-sm);font-weight:500;
  padding:var(--sp-2) var(--sp-4);border-radius:var(--r-full);
  border:1px solid var(--border);color:var(--text-secondary);
  transition:all var(--t-fast);
}
.ev-tag:hover{border-color:var(--navy);color:var(--navy)}
/* Organiser keywords: dashed border reads as free-form; links to a search */
.ev-tag--kw{border-style:dashed}

/* Aside: Buy Tickets */
.buy-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:var(--sp-3);
  background:var(--yellow);color:var(--navy);
  font-family:var(--font-body);font-size:var(--text-base);font-weight:700;
  padding:var(--sp-4) var(--sp-6);border-radius:var(--r-md);
  cursor:pointer;border:none;margin-bottom:var(--sp-5);
  transition:background var(--t-fast),transform var(--t-fast);
}
.buy-btn:hover{background:var(--yellow-hover);transform:translateY(-1px)}

/* Already-booked notice — tells a signed-in viewer they already hold a ticket,
   so they don't unintentionally book the same event twice. */
.ev-booked{
  display:flex;gap:var(--sp-3);align-items:flex-start;
  padding:var(--sp-4);border-radius:var(--r-md);margin-bottom:var(--sp-4);
  border:1px solid var(--border);
}
.ev-booked--confirmed{background:#eafaf1;border-color:#b7e4c7}
.ev-booked--pending{background:#fef7e6;border-color:#f5d78e}
.ev-booked__icon{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--r-full);color:#fff;
}
.ev-booked--confirmed .ev-booked__icon{background:#27ae60}
.ev-booked--pending .ev-booked__icon{background:#e0a300}
.ev-booked__icon svg{width:18px;height:18px}
.ev-booked__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.ev-booked__title{font-family:var(--font-display);font-weight:700;font-size:var(--text-base);color:var(--navy)}
.ev-booked__text{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5}

/* "View my ticket" — solid navy so it reads as the settled state, distinct from
   the yellow "buy" CTA. Shares the .buy-btn box, minus the pointer/hover accent. */
.buy-btn--view{background:var(--navy);color:#fff;text-decoration:none}
.buy-btn--view:hover{background:var(--navy-hover);color:#fff}

/* "Book another ticket" — quiet secondary, only shown where repeat bookings are
   allowed. Tucked just under the view button. */
.ev-book-again{
  width:100%;display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;
  color:var(--text-secondary);padding:var(--sp-2);
  margin:calc(var(--sp-2) * -1) 0 var(--sp-5);
  text-decoration:underline;text-underline-offset:2px;
}
.ev-book-again:hover{color:var(--navy)}

/* Ticket info box */
.ticket-info{border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden}
.ticket-info__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}
.ticket-info__row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);font-size:var(--text-sm)}
.ticket-info__row svg{flex-shrink:0;color:var(--text-muted)}

/* Related events slider */
.ev-related{padding-block:var(--sp-10);border-top:1px solid var(--border)}
.ev-related__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;margin-bottom:var(--sp-6)}
.ev-related__slider{position:relative}
.ev-related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.ev-related__prev,.ev-related__next{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:var(--r-full);
  border:1.5px solid var(--border);background:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:2;color:var(--text-secondary);
  box-shadow:var(--shadow-md);transition:all var(--t-fast);
}
.ev-related__prev{left:-18px}
.ev-related__next{right:-18px}
.ev-related__prev:hover,.ev-related__next:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Responsive */
@media(max-width:1024px){
  .ev-single-wrap{grid-template-columns:1fr 260px;gap:var(--sp-6)}
  .ev-related__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .ev-single-wrap{grid-template-columns:1fr;gap:var(--sp-6)}
  .ev-single-aside{position:static}
  .buy-btn{order:-1}
  .ev-single-banner{aspect-ratio:16/8}
  .ev-related__grid{grid-template-columns:1fr}
}