/* ================================================================
   CGK Realties - the city pages: "Appartements à louer à <ville>".
   Boucherville first (Ludmila, 2026-10-12); Laval, Saint-Hubert and
   Ahuntsic follow on the same file, so it lives in shared/.

   A shop window, not a building page and not a guide: the two buildings
   as cards under the photo, each building in its own section (photos,
   what is included, the map, what is around, what is free), then which
   one suits, why rent from us, the four steps.

   THE WARM ACCENT (Ludmila, 2026-10-12, her design pass). The site is one
   blue; these pages add a terracotta for three things only: prices, the
   "free now" pill and the "Book a visit" button. Nothing else takes it.
   #A84A26 carries white text at 5.7:1 (WCAG AA); in dark mode it lightens
   to #E8A07E and carries the dark ink at 8.5:1.
   ================================================================ */

:root {
  --accent:      #A84A26;
  --accent-deep: #8A3A1C;
  --accent-wash: #F8EBE4;
  --accent-ink:  #8A3A1C;
  --on-accent:   #FFFFFF;
  --band:        #173B4C;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent:      #E8A07E;
    --accent-deep: #F2C2A8;
    --accent-wash: #3A2219;
    --accent-ink:  #F2C2A8;
    --on-accent:   #08161D;
    --band:        #10222B;
  }
}
:root[data-theme="dark"] {
  --accent:      #E8A07E;
  --accent-deep: #F2C2A8;
  --accent-wash: #3A2219;
  --accent-ink:  #F2C2A8;
  --on-accent:   #08161D;
  --band:        #10222B;
}

.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent-deep); }

