/* =========================================================
   PROPERTY DETAIL PAGE
   Uses Explore Palghar's existing main.css design system.
   ========================================================= */

.property-breadcrumb-wrap {
   background: var(--cream);
   border-bottom: 1px solid rgba(32, 37, 34, .06);
}

.property-breadcrumb {
   min-height: 48px;
   display: flex;
   align-items: center;
   gap: 9px;
   white-space: nowrap;
   overflow: hidden;
   font-size: .78rem;
   color: var(--gray);
}

.property-breadcrumb a:hover {
   color: var(--green);
}

.property-breadcrumb span:last-child {
   overflow: hidden;
   text-overflow: ellipsis;
}


/* =========================================================
   PROPERTY HERO
   ========================================================= */

.property-hero {
   padding: var(--space-lg) 0 var(--space-xl);
   background: var(--cream);
}

.property-hero-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.35fr) minmax(360px, .85fr);
   gap: var(--space-xl);
   align-items: center;
}


/* =========================================================
   PROPERTY HERO GALLERY
   ========================================================= */

.property-gallery {
   display: grid;
   grid-template-columns: minmax(0, 1.7fr) minmax(180px, .7fr);
   gap: 10px;
   position: relative;
   min-width: 0;
}

.property-main-photo,
.property-small-photo,
.detail-photo {
   border: 0;
   padding: 0;
   cursor: pointer;
   overflow: hidden;
   position: relative;
   background: #8c9b8d;
}

