/* Hotel page v2 preview — photo additions on top of the live theme */
:root{--hv2-red:#C8102E;--hv2-ink:#1F2328;--hv2-muted:#5F6368;--hv2-line:#E4E4E4}

/* marquee under the hero */
.hv2-marquee{padding:34px 0 46px;background:#fff;border-top:1px solid var(--hv2-line);border-bottom:1px solid var(--hv2-line);overflow:hidden}
.hv2-marquee__label{max-width:1200px;margin:0 auto 18px;padding:0 20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--hv2-muted)}
.hv2-marquee__label a{color:var(--hv2-red);text-decoration:none;letter-spacing:.08em}
.hv2-marquee__row{list-style:none;margin:0 0 14px;padding:0;display:flex;gap:14px;width:max-content;animation:hv2scroll 70s linear infinite}
.hv2-marquee__row.is-rev{animation-direction:reverse;animation-duration:80s;margin-bottom:0}
.hv2-marquee:hover .hv2-marquee__row{animation-play-state:paused}
.hv2-marquee__row li{position:relative;flex:0 0 auto;width:300px;height:196px;border-radius:14px;overflow:hidden;background:#eee}
.hv2-marquee__row img{width:100%;height:100%;object-fit:cover;display:block}
.hv2-marquee__row span{position:absolute;left:10px;bottom:10px;background:rgba(31,35,40,.72);color:#fff;font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:100px}
@keyframes hv2scroll{to{transform:translateX(-50%)}}

/* photo bands inside text sections */
.hv2-band{margin-top:40px}
.hv2-band__title{margin:0 0 14px;font:700 17px/1.35 "Plus Jakarta Sans",sans-serif;color:var(--hv2-ink)}
.sf-qc-band--dark .hv2-band__title{color:#fff}
.hv2-band__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hv2-band--2 .hv2-band__grid{grid-template-columns:1.25fr 1fr}
.hv2-band--3 .hv2-band__grid{grid-template-columns:1.4fr 1fr 1fr}
.hv2-fig{position:relative;margin:0;border-radius:14px;overflow:hidden;background:#eee;cursor:zoom-in;aspect-ratio:4/3}
.hv2-band--3 .hv2-fig:first-child{aspect-ratio:auto}
.hv2-fig img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.hv2-fig:hover img,.hv2-fig:focus-visible img{transform:scale(1.05)}
.hv2-fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;background:linear-gradient(rgba(15,17,19,0),rgba(15,17,19,.78));color:#fff;font-size:12.5px;line-height:1.4}
.hv2-fig figcaption b{display:block;font-size:13.5px;font-weight:700}
.hv2-fig figcaption span{display:block;color:rgba(255,255,255,.82);max-height:0;overflow:hidden;transition:max-height .35s ease}
.hv2-fig:hover figcaption span,.hv2-fig:focus-visible figcaption span{max-height:60px}
.hv2-note{margin:10px 0 0;font-size:12.5px;color:var(--hv2-muted)}
.sf-qc-band--dark .hv2-note{color:#A0A6AC}

/* filterable gallery */
.hv2-gallery{margin-top:26px}
.hv2-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.hv2-tabs button{font:600 14px "Hanken Grotesk",sans-serif;padding:9px 16px;border-radius:100px;border:1px solid var(--hv2-line);background:#fff;color:var(--hv2-ink);cursor:pointer}
.hv2-tabs button em{font-style:normal;color:var(--hv2-muted);font-weight:500;margin-left:4px}
.hv2-tabs button[aria-selected="true"]{background:var(--hv2-ink);border-color:var(--hv2-ink);color:#fff}
.hv2-tabs button[aria-selected="true"] em{color:#C9CED3}
.hv2-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;gap:12px}
.hv2-grid .hv2-fig:nth-child(7n+1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.hv2-grid .hv2-fig[hidden]{display:none}

/* reveal */
.hv2-js [data-hv2-reveal] .hv2-fig{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.hv2-js [data-hv2-reveal].is-in .hv2-fig{opacity:1;transform:none}
.hv2-js [data-hv2-reveal].is-in .hv2-fig:nth-child(2){transition-delay:.1s}
.hv2-js [data-hv2-reveal].is-in .hv2-fig:nth-child(3){transition-delay:.2s}

/* lightbox */
.hv2-lightbox{position:fixed;inset:0;z-index:1000;background:rgba(10,11,13,.92);display:flex;align-items:center;justify-content:center;padding:40px 70px}
.hv2-lightbox[hidden]{display:none}
.hv2-lightbox figure{margin:0;max-width:1200px;width:100%;text-align:center}
.hv2-lightbox img{max-width:100%;max-height:78vh;border-radius:10px;object-fit:contain}
.hv2-lightbox figcaption{color:#fff;margin-top:12px;font-size:14px}
.hv2-lightbox figcaption b{display:block;font-size:16px}
.hv2-lightbox figcaption span{color:#C9CED3}
.hv2-lightbox button{position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;font-size:34px;width:52px;height:52px;border-radius:50%;cursor:pointer;line-height:1}
.hv2-lightbox button:hover{background:rgba(255,255,255,.2)}
.hv2-lightbox__x{top:18px;right:18px}
.hv2-lightbox__prev{left:14px;top:50%;margin-top:-26px}
.hv2-lightbox__next{right:14px;top:50%;margin-top:-26px}

@media (max-width:900px){
  .hv2-grid{grid-template-columns:repeat(2,1fr)}
  .hv2-band--3 .hv2-band__grid{grid-template-columns:1fr 1fr}
  .hv2-band--3 .hv2-fig:first-child{grid-column:span 2;aspect-ratio:16/9}
  .hv2-marquee__row li{width:220px;height:146px}
}
@media (max-width:560px){
  .hv2-band--2 .hv2-band__grid{grid-template-columns:1fr}
  .hv2-lightbox{padding:60px 10px}
  .hv2-fig figcaption span{max-height:none}
}
@media (prefers-reduced-motion:reduce){
  .hv2-marquee__row{animation:none}
  .hv2-js [data-hv2-reveal] .hv2-fig{opacity:1;transform:none;transition:none}
}

/* fixed row heights so mixed photo shapes line up */
.hv2-band__grid{grid-auto-rows:300px}
.hv2-band--2 .hv2-band__grid{grid-auto-rows:360px}
.hv2-band .hv2-fig,.hv2-grid .hv2-fig{aspect-ratio:auto!important;height:100%}
.hv2-grid{grid-auto-rows:210px}
@media (max-width:900px){.hv2-band__grid{grid-auto-rows:220px}.hv2-band--2 .hv2-band__grid{grid-auto-rows:260px}.hv2-grid{grid-auto-rows:170px}.hv2-band--3 .hv2-fig:first-child{aspect-ratio:auto}}
@media (max-width:560px){.hv2-band--2 .hv2-band__grid{grid-auto-rows:230px}}

/* reveal only on the small bands; the gallery is always visible */
.hv2-js .hv2-gallery[data-hv2-reveal] .hv2-fig{opacity:1!important;transform:none!important}
/* phone fixes */
@media (max-width:640px){
  #foshan-hospitality-showrooms .sf-cn-cards{grid-template-columns:1fr!important}
  .hv2-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-right:-20px;padding-right:20px}
  .hv2-tabs button{flex:0 0 auto}
  .hv2-grid .hv2-fig:nth-child(7n+1){grid-row:span 1}
  .hv2-marquee{padding:24px 0 30px}
}

/* phone gallery: title only on the tile; the lightbox shows the full caption */
@media (max-width:560px){.hv2-grid .hv2-fig figcaption span{display:none}.hv2-grid .hv2-fig figcaption{padding:26px 10px 9px}.hv2-grid .hv2-fig figcaption b{font-size:12.5px}}