/* Confirmed unit specifications remain readable at narrow phone widths. */
.unit-spec-grid > div > div { min-width: 0; }
.unit-spec-grid dd { font-size: 17px; font-weight: 600; line-height: 1.4; }
.unit-collection { margin-top: 26px; }
.unit-starting-price p { font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 520px) {
  .unit-spec-grid > div { flex-direction: column; align-items: flex-start; gap: 10px; }
  .unit-spec-grid > div > div { width: 100%; }
  .unit-spec-grid dt { font-size: 12px; line-height: 1.5; }
  .unit-spec-grid dd { margin-top: 5px; font-size: 17px; }
  .unit-starting-price p { font-size: clamp(36px, 10vw, 48px); }
  .unit-starting-price small { font-size: 18px; }
}

/* Slightly closer framing for both day and night shophouse photos. */
#unit-details[aria-labelledby="unit-tab-Ruko"] .unit-property-image img,
#unit-details[aria-labelledby="unit-tab-Ruko"] .unit-property-image img.is-active {
  transform: scale(1.13);
  transform-origin: 50% 65%;
  object-position: center;
}
/* Search-friendly hero headings keep balanced line lengths. */
#beranda h1 { font-size: clamp(44px, 4.5vw, 72px); }
@media(max-width:760px) { #beranda h1 { font-size: clamp(30px, 7.4vw, 48px); } }
@media(max-width:360px) { #beranda h1 { font-size: 29px; } }

/* The facade spotlight and compact cards apply only to the phone layout. */
.hero-house-highlight { display: none; }
@media (max-width: 760px) {
  #beranda .hero-backdrop:not(.hero-house-highlight) { filter: brightness(.78) saturate(.94); }
  #beranda .hero-house-highlight {
    display: block;
    z-index: 2;
    object-position: 60% center;
    filter: brightness(1.1) contrast(1.02) saturate(1.03);
    pointer-events: none;
  }
  #beranda .hero-house-highlight.active { opacity: .92; }
  #beranda.nighttime .hero-house-highlight { filter: brightness(1.16) saturate(1.03); }
  #beranda .hero-content { z-index: 3; isolation: isolate; }
  #beranda .hero-content::before {
    content: "";
    position: absolute;
    inset: -16px -14px;
    z-index: -1;
    background: linear-gradient(100deg, rgba(5, 18, 27, .38), rgba(5, 18, 27, .05));
    border-radius: 24px;
    filter: blur(12px);
    pointer-events: none;
  }
  #beranda.hero { gap: 12px; }
  #beranda .unit-card,
  #beranda .project-card { padding: 12px 14px; border-radius: 16px; }
  #beranda .unit-card { gap: 10px; }
  #beranda .unit-card-copy { column-gap: 6px; }
  #beranda .unit-card-copy strong { margin-top: 4px; font-size: 29px; }
  #beranda .unit-label { font-size: 10px; padding-bottom: 2px; }
  #beranda .unit-breakdown { gap: 6px; }
  #beranda .unit-breakdown span { font-size: 11px; }
  #beranda .unit-breakdown svg { width: 16px; height: 16px; }
  #beranda .card-kicker { font-size: 8px; letter-spacing: .06em; }
  #beranda .project-card { grid-template-columns: 30px minmax(0, 1fr) 44px; gap: 6px 9px; }
  #beranda .project-icon { width: 30px; height: 30px; margin-top: 4px; }
  #beranda .project-icon svg { width: 19px; height: 19px; }
  #beranda .project-card h2 { margin: 3px 0 4px; font-size: 15px; }
  #beranda .project-card p { font-size: 10px; }
  #beranda .selling-points-scroller { padding-top: 7px; }
  #beranda .selling-points-window { padding-block: 2px; }
  #beranda .selling-points-rail .project-selling-points { gap: 10px; padding-right: 10px; }
  #beranda .selling-points-rail .project-selling-points li { width: 132px; flex-basis: 132px; }
  #beranda .selling-points-rail .project-selling-point { min-height: 44px; gap: 7px; }
  #beranda .selling-point-visual { flex-basis: 32px; width: 32px; height: 30px; border-radius: 7px; }
  #beranda .selling-point-visual svg { width: 21px; height: 21px; }
  #beranda .selling-point-copy { gap: 3px; }
  #beranda .selling-point-copy strong { font-size: 11px; }
  #beranda .selling-point-copy small { font-size: 9px; }
}

/* Keep the original mobile composition with short, compact cards. */
@media (max-width:760px) {
  #beranda .unit-card,
  #beranda .project-card {
    width: min(280px, 100%);
    max-width: 280px;
    margin-left: 0;
    margin-right: auto;
  }
}

/* A clean phone hero keeps the house visible beneath the introductory copy. */
@media (max-width: 760px) {
  #beranda.hero {
    min-height: 100svh;
    padding-top: calc(74px + env(safe-area-inset-top, 0px));
    justify-content: flex-start;
    gap: 0;
  }
  #beranda .unit-card,
  #beranda .project-card { display: none; }
  #beranda .hero-content { margin: 0; max-width: 560px; }
  #beranda h1 { margin-bottom: 14px; line-height: 1.08; }
  #beranda .hero-summary { max-width: 35ch; font-size: 13px; line-height: 1.6; }
  #beranda .hero-button { width: auto; margin-top: 18px; min-height: 48px; padding: 12px 20px; font-size: 13px; }
  #beranda .time-toggle { top: calc(12px + env(safe-area-inset-top, 0px)); }
}

/* Brighten the whole mobile photo evenly, with no separate facade spotlight. */
@media (max-width: 760px) {
  #beranda .hero-backdrop:not(.hero-house-highlight) { filter: brightness(1.06) saturate(1.02); }
  #beranda.nighttime .hero-backdrop:not(.hero-house-highlight) { filter: brightness(1.18) saturate(1.02); }
  #beranda.hero::after,
  #beranda.hero.daytime::after {
    background: linear-gradient(180deg, rgba(6, 20, 28, .36) 0%, rgba(6, 20, 28, .16) 42%, rgba(6, 20, 28, .04) 100%);
  }
  #beranda .hero-content::before {
    background: linear-gradient(100deg, rgba(5, 18, 27, .32), rgba(5, 18, 27, .03));
  }
}

.hero-mobile-visit { display: none; }
@media (max-width: 760px) {
  #beranda.hero { padding-bottom: calc(114px + env(safe-area-inset-bottom, 0px)); }
  #beranda .hero-content .hero-button { display: none; }
  #beranda .hero-mobile-visit {
    display: inline-flex;
    position: absolute;
    left: 20px;
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    z-index: 4;
    width: auto;
    max-width: calc(100% - 40px);
    min-height: 50px;
    padding: 12px 22px;
    background: #f3f0e8;
    color: #19261f;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    font-size: 14px;
    line-height: 1.4;
  }
}