/* ==========================================================
   Workshops: cards with seat bars
   ========================================================== */
.ws-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.ws{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:22px;display:flex;flex-direction:column;gap:14px}
.ws h3{font-size:18px;min-height:2.6em}
.ws dl{margin:0;display:grid;gap:8px;font-size:15px}
.ws dt{color:var(--muted);font-size:13px}
.ws dd{margin:0;font-weight:600}

.seats{height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.seats i{display:block;height:100%;background:var(--teal)}

.ws .status{display:flex;justify-content:space-between;align-items:center;margin-top:auto;font-size:14px;font-weight:600}
.ws .status .open{color:var(--ok)}
.ws .status .seats-left{color:var(--muted);font-weight:500}
/* Not announced yet: like a speaker who is not announced, a "Coming soon"
   badge and shaped placeholders, never pretend text */
.ws.is-soon{padding:0;gap:0;overflow:hidden;border-radius:var(--r-lg);background:var(--surface);border-style:dashed}
.ws-ph{position:relative;aspect-ratio:4/3;display:grid;place-items:center;color:var(--teal);background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--teal) 10%,var(--surface-2)),var(--surface-2))}
.ws-ph svg{width:34%;opacity:.3}
.ws-ph em{position:absolute;inset-block-start:12px;inset-inline-start:12px;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 85%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text);font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.ws-ph em::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal)}
.ws-sk{display:grid;gap:12px;padding:20px 18px 22px;border-top:1px solid var(--line)}
.ws-line{display:block;height:13px;border-radius:99px;background:linear-gradient(90deg,var(--line),color-mix(in srgb,var(--line) 55%,transparent),var(--line));background-size:200% 100%;animation:wsShift 2.6s ease-in-out infinite}
.ws-line.ws-short{width:62%;height:10px;opacity:.75}
@keyframes wsShift{0%,100%{background-position:0% 0}50%{background-position:-100% 0}}
@media (prefers-reduced-motion: reduce){.ws-line{animation:none}}
.ws.full .status .full{color:var(--danger)}
.ws.full .seats i{background:var(--muted)}

@media (max-width:1060px){
  .ws-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .ws-grid{grid-template-columns:1fr 1fr;gap:14px}
}
/* Two cards side by side leave no room for longer words on a small phone. */
@media (max-width:400px){
  .ws-grid{grid-template-columns:1fr}
}

/* ---------- "Book by phone" bar above the cards ---------- */
.ws-callbar{display:inline-flex;align-items:center;gap:14px;margin:22px 0 4px;padding:12px 22px 12px 12px;border-radius:999px;background:linear-gradient(135deg,var(--teal),var(--teal-ink));color:#fff;box-shadow:0 16px 30px -18px rgba(14,127,123,.95)}
.ws-callbar-ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18)}
.ws-callbar-ic svg{width:22px;height:22px}
.ws-callbar-text{display:grid;line-height:1.25}
.ws-callbar-text small{font-size:13px;opacity:.9}
.ws-callbar-text b{font-size:19px;font-weight:800;letter-spacing:.01em}
.ws-callbar-text a{color:inherit;text-decoration:none}
.ws-callbar-text a:hover b{text-decoration:underline}

/* ---------- Price and "Call to book" ---------- */
.ws-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:12px;border-top:1px dashed var(--line)}
.ws-price{display:flex;flex-direction:column;font-size:15px;font-weight:800;line-height:1.15;color:var(--teal-ink)}
.ws-price small{font-size:11.5px;font-weight:500;color:var(--muted)}
.ws-call{padding:9px 16px;font-size:14px;white-space:nowrap;box-shadow:0 8px 18px -10px rgba(22,166,161,.9)}
.ws-call svg{width:16px;height:16px;flex:none}
/* No real number yet: it looks like the button but does not pretend to dial */
.ws-call.is-pending{cursor:default;opacity:.85}
@media (max-width:560px){
  .ws-actions{flex-wrap:wrap}
  .ws-actions .ws-call{flex:1 1 100%}
  .ws-callbar{display:flex;border-radius:18px}
}