/* ================================================================
   CGK Realties - the tenants' reviews band: one review large, the others
   in a strip under it. Loaded by the home page and the Boucherville city
   page (moved here from index.css when the second page took it, 2026-10-20).
   ================================================================ */

/* ---- Testimonials ----
   A carousel that moves on its own (Ludmila, 2026-09-24): six reviews of
   very uneven length read as a puzzle when they are tiled, so they sit in
   one row that drifts a card to the left every few seconds and stops the
   moment a pointer, a finger or the keyboard touches it. The two chevrons
   are hairlines against the edges of the row, not buttons in the corner.
   The track is an ordinary scrolling strip with scroll snapping, so the
   drift, a swipe, the chevrons and the keyboard all drive one thing.
   The brand band still gives the page a colour beat between the light
   sections either side. */
/* A real living room behind the reviews (6311 Gouin, unit photography, not
   staged), under a deep blue veil so the white text keeps its contrast
   (Ludmila, 2026-10-13: the plain band read too flat). */
.testimonial {
  background:
    linear-gradient(rgba(23,59,76,.84), rgba(33,82,104,.74)),
    url("../../images/reviews-interior.webp") center / cover no-repeat;
  background-color: var(--brand);
}
.testimonial-inner { padding-block: clamp(3rem, 6vw, 4.5rem); }
.testimonial .label { color: rgba(255,255,255,.62); }

.testimonial h2 {
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  color: #FFFFFF;
  max-width: 24ch;
  margin-top: 0.375rem;
}

/* The rail holds the chevrons against the track's own edges. */
.quotes-rail { position: relative; margin-top: 2rem; }

.quotes-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: #FFFFFF;
  opacity: .45;
  cursor: pointer;
  transition: opacity .18s ease;
}

.quotes-arrow svg { width: 1.75rem; height: 1.75rem; }
.quotes-arrow:hover { opacity: 1; }
.quotes-arrow:focus-visible { opacity: 1; outline: 2px solid rgba(255,255,255,.7); outline-offset: 2px; }
.quotes-arrow.prev { left: -2.25rem; }
.quotes-arrow.next { right: -2.25rem; }
.quotes-arrow[hidden] { display: none; }

/* The track. One card per snap point; the scrollbar is hidden because
   the movement itself already says it scrolls. */
.quotes {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.quotes::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .quotes { scroll-behavior: auto; } }
.quotes:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 4px; }

.quote {
  flex: 0 0 calc((100% - 3rem) / 3);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.5rem 1.625rem 1.375rem;
  /* deep, nearly solid panels so each review stands off the photograph */
  background: rgba(11,30,40,.78);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 10px 28px rgba(6,16,22,.28);
  backdrop-filter: blur(6px);
}

@media (max-width: 1000px) { .quote { flex-basis: calc((100% - 1.5rem) / 2); } }

/* No room for chevrons outside the track on a narrow screen: they sit
   just inside it instead, over the card edge. */
@media (max-width: 1180px) {
  .quotes-arrow.prev { left: -0.25rem; }
  .quotes-arrow.next { right: -0.25rem; }
  .quotes-arrow { background: linear-gradient(to right, rgba(33,82,104,.85), rgba(33,82,104,0)); }
  .quotes-arrow.next { background: linear-gradient(to left, rgba(33,82,104,.85), rgba(33,82,104,0)); }
}

@media (max-width: 640px) {
  .quote { flex-basis: 86%; }
  /* A finger swipes; a chevron would only sit on top of the words. */
  .quotes-arrow { display: none; }
  /* One card on screen, so let each end where its words end rather than
     stretching a two-line review to the height of the longest one. */
  .quotes { align-items: flex-start; }
  .quote cite { margin-top: 1.125rem; }
}

.quote p {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255,255,255,.94);
}

.quote cite {
  display: block;
  margin-top: auto;
  padding-top: 0.875rem;
  border-top: 1px solid rgba(255,255,255,.16);
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

/* ---- Testimonials, reworked (Ludmila, 2026-10-13): one review large, the
        other five in the strip under it, the telling words marked (the words
        themselves are never changed: they are quoted verbatim), initials
        beside each name, dots that say where you are, a fade on arrival.
        The strip moves only by its arrows, a swipe or the dots. ---- */
.tm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.tm-google {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.125rem; border-radius: 2px;
  color: #FFFFFF; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.tm-google:hover { background: rgba(255,255,255,.1); }
.tm-feature { margin: 2rem 0 0; max-width: 54rem; }
.tm-feature blockquote { margin: 0; }
.tm-feature p {
  font-family: var(--serif); font-size: clamp(1.1875rem, 1.9vw, 1.5rem); line-height: 1.45; color: #FFFFFF;
}
.tm-feature figcaption, .quote footer { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.quote footer { margin-top: auto; padding-top: 1.125rem; }
.tm-avatar {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); color: #FFFFFF;
  font: 600 0.8125rem/1 var(--sans); letter-spacing: 0.06em;
}
.testimonial cite { font-style: normal; font-weight: 600; color: #FFFFFF; font-size: 0.9375rem; }
.testimonial mark { background: none; color: #FFFFFF; font-weight: 600; box-shadow: inset 0 -0.45em 0 rgba(255,255,255,.14); }
.tm-feature mark { font-weight: 500; box-shadow: inset 0 -0.38em 0 rgba(255,255,255,.16); }
.quote p { color: rgba(255,255,255,.86); font-size: 0.9375rem; line-height: 1.55; }
.tm-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.25rem; }
.tm-dots button {
  width: 0.625rem; height: 0.625rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.3); transition: background .2s, transform .2s;
}
.tm-dots button.is-on { background: #FFFFFF; transform: scale(1.25); }
.tm-dots button:focus-visible { outline: 2px solid rgba(255,255,255,.8); outline-offset: 3px; }
/* the fade on arrival: only when the script is there to bring them in */
.testimonial.tm-wait .tm-feature, .testimonial.tm-wait .quote { opacity: 0; transform: translateY(14px); }
.testimonial .tm-feature, .testimonial .quote { transition: opacity .6s ease, transform .6s ease; }
.testimonial.tm-wait.tm-in .tm-feature, .testimonial.tm-wait.tm-in .quote { opacity: 1; transform: none; }
.testimonial.tm-in .quote:nth-child(2) { transition-delay: .08s; }
.testimonial.tm-in .quote:nth-child(3) { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) { .testimonial.tm-wait .tm-feature, .testimonial.tm-wait .quote { opacity: 1; transform: none; } }
.testimonial .quote cite { margin: 0; padding: 0; border: 0; text-transform: none; letter-spacing: 0; font-size: 0.9375rem; }
.testimonial .quote cite::before { content: none; }

/* The Google rating, as Google shows it on the listing (read 2026-10-13), and
   the way to the reviews themselves. Change the number when Google's does. */
.tm-google b { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.tm-google span { font-size: 0.75rem; }