/* HERO SLIDES: correspondents' photographs in a town, big-city or venue hero.
   Written by lib/hero-slides.mjs, loaded only on pages that carry one, so
   nothing here can reach a page without it. Every rule is scoped under .hs or
   .hs-credit for the same reason city.css's comments give: three page types
   share those hero class names. */

/* The track fills whatever hero it is in (.c-hero or .cmast-photo), which are
   already position:relative with a fixed or ratio height. */
.hs{position:absolute;inset:0}
.hs-track{position:absolute;inset:0;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}
.hs-track::-webkit-scrollbar{display:none}
.hs-track:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.hs-slide{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
/* Each page type's own rule positions its hero <img> against the hero; inside a
   slide the slide is the containing block, so the same geometry holds. */
.hs-slide > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* THE CREDIT, as /correspondents previews it, bottom left (the venue page's
   Submit a photo pill takes bottom right). */
.hs-credit{position:absolute;left:14px;bottom:14px;z-index:4;display:flex;align-items:center;gap:10px;
  padding:6px 14px 6px 6px;border-radius:999px;background:rgba(10,11,14,.62);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;max-width:calc(100% - 28px);
  text-decoration:none}
a.hs-credit:hover .hs-name{text-decoration:underline}
.hs-credit.noav{padding:7px 15px}
.hs-credit .hs-av{position:static;flex:0 0 auto;width:34px;height:34px;border-radius:50%;object-fit:cover;
  background:#3E3B33;display:grid;place-items:center;font:600 12px/1 'Inter',sans-serif;letter-spacing:.02em;
  color:#fff;box-shadow:0 0 0 1.5px rgba(255,255,255,.85)}
.hs-by{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.hs-label{font:500 10.5px/1.2 'Inter',sans-serif;color:rgba(255,255,255,.72)}
.hs-name{font:600 14px/1.25 'Inter',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Dots and arrows, added by hero-slides.js. */
.hs-dots{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;display:flex;gap:8px}
.hs-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;
  box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.hs-dot[aria-current="true"]{background:#fff}
.hs-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(10,11,14,.42);color:#fff;font:400 22px/1 'Inter',sans-serif;cursor:pointer;
  display:grid;place-items:center;opacity:0;transition:opacity .2s,background .2s}
.hs-arrow:hover{background:rgba(10,11,14,.66)}
.hs-prev{left:16px}.hs-next{right:16px}
.hs:hover .hs-arrow,.hs-arrow:focus-visible{opacity:1}
.hs-arrow[disabled]{opacity:0!important;pointer-events:none}
@media(hover:none){.hs-arrow{display:none}}

/* ON A PHONE the town and big-city title is laid over the photograph (
   the town's .c-introhead, the big city's .cmast-title), at full hero height
   and above it. Let swipes fall through it to the track; its own links and
   buttons still take taps. The credit moves to the top left, under the nav,
   because the breadcrumb runs along the photograph's foot; the dots sit just
   above the breadcrumb. */
@media(max-width:760px){
  body:has(.hs) .c-introhead,body:has(.hs) .cmast-title{pointer-events:none}
  body:has(.hs) .c-introhead a,body:has(.hs) .c-introhead button,
  body:has(.hs) .cmast-title a,body:has(.hs) .cmast-title button{pointer-events:auto}
  /* max-width clears the venue page's Submit a photo pill, top right at the same height */
  .hs-credit{top:calc(72px + env(safe-area-inset-top,0px));bottom:auto;left:10px;gap:8px;padding:4px 11px 4px 4px;max-width:calc(100% - 186px)}
  .hs-credit .hs-av{width:26px;height:26px;font-size:10px}
  .hs-by{flex-direction:row;align-items:baseline;gap:4px}
  .hs-label{font-size:11px}
  .hs-name{font-size:12.5px}
  .hs-credit.noav{padding:6px 12px}
  .hs-dots{bottom:56px}
}