/*
 * Purpose: Property, college, locality and guide cards.
 *
 * A property card prioritises, in order: price, location, availability, trust.
 * Card actions sit above the full-card link so they never trigger navigation.
 */

.rh-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--rh-white);
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  overflow: hidden;
  height: 100%;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.rh-card:hover {
  border-color: var(--rh-border-strong);
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------- PROPERTY CARD */

.rh-property-card__media {
  position: relative;
}

.rh-property-card__media .rh-ratio {
  border-radius: 0;
}

.rh-property-card__badges {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  max-width: calc(100% - var(--space-64));
  z-index: var(--z-raised);
}

/*
 * Save is a real control layered above the card link, so tapping it saves the
 * property instead of opening it.
 */
.rh-property-card__save {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  z-index: var(--z-raised);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, 0.94);
  color: var(--rh-text-primary);
  border: 1px solid var(--rh-border);
}

.rh-property-card__save:hover {
  color: var(--rh-saved);
}

/* Saved reads red and filled, the same way on every surface. */
.rh-property-card__save[aria-pressed="true"],
.rh-property-card__save.is-saved {
  color: var(--rh-saved);
  border-color: var(--rh-saved);
}

.rh-property-card__save[aria-pressed="true"] .rh-icon,
.rh-property-card__save.is-saved .rh-icon {
  fill: var(--rh-saved);
}

.rh-property-card__count {
  position: absolute;
  bottom: var(--space-8);
  right: var(--space-8);
  z-index: var(--z-raised);
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--r-pill);
  background-color: rgba(3, 38, 34, 0.72);
  color: var(--rh-text-inverse);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
}

.rh-property-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-16);
  flex: 1;
}

.rh-property-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--rh-text-primary);
}

.rh-property-card__price-period {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--rh-text-secondary);
}

.rh-property-card__deposit {
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

.rh-property-card__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

/*
 * The stretched link makes the whole card clickable while keeping a single
 * semantic <a> for assistive technology.
 */
.rh-property-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.rh-property-card__link:hover {
  text-decoration: none;
}

.rh-property-card__location {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-small);
  color: var(--rh-text-secondary);
}

.rh-property-card__location .rh-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.rh-property-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.rh-property-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: auto;
  padding-top: var(--space-12);
  border-top: 1px solid var(--rh-border);
}

.rh-property-card__availability {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
}

.rh-property-card__availability .rh-icon {
  width: 14px;
  height: 14px;
}

.rh-property-card__availability[data-state="fresh"] {
  color: var(--rh-success);
}

.rh-property-card__availability[data-state="ageing"] {
  color: var(--rh-warning-text);
}

.rh-property-card__availability[data-state="stale"] {
  color: var(--rh-text-secondary);
}

/* Compare is a second card-level control, also above the card link. */
/*
 * The toggle and the "go to compare" link sit above the card's own stretched
 * link, so they stay separately clickable inside a clickable card.
 */
.rh-property-card__compare-group {
  position: relative;
  z-index: var(--z-raised);
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.rh-property-card__compare {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--rh-teal);
  padding: var(--space-4);
  cursor: pointer;
}

.rh-property-card__compare.is-comparing {
  color: var(--rh-teal-active);
}

.rh-property-card__compare-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-button);
  background-color: var(--rh-teal-light);
  color: var(--rh-teal);
}

.rh-property-card__compare-link:hover {
  background-color: var(--rh-teal);
  color: var(--rh-text-inverse);
}


.rh-property-card--demo {
  border-style: dashed;
}

/* ------------------------------------------------------- DISCOVERY CARDS */

.rh-place-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--rh-border);
  background-color: var(--rh-white);
  height: 100%;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.rh-place-card:hover {
  border-color: var(--rh-teal);
}

.rh-place-card__body {
  padding: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}

.rh-place-card__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--rh-text-primary);
}

.rh-place-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.rh-place-card__meta > * {
  /* Centring belongs to the footer row only - elsewhere these stay full width. */
  align-self: center;
}

.rh-place-card__meta {
  /*
   * Count on the left, price on the right, sharing one centre line.
   * Baseline alignment put them at visibly different heights because the two
   * carry different weights and the rupee glyph sits high in the em box.
   */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: auto;
  padding-top: var(--space-12);
  border-top: 1px solid var(--rh-border);
}

.rh-place-card__count,
.rh-place-card__from,
.rh-place-card__none {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-caption);
  /* One shared line box on both sides is what actually makes them line up. */
  line-height: 1.2;
  white-space: nowrap;
}

.rh-place-card__from {
  /* Lining figures stop the digits shifting the price off centre. */
  font-variant-numeric: tabular-nums lining-nums;
}

.rh-place-card__count {
  margin-top: auto;
  padding-top: var(--space-8);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--rh-teal);
}

/* Compact college card with a logo rather than a cover image. */
.rh-college-card {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
  position: relative;
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  background-color: var(--rh-white);
  height: 100%;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.rh-college-card:hover {
  border-color: var(--rh-teal);
}

.rh-college-card__logo {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--r-input);
  background-color: var(--rh-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rh-teal);
  overflow: hidden;
}

.rh-college-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rh-college-card__name {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.rh-college-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.rh-college-card__meta {
  font-size: var(--fs-12);
  color: var(--rh-text-secondary);
  margin-top: var(--space-4);
}

/* ------------------------------------------------------------ GUIDE CARD */

.rh-guide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.rh-guide-card__media {
  margin-bottom: var(--space-16);
}

.rh-guide-card__topic {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--rh-teal);
  margin-bottom: var(--space-8);
}

