/* Shared styles for the Mihaela Cozma website.
   Most layout lives inline in each page; this file holds the
   interactive pieces (slideshow, listing cards, gallery, forms). */

html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid #D9BA79; outline-offset: 3px; }

/* ---------- Slideshow (homepage interior design) ---------- */
.slideshow-frame .slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.8s ease;
}
.slideshow-frame .slide.is-active { opacity: 1; }
.slide-prev, .slide-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border: 0; border-radius: 999px;
  background: rgba(19,36,31,0.6); color: #F5EFE6; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.slide-prev { left: 14px; }
.slide-next { right: 14px; }
.slide-counter {
  position: absolute; right: 16px; bottom: 14px;
  background: rgba(19,36,31,0.7); color: #F5EFE6;
  font-size: 12px; letter-spacing: 0.16em; padding: 6px 10px;
}
.slide-dot {
  width: 32px; height: 44px; border: 0; background: transparent; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.slide-dot span { display: block; height: 3px; width: 14px; background: #5E7A70; transition: all 0.3s ease; }
.slide-dot.is-active span { width: 28px; background: #D9BA79; }

/* ---------- Listing cards ---------- */
.listing-grid-contents { display: contents; }
.listing-loading, .listing-empty { flex: 1 1 100%; margin: 0; padding: 40px 0; font-size: 15px; color: #5A6460; text-align: center; }
.listing-card {
  flex: 1 1 340px; max-width: 100%; background: #FBF8F2; border: 1px solid #EADDD6;
  display: flex; flex-direction: column; color: #13241F; text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.listing-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(19,36,31,0.12); color: #13241F; }
.listing-card__img { position: relative; height: 250px; background: #2A4A40; overflow: hidden; }
.listing-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing-card__tag {
  position: absolute; top: 16px; left: 16px; background: #F5EFE6; color: #13241F;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 7px 11px;
}
.listing-card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.listing-card__place { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #7E6020; font-weight: 600; }
.listing-card__name { margin: 0; font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 25px; line-height: 1.15; }
.listing-card__specs { margin: 0; font-size: 14px; color: #5A6460; }
.listing-card__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: auto; padding-top: 16px; border-top: 1px solid #EADDD6;
}
.listing-card__price { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 600; }
.listing-card__more { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #7E6020; }
/* Keep 3-up rows even when the last row is short */
#results .listing-card, #featured-listings .listing-card, #similar .listing-card { max-width: calc((100% - 56px) / 3); min-width: min(340px, 100%); }
@media (max-width: 1140px) { #results .listing-card, #featured-listings .listing-card, #similar .listing-card { max-width: calc((100% - 28px) / 2); } }
@media (max-width: 760px)  { #results .listing-card, #featured-listings .listing-card, #similar .listing-card { max-width: 100%; } }

/* ---------- Pagination ---------- */
#pagination a, #pagination span.page-gap {
  min-width: 44px; min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #D8C5BE; color: #13241F; text-decoration: none; font-size: 14px;
}
#pagination span.page-gap { border: 0; }
#pagination a[aria-current="page"] { background: #13241F; color: #F5EFE6; border-color: #13241F; font-weight: 600; }
#pagination a[aria-disabled="true"] { color: #8E9C95; pointer-events: none; }

/* ---------- Listing page gallery ---------- */
.gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.gallery-main {
  position: relative; height: 540px; border: 0; padding: 0; background: #2A4A40; cursor: zoom-in; overflow: hidden;
}
.gallery-main img, .gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-empty { color: #A9BFB4; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }
.gallery-thumbs { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 265px; gap: 10px; }
.gallery-thumbs button { position: relative; border: 0; padding: 0; background: #E2C2C5; cursor: zoom-in; overflow: hidden; }
.gallery-more {
  position: absolute; right: 12px; bottom: 12px; background: #13241F; color: #F5EFE6;
  padding: 10px 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
}
@media (max-width: 860px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery-main { height: 320px; }
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 80px; }
}

.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(8,16,13,0.94); display: none; align-items: center; justify-content: center; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 84vh; object-fit: contain; }
.lightbox button {
  position: absolute; width: 52px; height: 52px; border: 0; border-radius: 999px;
  background: rgba(245,239,230,0.12); color: #F5EFE6; font-size: 26px; cursor: pointer;
}
.lightbox .lb-close { top: 20px; right: 20px; }
.lightbox .lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #D3DCD7; font-size: 13px; letter-spacing: 0.16em; }

.amenities { margin: 0; padding: 0; list-style: none; columns: 3 200px; column-gap: 28px; font-size: 15px; color: #3E4A45; }
.amenities li { break-inside: avoid; display: flex; gap: 10px; align-items: center; padding: 5px 0; }
.amenities li::before { content: ""; flex: none; width: 14px; height: 8px; border-left: 2px solid #7E6020; border-bottom: 2px solid #7E6020; transform: rotate(-45deg) translateY(-2px); }
.map iframe { width: 100%; height: 360px; border: 0; display: block; }
.prose p { margin: 0 0 1em; }
.prose p:last-child { margin-bottom: 0; }

/* ---------- Forms ---------- */
.form-status { flex: 1 1 100%; margin: 0; font-size: 14px; line-height: 1.6; min-height: 1em; }
.form-status.is-ok { color: #2E6B4F; font-weight: 600; }
.form-status.is-error { color: #A33A2A; font-weight: 600; }
form[aria-busy="true"] button[type="submit"] { opacity: 0.6; pointer-events: none; }

@media (max-width: 640px) {
  h1 { word-break: break-word; }
}

[hidden] { display: none !important; }
.seg { color: #13241F; background: transparent; transition: background 0.2s ease, color 0.2s ease; }
.seg:has(input:checked) { background: #13241F; color: #F5EFE6; }
.seg input { accent-color: #D9BA79; }
@media (max-width: 640px) {
  .hero-panel { padding: 26px 20px 28px !important; }
  .price-col { align-items: flex-start !important; }
}

/* Development units on the listing page */
.units { display: flex; flex-direction: column; border-top: 1px solid #E7D9D2; }
.unit-row {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto 20px; gap: 16px; align-items: center;
  padding: 18px 4px; border-bottom: 1px solid #E7D9D2; color: #13241F; text-decoration: none; min-height: 44px;
}
.unit-row:hover { background: #FBF8F2; color: #13241F; }
.unit-name { font-family: 'Cormorant Garamond', serif; font-size: 22px; line-height: 1.2; }
.unit-specs { font-size: 14px; color: #5A6460; }
.unit-price { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; white-space: nowrap; }
.unit-more { color: #7E6020; }
@media (max-width: 640px) { .unit-row { grid-template-columns: 1fr auto; } .unit-specs { grid-column: 1; } .unit-more { display: none; } }