/* Studio list and details: photographic surfaces, readable facts, clear actions. */
#venues { --venue-ink:#f7f5f2; --venue-muted:#b8b3ae; }
#venues .section__head { position:relative; margin-bottom:28px; padding-bottom:26px; border-bottom:1px solid var(--glass-border); }
#venues .section__eyebrow { display:none; }
#venues .venue-count { position:absolute; right:0; bottom:27px; color:var(--ink-dim); font-size:15px; }
#venues .section__sub { padding-right:65px; }
#venues .venue-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:22px; }
#venues .venue-design { --venue-accent:#ff721e; --venue-accent-ink:#ff8c49; display:grid; grid-template-columns:minmax(0,37%) minmax(0,34%) minmax(0,29%); min-height:360px; padding:0; overflow:hidden; border:1px solid #322c29; border-left:5px solid var(--venue-accent); border-radius:22px; background:#141211; box-shadow:none; color:var(--venue-ink); transform:none; }
#venues .venue-design--branch { --venue-accent:#9665ff; --venue-accent-ink:#c2a4ff; }
#venues .venue-design:hover { border-color:#4a403b; border-left-color:var(--venue-accent); transform:none; box-shadow:none; }
.venue-design__visual { position:relative; min-height:360px; isolation:isolate; overflow:hidden; }
.venue-design__photo { display:block; position:absolute; inset:0; }
.venue-design__photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,#0002 15%,#0001 30%,#000c 100%); }
.venue-design__photo img,.venue-image-placeholder { width:100%;height:100%;object-fit:cover;display:block; }
.venue-image-placeholder { background:repeating-linear-gradient(120deg,#201b17 0 22px,#171310 22px 44px); }
.venue-design__badge { position:absolute; left:23px;top:23px; padding:7px 12px; border-radius:9px; background:var(--venue-accent); color:#160c06; font-size:13px;font-weight:800;pointer-events:none; }
.venue-design--branch .venue-design__badge { background:#382748; color:#e0cfff; border:1px solid #7652aa; }
.venue-design__tour { position:absolute;right:19px;top:21px;z-index:2; display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border:1px solid #fff6;border-radius:99px;background:#24201bc9;color:#fff;text-decoration:none;font-weight:750;font-size:14px;backdrop-filter:blur(8px); }
.venue-design__tour svg { width:16px;height:16px; }
.venue-design__caption { position:absolute; bottom:23px;left:23px;right:18px;color:#fff;text-decoration:none; }
#venues .venue-design__caption h3 { margin:0 0 8px; font-size:clamp(26px,2.2vw,35px);line-height:1.2;font-weight:900;letter-spacing:-.04em; }
.venue-design__caption p { margin:0; font-size:14px;line-height:1.6;color:#e3ded9; }
.venue-design__info { display:flex;flex-direction:column;justify-content:space-between;gap:30px;min-width:0;padding:30px 27px; }
.venue-design__facts { display:grid;gap:20px;margin:0; }
.venue-design__facts > div { display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;font-size:17px;line-height:1.7; }
.venue-design__facts dt { color:var(--venue-muted);font-size:15px; }
.venue-design__facts dd { margin:0;font-weight:600;overflow-wrap:anywhere; }
.venue-design__actions { display:flex;gap:12px;flex-wrap:wrap; }
.venue-action { min-height:48px; padding:13px 21px; display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid #48403b;border-radius:12px;background:#24201d;color:#f6f3ef;font:700 14px/1.35 var(--font-tc),sans-serif;cursor:pointer;text-decoration:none;white-space:normal;text-align:center; }
.venue-action small { font-weight:400;color:#bcb5af;font-size:12px; }
.venue-action--primary { background:#ff7017;color:#130c07;border-color:#ff7017; }
.venue-design--branch .venue-action--primary { background:transparent;color:#c5a9ff;border-color:#7652aa; }
.venue-action:hover { filter:brightness(1.13); }
.venue-action:focus-visible,.venue-design__tour:focus-visible,.venue-detail-play:focus-visible,.venue-design__caption:focus-visible,.venue-design__photo:focus-visible,.venue-detail-thumbs button:focus-visible { outline:3px solid #ffa557; outline-offset:3px; }
.venue-design__map { position:relative;min-width:0;background:#f4f4f1; }
#venues .venue-design .venue-map { height:100%;margin:0; }
#venues .venue-design .venue-map__link { height:100%;display:flex;flex-direction:column; }
#venues .venue-design .venue-map__canvas { flex:1; min-height:245px;aspect-ratio:auto; }
#venues .venue-design .venue-map__streets { width:100%;height:100%;object-fit:cover; }
#venues .venue-design .venue-map__canvas::after { background:linear-gradient(90deg,#1412114a,transparent 18%),linear-gradient(0deg,#f4f4f1,transparent 25%); }
#venues .venue-design .venue-map__footer { padding:12px 20px 18px; }
#venues .venue-design .venue-map__footer strong { font-size:16px; }
#venues .venue-design .venue-map__credit { bottom:88px;font-size:8px; }
#venues .venue-design--branch .venue-map__arrow { background:#9261f7;color:white; }
.venue-map-fallback { display:flex;align-items:center;justify-content:center;gap:20px;height:100%;min-height:220px;color:#332a24; }
.venue-map-fallback svg { width:26px;height:26px; }
.venue-detail-design { color:#f7f4f1; }
.venue-detail-back { display:inline-block;margin-bottom:22px;min-height:30px;color:var(--ink-dim);text-decoration:none;font-size:15px; }
.venue-detail-hero { display:grid;grid-template-columns:minmax(0,55.5%) minmax(0,44.5%);border:1px solid #302b27;border-radius:22px;overflow:hidden;background:#0d0c0b; }
.venue-detail-media { position:relative;min-height:460px;background:#191511;isolation:isolate; }
.venue-detail-media > img,.venue-detail-media > .venue-image-placeholder { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.venue-detail-media::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0001,#0002 60%,#0008);pointer-events:none; }
.venue-detail-play { position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;text-decoration:none;color:white;background:#0002;text-shadow:0 2px 5px #0008; }
.venue-detail-play > span { display:grid;place-items:center;width:66px;height:66px;border:1px solid #fff9;border-radius:50%;background:#17120fb3;backdrop-filter:blur(8px);transition:transform .2s; }
.venue-detail-play svg { width:26px;height:26px; }
.venue-detail-play:hover > span { transform:scale(1.07); }
.venue-detail-play strong { font-size:15px;letter-spacing:.08em; }
.venue-design__tour,.venue-detail-play { font-family:inherit;cursor:pointer; }
.venue-detail-play { width:100%;height:100%;padding:0;border:0; }
.venue-tour-dialog { position:fixed;inset:0;margin:auto;width:min(1440px,calc(100vw - 48px));max-width:none;height:min(900px,calc(100dvh - 48px));max-height:none;padding:0;border:1px solid #66517c;border-radius:20px;overflow:hidden;background:#111014;color:#fff;box-shadow:0 24px 90px #0009; }
.venue-tour-dialog[open] { display:grid;grid-template-rows:auto minmax(0,1fr); }
.venue-tour-dialog::backdrop { background:#050407d9;backdrop-filter:blur(8px); }
.venue-tour-dialog__header { display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 18px;border-bottom:1px solid #ffffff20; }
.venue-tour-dialog__header h2 { margin:0;font-size:17px;line-height:1.5;font-weight:750; }
.venue-tour-dialog__close { flex-shrink:0;min-height:44px;padding:10px 16px;border:1px solid #9772cf;border-radius:10px;background:#39264f;color:#f7efff;font-family:inherit;font-size:14px;line-height:1.4;font-weight:700;cursor:pointer; }
.venue-tour-dialog__close:hover { background:#50346e; }
.venue-tour-dialog__close:focus-visible { outline:3px solid #c4a2ff;outline-offset:3px; }
.venue-tour-dialog__viewer { position:relative;min-height:0; }
.venue-tour-dialog__viewer iframe { position:relative;z-index:1;display:block;width:100%;height:100%;border:0;background:transparent; }
.venue-tour-dialog__loading { position:absolute;inset:30px 20px auto;margin:0;text-align:center;color:#d3c8df;font-size:15px; }
@media(max-width:700px) {
  .venue-tour-dialog { width:100vw;height:100dvh;margin:0;border:0;border-radius:0; }
  .venue-tour-dialog__header { padding:calc(10px + env(safe-area-inset-top)) 12px 10px;gap:10px; }
  .venue-tour-dialog__header h2 { font-size:14px; }
  .venue-tour-dialog__close { padding:10px 12px;font-size:13px; }
}
.venue-detail-thumbs { position:absolute;left:20px;right:20px;bottom:20px;z-index:2;display:flex;align-items:center;gap:9px; }
.venue-detail-thumbs button { padding:0;width:66px;height:48px;border:2px solid #fff5;border-radius:8px;overflow:hidden;cursor:pointer;background:#26201a; }
.venue-detail-thumbs button[aria-pressed="true"] { border-color:#ff741f; }
.venue-detail-thumbs img { width:100%;height:100%;object-fit:cover; }
.venue-detail-thumbs > span { color:#fffc;text-shadow:0 1px 3px #000;font-size:11px; }
.venue-detail-info { padding:30px;min-width:0;display:flex;flex-direction:column;justify-content:center; }
.venue-detail-badges { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.venue-detail-badges span { padding:5px 10px;border:1px solid #663312;border-radius:6px;background:#321d0f;color:#ff964c;font-size:13px;font-weight:800; }
.venue-detail-badges small { padding:4px 10px;border:1px solid #37312d;border-radius:5px;color:#bcb5ae;font-size:12px; }
.venue-detail-info h2 { margin:14px 0;font-size:clamp(28px,2.6vw,40px);line-height:1.2;letter-spacing:-.04em;font-weight:900; }
.venue-detail-description { margin:0 0 22px;color:#bcb5ae;line-height:1.8;font-size:15px; }
.venue-detail-facts { margin:0 0 22px;border:1px solid #302924;border-radius:14px;background:#191614;overflow:hidden; }
.venue-detail-facts > div { display:grid;grid-template-columns:68px minmax(0,1fr);gap:14px;padding:15px 16px;border-bottom:1px solid #302924;font-size:14px;line-height:1.65; }
.venue-detail-facts > div:last-child { border:0; }
.venue-detail-facts dt { color:#b9b1aa; }
.venue-detail-facts dd { margin:0;color:#f5f0eb;font-weight:600; }
.venue-detail-actions { display:flex;gap:10px; }
.venue-detail-actions > :first-child { flex:1; }
.venue-detail-actions .venue-action { padding:14px 18px; }
.venue-detail-section-head { display:flex;align-items:center;gap:18px;margin:26px 0 16px;color:var(--ink); }
.venue-detail-section-head::after { content:"";height:1px;background:var(--glass-border);flex:1;order:1; }
.venue-detail-section-head h3 { margin:0;font-size:19px;font-weight:800; }
.venue-detail-section-head > span { order:2;color:var(--ink-dim);font-size:13px;white-space:nowrap; }
.venue-course-table-wrap { border:1px solid #322b26;border-radius:18px;overflow:hidden;background:#151210; }
.venue-course-table { width:100%;border-collapse:collapse;table-layout:fixed; }
.venue-course-table thead { background:#1a1613;color:#b7afa8;font-size:13px; }
.venue-course-table thead th { padding:16px 22px;text-align:left;font-weight:500; }
.venue-course-table thead th:nth-child(1) { width:33%; }.venue-course-table thead th:nth-child(2) { width:39%; }.venue-course-table thead th:nth-child(3) { width:14%; }.venue-course-table thead th:nth-child(4) { width:14%; }
.venue-course-table tbody th,.venue-course-table td { padding:20px 22px;border-top:1px solid #2b2520;text-align:left;vertical-align:middle; }
.venue-course-table tbody th strong { display:block;font-size:16px;line-height:1.5; }.venue-course-table tbody th small { display:block;color:#aaa29b;font-size:12px;font-weight:400;line-height:1.7;margin-top:4px; }
.venue-course-table__times span { display:inline-block;border-radius:5px;background:#29231f;padding:5px 8px;font-size:12px;line-height:1.45;margin:3px 5px 3px 0; }
.venue-course-table__availability { color:#c0b6ad;font-size:12px;line-height:1.6; }
.venue-course-table td.venue-course-table__action { text-align:right;padding-left:4px; }.venue-course-table__action .venue-action { padding:11px 15px;font-size:13px;min-height:44px; }
.venue-detail-rental { margin-top:22px;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px;border:1px solid #302924;border-radius:17px;background:#14110f; }.venue-detail-rental h3 { margin:0 0 7px;font-size:17px; }.venue-detail-rental p { margin:0;color:#bcb3aa;font-size:13px;line-height:1.7; }.venue-detail-rental .venue-action { flex-shrink:0; }
.venue-detail-empty { color:var(--ink-dim); }
.venue-visually-hidden { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
/* A bright map behind the glass bar must never erase navigation icons. */
#tabbar.tabbar--glass { background:rgba(24,21,19,.94);border-color:#ffffff2e;isolation:isolate; }
#tabbar.tabbar--glass .tabbar__t { color:#ddd6cf;position:relative;z-index:1; }
#tabbar.tabbar--glass .tabbar__t.is-on { color:#fff; }
:root[data-theme="light"] #tabbar.tabbar--glass { background:rgba(250,247,244,.96);border-color:#30281830; }
:root[data-theme="light"] #tabbar.tabbar--glass .tabbar__t { color:#504338; }
:root[data-theme="light"] #tabbar.tabbar--glass .tabbar__t.is-on { color:#17110c; }
@media(max-width:1100px) {
  .venue-detail-hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .venue-detail-info { padding:23px; }.venue-detail-actions { flex-wrap:wrap; }.venue-detail-actions .venue-action { flex:1 1 180px; }
}
@media(max-width:700px) {
  #venues .section__head { margin-bottom:22px;padding-bottom:20px; }#venues .venue-count { bottom:21px; }
  #venues .venue-design { grid-template-columns:minmax(0,1fr);border-radius:17px;min-height:0;border-left-width:4px; }
  .venue-design__visual { min-height:265px; }.venue-design__info { padding:23px 21px;gap:24px; }.venue-design__facts { gap:15px; }.venue-design__facts > div { grid-template-columns:62px minmax(0,1fr);gap:12px;font-size:14px; }
  .venue-design__caption { left:21px;bottom:22px; }#venues .venue-design__caption h3 { font-size:28px; }.venue-design__caption p { font-size:13px; }.venue-design__badge { top:18px;left:20px; }.venue-design__tour { right:16px;top:16px;padding:10px 12px; }
  .venue-design__actions > * { flex:1 1 auto; }.venue-design__actions .venue-action { padding:13px 14px; }.venue-design__actions small { font-size:11px; }
  #venues .venue-design .venue-map__link { display:flex;min-height:0; }#venues .venue-design .venue-map__canvas { height:180px;flex:auto;min-height:180px; }#venues .venue-design .venue-map__footer { padding:8px 20px 18px; }#venues .venue-design .venue-map__credit { bottom:78px;right:8px; }
  .venue-detail-hero { grid-template-columns:minmax(0,1fr);border-radius:17px; }.venue-detail-media { min-height:290px; }.venue-detail-info { padding:23px 20px; }.venue-detail-info h2 { font-size:31px;margin:17px 0; }.venue-detail-description { font-size:14px; }.venue-detail-facts > div { grid-template-columns:62px minmax(0,1fr);padding:14px;gap:10px;font-size:13px; }.venue-detail-actions .venue-action { flex:1 1 140px;font-size:13px;padding:13px 12px; }
  .venue-detail-section-head { gap:10px; }.venue-detail-section-head h3 { font-size:17px; }.venue-detail-section-head>span { font-size:12px; }
  .venue-course-table,.venue-course-table tbody,.venue-course-table tr,.venue-course-table tbody th,.venue-course-table td { display:block;width:auto; }
  .venue-course-table thead { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); }.venue-course-table tr { position:relative;padding:20px;border-top:1px solid #302821; }.venue-course-table tr:first-child { border-top:0; }
  .venue-course-table tbody th,.venue-course-table td { padding:0;border:0; }.venue-course-table tbody th { margin-bottom:12px; }.venue-course-table tbody th strong { font-size:16px; }
  .venue-course-table td.venue-course-table__times { margin-bottom:13px; }.venue-course-table td.venue-course-table__availability { padding-right:115px;min-height:44px;display:flex;align-items:center; }.venue-course-table td.venue-course-table__action { position:absolute;bottom:20px;right:20px;padding:0; }.venue-course-table__action .venue-action { font-size:12px;max-width:108px; }
  .venue-detail-rental { flex-direction:column;align-items:stretch;padding:21px;gap:18px; }
}
@media(prefers-reduced-motion:reduce) { .venue-detail-play>span { transition:none; } }

/* Compact desktop/tablet retains the same photo, facts and map order. */
@media (min-width:701px) and (max-width:1100px) {
  #venues .venue-design { grid-template-columns:minmax(0,31%) minmax(0,42%) minmax(0,27%); }
  .venue-design__info { padding:24px 20px;gap:24px; }
  .venue-design__facts > div { grid-template-columns:42px minmax(0,1fr);gap:10px;font-size:15px; }
  .venue-design__facts dt { font-size:13px; }
  .venue-design__caption { left:18px;right:16px; }
  #venues .venue-design__caption h3 { font-size:28px; }
  .venue-design__actions { gap:9px; }
  .venue-design__actions .venue-action { padding:12px 14px; }
  #venues .venue-design .venue-map__footer { padding:12px 14px 18px;gap:8px; }
  #venues .venue-design .venue-map__footer strong { font-size:15px; }
  .venue-design__map .venue-map__arrow { width:36px;height:36px; }
}
.venue-action--tour { border-color:var(--venue-accent,#9665ff);background:#382747;color:#eadfff; }
.venue-action--tour svg { width:17px;height:17px;flex:none; }
.venue-design__actions .venue-action--tour { flex:1 1 150px; }
.venue-design__actions [data-rental-enquiry] { flex:1 1 100%; }
.venue-detail-actions { flex-wrap:wrap; }
.venue-detail-actions > .venue-action--tour { flex:1 1 100%; }
.venue-design__tour { font-size:13px; }
.venue-tour-status { display:inline-flex;align-items:center;gap:7px;color:#b7ada4;font-size:12px;line-height:1.5; }
.venue-tour-status svg { width:15px;height:15px;flex:none; }
.venue-design__actions > .venue-tour-status { flex-basis:100%; }
.venue-detail-info > .venue-tour-status { margin:0 0 16px; }
@media (hover:hover) and (pointer:fine) and (min-width:701px) {
  #venues .venue-card.venue-design { transition:translate .25s ease,border-color .25s ease,box-shadow .25s ease; }
  .venue-design__photo img { transition:transform .5s ease; }
  #venues .venue-card.venue-design:hover,
  #venues .venue-card.venue-design:focus-within {
    translate:0 -5px;
    border-color:var(--venue-accent);
    box-shadow:0 14px 32px #0004,0 0 0 1px color-mix(in srgb,var(--venue-accent) 24%,transparent);
  }
  .venue-card.venue-design:hover .venue-design__photo img,
  .venue-card.venue-design:focus-within .venue-design__photo img { transform:scale(1.035); }
}
@media (max-width:700px) {
  .venue-design__actions .venue-action--tour { flex-basis:100%; }
}
@media (prefers-reduced-motion:reduce) {
  #venues .venue-card.venue-design,.venue-design__photo img { transition:none; }
  #venues .venue-card.venue-design:hover,#venues .venue-card.venue-design:focus-within,
  .venue-card.venue-design:hover .venue-design__photo img,.venue-card.venue-design:focus-within .venue-design__photo img { transform:none; translate:none; }
}
@media (min-width:701px) and (max-width:850px) {
  .venue-design__tour { top:68px;left:18px;right:auto;padding:8px 10px;font-size:12px; }
}

/* Match the destination key to the Kwun Tong street and pin artwork. */
#venues .venue-design--branch .venue-map__eyebrow::before {
  background: var(--venue-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--venue-accent) 25%, transparent);
}

/* Keep the panorama at viewport scale despite the desktop page zoom. */
@media(min-width:961px) { .venue-tour-dialog { zoom:1.25; } }