/*
	Project page stylesheet — templates/thavorn_new/project.php and its
	sections/pages/rc/*.php partials (and their *.dev.php sandbox copies).

	A page-level stylesheet rather than a chunk of app-min.css, because the two audiences
	load different bundles: a superuser gets css/main_ref.css and everyone else gets
	scss/app-min.css. Appending to one of them would leave the other version unstyled —
	and the superuser is exactly who previews this page first. The template pulls it in
	through $page_css (see sections/public_head.php).

	Every selector is scoped to .rc-v2, the class the template puts on <main>, so nothing
	here can reach another page even if the file is loaded elsewhere.

	Bump the ?v= in project.php (and project.dev.php) when deploying — cache busting is
	manual here.
*/
/* =====================================================================
   Everything here is scoped to main.rc-v2, the class only the project page
   sets. Nothing above is overridden, so no other page is affected.
   ===================================================================== */

/* The mobile tab bar plus the call/Line/WhatsApp row cover ~130px of a 667px
   viewport; without this the last section sits under them. */
main.rc-v2 {
  padding-bottom: 150px;
}

@media only screen and (min-width: 992px) {
  main.rc-v2 {
    padding-bottom: 0;
  }
}

/* --- Key facts above the fold ------------------------------------- */
.rc-v2 .rc-facts {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}

