/* WEPRO Event Cities 1.0.0 — premium city section. Colours and type come from the site's own tokens where the theme defines them
   (Theater28: --t28-*), with on-brand fallbacks otherwise (Event28: bordeaux night + rose). Mobile first; no horizontal page overflow:
   only the card track scrolls, inside its own box. */
.wec{
  --wec-surface:var(--t28-stage,#120a0d);
  --wec-accent:var(--t28-yellow,#c8577b);
  --wec-accent-ink:var(--t28-stage,#ffffff);
  --wec-ink:var(--t28-black,#101012);
  --wec-muted:var(--t28-muted,#5b6470);
  --wec-line:var(--t28-line,rgba(16,16,18,.12));
  --wec-card:var(--t28-card,#ffffff);
  --wec-ease:var(--t28-ease,cubic-bezier(.2,.7,.2,1));
  --wec-gutter:16px;
  --wec-gap:12px;
  --wec-radius:16px;
  --wec-display:inherit;
  --wec-title-weight:700;
  --wec-title-size:clamp(1.6rem,3.2vw,2.25rem);
  --wec-city-size:clamp(1.65rem,2.3vw,2.15rem);
  display:block;box-sizing:border-box;width:100%;max-width:100%;color:var(--wec-ink);
  font-size:16px;line-height:1.5;
}
.wec *,.wec *::before,.wec *::after{box-sizing:border-box}
.wec--editorial{
  --wec-radius:var(--t28-radius,4px);
  --wec-display:var(--t28-serif,Georgia,"Times New Roman",serif);
  --wec-title-weight:400;
  --wec-title-size:var(--t28-fs-h2,clamp(1.9rem,3.4vw,2.75rem));
  --wec-city-size:clamp(1.85rem,2.6vw,2.4rem);
}

/* placement spacing: after the stage it is the first section of the page (theme section rhythm); before the links block it opens
   the content column; inline keeps its own breathing room. */
.wec--after-stage{padding-block:clamp(56px,6.5vw,104px) 0}
.wec--after-stage .wec__wrap{max-width:calc(var(--t28-wrap,1240px) + 2 * var(--t28-gutter,20px));margin-inline:auto;padding-inline:var(--t28-gutter,var(--wec-gutter))}
.wec--after-stage{--wec-gutter:var(--t28-gutter,16px)}
.wec--before-links{--wec-gutter:0px;padding-block:clamp(28px,4vw,48px) clamp(20px,3vw,36px)}
.wec--inline{padding-block:clamp(32px,4vw,56px)}
.wec__wrap{width:100%;max-width:100%}

/* head */
.wec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin:0 0 clamp(22px,3vw,36px)}
.wec__intro-col{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.wec .wec__kicker{display:inline-flex;align-items:center;gap:12px;margin:0 0 14px;font-family:var(--t28-sans,inherit);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wec-muted)}
.wec .wec__kicker::before{content:"";width:28px;height:2px;background:var(--wec-accent)}
.wec .wec__title{margin:0;font-family:var(--wec-display);font-weight:var(--wec-title-weight);font-size:var(--wec-title-size);line-height:1.05;letter-spacing:-.02em;color:var(--wec-ink);text-wrap:balance}
.wec .wec__intro{margin:12px 0 0;max-width:46ch;font-size:15px;color:var(--wec-muted)}
.wec__nav{display:flex;gap:8px;flex:0 0 auto}
.wec__nav[hidden]{display:none}
.wec .wec__navbtn{display:inline-grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--wec-line);border-radius:999px;background:transparent;color:var(--wec-ink);font:inherit;font-size:18px;line-height:1;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease}
.wec .wec__navbtn:hover{background:var(--wec-ink);color:var(--t28-white,#fff);border-color:var(--wec-ink)}
.wec .wec__navbtn:disabled{opacity:.35;cursor:default;background:transparent;color:var(--wec-ink);border-color:var(--wec-line)}

/* track: the only scrolling box; it bleeds to the screen edge on phones inside the page gutter (no page overflow) */
.wec .wec__track{
  list-style:none;margin:0 calc(-1 * var(--wec-gutter));padding:4px var(--wec-gutter) 10px;
  display:flex;gap:var(--wec-gap);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--wec-gutter);overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.wec .wec__track::-webkit-scrollbar{display:none}
.wec .wec__item{flex:0 0 min(78%,320px);margin:0;padding:0;scroll-snap-align:start;list-style:none}
.wec .wec__item::before,.wec .wec__item::marker{content:none}

/* card */
.wec .wec__card{
  position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;
  aspect-ratio:4/5;min-height:300px;padding:18px;overflow:hidden;
  border-radius:var(--wec-radius);background:var(--wec-surface);color:#fff;text-decoration:none;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  transition:transform .5s var(--wec-ease),box-shadow .5s var(--wec-ease);
}
.wec .wec__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.wec .wec__img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 30%;filter:grayscale(1) contrast(1.08) brightness(.52);transform:scale(1.03);transition:transform 1.1s var(--wec-ease),filter .6s ease}
.wec .wec__scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.1) 42%,color-mix(in srgb,var(--wec-surface) 88%,transparent) 68%,var(--wec-surface) 100%)}
.wec .wec__card--noimg{background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--wec-accent) 26%,var(--wec-surface)) 0%,var(--wec-surface) 62%)}
.wec .wec__mono{position:absolute;right:-.06em;bottom:-.22em;z-index:-2;font-family:var(--wec-display);font-size:16rem;line-height:1;color:rgba(255,255,255,.06);pointer-events:none}
.wec .wec__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wec .wec__count{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:5px 12px;border:1px solid rgba(255,255,255,.34);border-radius:999px;
  background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.wec .wec__count::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--wec-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--wec-accent) 28%,transparent)}
