/*
 * Minimal fallback styling.
 * Recommended: move these rules into Oxygen -> Manage -> Stylesheets (they are
 * global and always enqueued), then this file can be emptied. The class names
 * survive into Phase 3, so a card rebuilt as an Oxygen Repeater keeps the design.
 */
/* One horizontal track instead of a wrapping grid: N cards visible, the rest
   reachable with the arrows. --apr-cols is how many fit; the card width is
   derived from it so the gap maths stays correct at every breakpoint. */
.apr-carousel{position:relative;--apr-cols:4;--apr-gap:1.5rem}
.apr-carousel--1{--apr-cols:1}
.apr-carousel--2{--apr-cols:2}
.apr-carousel--3{--apr-cols:3}
.apr-carousel--4{--apr-cols:4}
.apr-track{display:flex;gap:var(--apr-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding:4px 4px 8px}
.apr-track::-webkit-scrollbar{display:none}
.apr-track>*{flex:0 0 calc((100% - (var(--apr-cols) - 1) * var(--apr-gap)) / var(--apr-cols));scroll-snap-align:start}
@media(max-width:1200px){.apr-carousel{--apr-cols:3}}
@media(max-width:900px){.apr-carousel{--apr-cols:2;--apr-gap:1rem}}
/* 1.15 on phones deliberately leaves the next card peeking, so it reads as scrollable */
@media(max-width:640px){.apr-carousel{--apr-cols:1.15;--apr-gap:.75rem}}

.apr-arrow{position:absolute;top:calc(50% - 1.5rem);transform:translateY(-50%);z-index:2;width:44px;height:44px;
  border:0;border-radius:50%;background:#fff;color:#111;box-shadow:0 2px 10px rgba(0,0,0,.22);
  font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.apr-arrow:hover{background:#f3f3f3}
.apr-arrow[disabled]{opacity:.35;cursor:default}
.apr-arrow--prev{left:-14px}
.apr-arrow--next{right:-14px}
.apr-carousel[data-fits] .apr-arrow{display:none}
@media(max-width:640px){.apr-arrow{display:none}}
@media(max-width:1024px){.apr-grid--3,.apr-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.apr-grid{grid-template-columns:1fr!important}}

.apr-card{display:block;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08);text-decoration:none;color:inherit;transition:box-shadow .2s,transform .2s}
a.apr-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateY(-2px)}
.apr-card--sold{opacity:.85}

/* The ASPECT RATIO LIVES ON THE IMAGE, not on the container.
   Photos come back 3:2 (1366x911) while the card box is 4:3. Sizing the
   container and stretching the image inside it fails whenever a theme ships
   the very common `img { height: auto !important }` — the image then keeps its
   natural height and the container's background shows as a grey strip beneath.
   Letting the image define its own box means the container can never be taller
   than the image, so no gap is possible regardless of theme CSS.
   line-height:0 kills the inline descender space, the other classic 4px gap. */
.apr-card__media{position:relative;overflow:hidden;background:#f2f2f2}
.apr-card__img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin:0}
.apr-card__img--placeholder{width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,#eee,#ddd)}

.apr-badge{position:absolute;top:.75rem;left:.75rem;padding:.3rem .7rem;border-radius:999px;font-size:.75rem;line-height:1.4;font-weight:600;letter-spacing:.02em;color:#fff;background:#333;white-space:nowrap}
.apr-badge--sold{background:#b3261e}
.apr-badge--reserved{background:#e0a200}

.apr-card__body{padding:1rem}
.apr-card__title{margin:0 0 .35rem;font-size:1.05rem;line-height:1.35}
.apr-card__meta{margin:0 0 .5rem;font-size:.875rem;opacity:.7}
.apr-card__price{margin:0;font-weight:700;font-size:1.05rem}

.apr-empty{padding:2rem;text-align:center;opacity:.6}

/* --- card CTA + detail page --- */
.apr-card__cta{display:inline-block;margin-top:.75rem;font-size:.875rem;text-decoration:underline;text-underline-offset:2px}

.apr-detail{max-width:1100px;margin:0 auto}
.apr-detail__title{margin:0 0 .5rem}
.apr-detail__meta{margin:0 0 .5rem;opacity:.75;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.apr-detail__meta .apr-badge{position:static}
.apr-detail__price{margin:0 0 1.5rem;font-weight:700;font-size:1.35rem}
.apr-detail__text{margin-bottom:2rem;line-height:1.6}
.apr-detail__gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.apr-detail__gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
@media(max-width:640px){.apr-detail__gallery{grid-template-columns:repeat(2,1fr)}}
.apr-detail__h2{margin:2rem 0 .75rem;font-size:1.25rem}
.apr-detail__params{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.5rem;margin:0 0 2rem}
.apr-detail__params dt{opacity:.65}
.apr-detail__params dd{margin:0;font-weight:600}
@media(max-width:480px){.apr-detail__params{grid-template-columns:1fr;gap:0 0}
  .apr-detail__params dt{margin-top:.6rem}}

/* =========================================================== detail: layout */
/* Clears the fixed site header, which the h1 was tucking underneath. */
.apr-detail{padding-top:2.5rem}
.apr-detail__head{margin-bottom:2rem}

.apr-detail__cols{display:flex;gap:2.5rem;align-items:flex-start}
/* min-width:0 lets the text column shrink; without it long words force overflow. */
.apr-detail__main{flex:1 1 65%;min-width:0}
.apr-detail__side{flex:0 0 35%;min-width:0}
@media(max-width:900px){
  .apr-detail__cols{flex-direction:column;gap:2rem}
  .apr-detail__main,.apr-detail__side{flex:1 1 auto;width:100%}
}

/* =========================================================== detail: params */
.apr-params{background:#B40101;color:#fff;padding:1.5rem;border-radius:12px;margin-bottom:1.5rem}
.apr-params__title{margin:0 0 1rem;font-size:1.15rem;color:#fff}
.apr-params dl{display:grid;grid-template-columns:1fr auto;gap:0;margin:0}
.apr-params dt,.apr-params dd{padding:.5rem 0;border-top:1px solid rgba(255,255,255,.22)}
.apr-params dt:first-of-type,.apr-params dd:first-of-type{border-top:0}
.apr-params dt{opacity:.85;padding-right:1rem}
.apr-params dd{margin:0;font-weight:600;text-align:right}

/* ============================================================= detail: form */
.apr-form{background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:1.5rem}
.apr-form__title{margin:0 0 .35rem;font-size:1.15rem}
.apr-form__lead{margin:0 0 1rem;font-size:.9rem;opacity:.7}
.apr-form__form label{display:block;margin-bottom:.75rem}
.apr-form__form label>span{display:block;font-size:.85rem;margin-bottom:.25rem;opacity:.8}
.apr-form__form label>span b{color:#B40101}
.apr-form__form input,.apr-form__form textarea{width:100%;padding:.6rem .7rem;border:1px solid #d5d5d5;border-radius:8px;font:inherit;background:#fff}
.apr-form__form input:focus,.apr-form__form textarea:focus{outline:2px solid #B40101;outline-offset:1px;border-color:#B40101}
.apr-form__submit{width:100%;padding:.75rem 1rem;border:0;border-radius:8px;background:#B40101;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.apr-form__submit:hover{background:#8f0101}
.apr-form__submit:disabled{opacity:.6;cursor:default}
.apr-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.apr-form__status{margin:.75rem 0 0;font-size:.9rem;min-height:1.2em}
.apr-form__status.is-ok{color:#0a7d32;font-weight:600}
.apr-form__status.is-error{color:#B40101;font-weight:600}

/* ========================================================== detail: gallery */
.apr-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:3rem}
.apr-gallery__item{display:block;cursor:zoom-in;line-height:0;font-size:0}
.apr-gallery__item img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:opacity .15s}
.apr-gallery__item:hover img{opacity:.85}
@media(max-width:640px){.apr-gallery{grid-template-columns:repeat(2,1fr)}}

/* ========================================================= detail: lightbox */
.apr-lightbox{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center}
.apr-lightbox[hidden]{display:none}
.apr-lightbox__img{max-width:92vw;max-height:88vh;object-fit:contain;display:block}
.apr-lightbox__close{position:absolute;top:1rem;right:1.25rem;background:none;border:0;color:#fff;font-size:2.5rem;line-height:1;cursor:pointer;padding:.25rem .5rem}
.apr-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.35);border:0;color:#fff;font-size:3rem;line-height:1;cursor:pointer;padding:.25rem .9rem;border-radius:8px}
.apr-lightbox__nav:hover{background:rgba(0,0,0,.6)}
.apr-lightbox__nav--prev{left:1rem}
.apr-lightbox__nav--next{right:1rem}
.apr-lightbox__counter{position:absolute;bottom:1.25rem;left:50%;transform:translateX(-50%);color:#fff;font-size:.9rem;opacity:.8}
@media(max-width:640px){.apr-lightbox__nav{font-size:2rem;padding:.25rem .6rem}}

/* ============================================================== detail: map */
.apr-map{margin-top:1.5rem}
.apr-map__title{margin:0 0 .6rem;font-size:1.15rem}
.apr-map__frame{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid #e5e5e5}
.apr-map__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.apr-map__link{display:inline-block;margin-top:.5rem;font-size:.875rem;color:#B40101}
.apr-form__privacy{margin:.25rem 0 1rem;font-size:.78rem;line-height:1.45;opacity:.7}
.apr-form__privacy a{color:#B40101;text-decoration:underline}