/* Uptown Informer: top stories carousel (1.2.4). Loaded on the front page only. */
.ui-carousel{position:relative;background:var(--purple-deep);color:#fff;min-width:0;overflow:hidden}
.ui-carousel__track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ui-carousel__track::-webkit-scrollbar{display:none}
.ui-carousel__slide{position:relative;flex:0 0 100%;min-width:0;aspect-ratio:4/5;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;isolation:isolate;background:var(--purple-deep)}
.ui-carousel__media{position:absolute;inset:0;z-index:-1;background:var(--brand)}
.ui-carousel__media .ui-carousel__img{display:block;width:100%;height:100%;object-fit:cover}
/* Dark brand gradient so white type stays legible on any photo */
.ui-carousel__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,3,51,0) 22%,rgba(31,3,51,.42) 44%,rgba(31,3,51,.84) 66%,rgba(31,3,51,.97) 100%)}
.ui-carousel__fallback{position:absolute;inset:0;align-items:flex-start;padding-top:16%}
.ui-carousel__mark{display:block;width:auto;height:30%;max-height:150px;opacity:.9;filter:drop-shadow(0 2px 10px rgba(0,0,0,.2))}
.ui-carousel__body{position:absolute;left:0;right:0;bottom:0;padding:20px var(--pad) 18px}
.ui-carousel__labels{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ui-carousel__labels:empty{display:none}
.ui-carousel .kicker,.ui-carousel__opinion{display:inline-block;margin:0;padding:5px 8px 4px;border-radius:2px;font:800 .66rem/1.2 var(--display);letter-spacing:.09em;text-transform:uppercase;text-decoration:none}
/* Section colour as a solid label (section colours are too dark to read as text on the photo) */
.ui-carousel .kicker{background:var(--purple-2);color:#fff;box-shadow:inset 0 -2px 0 rgba(63,208,220,.9)}
.ui-carousel .kicker--events{background:var(--teal-bg)}
.ui-carousel .kicker--eat-drink{background:var(--violet)}
.ui-carousel .kicker--nightlife-music{background:var(--plum)}
.ui-carousel .kicker--neighborhood-guide{background:#02626f}
.ui-carousel .kicker--sports{background:var(--sports)}
.ui-carousel .kicker:hover,.ui-carousel .kicker:focus-visible{background:#fff;color:var(--brand);text-decoration:none}
.ui-carousel__opinion{background:var(--teal-2);color:var(--purple-deep)}
.ui-carousel__title{font:750 1.42rem/1.13 var(--serif);letter-spacing:-.012em;margin:0 0 10px;font-variation-settings:"opsz" 72;text-wrap:balance;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.ui-carousel__title a{color:#fff;text-decoration:none}
/* Whole slide is clickable (stretched link); labels sit above it */
.ui-carousel__title a::after{content:"";position:absolute;inset:0;z-index:1}
.ui-carousel__title a:hover{text-decoration:underline;text-decoration-color:var(--teal-2);text-decoration-thickness:2px;text-underline-offset:4px}
.ui-carousel__title a:focus-visible{outline:none;text-decoration:underline;text-decoration-color:var(--teal-2);text-decoration-thickness:2px;text-underline-offset:4px}
.ui-carousel__title a:focus-visible::after{outline:3px solid var(--teal-2);outline-offset:-3px}
.ui-carousel .badge-sample{text-shadow:none}
.ui-carousel__dek{display:none;margin:0 0 10px;max-width:62ch;font:400 1rem/1.5 Georgia,"Times New Roman",serif;color:#efe8f5}
.ui-carousel__meta{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:.78rem;color:#e3d8ee}
.ui-carousel__byline{font-weight:600;color:#fff}
.ui-carousel__meta .sep{color:rgba(255,255,255,.5)}
.ui-carousel__meta .meta-time.is-fresh{color:var(--teal-2)}

/* Control bar: always reserved (fixed height), so enhancing with JS causes no layout shift */
.ui-carousel__controls{display:flex;align-items:center;gap:6px;height:52px;padding:0 8px 0 calc(var(--pad) - 9px);background:var(--purple-deep);border-top:1px solid rgba(255,255,255,.08)}
.ui-carousel:not(.is-ready) .ui-carousel__controls>*{visibility:hidden}
.ui-carousel__dots{display:flex;align-items:center;margin-right:auto}
.ui-carousel__dot{position:relative;width:30px;height:44px;padding:0;border:0;background:none;cursor:pointer;color:#fff}
.ui-carousel__dot::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:5px;background:rgba(255,255,255,.4);transition:width .25s ease,margin .25s ease,background-color .25s ease}
.ui-carousel__dot:hover::before{background:rgba(255,255,255,.8)}
.ui-carousel__dot[aria-current="true"]::before{width:22px;margin-left:-11px;background:var(--teal-2)}
.ui-carousel__btn{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:transparent;color:#fff;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.ui-carousel__btn:hover{background:var(--teal-2);border-color:var(--teal-2);color:var(--purple-deep)}
.ui-carousel__btn svg{display:block}
.ui-carousel__dot:focus-visible,.ui-carousel__btn:focus-visible{outline:3px solid var(--teal-2);outline-offset:2px}
.ui-carousel__icon--play{display:none!important}
.ui-carousel.is-stopped .ui-carousel__icon--pause{display:none!important}
.ui-carousel.is-stopped .ui-carousel__icon--play{display:block!important}

/* Front page: the carousel takes the lead slot (left column beside the rail) */
.top__lead--carousel{min-width:0}

@media (min-width:720px){
  .ui-carousel__slide{aspect-ratio:16/9}
  .ui-carousel__media::after{background:linear-gradient(180deg,rgba(31,3,51,0) 30%,rgba(31,3,51,.5) 55%,rgba(31,3,51,.93) 100%),linear-gradient(90deg,rgba(31,3,51,.45),rgba(31,3,51,0) 70%)}
  .ui-carousel__body{padding:24px 28px 22px}
  .ui-carousel__title{font-size:1.85rem;max-width:30ch}
  .ui-carousel__dek{display:block}
  .ui-carousel__controls{padding-left:19px}
  .ui-carousel__fallback{padding-top:9%}
}
@media (min-width:1000px){
  .ui-carousel__title{font-size:2.05rem}
}
@media (prefers-reduced-motion:reduce){
  .ui-carousel__track{scroll-behavior:auto}
}
@media print{
  .ui-carousel__controls{display:none!important}
  .ui-carousel__track{overflow:visible;display:block}
  .ui-carousel__slide:not(:first-child){display:none}
}
/* Dark mode (1.2.10): the carousel is already dark; just separate it from the dark page with a hairline. */
:root[data-theme="dark"] .ui-carousel{box-shadow:0 0 0 1px var(--line)}