/* cinemas.hk — loaded after style.css, only on this tenant.
 *
 * Three sites now share a stylesheet, so the palettes have to do real work:
 * finder is blue and dense (a timetable), grand is warm red and set for
 * reading (a review), and this one is deep green — a wayfinding colour, the
 * register of signage and transit maps, which is what a directory of places
 * is. A reader landing on two of them from search should not wonder whether
 * they are the same site.
 *
 * Light palette on bare :root, dark redefined per theme, nothing defined only
 * inside a media query.
 */

:root{
  --accent:#0f6b52;              /* deep green, signage rather than screen */
  --accent-ink:#f2fbf7;
  --brand-punch:#e8b84b;         /* seat-marker amber in the masthead mark */
  --c-ground:#f5f8f6;
  --c-panel:#ffffff;
  --c-rule:#dbe6e0;
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme:dark){
    --accent:#4fc39b; --accent-ink:#06231a;
    --brand-punch:#e8b84b;
    --c-ground:#0d1512; --c-panel:#141d19; --c-rule:#243530;
  }
}
:root[data-theme="dark"]{
  --accent:#4fc39b; --accent-ink:#06231a;
  --brand-punch:#e8b84b;
  --c-ground:#0d1512; --c-panel:#141d19; --c-rule:#243530;
}

body{background:var(--c-ground)}
.c-mast{background:var(--c-panel)}
.pagebody{max-width:1040px}
.c-mast .mainnav a.is-here{color:var(--ink);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--accent)}
.mobnav a.is-here{color:var(--accent);font-weight:600}
.c-lede{color:var(--ink-2);max-width:70ch;margin:0 0 22px}
.c-more{font-weight:500}

/* -- venue lists: the site's primary unit -------------------------------- */
.c-venues{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.c-venue{background:var(--c-panel);border:1px solid var(--c-rule);
  border-radius:10px;padding:13px 15px}
.c-venue-main{display:block;text-decoration:none;color:inherit}
.c-venue-main b{font-size:15px;display:block;line-height:1.3}
.c-venue-main:hover b{color:var(--accent)}
.c-addr{display:block;color:var(--ink-3);font-size:12px;margin-top:3px;
  line-height:1.4}
.c-venue-meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:9px;
  font-size:12.5px;color:var(--ink-2)}
.c-dist{color:var(--accent);font-weight:600}
.c-price{margin-left:auto;font-weight:600}
.c-formats{margin-top:8px;display:flex;gap:4px;flex-wrap:wrap}

/* -- the venue page ------------------------------------------------------ */
.c-venuehead{display:flex;gap:22px;align-items:flex-start;margin:0 0 24px;
  flex-wrap:wrap}
.c-photo{width:320px;max-width:100%;height:auto;border-radius:10px;
  background:var(--panel-2)}
.c-venuehead h1{margin:0 0 6px;font-size:clamp(22px,3vw,32px)}
.c-where{margin:0 0 8px;font-size:14px}
.c-where a{color:var(--accent);font-weight:600}
.c-addr-full{margin:0 0 4px;color:var(--ink-2);font-size:14px}
.maplinks{margin:10px 0 0}
.maplink{display:inline-block;padding:6px 12px;border-radius:8px;
  border:1px solid var(--c-rule);background:var(--c-panel);
  text-decoration:none;font-size:13px;font-weight:500}
.maplink:hover{border-color:var(--accent);color:var(--accent)}
.c-summary{display:flex;flex-wrap:wrap;gap:8px 26px;margin:16px 0 0}
.c-summary div{display:flex;flex-direction:column;gap:1px}
.c-summary dt{color:var(--ink-3);font-size:11.5px;margin:0;
  text-transform:uppercase;letter-spacing:.04em}
.c-summary dd{margin:0;font-size:17px;font-weight:600}

.c-screens{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.c-screens li{background:var(--c-panel);border:1px solid var(--c-rule);
  border-radius:8px;padding:9px 12px;display:flex;gap:7px;align-items:center;
  flex-wrap:wrap}
.c-screens small{color:var(--ink-3);font-size:12px}

.c-prog td:first-child a{font-weight:500}
.c-cert{display:inline-block;margin-left:6px;padding:0 5px;border-radius:4px;
  background:var(--panel-2);color:var(--ink-3);font-size:11px}
.c-prog .is-cheapest{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.c-cheap-tag{display:inline-block;margin-left:5px;padding:1px 6px;
  border-radius:5px;font-size:11px;font-weight:600;
  background:var(--accent);color:var(--accent-ink)}

/* -- movie cards: the reach badge is this site's signature ---------------- */
.c-movies{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:18px 14px}
.c-mcard a{text-decoration:none;color:inherit;display:block}
.c-mcard-art{position:relative;aspect-ratio:2/3;border-radius:9px;
  overflow:hidden;background:var(--panel-2);margin-bottom:7px}
.c-mcard-art img{width:100%;height:100%;object-fit:cover;display:block}
.c-mcard-noart{display:grid;place-items:center;width:100%;height:100%;
  font-size:30px;font-weight:700;color:var(--ink-3)}
/* How many of Hong Kong's cinemas carry it. finder shows a screening count
   here; this is the number that answers "can I see it near me". */
.c-reach{position:absolute;left:6px;top:6px;padding:2px 7px;border-radius:6px;
  font-size:12px;font-weight:700;background:var(--accent);
  color:var(--accent-ink)}
.c-mcard b{display:block;font-size:13px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.c-mcard small{display:block;color:var(--ink-3);font-size:11.5px;margin-top:2px}
.c-mcard a:hover b{color:var(--accent)}

.c-linklist{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px 18px}
.c-linklist li{display:flex;gap:8px;align-items:baseline;padding:7px 0;
  border-bottom:1px solid var(--c-rule)}
.c-linklist a{text-decoration:none;font-weight:500}
.c-linklist small{color:var(--ink-3);font-size:12px;margin-left:auto}

.c-foot .foot-note{max-width:70ch}