.wec .wec__no{font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.7)}
.wec .wec__body{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-right:56px}
.wec .wec__rule{display:block;width:32px;height:2px;margin-bottom:8px;background:var(--wec-accent);transition:width .5s var(--wec-ease)}
.wec .wec__city{font-family:var(--wec-display);font-weight:var(--wec-title-weight);font-size:var(--wec-city-size);line-height:1.02;letter-spacing:-.02em;color:#fff;overflow-wrap:anywhere}
.wec--modern .wec__city{font-weight:800;letter-spacing:-.025em}
.wec .wec__next{font-size:13px;font-weight:600;color:rgba(255,255,255,.92);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.wec .wec__venue{font-size:13px;color:rgba(255,255,255,.68);overflow-wrap:anywhere}
.wec .wec__go{position:absolute;right:18px;bottom:18px;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--wec-accent) 80%,transparent);color:#fff;
  transition:background-color .3s ease,color .3s ease,transform .5s var(--wec-ease)}
.wec .wec__sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (hover:hover){
  .wec .wec__card:hover{transform:translateY(-4px);box-shadow:var(--t28-lift,0 18px 40px -24px rgba(0,0,0,.45))}
  .wec .wec__card:hover .wec__img{transform:scale(1.08);filter:grayscale(.15) contrast(1.05) brightness(.6)}
  .wec .wec__card:hover .wec__rule{width:56px}
  .wec .wec__card:hover .wec__go{background:var(--wec-accent);color:var(--wec-accent-ink);transform:translateX(2px)}
}
.wec .wec__card:focus-visible{outline:3px solid var(--wec-accent);outline-offset:3px}
.wec .wec__card[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--wec-accent),var(--t28-lift,0 18px 40px -24px rgba(0,0,0,.45))}
.wec .wec__card[aria-current="true"] .wec__rule{width:100%}
.wec .wec__card[aria-current="true"] .wec__go{background:var(--wec-accent);color:var(--wec-accent-ink);transform:rotate(90deg)}

