/* ==========================================================================
   Totality Estates — Mobile experience (phones, <= 640px)
   Consolidated on a fresh path so it is delivered clean past any cache.
   Loaded LAST, so these rules win the cascade.
   Contains: swipe carousels, dot indicators, tidy article rows, docked FAB.
   ========================================================================== */

/* Base (all widths): dots hidden until mobile JS shows them; article label stacks. */
.te-dots { display: none; }
.te-article__cat { display: block; }
.te-article__title { display: block; }

/* Find-My-Property pill tucks away on scroll-down, returns on scroll-up (chrome.js). */
.te-fab { transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .28s ease; }
.te-fab--hidden {
  animation: none !important;              /* cancel the entrance/glow animation so the hide transform wins */
  transform: translateY(160%) !important;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .te-fab { transition: opacity .2s ease; }
  .te-fab--hidden { transform: none !important; }
}

@media (max-width: 640px) {

  /* ---- Swipe carousels: each card grid becomes a horizontal scroll-snap rail ---- */
  .te-featured__grid,
  .te-how__grid,
  .te-areas__grid,
  .te-whyt__grid,
  .te-pathways__grid,
  .te-tst__grid {
    display: flex;
    grid-template-columns: none;
    gap: 13px;
    margin-top: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 6px;
    scroll-padding-left: 2px;
    overscroll-behavior-x: contain;
  }
  .te-featured__grid::-webkit-scrollbar,
  .te-how__grid::-webkit-scrollbar,
  .te-areas__grid::-webkit-scrollbar,
  .te-whyt__grid::-webkit-scrollbar,
  .te-pathways__grid::-webkit-scrollbar,
  .te-tst__grid::-webkit-scrollbar { display: none; }

  .te-featured__grid > .te-pcard { flex: 0 0 84%; scroll-snap-align: start; aspect-ratio: auto; height: 468px; }
  .te-featured__grid > .te-pcard[hidden] { display: none !important; }
  .te-featured__grid .te-pcard__body { padding: 18px; }
  .te-featured__grid .te-pcard__title { font-size: 23px; line-height: 1.1; }
  .te-featured__grid .te-pcard__area { font-size: 13px; }
  .te-featured__grid .te-pcard__specs { gap: 7px 12px; margin: 4px 0; }
  .te-featured__grid .te-pcard__spec { font-size: 12.5px; }
  .te-featured__grid .te-pcard__price { font-size: 21px; }
  .te-featured__grid .te-pcard__price-label { font-size: 12px; }
  .te-featured__grid .te-pcard__cta { padding: 11px 16px; font-size: 13px; }
  .te-featured__grid .te-pcard__badges { top: 14px; left: 14px; gap: 7px; }
  .te-featured__grid .te-pcard__fav { top: 12px; right: 12px; }
  .te-how__grid > .te-step { flex: 0 0 74%; scroll-snap-align: start; }
  .te-areas__grid > .te-acard { flex: 0 0 80%; scroll-snap-align: start; }
  .te-whyt__grid > .te-fcard { flex: 0 0 80%; scroll-snap-align: start; }
  .te-pathways__grid > .te-fcard { flex: 0 0 80%; scroll-snap-align: start; }
  .te-tst__grid > .te-tcard { flex: 0 0 86%; scroll-snap-align: start; }
  .te-featured__empty { flex: 0 0 100%; }

  .te-featured__control { margin-top: 18px; }
  .te-how__foot, .te-areas__foot, .te-featured__foot, .te-tst__investors { margin-top: 24px; }
  .te-section__sub { margin-bottom: 2px; }

  /* ---- Dot indicators ---- */
  .te-dots { display: flex; gap: 6px; justify-content: center; padding: 15px 0 2px; }
  .te-dots[hidden] { display: none !important; }
  .te-dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--te-border); transition: width .25s, background .25s; }
  .te-dots i.on { background: var(--te-accent); width: 20px; }

  /* ---- Latest articles: tidy thumbnail + label/title row ---- */
  .te-article { grid-template-columns: 82px 1fr; gap: 13px; align-items: center; }
  .te-article__thumb { height: 64px; }
  .te-article__cat { font-size: 11px; letter-spacing: 0.1em; }
  .te-article__title { font-size: 15px; line-height: 1.3; margin-top: 3px; }
  .te-article__chevron { display: none; }
  .te-articles { gap: 16px; }

  /* ---- Dock the Find-My-Property pill as a bottom bar ---- */
  .te-fab { left: var(--te-gutter); right: var(--te-gutter); bottom: 12px; justify-content: center; gap: 8px; }
  .te-fab__pill { flex: 1; justify-content: center; padding: 15px 18px; box-shadow: 0 10px 30px rgba(8,14,26,0.38); }
  .te-fab__dismiss { width: 46px; height: 46px; }
  .te-footer { padding-bottom: 92px; }
}

