/* =========================================================
   villa-detail.css — เฉพาะหน้ารายละเอียดบ้าน /pool-villas/{slug}/
   ========================================================= */
.villa-top { padding-top: clamp(7.5rem, 7rem + 2vw, 9rem); }
.villa-top__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.5rem; }
.villa-top__title { font-size: var(--fs-h2); }
.villa-top__meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: .5rem; font-size: var(--fs-sm); color: var(--c-muted); }
.villa-top__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.villa-top__meta .icon { color: var(--c-blue); }

/* Gallery 1 ใหญ่ + 4 เล็ก */
.gallery { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .5rem; height: clamp(320px, 45vw, 540px); overflow: hidden; border-radius: var(--radius-lg); }
.gallery__item { padding: 0; border: 0; overflow: hidden; background: var(--c-blue-50); cursor: zoom-in; }
.gallery__item:first-child { grid-row: span 2; }
.gallery .gallery__item:only-of-type { grid-column: 1 / -1; grid-row: 1 / -1; } /* มีรูปเดียว → เต็มกรอบ */
.gallery__item img { width: 100%; height: 100%; transition: transform .6s var(--ease), opacity .2s; }
.gallery__item:hover img { transform: scale(1.04); opacity: .92; }
.gallery__count { position: absolute; right: 1rem; bottom: 1rem; padding: .3rem .8rem; font-size: var(--fs-xs); color: var(--c-navy); background: #fff; border-radius: var(--radius-ui); pointer-events: none; }

/* Layout เนื้อหา + กล่องจอง */
.villa-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
.villa-body { padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.villa-block { display: grid; gap: 1rem; padding-block: 2rem; border-top: 1px solid var(--c-line); }
.villa-block h2 { font-size: var(--fs-h4); font-weight: var(--fw-medium); color: var(--c-navy); }
.villa-block .btn { justify-self: start; }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 2rem; }
.facts li { display: grid; justify-items: start; gap: .1rem; padding: 1rem 1.25rem; border: 1px solid var(--c-line); border-radius: var(--radius); }
.facts .icon { width: 22px; height: 22px; margin-bottom: .4rem; color: var(--c-blue); }
.facts strong { font-size: var(--fs-h4); font-weight: var(--fw-regular); color: var(--c-navy); line-height: 1.2; }
.facts span { font-size: var(--fs-sm); color: var(--c-muted); }

.amenities { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem 1.5rem; }
.amenities li { display: flex; align-items: center; gap: .6rem; color: var(--c-navy); }
.amenities .icon { color: var(--c-blue); }

.villa-block .cal { max-width: 520px; }

.villa-reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.villa-reviews figure { display: grid; gap: .6rem; align-content: start; padding: 1.25rem; border-radius: var(--radius); background: var(--c-blue-50); }
.villa-reviews p { font-size: var(--fs-sm); }
.villa-reviews figcaption { font-size: var(--fs-xs); color: var(--c-muted); }

/* Booking box */
.booking-box { position: sticky; top: 100px; display: grid; gap: .875rem; padding: 1.75rem; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); }
.booking-box__label { font-size: var(--fs-sm); color: var(--c-muted); }
.booking-box__prices { display: grid; gap: .75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--c-line); }
.booking-box__prices div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.booking-box__prices dt { font-size: var(--fs-sm); color: var(--c-p); }
.booking-box__prices dd { margin: 0; font-size: var(--fs-h4); color: var(--c-navy); }
.booking-box__free { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .9rem; font-size: var(--fs-sm); color: #0F7A3D; background: #E3F6EA; border-radius: var(--radius-sm); }
.booking-box__note { font-size: var(--fs-xs); text-align: center; color: var(--c-muted); }

/* Lightbox */
.lightbox { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; padding: 0; border: 0; background: rgb(6 20 38 / .94); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox img { max-width: min(92vw, 1400px); max-height: 84vh; border-radius: var(--radius-sm); object-fit: contain; }
.lightbox__close { position: absolute; top: 1rem; right: 1rem; }
.lightbox__nav { position: absolute; top: 50%; translate: 0 -50%; }
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }

@media (max-width: 991px) {
  .villa-layout { grid-template-columns: 1fr; }
  .booking-box { position: static; order: -1; }
}
@media (max-width: 767px) {
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; height: 420px; }
  .gallery__item:first-child { grid-column: span 2; grid-row: auto; }
  .gallery__item:nth-child(n + 4) { display: none; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .amenities, .villa-reviews { grid-template-columns: 1fr; }
}

/* ของฟรี + ข้อควรทราบ */
.freebies { display: flex; flex-wrap: wrap; gap: .6rem; }
.freebies li { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; font-size: var(--fs-sm); color: #0F7A3D; background: #E3F6EA; border-radius: var(--radius-ui); }
.rules { display: grid; gap: .6rem; }
.rules li { position: relative; padding: .75rem 1rem .75rem 2.5rem; font-size: var(--fs-sm); color: var(--c-p); background: #FFF7E6; border-radius: var(--radius-ui); }
.rules li::before { content: "!"; position: absolute; left: .9rem; top: .75rem; display: grid; place-items: center; width: 18px; height: 18px; font-size: .7rem; font-weight: var(--fw-bold); color: #fff; background: #E0A100; border-radius: 50%; }