/* ===========================================================================
   Aqaratk — auto-scrolling listing strip (includes/ticker.php)
   =========================================================================== */

.tk-sec { padding: 30px 0 34px; }
.tk-sec + .tk-sec { padding-top: 4px; }

/* Centred, matching the Featured developers / brokers heads below, so the
   whole homepage reads on one axis instead of these two strips being the only
   sections pinned to the edges. The "view all" pill stays in the same row and
   simply sits beside the title rather than at the far margin. */
.tk-head {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px; text-align: center;
}
.tk-title { font-size: clamp(19px, 2.4vw, 26px); margin: 2px 0 0; }

/* Full-bleed strip. The cards must visibly run past the edge of the screen -
   that overflow is the entire cue that the row is moving. */
.tk-stage {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.tk-rail {
  display: flex;
  gap: 14px;
  width: max-content;
  padding: 4px 16px;
  animation: tk-slide var(--tk-secs, 40s) linear infinite;
}
/* Arabic reads right to left, so the strip travels the other way. Without this
   it scrolls "backwards" against the direction of reading. */
[dir="rtl"] .tk-rail { animation-name: tk-slide-rtl; }

@keyframes tk-slide     { from { transform: translateX(0); }  to { transform: translateX(-50%); } }
@keyframes tk-slide-rtl { from { transform: translateX(0); }  to { transform: translateX(50%); } }

/* Pause while the visitor is reading or aiming. focus-within covers keyboard
   users, who would otherwise be tabbing at a moving target. */
.tk-stage:hover .tk-rail,
.tk-stage:focus-within .tk-rail { animation-play-state: paused; }

/* ---------- Manual control (drag, swipe, wheel, arrows) ----------
   touch-action keeps vertical page scrolling native while horizontal drags
   come to us; without it the browser claims the gesture first and the strip
   never moves. */
.tk-stage { touch-action: pan-y; }
.tk-stage.tk-manual { cursor: grab; }
.tk-stage.tk-drag   { cursor: grabbing; user-select: none; }

/* A card stops taking pointer events only once the press has BECOME a drag -
   never on the press itself.
   This rule used to key off .tk-drag, which the script adds on pointerdown. A
   click's target is the common ancestor of its mousedown and mouseup targets,
   so with the card already switched off at mousedown the browser resolved
   every click to the rail behind it: the strips looked clickable, showed a
   link in the status bar, and did nothing at all when clicked. */
.tk-stage.tk-moved .tk-card { pointer-events: none; }
.tk-rail img { -webkit-user-drag: none; user-drag: none; }

.tk-nav {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px;
  pointer-events: none;          /* only the buttons are clickable */
}
.tk-arrow {
  pointer-events: auto;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px; line-height: 1; padding-bottom: 3px;
  color: var(--navy, #0B1B33);
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line, #E3E8EF);
  box-shadow: 0 3px 12px rgba(11, 27, 51, .14);
  cursor: pointer;
  /* Hidden until the strip is hovered: two permanent buttons over a moving
     row is visual noise on a page that already has a lot going on. They stay
     reachable by keyboard regardless. */
  opacity: 0; transform: scale(.9);
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
.tk-stage:hover .tk-arrow,
.tk-arrow:focus-visible { opacity: 1; transform: scale(1); }
.tk-arrow:hover { background: #fff; border-color: var(--navy, #0B1B33); }
.tk-arrow:focus-visible { outline: 3px solid var(--teal, #0F766E); outline-offset: 2px; }

/* Touch has no hover, and a finger swipe is the obvious gesture there, so the
   arrows would only cover cards. */
@media (hover: none) {
  .tk-nav { display: none; }
}

/* Second strip travels the other way, so the two read as a pair in motion
   rather than one long conveyor. animation-direction rather than a second set
   of keyframes: it reverses whichever animation is in play, so this keeps
   working with the RTL variant above without duplicating anything. */
.tk-rail.tk-rev { animation-direction: reverse; }

.tk-card {
  flex: 0 0 auto; width: 224px;
  background: #fff;
  border: 1px solid var(--line, #E3E8EF);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tk-card:hover {
  transform: translateY(-3px);
  border-color: var(--navy, #0B1B33);
  box-shadow: 0 8px 22px rgba(11, 27, 51, .13);
}
.tk-card:focus-visible { outline: 3px solid var(--teal, #0F766E); outline-offset: 2px; }

.tk-media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--surface-2, #F3F6FA); }
.tk-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tk-badge {
  position: absolute; top: 8px; inset-inline-start: 8px;
  font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
}
.tk-gold { background: #B7922A; color: #1a1400; }
.tk-teal { background: #0F766E; color: #fff; }

.tk-body { display: block; padding: 10px 12px 12px; }
.tk-price { display: block; font-size: 15px; font-weight: 800; color: var(--navy, #0B1B33); letter-spacing: -.01em; }
.tk-name {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px; color: var(--ink-2, #3D4A5C); margin-top: 3px; line-height: 1.4;
}
.tk-loc {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 11.5px; color: var(--ink-3, #6B7A90); margin-top: 3px;
}
.tk-meta { display: flex; gap: 10px; margin-top: 7px; font-size: 11px; color: var(--ink-3, #6B7A90); }

/* Motion sensitivity: continuous horizontal movement is a common migraine and
   vestibular trigger. Fall back to a normal swipeable row, which is the same
   content minus the animation. */
@media (prefers-reduced-motion: reduce) {
  .tk-stage { overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: auto; }
  .tk-rail  { animation: none; }
  /* Native scrolling already gives manual control here, so the JS stands down
     and its arrows would do nothing. */
  .tk-nav   { display: none; }
}

@media (max-width: 640px) {
  .tk-card  { width: 190px; }
  .tk-sec   { padding: 22px 0 26px; }
  .tk-stage { -webkit-mask-image: none; mask-image: none; }
}

/* ===========================================================================
   Featured developers / brokers — the pair of buttons between the two strips
   =========================================================================== */
.fx-sec { padding: 6px 0 26px; }
.fx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.fx-btn {
  position: relative;
  /* Centred as a group: icon, text and arrow sit together in the middle rather
     than the text stretching to fill and pushing the arrow to the far edge. */
  display: flex; align-items: center; justify-content: center; gap: 14px;
  text-align: center;
  padding: 18px 20px;
  border-radius: 14px;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fx-btn::after {           /* sheen, kept subtle - it reads as depth, not glare */
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.18), transparent 55%);
  pointer-events: none;
}
.fx-btn:hover  { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(11,27,51,.18); }
.fx-btn:active { transform: translateY(0); }
.fx-btn:focus-visible { outline: 3px solid var(--teal, #0F766E); outline-offset: 3px; }

.fx-dev { background: #0B1B33; color: #fff; }
.fx-brk { background: #0F766E; color: #fff; }

.fx-ic {
  flex: 0 0 auto;
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
.fx-dev .fx-ic { color: #F3DC9B; }

/* flex:0 1 auto, not 1 1 auto - a growing text block would fill the button and
   there would be nothing left to centre. */
.fx-tx { flex: 0 1 auto; min-width: 0; }
.fx-t  { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.fx-s  { display: block; font-size: 12.5px; color: rgba(255,255,255,.74); margin-top: 2px; }

.fx-go {
  flex: 0 0 auto; font-size: 19px; opacity: .8;
  transition: transform .18s ease;
}
/* The arrow leads the eye toward the destination, so it travels the way the
   language reads. */
.fx-btn:hover .fx-go { transform: translateX(4px); opacity: 1; }
[dir="rtl"] .fx-btn:hover .fx-go { transform: translateX(-4px); }

@media (max-width: 640px) {
  .fx-btn { padding: 15px 16px; gap: 12px; }
  .fx-ic  { width: 42px; height: 42px; }
  .fx-t   { font-size: 15px; }
}