/* ── Workshops section ──────────────────────────────────────────────────────
   The wavy cream backdrop comes from assets/workshops/bg-image.webp, wired up
   with the other section backgrounds in 09-section-backgrounds.css. Everything
   on top of it — the paper props, the workshop posters, the drifting colour
   layer — is built from divs/SVG, so it stays crisp at any width. */

#workshops-section {
    --ws-cream: #FFF6DF;
    --ws-cream-deep: #FDE9B4;
    --ws-amber: #FFC640;
    --ws-purple: #7C3AED;
    --ws-purple-deep: #4C1D95;
    --ws-ink: #1B1464;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Fallback for the moment before the backdrop artwork paints. */
    background-color: var(--ws-cream);
}

/* ── Animated layer over the artwork ────────────────────────────────────────
   Two stacked layers, both pointer-events:none and behind the content:
   .ws-orb    — soft colour clouds that drift across the waves
   .ws-speck  — confetti dots that bob in place
   Kept light so the artwork's own waves stay legible underneath.            */
.ws-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

/* Soft-light keeps these tinting the artwork rather than fogging it over. */
.ws-orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(70px);
    opacity: 0.5;
    mix-blend-mode: soft-light;
    will-change: transform;
    animation: ws-drift 18s ease-in-out infinite;
}