/* panel: the chosen city's upcoming dates */
.wec .wec__panel{margin-top:clamp(16px,2.4vw,24px);padding:clamp(18px,2.6vw,28px);border:1px solid var(--wec-line);border-top:2px solid var(--wec-accent);border-radius:var(--wec-radius);background:var(--wec-card);color:var(--wec-ink)}
.wec .wec__panel[hidden]{display:none}
.wec .wec__panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.wec .wec__panel-title{margin:0;font-family:var(--wec-display);font-weight:var(--wec-title-weight);font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.1;color:var(--wec-ink);outline:none}
.wec .wec__close{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--wec-muted);text-decoration:none}
.wec .wec__close:hover{color:var(--wec-ink)}
.wec .wec__events{list-style:none;margin:0;padding:0}
.wec .wec__event{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 16px;align-items:center;margin:0;padding:16px 0;border-top:1px solid var(--wec-line);list-style:none}
.wec .wec__event::before,.wec .wec__event::marker{content:none}
.wec .wec__event:first-child{border-top:0}
.wec .wec__date{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.wec .wec__day{font-family:var(--wec-display);font-size:2.1rem;font-weight:var(--wec-title-weight);letter-spacing:-.03em;color:var(--wec-ink)}
.wec .wec__mon{margin-top:4px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--wec-ink)}
.wec .wec__wd{margin-top:3px;font-size:11px;color:var(--wec-muted)}
.wec .wec__info{display:flex;flex-direction:column;gap:3px;min-width:0}
.wec .wec__ev-title{font-weight:700;font-size:16px;line-height:1.3;color:var(--wec-ink);text-decoration:none;overflow-wrap:anywhere}
.wec .wec__ev-title:hover{text-decoration:underline;text-underline-offset:3px}
.wec .wec__ev-sub,.wec .wec__ev-meta{font-size:13px;color:var(--wec-muted);overflow-wrap:anywhere}
.wec .wec__cta{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.wec .wec__price{font-size:13px;font-weight:600;color:var(--wec-ink)}
.wec .wec__btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 20px;border-radius:calc(var(--wec-radius) * 3);
  background:var(--wec-surface);color:#fff;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:background-color .2s ease,color .2s ease}
.wec--editorial .wec__btn{border-radius:var(--wec-radius)}
.wec .wec__btn:hover{background:var(--wec-accent);color:var(--wec-accent-ink)}
.wec .wec__btn--off{background:transparent;color:var(--wec-muted);border:1px solid var(--wec-line)}
.wec .wec__btn:focus-visible,.wec .wec__close:focus-visible,.wec .wec__ev-title:focus-visible,.wec .wec__navbtn:focus-visible{outline:3px solid var(--wec-accent);outline-offset:2px}

@media (max-width:767px){
  .wec--before-links{--wec-gutter:10px}
  .wec--before-links .wec__wrap{padding-inline:var(--wec-gutter)}
}
@media (min-width:600px){
  .wec .wec__item{flex-basis:calc((100% - var(--wec-gap)) / 2.15)}
  .wec .wec__event{grid-template-columns:72px minmax(0,1fr) auto}
  .wec .wec__cta{grid-column:auto;margin-top:0;justify-content:flex-end}
}
@media (min-width:1024px){
  .wec{--wec-gap:20px}
  .wec .wec__track{margin-inline:0;padding-inline:0;scroll-padding-inline:0}
  .wec .wec__item{flex-basis:calc((100% - 3 * var(--wec-gap)) / 4)}
  .wec .wec__card{padding:22px}
  .wec .wec__go{right:22px;bottom:22px}
}
@media (max-width:599px){
  .wec__head{align-items:flex-start}
  .wec__nav,.wec__nav:not([hidden]){display:none}
  .wec .wec__intro{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .wec .wec__card,.wec .wec__img,.wec .wec__rule,.wec .wec__go{transition:none}
  .wec .wec__card:hover{transform:none}
  .wec .wec__card:hover .wec__img{transform:scale(1.03)}
}