.rh-guide-card__title {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

.rh-guide-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.rh-guide-card__excerpt {
  margin-top: var(--space-8);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
  color: var(--rh-text-secondary);
}

.rh-guide-card__meta {
  margin-top: var(--space-12);
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}


/*
 * Whole-card click targets.
 *
 * The stretched link must be the anchor's own pseudo-element - putting it on the
 * wrapping paragraph leaves only the text clickable, which is what these cards
 * were doing. The card is the positioning context, and any real control inside
 * the card is lifted above the overlay so it stays independently clickable.
 */
.rh-place-card,
.rh-college-card,
.rh-guide-card,
.rh-property-card {
  position: relative;
}

.rh-place-card__title a,
.rh-college-card__name a,
.rh-guide-card__title a,
.rh-property-card__link {
  position: static;
}

/* Controls that must remain separately clickable sit above the overlay. */
.rh-property-card__actions,
.rh-property-card__badges,
.rh-card__action,
.rh-place-card__cta {
  position: relative;
  z-index: 2;
}

/* A pointer over the whole card, so it reads as clickable. */
.rh-place-card:hover,
.rh-college-card:hover,
.rh-property-card:hover {
  cursor: pointer;
}

/* -------------------------------------------------- AREA (LOCALITY) CARD */

.rh-place-card--area {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  background-color: var(--rh-white);
  overflow: hidden;
  height: 100%;
}

.rh-place-card__cover {
  aspect-ratio: 16 / 9;
  background-color: var(--rh-surface);
  overflow: hidden;
}

.rh-place-card__cover img,
.rh-place-card__cover .rh-image-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rh-place-card__cover .rh-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rh-teal);
  background-color: var(--rh-teal-light);
}

.rh-place-card--area .rh-place-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
  padding: var(--space-16);
}

.rh-place-card__intro {
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
  color: var(--rh-text-secondary);
}

.rh-place-card__near {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-caption);
  color: var(--rh-teal);
  font-weight: var(--fw-medium);
}

.rh-place-card__near .rh-icon {
  flex-shrink: 0;
}

.rh-place-card--area .rh-place-card__count {
  margin-top: auto;
  padding-top: var(--space-8);
  border-top: 1px solid var(--rh-border);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--rh-text-primary);
}

.rh-place-card__none {
  color: var(--rh-text-secondary);
  font-weight: var(--fw-regular);
  font-style: italic;
}

/*
 * Map tile inside an area card. The iframe is decorative here - the card's own
 * link is the click target - so pointer events are disabled to stop the map
 * swallowing the click and to keep it out of the tab order.
 */
.rh-place-card__map {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
  filter: saturate(0.9);
}

/* The area card's city line is a label, not the footer row. */
.rh-place-card__city {
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

/* --------------------------------------------------------------- CAROUSEL */

/*
 * A scroll-snapped row. Native overflow scrolling means it works with a
 * trackpad, a touch swipe, a scrollbar and the keyboard, with no JavaScript and
 * nothing to break.
 */
.rh-carousel {
  position: relative;
}

.rh-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: var(--space-16);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-12);
  /* Room for the card shadow, and space for the snap edge. */
  scroll-padding-inline: var(--space-4);
  overscroll-behavior-x: contain;
}

.rh-carousel__item {
  scroll-snap-align: start;
  min-width: 0;
}

.rh-carousel__item > * {
  height: 100%;
}

@media (min-width: 768px) {
  .rh-carousel__track {
    grid-auto-columns: minmax(260px, 1fr);
  }
}

/* At full width four cards read comfortably; the rest are a scroll away. */
@media (min-width: 1280px) {
  .rh-carousel__track {
    grid-auto-columns: calc((100% - (var(--space-16) * 3)) / 4);
  }
}

.rh-carousel__hint {
  margin-top: var(--space-4);
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

@media (min-width: 1280px) {
  .rh-carousel__hint {
    text-align: right;
  }
}

/* ------------------------------------------------------------- AREA CARD */

/* Compact, icon-led card for a locality: no photo, just the useful facts. */
.rh-area-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-16);
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  background-color: var(--rh-white);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.rh-area-card:hover {
  border-color: var(--rh-teal);
  cursor: pointer;
}

.rh-area-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background-color: var(--rh-teal-light);
  color: var(--rh-teal);
  margin-bottom: var(--space-4);
}

.rh-area-card__name {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.rh-area-card__name a {
  color: var(--rh-text-primary);
}

.rh-area-card:hover .rh-area-card__name a {
  color: var(--rh-teal);
  text-decoration: none;
}

/* Whole-card click target, on the anchor itself. */
.rh-area-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.rh-area-card__city {
  font-size: var(--fs-12);
  color: var(--rh-text-secondary);
}

.rh-area-card__intro {
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  color: var(--rh-text-secondary);
}

.rh-area-card__near {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-12);
  color: var(--rh-teal);
  font-weight: var(--fw-medium);
}

.rh-area-card__near .rh-icon {
  flex-shrink: 0;
}

.rh-area-card__count {
  margin-top: auto;
  padding-top: var(--space-8);
  border-top: 1px solid var(--rh-border);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--rh-text-primary);
}

.rh-area-card__none {
  color: var(--rh-text-secondary);
  font-weight: var(--fw-regular);
  font-style: italic;
}


/*
 * Moved from the place page stylesheet: these are used by homepage card
 * sections too, and page-only CSS left them unstyled there.
 */
.rh-place-card__short {
  display: inline-block;
  margin-left: var(--space-4);
  padding: 2px var(--space-8);
  border-radius: var(--r-pill);
  background-color: var(--rh-surface);
  color: var(--rh-text-secondary);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  vertical-align: middle;
}

.rh-place-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--rh-teal);
  background-color: var(--rh-teal-light);
}

.rh-place-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  background-color: var(--rh-surface);
  overflow: hidden;
}

.rh-place-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-out);
}