@import url("style.css");

/* City pages: keep the photo integrated in the hero and align the visual
   treatment with the current StudentBnB Italy city pages. */
.city-hero{
  position:relative;
  overflow:hidden;
  min-height:420px;
  background:#efe9d6;
}
.city-hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.002);
}
.city-hero-bg:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(255,248,222,.96) 0%,rgba(255,248,222,.78) 28%,rgba(255,248,222,.14) 58%,rgba(255,248,222,0) 75%);
  pointer-events:none;
}
.city-hero>.container{
  position:relative;
  z-index:2;
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:1240px;
}
.city-hero h2,
.city-hero p{
  max-width:520px;
}

/* Same city label treatment used on StudentBnB: city name over the photo,
   in the upper-right corner. */
.city-hero #city-name{
  position:absolute!important;
  top:16px!important;
  right:16px!important;
  left:auto!important;
  bottom:auto!important;
  z-index:5!important;
  width:auto!important;
  max-width:45vw!important;
  margin:0!important;
  padding:6px 10px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:9px!important;
  background:rgba(20,28,28,.58)!important;
  box-shadow:0 2px 10px rgba(0,0,0,.14)!important;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  color:#fff!important;
  font-size:16px!important;
  font-weight:750!important;
  line-height:1.1!important;
  text-shadow:0 1px 4px rgba(0,0,0,.30)!important;
}

/* The map-back button is no longer shown on any city page. */
body[data-city-slug] .city-hero a.btn[href="/"]{
  display:none!important;
}

/* Until there is enough inventory to make filtering useful, show every
   listing on city pages, exactly as on StudentBnB Italy. */
body[data-city-slug] .filters,
.filters:has(.city-filter-grid){
  display:none!important;
}

/* City photography synchronized with studentbnb.it. Keeping these URLs as
   the shared source guarantees that CasaStudent and StudentBnB show the same
   approved photo for each city without maintaining two divergent copies. */
body[data-city-slug="milano"] .city-hero-bg{background-image:url("https://studentbnb.it/assets/img/milano-duomo.webp")!important}
body[data-city-slug="roma"] .city-hero-bg{background-image:url("https://studentbnb.it/assets/img/roma-colosseo.webp")!important}
body[data-city-slug="napoli"] .city-hero-bg{background-image:url("https://images.unsplash.com/photo-1773600876856-338c2e99cd45?auto=format&fit=crop&fm=webp&q=82&w=2400")!important}
body[data-city-slug="torino"] .city-hero-bg{background-image:url("https://studentbnb.it/assets/img/torino-mole.webp")!important}
body[data-city-slug="bologna"] .city-hero-bg{background-image:url("https://studentbnb.it/assets/img/bologna-torri.webp")!important}
body[data-city-slug="padova"] .city-hero-bg{background-image:url("https://studentbnb.it/assets/img/padova-palazzo-ragione.webp")!important}
body[data-city-slug="firenze"] .city-hero-bg{background-image:url("https://studentbnb.it/assets/img/firenze-duomo.webp")!important}
body[data-city-slug="pisa"] .city-hero-bg{background-image:url("https://studentbnb.it/assets/img/pisa-piazza-dei-miracoli.webp")!important}
body[data-city-slug="palermo"] .city-hero-bg{background-image:url("https://images.unsplash.com/photo-1774244764179-f34b65061ec6?auto=format&fit=crop&fm=webp&q=82&w=2400")!important}
body[data-city-slug="bari"] .city-hero-bg{background-image:url("https://images.unsplash.com/photo-1564863756233-e90e6d2f264b?auto=format&fit=crop&fm=webp&q=82&w=2400")!important}
body[data-city-slug="cagliari"] .city-hero-bg{background-image:url("https://studentbnb.it/assets/img/cagliari-panorama.webp")!important}
body[data-city-slug="ancona"] .city-hero-bg{background-image:url("https://studentbnb.it/assets/img/ancona-piazza.webp")!important}
body[data-city-slug="trieste"] .city-hero-bg{background-image:url("https://studentbnb.it/assets/img/trieste-piazza.webp")!important}

@media (max-width:590px){
  .city-hero{
    min-height:390px;
  }
  .city-hero-bg{
    background-position:center;
  }
  .city-hero-bg:before{
    background:linear-gradient(180deg,rgba(255,248,222,.12) 0%,rgba(255,248,222,.42) 44%,rgba(255,248,222,.96) 78%,rgba(255,248,222,1) 100%);
  }
  .city-hero>.container{
    min-height:390px;
    justify-content:flex-end;
    padding-bottom:30px;
  }
  .city-hero #city-name{
    top:11px!important;
    right:11px!important;
    max-width:55vw!important;
    padding:5px 8px!important;
    font-size:14px!important;
  }
}