.rc-v2 .rc-facts_item {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.rc-v2 .rc-facts_digit {
  color: #1991ca;
  font-family: "Unbounded";
  font-size: 22px;
  font-weight: 500;
}

.rc-v2 .rc-facts_text {
  font-size: 13px;
  font-weight: 300;
  color: #7d7d7d;
}

@media only screen and (max-width: 575.98px) {
  .rc-v2 .rc-facts {
    gap: 10px 20px;
  }
  .rc-v2 .rc-facts_digit {
    font-size: 18px;
  }
  .rc-v2 .rc-facts_text {
    font-size: 12px;
  }
}

/* --- Offers grouped by bedroom count ------------------------------- */
.rc-v2 .rc-summary {
  margin-top: 60px;
}

.rc-v2 .rc-summary_block + .rc-summary_block {
  margin-top: 30px;
}

.rc-v2 .rc-summary_subtitle {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 12px;
}

.rc-v2 .rc-summary_table {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
}

.rc-v2 .rc-summary_row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 15px;
  align-items: center;
  padding: 14px 20px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.rc-v2 .rc-summary_row + .rc-summary_row {
  border-top: 1px solid #eef1f4;
}

.rc-v2 .rc-summary_row:hover {
  background-color: #fafdff;
}

.rc-v2 .rc-summary_type {
  font-weight: 600;
}

.rc-v2 .rc-summary_count,
.rc-v2 .rc-summary_size {
  color: #7d7d7d;
  font-size: 14px;
}

.rc-v2 .rc-summary_price {
  color: #1991ca;
  font-weight: 600;
  text-align: right;
}

@media only screen and (max-width: 575.98px) {
  .rc-v2 .rc-summary_row {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }
  .rc-v2 .rc-summary_price {
    grid-row: 1;
    grid-column: 2;
  }
  .rc-v2 .rc-summary_size {
    text-align: right;
  }
}

/* --- Listing: filter, sort, progressive reveal --------------------- */
.rc-v2 .new-obj_tools {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.rc-v2 .new-obj_filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rc-v2 .new-obj_sort {
  min-width: 180px;
  padding: 8px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 100px;
  background-color: #fff;
  font: inherit;
  font-size: 14px;
}

.rc-v2 .offer.is-hidden {
  display: none;
}

.rc-v2 .new-obj_controls {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.rc-v2 .new-obj_button {
  cursor: pointer;
}

/* Two columns from 480px up: one card per screen turned 30 listings into a
   16 000px scroll. */
@media only screen and (max-width: 767.98px) and (min-width: 480px) {
  .rc-v2 .new-obj_content {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

/* --- Amenities, grouped and collapsible ---------------------------- */
.rc-v2 .rc-about_comfort-groups {
  display: grid;
  gap: 30px;
  margin-top: 30px;
}

.rc-v2 .rc-about_comfort-group_title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px;
  color: #7d7d7d;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.rc-v2 .rc-about_comfort-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px 20px;
  margin-top: 0;
}

.rc-v2 .rc-about_comfort-toggle {
  display: none;
  margin-top: 20px;
  cursor: pointer;
}

@media only screen and (max-width: 767.98px) {
  .rc-v2 .rc-about_comfort-content {
    grid-template-columns: 1fr 1fr;
  }
  /* 30 amenities in a single column is most of a phone screen's scroll. */
  .rc-v2 .rc-about_comfort .rc-about_comfort-item.is-extra {
    display: none;
  }
  .rc-v2 .rc-about_comfort.is-expanded .rc-about_comfort-item.is-extra {
    display: flex;
  }
  /* A group past the cut goes entirely, heading included — hiding only its items left
     a stack of headings with nothing under them. */
  .rc-v2 .rc-about_comfort .rc-about_comfort-group.is-extra {
    display: none;
  }
  .rc-v2 .rc-about_comfort.is-expanded .rc-about_comfort-group.is-extra {
    display: block;
  }
  .rc-v2 .rc-about_comfort-toggle {
    display: inline-flex;
  }
}

@media only screen and (max-width: 479.98px) {
  .rc-v2 .rc-about_comfort-content {
    grid-template-columns: 1fr;
  }
}

/* --- Stats, video, map -------------------------------------------- */
@media only screen and (max-width: 767.98px) {
  .rc-v2 .help_stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .rc-v2 .help_stats-digit {
    font-size: 40px;
    letter-spacing: 1.5px;
  }
}

.rc-v2 .rc-hero_video {
  aspect-ratio: 16 / 9;
}

.rc-v2 .rc-hero_video-src {
  width: 100%;
  height: 100%;
  border: 0;
}

.rc-v2 .rc-map {
  margin-top: 60px;
}

.rc-v2 .rc-map .map {
  position: relative;
  margin-top: 30px;
  height: 420px;
  border-radius: 16px;
  overflow: hidden;
}

@media only screen and (max-width: 767.98px) {
  .rc-v2 .rc-map {
    margin-top: 40px;
  }
  .rc-v2 .rc-map .map {
    height: 320px;
  }
}

/* --- Area context: market medians, neighbouring projects ----------- */
.rc-v2 .rc-nearby {
  margin-top: 70px;
}

.rc-v2 .rc-nearby_projects {
  margin-top: 50px;
}

.rc-v2 .rc-nearby_market-grid {
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.rc-v2 .rc-nearby_market-item {
  padding: 18px 22px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rc-v2 .rc-nearby_market-value {
  color: #1991ca;
  font-family: "Unbounded";
  font-size: 26px;
  font-weight: 500;
}

.rc-v2 .rc-nearby_market-label {
  font-size: 13px;
  font-weight: 300;
  color: #7d7d7d;
}

.rc-v2 .rc-nearby_link {
  display: inline-block;
  margin-top: 20px;
  color: #1991ca;
  font-weight: 600;
  text-decoration: none;
}

.rc-v2 .rc-nearby_link:hover {
  text-decoration: underline;
}

.rc-v2 .rc-nearby_projects-grid {
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.rc-v2 .rc-nearby_card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.rc-v2 .rc-nearby_card-img {
  width: 100%;
  height: 150px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 12px;
}

.rc-v2 .rc-nearby_card-title {
  font-weight: 600;
  line-height: 1.3;
}

.rc-v2 .rc-nearby_card-meta {
  font-size: 13px;
  color: #7d7d7d;
}

@media only screen and (max-width: 575.98px) {
  .rc-v2 .rc-nearby_projects-grid {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  .rc-v2 .rc-nearby_card-img {
    height: 110px;
  }
  .rc-v2 .rc-nearby_market-value {
    font-size: 22px;
  }
}

/* --- Fixes after the first live review ---------------------------- */

/*
	splide-core hides .splide, .splide__list and .splide__slide until a slider is mounted,
	and these cards mount theirs on first interaction — so without this the entire listing
	was invisible. Dropped by rc.js the moment it mounts, handing control back to Splide.
*/
.rc-v2 .offer--lazy,
.rc-v2 .offer--lazy .splide__list,
.rc-v2 .offer--lazy .splide__slide {
  visibility: visible;
}

/*
	An unmounted card also has to size its photo itself. [data-image] is width/height 100%,
	and until Splide lays the track out the slide and its link have no height for that to
	resolve against — which is what made some cards show a squashed or stretched photo
	while their neighbours looked right.
*/
.rc-v2 .offer--lazy .splide__track,
.rc-v2 .offer--lazy .splide__list {
  display: block;
  height: 100%;
}

.rc-v2 .offer--lazy .splide__slide {
  width: 100%;
  height: 100%;
}

.rc-v2 .offer--lazy .splide__slide .my-image-links {
  display: block;
  width: 100%;
  height: 100%;
}

/*
	Amenity ticks: 30 solid blue checkmarks pulled the eye away from the words they mark.
	Smaller and muted — a tick is punctuation here, not content.
*/
.rc-v2 .rc-about_comfort-icon {
  width: 13px;
  height: 13px;
  opacity: 0.45;
  margin-top: 3px;
  flex-shrink: 0;
}

.rc-v2 .rc-about_comfort-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.4;
}

.rc-v2 .rc-about_comfort-text {
  font-weight: 300;
}

/* --- Vertical rhythm ---------------------------------------------- */
/*
	Sections used to inherit whatever margin the neighbouring block happened to have, so
	"ЖК … видео" sat flush against the stats above it. One rule for the gap between
	sections, one for the space a heading keeps under itself.
*/
.rc-v2 > section,
.rc-v2 > div.new-obj {
  margin-top: 80px;
}

.rc-v2 > section:first-child {
  margin-top: 0;
}

.rc-v2 .rc-about_comfort {
  margin-top: 70px;
}

.rc-v2 .rc-video,
.rc-v2 .rc-map,
.rc-v2 .rc-nearby,
.rc-v2 .rc-summary {
  margin-top: 80px;
}

.rc-v2 .cap_title {
  margin-bottom: 30px;
}

.rc-v2 .rc-summary_subtitle {
  margin-top: 0;
}

@media only screen and (max-width: 767.98px) {
  .rc-v2 > section,
  .rc-v2 > div.new-obj,
  .rc-v2 .rc-video,
  .rc-v2 .rc-map,
  .rc-v2 .rc-nearby,
  .rc-v2 .rc-summary,
  .rc-v2 .rc-about_comfort {
    margin-top: 50px;
  }
  .rc-v2 .cap_title {
    margin-bottom: 20px;
  }
}

/*
	Breadcrumbs: hide the trailing crumb, which is the page title the H1 states again just
	below. Not scoped to .rc-v2 because the trail is rendered above <main> — the guard is
	the class itself, set only by project.dev.php. The "–" separator is that element's own
	::before, so it disappears with it.
*/
.bc--hide-current .bc_content .bc_item-sub:last-child {
  display: none;
}

/* --- Top of the page: crumbs → H1 → facts ------------------------- */
/*
	The three were set by whatever margins their own components carried, which left the
	title crowding the breadcrumbs and the fact strip sitting almost on the title. One
	scale for the whole opening block instead.
*/
.rc-v2 .rc-hero {
  padding-top: 30px;
}

.rc-v2 .rc-hero .cap_title {
  margin-top: 0;
  margin-bottom: 22px;
}

.rc-v2 .rc-facts {
  margin-top: 0;
  margin-bottom: 28px;
}

.rc-v2 .project-availability {
  margin-bottom: 35px !important;
}

@media only screen and (max-width: 767.98px) {
  .rc-v2 .rc-hero {
    padding-top: 18px;
  }
  .rc-v2 .rc-hero .cap_title {
    margin-bottom: 16px;
  }
  .rc-v2 .rc-facts {
    margin-bottom: 20px;
  }
  .rc-v2 .project-availability {
    margin-bottom: 25px !important;
  }
}

/* Ownership note under the offers summary */
.rc-v2 .rc-summary_note {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 300;
  color: #7d7d7d;
}

/* --- Hero column must not stretch to its widest child ---------------
   .rc-hero_main is a grid, and an `auto` column is at least as wide as the
   min-content of what it holds. The slider's min-content is the whole slide
   list (780px on a phone), so the column — and with it the h1, the facts row
   and the description — grew past the viewport and got clipped on the right.
   Capping the column at the container width fixes every child at once; the
   slider itself scrolls inside its own track, as it already did. */
.rc-v2 .rc-hero_main {
  grid-template-columns: minmax(0, 1fr);
}

.rc-v2 .rc-hero_main > * {
  min-width: 0;
}