/* =====================================================================
   mobile.css: loaded last on every page.
   1. Header logo: inline SVG mark with a once-per-session red dot intro.
   2. Mobile polish: rhythm, tap targets, images, sticky bars, carousels.
   ===================================================================== */

/* ---------------------------------------------------------------- 1. logo */
.logo .cba-mark { display: block; height: 40px; width: auto; aspect-ratio: 1896 / 830; overflow: visible; fill: currentColor; transition: opacity .3s, height .35s cubic-bezier(.2,.8,.2,1); }
.logo .cba-mark.logo__dark { color: #0d0d0f; }
.logo .cba-mark.logo__light { color: #fff; position: absolute; inset: 0; opacity: 0; }
.cba-mark__ball { fill: #ee3b2b; }
.cba-mark__ring { fill: none; stroke: #ee3b2b; stroke-width: 10; opacity: 0; }
.cba-mark__l, .cba-mark__t, .cba-mark__ball, .cba-mark__ring { transform-box: fill-box; transform-origin: 50% 50%; }
.cba-mark__t { transition: opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1); }
/* Compact header on scroll: the REAL ESTATE line folds away, the mark shrinks */
.hdr.is-solid .logo .cba-mark { height: 34px; }
.hdr.is-solid .cba-mark__t { opacity: 0; transform: translateY(-40px); }
@media (max-width: 760px) { .logo .cba-mark { height: 34px; } .hdr.is-solid .logo .cba-mark { height: 30px; } }

/* Intro, once per session (html.logo-intro is set in <head> unless reduced motion):
   the letters rise in, then the dot drops from above the C, bounces on the C and the B, and settles in the A. */
.logo-intro .cba-mark__l { animation: cba-rise .62s cubic-bezier(.2,.9,.25,1) both; }
.logo-intro .cba-mark__b { animation-delay: .07s; }
.logo-intro .cba-mark__a { animation-delay: .14s; }
.logo-intro .cba-mark__t { animation: cba-fade .5s .45s ease-out both; }
.logo-intro .cba-mark__ball { animation: cba-bounce 1.5s .3s both; }
.logo-intro .cba-mark__ring { animation: cba-ripple .9s 1.55s ease-out forwards; }
@keyframes cba-rise { from { opacity: 0; transform: translateY(170px); } to { opacity: 1; transform: none; } }
@keyframes cba-fade { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
/* Coordinates are in logo units (the mark is 1896 x 830): the C top is about 1258 left / 540 up from the dot's home, the B top about 690 left / 528 up. */
@keyframes cba-bounce {
  0%   { opacity: 0; transform: translate(-1258px, -1150px) scale(.9); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  6%   { opacity: 1; }
  22%  { transform: translate(-1258px, -540px) scale(1.22, .78); animation-timing-function: ease-out; }
  26%  { transform: translate(-1240px, -575px) scale(.9, 1.12); animation-timing-function: cubic-bezier(.2,.6,.4,1); }
  37%  { transform: translate(-975px, -820px) scale(1); animation-timing-function: cubic-bezier(.6,0,.9,.5); }
  49%  { transform: translate(-690px, -528px) scale(1.22, .78); animation-timing-function: ease-out; }
  53%  { transform: translate(-672px, -562px) scale(.9, 1.12); animation-timing-function: cubic-bezier(.2,.6,.4,1); }
  66%  { transform: translate(-330px, -860px) scale(1); animation-timing-function: cubic-bezier(.6,0,.9,.5); }
  82%  { transform: translate(0, 0) scale(1.24, .76); animation-timing-function: ease-out; }
  89%  { transform: translate(0, -60px) scale(.94, 1.08); animation-timing-function: ease-in; }
  95%  { transform: translate(0, 0) scale(1.06, .95); }
  100% { opacity: 1; transform: none; }
}
@keyframes cba-ripple { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }

/* A small hop on hover, keyboard focus, and when the header goes compact */
.logo:hover .cba-mark__ball, .logo:focus-visible .cba-mark__ball, .logo.is-hop .cba-mark__ball { animation: cba-hop .62s cubic-bezier(.3,.7,.4,1); }
.logo:hover .cba-mark__ring, .logo:focus-visible .cba-mark__ring, .logo.is-hop .cba-mark__ring { animation: cba-ripple .7s .42s ease-out; }
@keyframes cba-hop {
  0%   { transform: none; }
  18%  { transform: translateY(14px) scale(1.18, .82); }
  50%  { transform: translateY(-190px) scale(.92, 1.1); animation-timing-function: ease-in; }
  80%  { transform: translateY(0) scale(1.16, .86); }
  92%  { transform: translateY(-24px) scale(.97, 1.03); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-intro .cba-mark__l, .logo-intro .cba-mark__t, .logo-intro .cba-mark__ball, .logo-intro .cba-mark__ring,
  .logo:hover .cba-mark__ball, .logo.is-hop .cba-mark__ball, .logo:hover .cba-mark__ring, .logo.is-hop .cba-mark__ring { animation: none !important; }
}
html[data-motion="off"] .cba-mark * { animation: none !important; }

/* ---------------------------------------------------------------- 2. mobile polish */
/* Press feedback that feels native on touch screens */
@media (hover: none) {
  .btn, .card, .pcard, .lx-area, .ct2-route, .tabbar a, .tabbar button, .chip, .pdp-bar__ic, .gal__i, .lx-sig__img { -webkit-tap-highlight-color: transparent; transition: transform .18s cubic-bezier(.2,.8,.2,1), opacity .18s; }
  .btn:active, .chip:active, .pdp-bar__ic:active, .tabbar a:active, .tabbar button:active { transform: scale(.96); }
  .card:active, .pcard:active, .lx-area:active, .ct2-route:active, .lx-sig__img:active { transform: scale(.985); }
}

@media (max-width: 767.98px) {
  /* Readable minimum sizes for small labels */
  .tabbar a span, .tabbar button span { font-size: 11px; letter-spacing: .01em; }
  .card .vchip, .vchip { font-size: 12px; }
  .bv__days .bchip small, .nb__stats li span, .rg2__tabs button small { font-size: 12.5px; }
  .sld-stats dt { font-size: 12px; }
  .fld label small { font-size: 12px; }

  /* Listing action bar: price, then Call, Chat and Book a viewing, sitting cleanly above the tab bar */
  .pdp-bar { gap: 8px; }
  .pdp-bar__ic { flex: none; width: 52px; height: 52px; border-radius: 16px; border: 1px solid var(--line, #e2dfdb); background: #fff; color: var(--ink, #0d0d0f); display: grid; place-items: center; align-content: center; gap: 1px; padding: 0; text-decoration: none; cursor: pointer; }
  .pdp-bar__ic i { font-style: normal; font-size: 10.5px; font-weight: 800; line-height: 1; }
  .pdp-bar__ic svg { width: 20px; height: 20px; }
  .pdp-bar .btn--red { padding: 0 16px; }
  .pdp-bar > div b { font-size: 18px; }
  /* Full-bleed swipe gallery on the listing page */
  .page-listing .gal { scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .page-listing .gal__i { scroll-snap-align: center; scroll-snap-stop: always; }

  /* "Free price report" offer: a slim peek above the tab bar instead of a big card over the page */
  .lx-pop { left: 10px; right: 10px; width: auto; bottom: calc(var(--tab-h, 64px) + env(safe-area-inset-bottom, 0px) + 10px); padding: 16px 16px 14px; border-radius: 22px; max-height: min(74vh, 620px); overflow: auto; animation: mbSheet .5s cubic-bezier(.2,.9,.25,1); }
  .lx-pop h3 { font-size: 18px; padding-right: 34px; }
  .lx-pop.is-peek > :not(.eyebrow):not(h3):not(.lx-pop__x):not(.mb-peek) { display: none !important; }
  .lx-pop.is-peek .eyebrow { margin-bottom: 4px; }
  .mb-peek { display: none; }
  .lx-pop.is-peek .mb-peek { display: flex; width: 100%; justify-content: center; margin-top: 10px; }
  @keyframes mbSheet { from { opacity: 0; transform: translateY(40px); } }

  /* Great Place To Work sheet (already a bottom sheet on phones): a shorter photo so it fits without scrolling */
  .gp__ph { aspect-ratio: 16 / 9; }
  .gp::backdrop { background: rgba(10,10,12,.34); }

  /* Swipe rails: momentum, snap and a peek of the next card */
  .rail { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; }
  .rail > * { scroll-snap-stop: normal; }
}
@media (prefers-reduced-motion: reduce) { .lx-pop { animation: none !important; } }

/* ---------------------------------------------------------------- 3. image fade-in over a shimmer */
img.mb-wait { opacity: 0; }
img.mb-in { animation: mbImg .5s ease-out both; }
@keyframes mbImg { from { opacity: 0; transform: scale(1.015); } }
:is(.card__media, .pcard__img, .gal__i, .lx-area, .lx-sig__img, .ft2-card__top):has(img.mb-wait) { background: linear-gradient(100deg, #ece9e4 30%, #f6f4f0 50%, #ece9e4 70%) 0 0 / 300% 100%; animation: mbShim 1.3s linear infinite; }
@keyframes mbShim { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { img.mb-in { animation: none; } :is(.card__media, .pcard__img, .gal__i, .lx-area, .lx-sig__img, .ft2-card__top):has(img.mb-wait) { animation: none; } }
@media (max-width: 767.98px) {
  /* Crisper compact header: content no longer shows through */
  .hdr.is-solid { background: rgba(255,255,255,.95) !important; }
  body.page-home .hdr:not(.is-solid), body.has-dark-hero .hdr:not(.is-solid) { background: transparent; }
}
@media (max-width: 640px) {
  /* Buy and Rent: the plain-English search becomes one slim pill with a round go button */
  .bp-ask { grid-template-columns: auto minmax(0, 1fr) auto; padding: 5px 5px 5px 14px; border-radius: 999px; margin-top: 16px; }
  .bp-ask__go { grid-column: auto; width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 0; display: grid; place-items: center; }
  .bp-ask__go span { font-size: 18px; }
  .bp-ask__hint { grid-column: 1 / -1; }
  .bp-ask input { font-size: 15px; padding: 8px 0; }
}