/* ================================================
   WORKSHOPS VIEW CSS — Priya's Spize Works
   ================================================ */

/* Page hero background */
#view-workshops .page-hero-bg {
  background-image: url('../images/IMG_0748.png');
}

/* ---- TOGGLE ---- */
.workshop-toggle-bar { background: var(--black); padding: 3rem 2rem 1rem; display: flex; justify-content: center; }
.workshop-toggle { display: inline-flex; border: 2px solid var(--gold); }
.workshop-toggle button {
  background: transparent; color: var(--gold); border: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; padding: 0.9rem 2rem;
  transition: background 0.3s, color 0.3s;
}
.workshop-toggle button.active { background: var(--gold); color: var(--black); }

/* ---- WORKSHOP CARD ---- */
.workshop-list { background: var(--black); padding: 2rem 2rem 6rem; }
.workshop-card {
  max-width: 1300px; margin: 0 auto 3rem;
  display: grid; grid-template-columns: 1.2fr 1fr;
  background: #141414; border: 1px solid rgba(200,162,78,0.2);
}
.workshop-card:nth-child(even) { direction: rtl; }
.workshop-card:nth-child(even) > * { direction: ltr; }
.workshop-image { position: relative; min-height: 480px; overflow: hidden; }
.workshop-image .carousel-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--black);
  opacity: 0; z-index: 1; transition: opacity 1s ease;
}
.workshop-image .carousel-slide.active { opacity: 1; z-index: 2; }
.workshop-badge {
  position: absolute; top: 1.2rem; left: 1.2rem; z-index: 3;
  background: var(--gold); color: var(--black);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0.45rem 1rem;
}
.workshop-badge.completed { background: rgba(10,10,10,0.85); color: var(--white); }
.workshop-content { padding: 3.5rem 3rem; display: flex; flex-direction: column; justify-content: center; }
.workshop-date { line-height: 1.8; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.8rem; }
.workshop-content h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; line-height: 1.15; margin-bottom: 1.2rem; }
.workshop-content p { font-size: 0.95rem; line-height: 1.9; color: rgba(255,255,255,0.7); margin-bottom: 1.8rem; }
.workshop-meta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.workshop-meta-item {
  flex: 1 1 140px; border: 1px solid rgba(200,162,78,0.3); background: rgba(200,162,78,0.08);
  padding: 0.9rem 1.1rem;
}
.workshop-meta-label { display: block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray); margin-bottom: 0.3rem; }
.workshop-meta-value { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700; color: var(--white); }
.workshop-meta-value.low { color: var(--terracotta); }
.workshop-content .btn { align-self: flex-start; }
.workshop-content .btn.disabled { background: #333; color: var(--gray); pointer-events: none; }

.workshop-empty { max-width: 700px; margin: 2rem auto; text-align: center; color: rgba(255,255,255,0.7); line-height: 1.9; }
.workshop-empty h3 { font-size: 1.6rem; color: var(--white); margin-bottom: 0.8rem; }

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .workshop-card { grid-template-columns: 1fr; }
  .workshop-card:nth-child(even) { direction: ltr; }
  .workshop-image { min-height: 320px; }
  .workshop-content { padding: 2.5rem 1.8rem; }
}
@media (max-width: 500px) {
  .workshop-toggle button { padding: 0.8rem 1rem; font-size: 0.7rem; }
}