.property-main-photo {
   aspect-ratio: 1.15 / 1;
   border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.property-side-photos {
   display: grid;
   grid-template-rows: 1fr 1fr;
   gap: 10px;
}

.property-small-photo:first-child {
   border-radius: 0 var(--radius-lg) 0 0;
}

.property-small-photo:last-child {
   border-radius: 0 0 var(--radius-lg) 0;
}

.demo-photo::after,
.detail-photo::after {
   content: "";
   position: absolute;
   inset: 0;
   background:
      linear-gradient(180deg,
         rgba(8, 25, 22, .03),
         rgba(8, 25, 22, .4));
   pointer-events: none;
}

.photo-label {
   position: absolute;
   z-index: 2;
   left: 16px;
   bottom: 14px;
   color: #fff;
   font-size: .78rem;
   font-weight: 600;
   letter-spacing: .06em;
   text-transform: uppercase;
}

.gallery-count {
   position: absolute;
   right: 16px;
   bottom: 16px;
   z-index: 4;
   border: 1px solid rgba(255, 255, 255, .5);
   background: rgba(20, 35, 29, .72);
   color: #fff;
   padding: 9px 13px;
   border-radius: 4px;
   font-size: .78rem;
   backdrop-filter: blur(6px);
}

.gallery-count:hover {
   background: var(--green);
}


/* =========================================================
   OLD DEMO PHOTO BACKGROUNDS
   Kept because other cards / fallbacks may still use them.
   ========================================================= */

.photo-one {
   background:
      linear-gradient(135deg,
         #5d7e69,
         #a7b79d 42%,
         #d2b27b);
}

.photo-two {
   background:
      linear-gradient(135deg,
         #c9a980,
         #e4d7bf 48%,
         #718674);
}

.photo-three {
   background:
      linear-gradient(135deg,
         #7aa5a0,
         #9ec4b5 45%,
         #c5d0bd);
}

.photo-four {
   background:
      linear-gradient(135deg,
         #6c896f,
         #a8b993 45%,
         #d8c49a);
}

.photo-five {
   background:
      linear-gradient(135deg,
         #a97855,
         #d3b38a 48%,
         #eee0c8);
}

.photo-six {
   background:
      linear-gradient(135deg,
         #437f82,
         #76a9a2 48%,
         #d8c9a2);
}


/* =========================================================
   PROPERTY SUMMARY
   ========================================================= */

.property-summary h1 {
   font-size: clamp(2.2rem, 4.2vw, 3.6rem);
   margin-bottom: 12px;
   max-width: 13ch;
}

.property-location {
   display: flex;
   gap: 7px;
   align-items: center;
   color: var(--gray);
   font-size: .92rem;
   margin-bottom: var(--space-md);
}

.property-location span {
   color: var(--terracotta);
}

.property-intro {
   color: var(--gray);
   font-size: 1rem;
   max-width: 52ch;
   margin-bottom: var(--space-md);
}

.property-highlights {
   display: flex;
   flex-wrap: wrap;
   gap: 9px;
   align-items: center;
   color: var(--green);
   font-size: .8rem;
   font-weight: 600;
   margin-bottom: var(--space-lg);
}

.property-highlights small {
   font-weight: 400;
   color: var(--gray);
}


/* =========================================================
   PROPERTY PRICE
   ========================================================= */

.property-price-box {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 16px;
   padding: 18px 0;
   border-top: 1px solid rgba(32, 37, 34, .1);
   border-bottom: 1px solid rgba(32, 37, 34, .1);
}

.price-label {
   display: block;
   color: var(--gray);
   font-size: .76rem;
   text-transform: uppercase;
   letter-spacing: .08em;
}

.property-price-box strong {
   font-family: var(--font-display);
   font-size: 2rem;
   color: var(--green-dark);
}

.price-unit {
   color: var(--gray);
   font-size: .85rem;
}

.demo-note {
   color: var(--terracotta);
   font-size: .7rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .08em;
}

.property-hero-actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-top: var(--space-lg);
}


/* =========================================================
   PROPERTY TABS
   ========================================================= */

.property-tabs-wrap {
   position: sticky;
   top: 0;
   z-index: 50;
   margin-bottom: var(--space-xl);
   background: rgba(255, 253, 249, .96);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid rgba(32, 37, 34, .1);
}

.property-tabs {
   display: flex;
   overflow-x: auto;
   scrollbar-width: none;
}

.property-tabs::-webkit-scrollbar {
   display: none;
}

.property-tab {
   flex: 0 0 auto;
   border: 0;
   border-bottom: 2px solid transparent;
   background: transparent;
   color: var(--gray);
   padding: 18px 20px 15px;
   font-size: .84rem;
   font-weight: 600;
   white-space: nowrap;
}

.property-tab:hover {
   color: var(--green);
   background: rgba(244, 239, 230, .45);
}

.property-tab.is-active {
   color: var(--green-dark);
   border-bottom-color: var(--terracotta);
}

.property-panel[hidden] {
   display: none;
}

.property-tab-panels {
   min-height: 560px;
   padding-bottom: var(--space-2xl);
}


/* =========================================================
   PROPERTY SECTION HEADINGS
   ========================================================= */

.property-section-heading {
   max-width: 720px;
   margin-bottom: var(--space-lg);
}

.property-section-heading h2 {
   font-size: clamp(1.9rem, 3vw, 2.55rem);
}

.property-section-heading>p:last-child {
   color: var(--gray);
   margin-top: var(--space-sm);
   max-width: 65ch;
}


/* =========================================================
   PROPERTY CONTENT
   ========================================================= */

.property-content-grid {
   display: grid;
   grid-template-columns:
      minmax(0, 1.5fr) minmax(280px, .7fr);
   gap: var(--space-xl);
   align-items: start;
}

.property-main-copy>p {
   color: var(--gray);
   max-width: 68ch;
   margin-bottom: var(--space-md);
}

.property-main-copy h3 {
   font-size: 1.45rem;
   margin: var(--space-xl) 0 var(--space-md);
}


/* =========================================================
   PROPERTY SIDE CARD
   ========================================================= */

.property-side-card {
   background: var(--cream);
   border: 1px solid rgba(32, 37, 34, .08);
   border-radius: var(--radius-lg);
   padding: 28px;
   box-shadow: var(--shadow-sm);
}

.quick-fact {
   display: flex;
   justify-content: space-between;
   gap: 16px;
   padding: 14px 0;
   border-bottom: 1px solid rgba(32, 37, 34, .08);
   font-size: .88rem;
}

.quick-fact span {
   color: var(--gray);
}

.quick-fact strong {
   color: var(--green-dark);
   text-align: right;
}

.property-full-btn {
   width: 100%;
   justify-content: center;
   margin-top: 18px;
}


/* =========================================================
   CHECK LIST
   ========================================================= */

.check-list {
   display: grid;
   gap: 11px;
   margin-top: var(--space-md);
}

.check-list li {
   position: relative;
   padding-left: 27px;
   color: var(--charcoal);
   font-size: .93rem;
}

.check-list li::before {
   content: "✓";
   position: absolute;
   left: 0;
   color: var(--teal);
   font-weight: 700;
}


/* =========================================================
   PHOTO GRID
   ========================================================= */

.photo-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px;
}

.detail-photo {
   min-height: 260px;
   border-radius: var(--radius-md);
}

.detail-photo span {
   position: absolute;
   z-index: 2;
   left: 18px;
   bottom: 16px;
   color: #fff;
   font-weight: 600;
   font-size: .82rem;
   text-transform: uppercase;
   letter-spacing: .08em;
}


/* =========================================================
   AMENITIES
   ========================================================= */

.amenities-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px;
}

.amenity-item {
   display: flex;
   gap: 13px;
   align-items: flex-start;
   padding: 20px;
   background: var(--cream);
   border: 1px solid rgba(32, 37, 34, .07);
   border-radius: var(--radius-md);
}

.amenity-item>span {
   font-size: 1.35rem;
   line-height: 1;
}

.amenity-item strong {
   display: block;
   color: var(--green-dark);
   font-size: .9rem;
}

.amenity-item small {
   display: block;
   color: var(--gray);
   font-size: .76rem;
   margin-top: 3px;
}


/* =========================================================
   TARIFF
   ========================================================= */

.tariff-table-wrap {
   overflow-x: auto;
   border: 1px solid rgba(32, 37, 34, .1);
   border-radius: var(--radius-md);
}

.tariff-table {
   width: 100%;
   min-width: 760px;
   border-collapse: collapse;
}

.tariff-table th {
   background: var(--green-dark);
   color: var(--off-white);
   text-align: left;
   padding: 15px 16px;
   font-size: .76rem;
   text-transform: uppercase;
   letter-spacing: .07em;
}

.tariff-table td {
   padding: 16px;
   border-bottom: 1px solid rgba(32, 37, 34, .08);
   color: var(--gray);
   font-size: .88rem;
}

.tariff-table td strong {
   color: var(--green-dark);
}

.tariff-note {
   margin-top: var(--space-md);
   padding: 16px 18px;
   background: var(--sand);
   border-left: 3px solid var(--gold);
   color: var(--gray);
   font-size: .84rem;
}


/* =========================================================
   LOCATION
   ========================================================= */

.location-grid {
   display: grid;
   grid-template-columns:
      minmax(0, 1.25fr) minmax(300px, .75fr);
   gap: var(--space-xl);
}


/* =========================================================
   OLD MAP PLACEHOLDER
   KEEP COMMENTED
   Previously used before real Google Maps embed was added.
   ========================================================= */

/*

.map-placeholder {
   min-height: 460px;
   border-radius: var(--radius-lg);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   color: var(--off-white);

   background:
      linear-gradient(
         rgba(22, 59, 45, .7),
         rgba(22, 59, 45, .78)
      ),
      linear-gradient(
         135deg,
         #8aa18d,
         #5f8375,
         #c4ad7b
      );

   box-shadow: var(--shadow-md);
}

.map-placeholder span {
   font-family: var(--font-display);
   font-size: 2rem;
}

.map-placeholder small {
   margin-top: 8px;
   max-width: 32ch;
   color: rgba(255, 253, 249, .72);
}

*/


/* =========================================================
   PROPERTY GOOGLE MAP
   Current real responsive Google Maps embed.
   ========================================================= */

.property-map {
   position: relative;
   width: 100%;
   min-height: 460px;
   overflow: hidden;

   border-radius: var(--radius-lg);

   background: var(--cream);

   box-shadow: var(--shadow-md);
}

.property-map iframe {
   display: block;

   width: 100%;
   height: 100%;
   min-height: 460px;

   border: 0;
}


/* =========================================================
   LOCATION DETAILS
   ========================================================= */

.location-details {
   display: flex;
   flex-direction: column;
   gap: 18px;
}

.location-detail {
   display: flex;
   gap: 14px;
   padding-bottom: 18px;
   border-bottom: 1px solid rgba(32, 37, 34, .08);
}

.location-detail>span {
   font-size: 1.2rem;
}

.location-detail strong {
   display: block;
   color: var(--green-dark);
   font-size: .92rem;
}

.location-detail p {
   color: var(--gray);
   font-size: .86rem;
   margin-top: 4px;
}


/* =========================================================
   REVIEWS
   ========================================================= */

.review-summary {
   display: grid;
   grid-template-columns: 220px 1fr;
   gap: var(--space-xl);
   padding: 28px;
   background: var(--cream);
   border-radius: var(--radius-lg);
   margin-bottom: var(--space-lg);
}

.review-score {
   text-align: center;
   padding-right: var(--space-xl);
   border-right: 1px solid rgba(32, 37, 34, .1);
}

.review-score strong {
   display: block;
   font-family: var(--font-display);
   font-size: 3.4rem;
   color: var(--green-dark);
   line-height: 1;
}

.review-score span {
   display: block;
   color: var(--gold);
   letter-spacing: 2px;
   margin: 8px 0;
}

.review-score small {
   color: var(--gray);
   font-size: .74rem;
}

.review-bars {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 9px;
}

.review-bars>div {
   display: grid;
   grid-template-columns: 15px 1fr 40px;
   align-items: center;
   gap: 10px;
   font-size: .75rem;
   color: var(--gray);
}

.review-bars i {
   height: 7px;
   background: #e5e0d6;
   border-radius: 20px;
   overflow: hidden;
}

.review-bars b {
   display: block;
   height: 100%;
   background: var(--gold);
   border-radius: 20px;
}

.reviews-list {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

.review-card {
   padding: 22px;
   border: 1px solid rgba(32, 37, 34, .08);
   border-radius: var(--radius-md);
}

.review-top {
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
}

.review-top strong {
   color: var(--green-dark);
}

.review-top span {
   color: var(--gold);
}

.review-card p {
   color: var(--gray);
   font-size: .9rem;
}

.review-card small {
   display: block;
   color: #929892;
   font-size: .74rem;
   margin-top: 12px;
}


/* =========================================================
   PROPERTY ENQUIRY FORM
   ========================================================= */

.form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin: var(--space-lg) 0 var(--space-md);
}

.form-grid label {
   display: flex;
   flex-direction: column;
   gap: 7px;
   color: var(--green-dark);
   font-size: .8rem;
   font-weight: 600;
}

.form-grid .full {
   grid-column: 1 / -1;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
   width: 100%;
   border: 1px solid rgba(32, 37, 34, .16);
   border-radius: var(--radius-sm);
   background: var(--off-white);
   color: var(--charcoal);
   padding: 12px 13px;
   font: inherit;
   font-size: .88rem;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
   outline: 2px solid rgba(45, 124, 120, .22);
   outline-offset: 1px;
   border-color: var(--teal);
}

.form-grid textarea {
   resize: vertical;
}


/* =========================================================
   PROPERTY CONTACT CARD
   ========================================================= */

.contact-card {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.contact-line {
   display: flex;
   gap: 13px;
   padding: 14px 0;
   border-bottom: 1px solid rgba(32, 37, 34, .08);
}

.contact-line>span {
   color: var(--terracotta);
   font-size: 1.15rem;
}

.contact-line small {
   display: block;
   color: var(--gray);
   font-size: .72rem;
}

.contact-line strong {
   display: block;
   color: var(--green-dark);
   font-size: .88rem;
   margin-top: 2px;
}

.contact-line a:hover {
   color: var(--terracotta);
}

.demo-note-block {
   color: var(--terracotta);
   font-size: .76rem;
   line-height: 1.5;
   margin-top: 12px;
}


/* =========================================================
   RELATED PROPERTIES / LINKS
   ========================================================= */

.related-properties {
   padding: var(--space-2xl) 0;
   background: var(--cream);
}

.related-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
}

.related-card {
   background: var(--off-white);
   border-radius: var(--radius-md);
   overflow: hidden;
   border: 1px solid rgba(32, 37, 34, .07);
   box-shadow: var(--shadow-sm);

   transition:
      transform .2s ease,
      box-shadow .2s ease;
}

.related-card:hover {
   transform: translateY(-3px);
   box-shadow: var(--shadow-md);
}

.related-card-image {
   height: 190px;
}

.related-card>div:last-child {
   padding: 20px;
}

.related-card span {
   color: var(--terracotta);
   font-size: .7rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .08em;
}

.related-card h3 {
   font-size: 1.25rem;
   margin: 6px 0;
}

.related-card p {
   color: var(--gray);
   font-size: .86rem;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1024px) {

   .property-hero-grid,
   .property-content-grid,
   .location-grid {
      grid-template-columns: 1fr;
   }

   .property-side-card {
      max-width: 620px;
   }

   .amenities-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .reviews-list {
      grid-template-columns: 1fr;
   }

   .related-grid {
      grid-template-columns: 1fr 1fr;
   }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px) {

   .property-breadcrumb {
      min-height: 44px;
      font-size: .72rem;
   }


   /* ---------------------------------------------------------
      PROPERTY HERO
      --------------------------------------------------------- */

   .property-hero {
      padding: var(--space-md) 0 var(--space-lg);
   }

   .property-gallery {
      grid-template-columns: 1.25fr .75fr;
      gap: 7px;
   }

   .property-side-photos {
      gap: 7px;
   }

   .property-main-photo {
      border-radius:
         var(--radius-md) 0 0 var(--radius-md);
   }

   .property-small-photo:first-child {
      border-radius:
         0 var(--radius-md) 0 0;
   }

   .property-small-photo:last-child {
      border-radius:
         0 0 var(--radius-md) 0;
   }

   .gallery-count {
      right: 10px;
      bottom: 10px;
      font-size: .68rem;
      padding: 7px 9px;
   }

   .property-summary h1 {
      font-size: clamp(2rem, 10vw, 2.7rem);
   }

   .property-hero-actions {
      display: grid;
      grid-template-columns: 1fr;
   }

   .property-hero-actions .btn {
      width: 100%;
      justify-content: center;
   }


   /* ---------------------------------------------------------
      PROPERTY TABS
      --------------------------------------------------------- */

   .property-tabs-wrap {
      margin-bottom: var(--space-lg);
   }

   .property-tabs {
      margin:
         0 calc(var(--space-md) * -1);

      padding:
         0 var(--space-md);
   }

   .property-tab {
      padding: 15px 16px 13px;
      font-size: .78rem;
   }


   /* ---------------------------------------------------------
      PHOTOS
      --------------------------------------------------------- */

   .photo-grid {
      grid-template-columns: 1fr 1fr;
      gap: 9px;
   }

   .detail-photo {
      min-height: 180px;
   }


   /* ---------------------------------------------------------
      AMENITIES
      --------------------------------------------------------- */

   .amenities-grid {
      grid-template-columns: 1fr 1fr;
      gap: 9px;
   }

   .amenity-item {
      padding: 14px;
      gap: 9px;
   }

   .amenity-item>span {
      font-size: 1.1rem;
   }

   .amenity-item strong {
      font-size: .78rem;
   }

   .amenity-item small {
      font-size: .68rem;
   }


   /* =========================================================
      OLD MOBILE MAP PLACEHOLDER
      KEEP COMMENTED
      ========================================================= */

   /*
   .map-placeholder {
      min-height: 320px;
   }
   */


   /* =========================================================
      REAL GOOGLE MAP — MOBILE
      ========================================================= */

   .property-map {
      min-height: 320px;
   }

   .property-map iframe {
      min-height: 320px;
   }


   /* ---------------------------------------------------------
      REVIEWS
      --------------------------------------------------------- */

   .review-summary {
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 20px;
   }

   .review-score {
      padding-right: 0;
      padding-bottom: 20px;
      border-right: 0;
      border-bottom:
         1px solid rgba(32, 37, 34, .1);
   }


   /* ---------------------------------------------------------
      FORM
      --------------------------------------------------------- */

   .form-grid {
      grid-template-columns: 1fr;
   }

   .form-grid .full {
      grid-column: auto;
   }


   /* ---------------------------------------------------------
      RELATED
      --------------------------------------------------------- */

   .related-grid {
      grid-template-columns: 1fr;
   }

   .related-card-image {
      height: 170px;
   }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:430px) {

   .property-gallery {
      grid-template-columns: 1.2fr .8fr;
   }

   .property-main-photo {
      aspect-ratio: 1 / 1;
   }

   .amenities-grid {
      grid-template-columns: 1fr;
   }

}