/* ---- Hero: match the prototype — left-aligned, compact, pill trust badges ---- */
@media (max-width: 640px) {
  .te-hero__inner { align-items: flex-start; text-align: left; gap: 15px; }
  .te-hero__eyebrow { letter-spacing: 0.14em; }
  .te-hero__title { max-width: 16ch; }
  .te-hero__sub { text-align: left; }
  .te-hero__trust { gap: 8px; justify-content: flex-start; }
  .te-hero__trust-sep { display: none; }
  .te-hero__trust-item {
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    letter-spacing: 0.01em;
    text-transform: none;
    color: #e4ebf6;
  }
  .te-hero__trust-item svg { color: #8fb0ff; }
}

/* ---- Sticky action bar: docked, blue "Find My Property" + green WhatsApp (prototype) ---- */
@media (max-width: 640px) {
  .te-fab {
    left: var(--te-gutter); right: var(--te-gutter); bottom: 12px;
    display: flex; align-items: stretch; gap: 8px; justify-content: stretch;
    background: rgba(14, 22, 38, 0.92);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px; padding: 8px;
    box-shadow: 0 14px 40px rgba(8, 14, 26, 0.42);
  }
  .te-fab__dismiss {
    width: 40px; height: auto; flex: none; border-radius: 11px;
    background: rgba(255, 255, 255, 0.08); color: #cdd8ea; font-size: 15px;
  }
  .te-fab__pill {
    flex: 1; justify-content: center; gap: 8px;
    background: var(--te-accent); color: #fff; border-radius: 11px; padding: 14px 10px;
    box-shadow: none; font-weight: 800;
  }
  .te-fab__pill:hover { background: var(--te-accent); }
  .te-fab__dot { display: none; }
  .te-fab__wa {
    width: 52px; flex: none; border-radius: 11px; background: #25D366; color: #fff;
    display: grid; place-items: center;
  }
  .te-fab__wa svg { width: 22px; height: 22px; }
  .te-footer { padding-bottom: 98px; }
}

/* ---- About / Led-by: dark card (prototype) ---- */
@media (max-width: 640px) {
  .te-led .te-led__grid {
    display: block; margin-inline: 16px; max-width: none;
    background: #0e1626; color: #fff; border-radius: 20px; padding: 22px 18px;
  }
  .te-led__portrait {
    width: 60px; height: 60px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15); margin-bottom: 14px;
  }
  .te-led__h2 { color: #fff; font-size: 21px; margin: 0 0 12px; }
  .te-led__body { margin: 0; }
  .te-led__body p { color: #cdd7e6; font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
  .te-led__body p strong { color: #fff; }
  .te-led .te-textlink { color: #8fb0ff; }
}

/* ---- Blog / Latest articles: horizontal carousel of image-top cards (prototype) ---- */
@media (max-width: 640px) {
  .te-articles {
    display: flex; flex-direction: row; gap: 13px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 4px;
  }
  .te-articles::-webkit-scrollbar { display: none; }
  .te-article {
    flex: 0 0 78%; display: flex; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--te-bg, #fff); border: 1px solid var(--te-border);
    border-radius: 16px; overflow: hidden; scroll-snap-align: start;
  }
  .te-article__thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .te-article > span { padding: 13px 14px 15px; display: block; }
  .te-article__cat { font-size: 11px; letter-spacing: 0.1em; }
  .te-article__title { font-size: 15px; line-height: 1.3; margin-top: 6px; }
  .te-articles__foot { margin-top: 16px; }
}
@media (max-width: 640px) { .te-articles .te-article__chevron { display: none !important; } }

/* ---- Lock the page against horizontal movement (no side scroll) ---- */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  .te-led .te-led__grid { width: auto; max-width: calc(100% - 32px); box-sizing: border-box; }
}

/* ---- Keep the action bar persistent: never hide on scroll (overrides auto-hide) ---- */
#te-fab.te-fab--hidden { transform: none !important; opacity: 1 !important; pointer-events: auto !important; }

/* ---- Latest Launches: mobile carousel (mirror Featured card sizing) ---- */
@media (max-width: 640px) {
  .te-latest__grid { gap: 13px; margin-top: 20px; padding: 2px 2px 6px; -webkit-overflow-scrolling: touch; }
  .te-latest__grid > .te-pcard { flex: 0 0 84%; aspect-ratio: auto; height: 468px; }
  .te-latest__grid .te-pcard__body { padding: 18px; }
  .te-latest__grid .te-pcard__title { font-size: 23px; line-height: 1.1; }
  .te-latest__grid .te-pcard__area { font-size: 13px; }
  .te-latest__grid .te-pcard__specs { gap: 7px 12px; margin: 4px 0; }
  .te-latest__grid .te-pcard__spec { font-size: 12.5px; }
  .te-latest__grid .te-pcard__price { font-size: 21px; }
  .te-latest__grid .te-pcard__price-label { font-size: 12px; }
  .te-latest__grid .te-pcard__cta { padding: 11px 16px; font-size: 13px; }
  .te-latest__grid .te-pcard__badges { top: 14px; left: 14px; gap: 7px; }
  .te-latest__grid .te-pcard__fav { top: 12px; right: 12px; }
}