/* Locations hub (/locations), 5 Oct 2026: page rules on top of site-v2.css and site-v2-pages.css, loaded only by
   pages/locations-v2-body. Every selector is scoped under the page wrapper .sv2-pg-locations. */

/* hero: the words sit on the start side over the blended photo */
.sv2-pg-locations .sv2-hero-copy{max-width:720px}
.sv2-pg-locations .sv2-hero h1{max-width:12em}

/* city tiles: the house photo tile, shorter and four to a row; London (the first card) is the wide feature tile */
.sv2-pg-locations .sv2-loc-list{padding-block:96px}
.sv2-pg-locations .sv2-loc-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sv2-pg-locations .sv2-loc-tiles>li{display:flex;min-width:0}
.sv2-pg-locations .sv2-loc-tiles>li:first-child{grid-column:span 2}
.sv2-pg-locations .sv2-loc-tile{flex:1 1 auto;min-height:370px;text-decoration:none}
.sv2-pg-locations .sv2-loc-tile>img{transition:transform .5s ease}
.sv2-pg-locations .sv2-loc-tile:hover>img{transform:scale(1.04)}
.sv2-pg-locations .sv2-loc-tile:focus-visible{outline:3px solid #ff914e;outline-offset:3px}
.sv2-pg-locations .sv2-loc-tile .sv2-tile-body{padding:22px 22px 24px}
.sv2-pg-locations .sv2-loc-tile p{font-size:15px;line-height:1.5}
.sv2-pg-locations .sv2-loc-tile .sv2-tile-link{margin-top:14px}
.sv2-pg-locations .sv2-loc-tile .sv2-tile-link::after{content:none}
.sv2-pg-locations .sv2-loc-tile:hover .sv2-tile-link{color:#ffb489;border-color:#ffb489}
/* the city name the old card showed in its empty picture box: a small label on the photo (the outer ring fills the
   rounded corners of the label's box, so no bright photo shows between the label and its words) */
.sv2-pg-locations .sv2-loc-mark{position:absolute;top:19px;inset-inline-start:19px;z-index:1;max-width:calc(100% - 38px);padding:2px 7px;border-radius:6px;background:rgba(4,16,33,.9);box-shadow:0 0 0 3px rgba(4,16,33,.9);font:600 12px/1.4 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#fff}
[dir="rtl"] .sv2-pg-locations .sv2-loc-mark{letter-spacing:0}

/* digital-first: a navy band, the question beside its answer */
.sv2-pg-locations .sv2-loc-digital{padding-block:88px}
.sv2-pg-locations .sv2-loc-digital-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:24px 72px;align-items:start}
.sv2-pg-locations .sv2-loc-digital h3{font-size:clamp(28px,2.6vw,40px);line-height:1.15;letter-spacing:-.03em;color:#fff}
.sv2-pg-locations .sv2-loc-digital p{font-size:18px;line-height:1.7;color:var(--on-dark)}
[dir="rtl"] .sv2-pg-locations .sv2-loc-digital h3{letter-spacing:0;line-height:1.4}

@media(max-width:1100px){
.sv2-pg-locations .sv2-loc-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.sv2-pg-locations .sv2-loc-tiles>li:first-child{grid-column:1/-1}
.sv2-pg-locations .sv2-loc-tile{min-height:340px}
.sv2-pg-locations .sv2-loc-digital-row{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:850px){
.sv2-pg-locations .sv2-loc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* phones: each tile is recomposed as its photo on top and the words on the navy panel under it */
@media(max-width:600px){
.sv2-pg-locations .sv2-loc-list{padding-block:64px}
.sv2-pg-locations .sv2-loc-tiles{grid-template-columns:minmax(0,1fr);gap:12px}
.sv2-pg-locations .sv2-loc-tile{min-height:0;justify-content:flex-start}
.sv2-pg-locations .sv2-loc-tile>img{position:relative;inset:auto;z-index:0;height:150px;flex:0 0 auto}
.sv2-pg-locations .sv2-loc-tile::before{content:none}
.sv2-pg-locations .sv2-loc-tile .sv2-tile-body{padding:16px 20px 20px}
.sv2-pg-locations .sv2-loc-tile h3{font-size:20px}
.sv2-pg-locations .sv2-loc-mark{top:15px;inset-inline-start:15px}
.sv2-pg-locations .sv2-loc-digital{padding-block:64px}
.sv2-pg-locations .sv2-loc-digital p{font-size:16px}
}