/* Workshop detail pages (includes/templates/workshop.php) — same design as the live theminimalismwebinar page */
body { background:var(--cream); }

.wd-hero-img { width: 100%; border-bottom:1px solid var(--line-warm); background:var(--cream); }
.wd-hero-img img { width: 100%; height: auto; display: block; object-fit: contain; }

.wd-bread { padding: 24px 4rem; border-bottom:1px solid var(--line-warm); display: flex; align-items: center; gap: 10px; background:#fff; }
.wd-bread a, .wd-bread-cur { font-family: var(--font-body); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; line-height: 22px; }
.wd-bread a { color:var(--text-3); transition: color .2s; }
.wd-bread a:hover { color:var(--ink); }
.wd-bread-sep { color:var(--line-warm); font-size: .7rem; }
.wd-bread-cur { color:var(--ink); }

.wd-content { padding: 60px 4rem; background:#fff; border-bottom:1px solid var(--line-warm); }
.wd-content-inner { font-family: var(--font-body); font-size: .95rem; line-height: 1.9; color:var(--text-2); font-weight:400; max-width: 860px; }
/* when the admin text is centred, centre the text block too (otherwise it sits off-centre in the left part of the page) */
.wd-content-inner:has([style*="text-align: center"], [style*="text-align:center"]) { margin-left: auto; margin-right: auto; }
.wd-content-inner h1, .wd-content-inner h2, .wd-content-inner h3, .wd-content-inner h4 { font-family: var(--font-display); font-weight:600; letter-spacing:-0.012em; line-height:1.15; margin-bottom: 1rem; color:var(--ink); }
.wd-content-inner h1 { font-size: clamp(32px, 4vw, 48px); }
.wd-content-inner h2 { font-size: clamp(26px, 3vw, 36px); }
.wd-content-inner h3 { font-size: 24px; }
.wd-content-inner h4 { font-size: 20px; }
.wd-content-inner p, .wd-content-inner ul, .wd-content-inner ol { margin-bottom: 1.2rem; }
.wd-content-inner ul { list-style: disc; padding-left: 1.3em; }
.wd-content-inner ol { list-style: decimal; padding-left: 1.3em; }
.wd-content-inner a { display: inline; color:var(--ink); text-decoration: underline; }
.wd-content-inner strong, .wd-content-inner b { font-weight: 600; color:var(--ink); }
.wd-content-inner img { max-width: 100%; height: auto; }

.wd-sec { padding: 60px 4rem 32px; }
.wd-sec-label { font-family: var(--font-body); font-size:var(--eyebrow-size); letter-spacing: .25em; text-transform: uppercase; color:var(--text-3); margin-bottom: .6rem; }
.wd-sec-title { font-family: var(--font-display); font-weight:600; font-size:var(--fs-h2); letter-spacing:-0.012em; line-height:1.15; color:var(--ink); }

.wd-slider-wrap { padding: 0 4rem 60px; position: relative; }
.wd-track { grid-auto-columns: calc((100% - 3 * 3px) / 4); gap: 3px; }
.wd-slide { aspect-ratio: 9 / 16; overflow: hidden; background:var(--ink); position: relative; margin: 0; }
.wd-slide video, .wd-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wd-photo { aspect-ratio: 4 / 5; background:var(--cream-2); }

.wd-nav { position: absolute; top: calc(50% - 30px); transform: translateY(-50%); z-index: 10; width: 44px; height: 44px; border-radius:50%; background:#fff; border:1px solid var(--line-warm); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; color:var(--ink); transition: background .2s, border-color .2s, color .2s; }
.wd-nav:hover { background:var(--ink); color:#fff; border-color:var(--ink); }
.wd-nav-prev { left: 4rem; }
.wd-nav-next { right: 4rem; }

.wd-dots { display: flex; justify-content: center; gap: 8px; padding-top: 20px; }
.wd-dots button { width: 6px; height: 6px; padding: 0; border:0; border-radius:50%; background:var(--line-warm); cursor: pointer; transition: background .3s, transform .3s; }
.wd-dots button.active { background:var(--ink); transform: scale(1.4); }

.wd-back { display: block; font-family: var(--font-body); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color:var(--ink); padding: 32px 4rem; border-top:1px solid var(--line-warm); }
.wd-back:hover { opacity: .6; }

@media (max-width: 1023px) {
  .wd-track { grid-auto-columns: calc((100% - 2 * 3px) / 3); gap: 3px; }
  .wd-bread, .wd-content, .wd-sec, .wd-slider-wrap, .wd-back { padding-left: 2rem; padding-right: 2rem; }
  .wd-nav-prev { left: .5rem; }
  .wd-nav-next { right: .5rem; }
}
@media (max-width: 767px) { .wd-track { grid-auto-columns: calc((100% - 3px) / 2); } }
@media (max-width: 680px) {
  .wd-bread, .wd-content, .wd-sec, .wd-slider-wrap, .wd-back { padding-left: 1.2rem; padding-right: 1.2rem; }
  .wd-nav-prev { left: .2rem; }
  .wd-nav-next { right: .2rem; }
}
@media (max-width: 479px) { .wd-track { grid-auto-columns: 100%; } }