/* TownPost public room header polish only. */

.hero.tp-hero-with-weather{
  min-height:184px!important;
}
.hero.tp-hero-with-weather>div:before{
  content:"Silver Falls Edition";
  display:inline-flex;
  margin-bottom:5px;
  padding:4px 9px 3px;
  border:1px solid rgba(49,92,47,.18);
  border-radius:999px;
  background:rgba(255,253,246,.58);
  color:#315c2f;
  font:850 10px/1.1 system-ui,-apple-system,Segoe UI,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.tp-hero-weather{
  border:1px solid rgba(217,226,210,.56);
}

.hero.tp-route-hero-art{
  position:relative;
  overflow:hidden;
  min-height:132px!important;
  display:grid;
  grid-template-columns:minmax(180px,28%) 1fr;
  align-items:center;
  gap:18px;
  border:1px solid rgba(199,149,59,.22)!important;
  border-radius:16px!important;
  background:linear-gradient(90deg,rgba(255,253,246,.95),rgba(255,253,246,1)),linear-gradient(135deg,rgba(49,92,47,.08),rgba(45,98,140,.06))!important;
  box-shadow:0 10px 26px rgba(21,50,74,.06)!important;
}
.hero.tp-route-hero-art:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:min(310px,34%);
  background-image:var(--tp-route-hero-art);
  background-size:cover;
  background-position:center;
  filter:saturate(.96) contrast(.98) brightness(1.02);
  z-index:0;
}
.hero.tp-route-hero-art:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(255,253,246,.04) 0%,rgba(255,253,246,.25) 24%,rgba(255,253,246,.88) 38%,rgba(255,253,246,1) 100%);
  z-index:1;
  pointer-events:none;
}
.hero.tp-route-hero-art>div{
  position:relative;
  z-index:2;
  grid-column:2;
}
.hero.tp-route-hero-art>div:before{
  content:attr(data-hero-kicker);
  display:inline-flex;
  margin-bottom:5px;
  padding:4px 9px 3px;
  border:1px solid rgba(49,92,47,.18);
  border-radius:999px;
  background:rgba(255,253,246,.62);
  color:#315c2f;
  font:850 10px/1.1 system-ui,-apple-system,Segoe UI,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero.tp-route-hero-art h1{
  margin-top:0!important;
  color:#17324a!important;
}
.hero.tp-route-hero-art p{
  color:#33495f!important;
}

.room-menu .room-link{
  position:relative;
  display:grid!important;
  grid-template-columns:46px 1fr!important;
  align-items:center!important;
  min-height:58px;
  overflow:hidden;
}
.tp-room-link-art{
  width:36px;
  height:36px;
  border-radius:10px;
  background-size:cover;
  background-position:center;
  box-shadow:inset 0 0 0 1px rgba(255,253,246,.42),0 3px 8px rgba(21,50,74,.08);
  flex:0 0 36px;
}
.room-link.active .tp-room-link-art{
  box-shadow:inset 0 0 0 2px rgba(255,253,246,.78),0 4px 10px rgba(21,50,74,.12);
}

.tp-room-themed-banner{
  position:relative;
  min-height:112px;
  overflow:hidden;
  display:grid!important;
  grid-template-columns:132px 1fr;
  align-items:center;
  column-gap:18px;
  padding:16px 18px!important;
  border-left:0!important;
  background:linear-gradient(90deg,rgba(255,253,246,.92),rgba(255,253,246,.98)),linear-gradient(135deg,rgba(49,92,47,.08),rgba(199,149,59,.06))!important;
}
.tp-room-themed-banner:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(49,92,47,.10),transparent 44%);
  pointer-events:none;
}
.tp-room-mini-art{
  grid-row:1 / span 3;
  width:132px;
  height:84px;
  border-radius:12px;
  background-image:var(--tp-room-art);
  background-size:cover;
  background-position:center;
  box-shadow:inset 0 0 0 1px rgba(255,253,246,.52),0 8px 18px rgba(21,50,74,.08);
  position:relative;
  z-index:1;
}
.tp-room-kicker{
  position:relative;
  z-index:1;
  color:#315c2f;
  font:900 11px/1.1 system-ui,-apple-system,Segoe UI,sans-serif;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:-4px;
}
.tp-room-themed-banner h2,.tp-room-themed-banner p{
  position:relative;
  z-index:1;
}
.tp-room-themed-banner h2{margin:0!important}
.tp-room-themed-banner p{margin:.25rem 0 0!important}

@media (max-width:900px){
  .tp-room-themed-banner{grid-template-columns:104px 1fr;min-height:100px}
  .tp-room-mini-art{width:104px;height:72px}
}
@media (max-width:640px){
  .hero.tp-route-hero-art{display:block!important;min-height:176px!important;padding-top:92px!important}
  .hero.tp-route-hero-art:before{width:100%;height:105px;bottom:auto}
  .hero.tp-route-hero-art:after{background:linear-gradient(180deg,rgba(255,253,246,.02) 0%,rgba(255,253,246,.34) 45%,rgba(255,253,246,.96) 78%,#fffdf6 100%)}
  .hero.tp-route-hero-art>div{grid-column:auto}
  .tp-room-themed-banner{display:block!important;padding:14px!important}
  .tp-room-mini-art{width:100%;height:94px;margin-bottom:10px}
}