/* A secondary button on a light ground: the brand outline, no fill. */
.btn-ghost { background: transparent; color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.btn-ghost:hover { background: var(--brand-wash); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Rhythm: more air between sections, larger section titles ---- */
.city-main > .section { padding-block: clamp(4rem, 9vw, 7rem); }
.city-main h2 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.12; }

/* ---- The top: three promises, what is free, two buttons ---- */
.city-perks { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.city-perks li {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.625rem; border-radius: 2px;
  background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.32);
  color: #FFFFFF; font-size: 0.8125rem;
  backdrop-filter: blur(3px);
}
.city-perks svg { width: 17px; height: 17px; flex: none; }
@media (min-width: 760px) { .city-perks li { padding: 0.4375rem 0.8125rem; font-size: 0.875rem; } }

.city-summary {
  margin-top: 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem;
  font-family: var(--serif); font-size: 1.0625rem; color: rgba(255,255,255,.86);
  font-variant-numeric: tabular-nums;
}
.city-free {
  display: inline-block; padding: 0.5rem 0.9375rem; border-radius: 2px;
  background: var(--accent); color: var(--on-accent);
  font-size: 1.1875rem; line-height: 1.3;
}
.city-free.is-none { background: rgba(255,255,255,.14); color: #FFFFFF; }
.city-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.city-credit { margin-top: 1.25rem; font-size: 0.6875rem; color: rgba(255,255,255,.6); }
.city-credit a { color: inherit; }

/* ---- The two buildings as cards, just under the photo: a visual contents ---- */
.city-jump { position: relative; z-index: 2; display: grid; gap: 0.875rem; margin-top: 1.5rem; }
.jump-card {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; align-items: stretch;
  background: var(--surface); border: 1px solid var(--line); border-radius: 2px;
  overflow: hidden; text-decoration: none; color: var(--ink);
  box-shadow: 0 10px 30px rgba(9,20,26,.10);
  transition: box-shadow .2s, transform .2s;
}
.jump-card:hover { box-shadow: 0 14px 36px rgba(9,20,26,.16); transform: translateY(-2px); }
.jump-card img { width: 100%; height: 100%; min-height: 8.5rem; object-fit: cover; display: block; }
.jc-body { display: grid; gap: 0.3125rem; align-content: center; padding: 0.875rem 0.5rem 0.875rem 1rem; }
.jc-body b { font-family: var(--serif); font-weight: 500; font-size: 1.1875rem; line-height: 1.2; }
.jc-tag { font-size: 0.875rem; color: var(--ink-soft); }
.jc-go { display: grid; place-items: center; padding-inline: 0.875rem; color: var(--brand); font-size: 1.25rem; transition: transform .2s; }
.jump-card:hover .jc-go { transform: translateX(3px); }
@media (max-width: 759px) { .jump-card { grid-template-columns: 7.5rem minmax(0, 1fr); } .jc-go { display: none; } .jc-body { padding-right: 1rem; } }
.cc-from { font-family: var(--serif); font-size: 1.0625rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.cc-from.is-none { color: var(--muted); }
@media (min-width: 760px) {
  .city-hero { padding-bottom: 7rem; }
  .city-jump { grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: -4.5rem; }
  .jump-card { grid-template-columns: 42% minmax(0, 1fr) auto; min-height: 12.5rem; }
  .jc-body { padding: 1.25rem 0.5rem 1.25rem 1.375rem; gap: 0.4375rem; }
  .jc-body b { font-size: 1.4375rem; }
}

/* ---- The city in brief: one line, four cards, the guide as a secondary button ---- */
.city-brief-intro { margin-top: 0.5rem; max-width: 44rem; font-family: var(--serif); font-size: 1.375rem; line-height: 1.4; color: var(--ink); }
.city-facts { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.city-facts li {
  display: grid; gap: 0.375rem; align-content: start;
  padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 2px;
}
.city-facts svg { width: 24px; height: 24px; color: var(--brand); }
.city-facts b { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; line-height: 1.15; color: var(--ink); }
.city-facts span { font-size: 0.875rem; color: var(--ink-soft); }
@media (min-width: 900px) { .city-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .city-facts li { padding: 1.25rem; } }
.city-brief .btn { margin-top: 1.25rem; }

/* ---- One building = one section. Photos left for the first, right for the
       second, each on its own ground. ---- */
.city-bldg { background: var(--surface); border-top: 1px solid var(--line); }
.city-bldg.is-right { background: var(--ground-alt); }
/* Two columns on a computer: the photos and what is around on one side, the
   name, what is included and the map on the other. On a phone the columns
   dissolve and the pieces stack in reading order: name first. */
.cb-grid { display: flex; flex-direction: column; gap: 1.75rem; }
.cb-col { display: contents; }
.cb-head { order: 1; }
.cb-media { order: 2; }
.cb-incl { order: 3; }
.cb-map { order: 4; }
.cb-around { order: 5; }
@media (min-width: 1000px) {
  .cb-grid { display: grid; column-gap: 3.5rem; align-items: start; }
  .cb-col { display: flex; flex-direction: column; gap: 2.25rem; }
  .is-left .cb-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .is-right .cb-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .is-right .cb-col-media { order: 2; }
  .cb-around .city-around { column-gap: 2rem; }
}
.cb-head h2 { margin-top: 0.375rem; }
.city-tag { margin-top: 0.625rem; font-family: var(--serif); font-size: 1.25rem; line-height: 1.4; color: var(--ink-soft); }
.cb-free { display: inline-block; margin-top: 1rem; text-decoration: none; }
.cb-free .cc-from { display: inline-block; padding: 0.4375rem 0.8125rem; border-radius: 2px; background: var(--accent-wash); color: var(--accent-ink); }
.cb-free .cc-from.is-none { background: var(--ground); color: var(--muted); }
.cb-free:hover .cc-from { box-shadow: inset 0 0 0 1px var(--accent); }
.cb-h3 {
  margin: 0;
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.375rem, 2.4vw, 1.75rem); color: var(--ink);
}

/* Its photos: one large, four small, every other one behind "See all". */
.cb-media { position: relative; display: grid; gap: 0.5rem; }
.cb-main { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; background: var(--brand-wash); }
.cb-main.shot { cursor: zoom-in; }
.cb-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-main figcaption, .cb-cap {
  position: absolute; left: 0; bottom: 0; margin: 0;
  background: rgba(9,20,26,.72); color: #FFFFFF; backdrop-filter: blur(3px);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.4375rem 0.75rem;
}
.cb-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.cb-thumbs .shot { aspect-ratio: 3 / 2; border-radius: 2px; }
.gallery-all {
  position: absolute; top: 0.75rem; right: 0.75rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5625rem 0.875rem; border: 0; border-radius: 2px; cursor: pointer;
  background: rgba(255,255,255,.94); color: #14222A;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(9,20,26,.18);
}
.gallery-all:hover { background: #FFFFFF; }
.gallery-all svg { width: 16px; height: 16px; }

/* The drone clip: a still until asked, then silent, looping, in place. */
.city-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.city-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 4rem; height: 4rem; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255,255,255,.94); color: #215268;
  box-shadow: 0 6px 20px rgba(9,20,26,.25);
  transition: transform .2s, width .2s, height .2s;
}
.city-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.city-play svg { width: 1.5rem; height: 1.5rem; }
.city-play svg + svg { display: none; }
.city-video.is-playing .city-play { top: auto; left: auto; right: 0.75rem; bottom: 0.75rem; transform: none; width: 2.75rem; height: 2.75rem; }
.city-video.is-playing .city-play svg { display: none; }
.city-video.is-playing .city-play svg + svg { display: block; width: 1.125rem; height: 1.125rem; }

/* What is included: three groups of chips, one under the other. */
.city-incl { display: grid; gap: 1.125rem; }
.city-incl ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.city-incl li {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  padding: 0.4375rem 0.75rem; border-radius: 2px; font-size: 0.875rem;
  border: 1px solid var(--line);
}
.city-incl svg { width: 16px; height: 16px; flex: none; }
.cig-yes li { background: var(--brand-wash); border-color: transparent; color: var(--ink); }
.cig-yes svg { color: var(--brand); }
.cig-fee li { background: var(--ground); color: var(--ink-soft); }
.cig-no li { background: transparent; color: var(--muted); }

/* Its map: a still picture kept on our server; Google only when asked (map.js). */
.cb-map { align-self: start; }
.map-static { aspect-ratio: auto; height: 190px; overflow: hidden; background: var(--ground-alt); }
.map-static > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map-static.is-live { height: 340px; }
.map-osm {
  position: absolute; right: 0; bottom: 0; padding: 0.125rem 0.4375rem;
  background: rgba(255,255,255,.88); color: #2C4049; font-size: 0.6875rem; text-decoration: none;
}
.map-osm:hover { text-decoration: underline; }
.map-static .map-load { position: absolute; top: 0.75rem; left: 0.75rem; margin: 0; }
.map-static .map-show {
  min-height: 0; padding: 0.5rem 0.8125rem; border: 0; border-radius: 2px; cursor: pointer;
  background: rgba(255,255,255,.94); color: #215268; box-shadow: 0 3px 12px rgba(9,20,26,.18);
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.map-static .map-show:hover { background: #FFFFFF; color: #173B4C; }
.cb-map .map-actions { padding: 0.875rem 1.125rem; gap: 1rem; }
.cb-map > .map-note { margin: 0; padding: 0 1.125rem 0.875rem; font-size: 0.75rem; color: var(--muted); }
@media (min-width: 640px) { .map-static { height: 220px; } }

/* Around the building: on foot and by car, a time pill on each line. */
.city-around { display: grid; gap: 1.75rem; margin-top: 1rem; }
@media (min-width: 760px) { .city-around { grid-template-columns: 1fr 1fr; column-gap: 3.5rem; } }
.ar-head {
  display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.25rem;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.ar-head svg { width: 18px; height: 18px; color: var(--brand); }
.ar-col ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ar-col li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 0.875rem; align-items: center;
  padding: 0.75rem 0; border-bottom: 1px solid var(--line);
}
.ar-col li > svg { width: 20px; height: 20px; color: var(--brand); }
.ar-what b { display: block; font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.ar-what small { display: block; font-size: 0.8125rem; color: var(--muted); }
.ar-min {
  padding: 0.25rem 0.625rem; border-radius: 2px; white-space: nowrap;
  background: var(--brand-wash); color: var(--brand);
  font-family: var(--serif); font-size: 0.9375rem; font-variant-numeric: tabular-nums;
}
.city-source { margin-top: 1rem; font-size: 0.75rem; color: var(--muted); max-width: 60rem; }
.city-source a { color: inherit; }

/* What is free: one card per apartment, or per group of identical ones.
   A row that scrolls sideways on a phone, two or three across on a computer. */
.cb-free-h { margin-top: clamp(3rem, 6vw, 4.5rem); }
.city-units { margin-top: 1.25rem; }
.city-cards {
  list-style: none; margin: 0; padding: 0 0 0.75rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 17rem); gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
@media (min-width: 760px) {
  .city-cards { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; gap: 1.25rem; padding: 0; }
}
@media (min-width: 1100px) { .city-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.city-card {
  position: relative; display: flex; flex-direction: column; scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 2px; overflow: hidden;
  box-shadow: 0 6px 20px rgba(9,20,26,.06);
}
.city-card img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; display: block; background: var(--brand-wash); }
.cc-when {
  position: absolute; top: 0.75rem; left: 0.75rem; margin: 0;
  padding: 0.375rem 0.625rem; border-radius: 2px;
  background: var(--accent); color: var(--on-accent);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.cc-when.is-soon { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.cc-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.125rem 1.125rem 1.25rem; }
.cc-size { margin: 0; font-family: var(--serif); font-size: 1.875rem; line-height: 1.1; color: var(--ink); }
.cc-where { margin: 0.375rem 0 0; font-size: 0.875rem; color: var(--muted); }
.cc-price { margin: 0.75rem 0 0; font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.cc-price small { margin-left: 0.1875rem; font-family: var(--sans); font-size: 0.875rem; color: var(--muted); }
.city-card .btn { margin-top: auto; text-align: center; }
.cc-price + .btn, .cc-where + .btn { margin-top: 1rem; }
.city-none { display: grid; gap: 0.875rem; justify-items: start; padding: 1.25rem 0; border-top: 1px solid var(--line); }
.city-all { margin-top: 1.75rem; }

/* ---- Which one: two short cards ---- */
.city-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; margin-top: 1.75rem; }
.city-pick > div {
  min-width: 0; display: grid; gap: 0.875rem; align-content: start;
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--brand);
  border-radius: 2px; padding: 1.5rem;
}
.city-pick h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.375rem; }
.city-pick ul { margin: 0; padding-left: 1.125rem; display: grid; gap: 0.5rem; }
.city-pick .btn { justify-self: start; }

/* ---- Why rent from us: the owner, the concierge (and the Google reviews, once real) ---- */
.city-trust-band { background: var(--band); color: #FFFFFF; }
.city-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
@media (min-width: 760px) { .city-trust { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.city-trust li { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.city-trust svg {
  width: 3.75rem; height: 3.75rem; padding: 0.875rem; border-radius: 50%;
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); color: #FFFFFF;
}
.city-trust h3 { margin: 0.25rem 0 0; font-family: var(--serif); font-weight: 500; font-size: clamp(1.375rem, 2.6vw, 1.75rem); color: #FFFFFF; }
.city-trust p { margin-top: 0.5rem; color: rgba(255,255,255,.82); max-width: 40ch; }

/* ---- Four steps, a line on a wide screen, a column on a phone ---- */
.city-steps { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.city-steps li { display: grid; grid-template-columns: 2.75rem 1fr; column-gap: 0.875rem; align-items: start; align-content: start; }
.city-steps svg {
  grid-row: span 2; width: 2.75rem; height: 2.75rem; padding: 0.625rem;
  border-radius: 50%; background: var(--brand-wash); color: var(--brand);
}
.city-steps b { font-family: var(--serif); font-weight: 500; font-size: 1.125rem; }
.city-steps span { font-size: 0.9375rem; color: var(--ink-soft); }
@media (min-width: 900px) {
  .city-steps { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .city-steps li { grid-template-columns: 1fr; row-gap: 0.625rem; }
  .city-steps svg { grid-row: auto; }
}
.city-law { margin-top: 1.75rem; padding: 0.875rem 1rem; background: var(--brand-wash); border-radius: 2px; max-width: 52rem; }
.city-law a { color: var(--brand); }

/* ---- Not found yet: the nearest place with something free, the waiting list ---- */
.city-near h3 { margin-bottom: 0.25rem; }
.city-nearby { list-style: none; margin: 0.75rem 0 1.25rem; padding: 0; border-top: 1px solid var(--line); }
.city-nearby li { padding: 0.75rem 0; border-bottom: 1px solid var(--line); display: grid; gap: 0.125rem; }
.city-nearby a { font-family: var(--serif); font-size: 1.0625rem; color: var(--ink); }
.city-nearby span { font-size: 0.875rem; color: var(--muted); }
#attente h3 { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; margin-bottom: 0.75rem; }