/* =========================================================
   Property Area Cards – FULL CSS (vertical + horizontal)
   ========================================================= */

/* =======================
   VERTICAL (default grid)
   ======================= */
.rs-area-cards.ranked.rs-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.rs-area-cards {
  margin-bottom: 20px;
  /*background-color: #fff;*/
  padding: 20px;
  border-radius: 10px;
}

/* 3 per row on large, 2 on tablet, 1 on mobile */
.rank-card {
  background: #ffffff;
  border: 1px solid #e6ebf2;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.03);
  flex: 1 1 calc(50% - 11px); /* 3 per row */
  min-width: auto;
  max-width: 50%;
}
@media (max-width: 1024px) {
  .rank-card { flex: 1 1 calc(50% - 8px); max-width: calc(50% - 8px); }
}
@media (max-width: 640px) {
  .rank-card { flex: 1 1 100%; max-width: 100%; }
}

/* Card internals */
.rs-flex-col { display: flex; flex-direction: column; justify-content: space-between; }
.rank-card__header   { margin-bottom: 6px; }
.rank-card__title    { margin: 0 0 4px 0; font-size: 14px; font-weight: 600; color: #262626; }
.rank-card__subtitle { font-size: 12px; color: #667085; }

/* Ranked list (vertical) */
.rank-card__list { list-style: none; margin: 0; padding: 0; }
.rank-card__item {
  display: grid;
  grid-template-columns: auto 14px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed #e5e7eb;
}
.rank-card__item:last-child { border-bottom: none; }

.rank-card__num  { color: #667085; font-weight: 600; min-width: 28px; }
.rank-card__dot  { width: 8px; height: 8px; border-radius: 50%; background: #cfe1ff; }
.rank-card__link { color: #0f4fcc; text-decoration: none; border-bottom: 1px dotted #cfd8e3; }
.rank-card__link:hover { color: #0b3da1; border-bottom-color: #b7c6db; }
.rank-card__pct  { color: #667085; font-size: 12px; white-space: nowrap; }

/* Footer */
.rank-card__footer { margin-top: 8px; }
.rank-card__viewall { color: #0f4fcc; font-weight: 500; text-decoration: none; }
.rank-card__viewall:hover { text-decoration: underline; }

/* Show at most 7 items without scroll; more items scroll (vertical mode) */
.rs-scroll-7 { max-height: 280px; overflow-y: auto; padding-right: 6px; }
.rs-scroll-7::-webkit-scrollbar { width: 6px; }
.rs-scroll-7::-webkit-scrollbar-thumb { background: #d7deea; border-radius: 6px; }
.rs-scroll-7::-webkit-scrollbar-track { background: transparent; }

/* Slightly rounder cards (optional) */
.rank-card { border-radius: 20px; }

/* =========================================================
   HORIZONTAL (rs-h) — head (title+arrows) + row (the scroller)
   ========================================================= */

/* Variables (can be overridden inline on wrapper) */
.rs-area-cards.rs-h{
  --rs-card-w: 280px;   /* width of each card */
  --rs-gap: 16px;       /* gap between cards */
  --rs-item-h: 36px;    /* approx height of list item */
  --rs-list-visible: 5; /* show 5 items; rest scroll vertically */
}

/* IMPORTANT: stack head + row (turn off vertical grid) */
.rs-area-cards.rs-h { display: block !important; }
.rs-area-cards.rs-h.ranked.rs-flex { display: block !important; }

/* Header row: title left, both arrows right */
.rs-area-cards.rs-h .rs-area-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 8px var(--rs-gap) 10px;
  width: 100%;
}
.rs-area-cards.rs-h .rs-area-title{
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}
.rs-area-cards.rs-h .rs-area-nav{ display: inline-flex; gap: 8px; }
.rs-area-cards.rs-h .rs-hnav{
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid #dfe5f2;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  display: grid; place-items: center;
  font-size: 16px; font-weight: 700; line-height: 1;
  cursor: pointer; transition: transform .06s ease;
}
.rs-area-cards.rs-h .rs-hnav:active{ transform: scale(.96); }

/* The SCROLLABLE ROW (the horizontal scroller) */
.rs-area-row{
    
    width: 100vw;
    gap: 15px;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between;
  flex-wrap: wrap !important;
  align-items: stretch;
  gap: 15px !important;

  /* make this the ONLY horizontal scroller */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;

  /* smoother, less “sticky” snap */
  scroll-snap-type: x proximity;

  /* ensure it can shrink/scroll inside any parent */
  min-width: 0;

  /* pointer gestures on touch/trackpads */
  touch-action: pan-x;

  padding-bottom: 10px;
}

/* Optional slim scrollbar for the horizontal row */
.rs-area-cards.rs-h .rs-area-row::-webkit-scrollbar { height: 8px; }
.rs-area-cards.rs-h .rs-area-row::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.15);
  border-radius: 999px;
}

/* Card sizing & look inside the horizontal row */
.rs-area-cards.rs-h .rs-area-row .rank-card{
  flex: 0 0 var(--rs-card-w) !important;
  min-width: auto !important;
  max-width: 50% !important;
  scroll-snap-align: start;

  /*background: #fff;*/
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  padding: 12px;

  display: flex;         /* so inner list can scroll */
  flex-direction: column;
}

/* Inside each card (horizontal): only 5 list items visible, rest scroll */
.rs-area-cards.rs-h .rank-card__header{ flex: 0 0 auto; margin-bottom: 8px; }
.rs-area-cards.rs-h .rank-card__footer{ flex: 0 0 auto; margin-top: 10px; }
.rs-area-cards.rs-h .rank-card__list{
  flex: 1 1 auto;
  min-height: 0; /* critical for flex child to shrink */
  max-height: calc(var(--rs-item-h) * var(--rs-list-visible));
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  margin: 0; list-style: none;
}
.rs-area-cards.rs-h .rank-card__item{
  display: flex;
  align-items: center;
  min-height: var(--rs-item-h);
  padding: 4px 0;
}

/* SAFETY: remove over-broad no-wrap rule that could break layouts */
/* (intentionally left empty) */

/* =========================================================
   End — .rs-area-row is the only horizontal scroller.
   ========================================================= */