.ws-orb--1 { top: -6%;  left: -4%;  width: 34vw; height: 34vw; background: radial-gradient(circle at 30% 30%, #FFF3C4, #FFC94A); }
.ws-orb--2 { top: 8%;   right: -6%; width: 30vw; height: 30vw; background: radial-gradient(circle at 60% 40%, #EFE7FF, #C7B6FF); animation-duration: 23s; animation-direction: reverse; }
.ws-orb--3 { bottom: -12%; left: 28%; width: 40vw; height: 28vw; background: radial-gradient(circle at 50% 50%, #E6F8D8, #FFE7A6); animation-duration: 27s; opacity: 0.4; }
.ws-orb--4 { top: 38%;  left: 44%;  width: 22vw; height: 22vw; background: radial-gradient(circle at 40% 60%, #FFE1EC, #FFC0D4); animation-duration: 21s; opacity: 0.34; animation-direction: reverse; }

@keyframes ws-drift {
    0%,
    100% { transform: translate3d(0, 0, 0) scale(1); }
    33%  { transform: translate3d(4%, 5%, 0) scale(1.08); }
    66%  { transform: translate3d(-5%, 2%, 0) scale(0.94); }
}

.ws-speck {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    opacity: 0.5;
    animation: ws-bob 7s ease-in-out infinite;
}

@keyframes ws-bob {
    0%,
    100% { transform: translateY(0) scale(1); opacity: 0.45; }
    50%  { transform: translateY(-14px) scale(1.25); opacity: 0.85; }
}

/* Slow gradient pan, shared by the card border, the CTA and the poster art. */
@keyframes ws-hue {
    0%,
    100% { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
}

/* ── Ribbon label ("Upcoming Workshop") ────────────────────────────────────*/
.ws-ribbon {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 26px;
    border-radius: 14px 22px 14px 22px;
    font-weight: 800;
    letter-spacing: 0.01em;
    overflow: hidden;
    transform: rotate(-1.2deg);
}

.ws-ribbon--amber {
    background: linear-gradient(135deg, #FFE7A0, #FFC94A 55%, #FFB020);
    color: #8A3E00;
    border: 2px solid #FFFFFF;
    box-shadow: 0 10px 22px -12px rgba(180, 100, 0, 0.75);
}

/* Light sweeps across the ribbon on a loop — the comp's glossy sticker feel. */
.ws-ribbon::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    transform: skewX(-18deg);
    animation: ws-sheen 4.5s ease-in-out infinite;
}

@keyframes ws-sheen {
    0%,
    55%  { left: -60%; }
    100% { left: 130%; }
}

/* ── Upcoming workshop card ────────────────────────────────────────────────*/
.ws-card {
    position: relative;
    border-radius: 30px;
    padding: 2px; /* room for the animated border underneath */
    background: linear-gradient(135deg, #FFD980, #FFF3CC 30%, #FFCF6B 60%, #FFF7E2);
    background-size: 300% 300%;
    animation: ws-hue 12s ease-in-out infinite;
    box-shadow: 0 26px 50px -34px rgba(140, 90, 0, 0.75);
}

.ws-card__inner {
    position: relative;
    height: 100%;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(160deg, #FFFDF5 0%, #FFF6DE 55%, #FFEFC6 100%);
}

/* Slow colour wash inside the card so the panel is never a flat fill. */
.ws-card__inner::before {
    content: '';
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 214, 130, 0.55), transparent 45%),
        radial-gradient(circle at 85% 70%, rgba(199, 182, 255, 0.4), transparent 45%);
    animation: ws-drift 20s ease-in-out infinite;
    pointer-events: none;
}

.ws-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 6px 14px;
    border-radius: 9999px;
    background: linear-gradient(180deg, #FFFFFF, #EFE7FF);
    border: 1px solid #D9CBFF;
    color: var(--ws-purple-deep);
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 6px 14px -10px rgba(76, 29, 149, 0.8);
}

.ws-card__title {
    font-size: 26px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #14245C;
}

@media (min-width: 1024px) { .ws-card__title { font-size: 30px; } }

/* Date / time / venue block */
.ws-meta {
    display: grid;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 246, 222, 0.75));
    border: 1px solid rgba(255, 198, 64, 0.55);
    backdrop-filter: blur(2px);
}

.ws-meta__row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.98rem;
    color: #1F2A44;
}

.ws-meta__row svg { color: var(--ws-purple); flex: none; }
.ws-meta__label { font-weight: 800; color: #2E3A63; }

/* Register button: gradient sweep + a breathing halo. */
.ws-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 13px 26px;
    border-radius: 9999px;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(100deg, #7C3AED, #4F46E5 40%, #2563EB 70%, #7C3AED);
    background-size: 220% 100%;
    box-shadow: 0 16px 30px -16px rgba(79, 70, 229, 0.9);
    animation: ws-hue 6s linear infinite;
    transition: transform 0.3s ease, box-shadow 0.3s ease, gap 0.3s ease;
}

.ws-cta:hover {
    transform: translateY(-2px);
    gap: 0.9rem;
    box-shadow: 0 22px 36px -16px rgba(79, 70, 229, 0.95);
}

.ws-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.55);
    animation: ws-halo 2.8s ease-out infinite;
}

@keyframes ws-halo {
    0%   { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.5); }
    70%  { box-shadow: 0 0 0 16px rgba(124, 58, 237, 0); }
    100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}

/* ── Previous workshops deck ───────────────────────────────────────────────*/
/* The tablet-style plate the posters sit on. */
.ws-stage {
    position: relative;
    border-radius: 28px;
    padding: 22px 14px 18px;
    background: linear-gradient(165deg, #F3EEFF 0%, #E7DEFF 55%, #DCD1FB 100%);
    border: 1px solid rgba(124, 58, 237, 0.18);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
        0 30px 60px -40px rgba(60, 30, 120, 0.85);
}

/* Clipped like a tablet screen: the neighbouring posters slide under the plate
   edge instead of spilling onto the page background. */
.ws-deck {
    position: relative;
    height: 300px;
    perspective: 1400px;
    overflow: hidden;
    border-radius: 18px;
}

@media (min-width: 640px)  { .ws-deck { height: 330px; } }
@media (min-width: 1280px) { .ws-deck { height: 350px; } }

/* Each poster is centred and then pushed out by JS via --ws-x / --ws-scale,
   so adding or removing a card needs no CSS change. */
.ws-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(84%, 300px);
    transform:
        translate3d(calc(-50% + var(--ws-x, 0px)), -50%, 0)
        scale(var(--ws-scale, 1))
        rotateY(var(--ws-rotate, 0deg));
    opacity: var(--ws-opacity, 1);
    z-index: var(--ws-z, 1);
    transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.28, 1), opacity 0.45s ease;
    will-change: transform;
}

@media (min-width: 640px) { .ws-slide { width: min(72%, 330px); } }

.ws-slide[aria-hidden='true'] { pointer-events: none; }

.ws-poster {
    display: block;
    isolation: isolate;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    border: 3px solid #fff;
    text-decoration: none;
    box-shadow: 0 18px 34px -22px rgba(40, 20, 90, 0.7);
    transition: box-shadow 0.4s ease;
}

.ws-slide[data-state='active'] .ws-poster {
    box-shadow: 0 34px 60px -26px rgba(40, 20, 90, 0.85);
}

/* The poster art is the workshop's own artwork — 5:4 as it comes off the CRM. */
.ws-poster__img {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    background: #F3EEFF;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ws-slide[data-state='active'] .ws-poster:hover .ws-poster__img {
    transform: scale(1.04);
}

.ws-poster__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 14px;
    background: #fff;
    font-size: 11.5px;
    font-weight: 700;
    color: #35406B;
}

.ws-poster__foot span { display: inline-flex; align-items: center; gap: 5px; }
.ws-poster__foot svg { color: var(--ws-purple); }

/* Arrows + dots */
/* Arrows live on the plate, not in the deck — the deck clips its children. */
.ws-nav {
    position: absolute;
    top: 46%;
    z-index: 30;
    display: inline-flex;
    height: 40px;
    width: 40px;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: #fff;
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    box-shadow: 0 12px 22px -12px rgba(76, 29, 149, 0.95);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.ws-nav:hover { transform: translateY(-50%) scale(1.08); filter: brightness(1.08); }
.ws-nav:active { transform: translateY(-50%) scale(0.96); }
.ws-nav--prev { left: -8px; }
.ws-nav--next { right: -8px; }

@media (min-width: 640px) {
    .ws-nav { height: 46px; width: 46px; }
    .ws-nav--prev { left: -14px; }
    .ws-nav--next { right: -14px; }
}

.ws-dot {
    height: 9px;
    width: 9px;
    border-radius: 9999px;
    background: #C9BEEA;
    transition: width 0.35s ease, background-color 0.35s ease;
}

.ws-dot[data-active='true'] {
    width: 26px;
    background: linear-gradient(90deg, #8B5CF6, #6D28D9);
}

/* Vertical rule between the two halves — only meaningful side by side. */
.ws-divider {
    width: 2px;
    border-radius: 9999px;
    background: linear-gradient(180deg, transparent, rgba(124, 58, 237, 0.35), transparent);
}

/* ── Motion opt-out ────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
    #workshops-section *,
    #workshops-section *::before,
    #workshops-section *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}