/* =============================================================================
   Energia Residence — Apartment catalog (mobile-first)
   Consumes child-theme design tokens (--en-*). Degrades cleanly without them.
   ============================================================================= */

.en-catalog { --gap: var(--en-sp-5, 1.5rem); }
.en-catalog__title { font-size: var(--en-fs-800, 2rem); margin: 0 0 var(--en-sp-5, 1.5rem); }

/* Layout: single column on mobile, sidebar on ≥1024px */
.en-catalog__layout { display: grid; gap: var(--gap); }
@media (min-width: 1024px) {
  .en-catalog__layout { grid-template-columns: 300px 1fr; align-items: start; }
  .en-catalog__aside { position: sticky; top: var(--en-sp-5, 1.5rem); }
}

/* --- Filters --- */
.en-catalog__filter-toggle { width: 100%; margin-bottom: var(--en-sp-3, .75rem); }
@media (min-width: 1024px) { .en-catalog__filter-toggle { display: none; } }

/* On mobile the panel is collapsible; JS toggles [hidden]. Default shown when no JS. */
.en-js .en-catalog__filters[hidden] { display: none; }
.en-catalog__filters {
  background: var(--en-white, #fff); border: var(--en-border, 1px solid #e7e4df);
  border-radius: var(--en-radius, 12px); padding: var(--en-sp-4, 1rem);
}
.en-filters__row { display: grid; gap: var(--en-sp-4, 1rem); margin-bottom: var(--en-sp-4, 1rem); }
@media (min-width: 480px) and (max-width: 1023px) {
  .en-filters__row { grid-template-columns: repeat(2, 1fr); }
}
.en-filters__group { min-width: 0; }
/* Blocksy's own base stylesheet ships "legend { padding: 0 15px;
   margin-left: -15px; }" as a matched pair — the negative margin exists
   only to cancel out that padding so a plain legend still sits flush.
   We already zero the padding below (higher specificity, 0,1,1 vs
   Blocksy's 0,0,1, wins), but without also zeroing the margin here the
   pairing breaks: the padding is gone but the -15px margin isn't,
   shifting "Camere"/"Bloc" 15px left of every other filter title
   ("Suprafață utilă (m²)", "Etaj", "Sortează", which use a <label> and
   never had Blocksy's legend rule apply to them at all). Resetting
   margin here brings legend and label to the exact same left edge. */
.en-filters__group legend, .en-filters__label {
  font-weight: var(--en-fw-semi, 600); font-size: var(--en-fs-300, .875rem);
  margin: 0 0 var(--en-sp-2, .5rem); display: block; padding: 0;
}
fieldset.en-filters__group { border: 0; padding: 0; margin: 0; }

.en-chips { display: flex; flex-wrap: wrap; gap: var(--en-sp-2, .5rem); }
.en-chip { position: relative; }
.en-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.en-chip span {
  display: inline-flex; align-items: center; gap: .3em;
  padding: .4em .8em; border: 1px solid var(--en-grey-line, #e7e4df);
  border-radius: var(--en-radius-pill, 999px); font-size: var(--en-fs-300, .875rem);
  cursor: pointer; transition: background-color var(--en-dur-1, .14s), border-color var(--en-dur-1, .14s);
  min-height: 40px;
}
.en-chip input:hover + span { border-color: var(--en-anthracite, #1e2124); }
.en-chip input:checked + span { background: var(--en-accent-strong, #a65e1f); border-color: var(--en-accent-strong, #a65e1f); color: #fff; }
.en-chip input:focus-visible + span { outline: var(--en-focus-ring, 3px solid #c6772f); outline-offset: 2px; }
.en-chip small { opacity: .75; }

.en-range { display: flex; align-items: center; gap: var(--en-sp-2, .5rem); }
.en-range input { width: 100%; min-height: 44px; padding: 0 .6em; border: 1px solid var(--en-grey-line, #e7e4df); border-radius: var(--en-radius-sm, 6px); font: inherit; }
.en-filters__group select { width: 100%; min-height: 44px; border: 1px solid var(--en-grey-line, #e7e4df); border-radius: var(--en-radius-sm, 6px); font: inherit; padding: 0 .5em; background: #fff; }
.en-filters__note { font-size: var(--en-fs-300, .875rem); color: var(--en-grey-mut, #6b6a67); margin: .4em 0 0; }

.en-filters__actions { display: flex; flex-wrap: wrap; gap: var(--en-sp-3, .75rem); align-items: center; }
.en-check { display: inline-flex; align-items: center; gap: .5em; font-size: var(--en-fs-300, .875rem); }
.en-filters__submit { flex: 1 1 auto; }
.en-js .en-filters__submit { display: none; } /* auto-apply when JS on */

/* --- Results --- */
.en-results__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--en-sp-4, 1rem); }
.en-results__count { margin: 0; color: var(--en-grey-mut, #6b6a67); }
.en-results__count strong { color: var(--en-anthracite, #1e2124); font-size: 1.1em; }

.en-results__grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 560px) { .en-results__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .en-results__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .en-results__grid { grid-template-columns: repeat(3, 1fr); } }

.en-catalog__main[aria-busy="true"] { opacity: .55; transition: opacity var(--en-dur-2, .24s); }

/* --- Card --- */
.en-ap { display: flex; flex-direction: column; }
.en-ap__media { position: relative; aspect-ratio: 4 / 3; background: var(--en-cream, #f2eee8); overflow: hidden; }
.en-ap__media img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 6%; }
.en-ap__noplan { position: absolute; inset: 0; display: grid; place-items: center; }
.en-ap__status { position: absolute; top: 10px; left: 10px; }
.en-ap__rooms-pill {
  position: absolute; top: 10px; right: 10px; background: rgba(30,33,36,.82); color: #fff;
  font-size: var(--en-fs-300, .875rem); font-weight: 600; padding: .3em .7em; border-radius: var(--en-radius-pill, 999px);
}
.en-ap__body { display: flex; flex-direction: column; gap: var(--en-sp-3, .75rem); padding: var(--en-sp-4, 1rem); flex: 1; }
.en-ap__title { font-size: var(--en-fs-500, 1.125rem); margin: 0; }
.en-ap__specs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--en-sp-2, .5rem) var(--en-sp-4, 1rem); }
.en-ap__specs li { display: flex; justify-content: space-between; align-items: center; gap: .5em; font-size: var(--en-fs-300, .875rem); border-bottom: 1px dotted var(--en-grey-line, #e7e4df); padding-bottom: .3em; }
.en-ap__k { display: inline-flex; align-items: center; gap: .35em; color: var(--en-grey-mut, #6b6a67); }
.en-ap__v { font-weight: 600; text-align: right; }

/* Predictable, centered height for the price line regardless of whether it
   shows a real amount or the "Preț la cerere" fallback — keeps card footers
   aligned across a row of mixed priced/on-request cards. */
.en-ap__price, .energia-apartment-price {
  font-size: var(--en-fs-600, 1.4rem); font-weight: 700; color: var(--en-accent-strong, #a65e1f);
  margin: 0; min-height: 1.6em; display: flex; align-items: center; justify-content: center; text-align: center;
}
.en-ap__price.is-hidden, .energia-apartment-price--on-request {
  font-size: var(--en-fs-300, .875rem); color: var(--en-grey-mut, #6b6a67); font-weight: 600;
}

.en-ap__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--en-sp-2, .5rem); }
/* Every action — the two CTA links AND the <details> wrapper around "Vezi
   detalii" — is sized equally as a flex item, so all three stay the same
   width/height no matter the card's title length. The <details> element
   itself no longer forces width:100% (that was pushing it onto its own row
   while the summary button inside sized to content, leaving it small and
   left-aligned instead of matching the other two buttons). */
.en-ap__actions > .en-btn, .en-ap__actions > .en-ap__details { flex: 1 1 auto; }
.en-ap__details > summary.en-btn { width: 100%; list-style: none; }
.en-ap__details > summary::-webkit-details-marker { display: none; }
.en-ap__panel { margin-top: var(--en-sp-3, .75rem); }
.en-js .en-ap__details[open] > .en-ap__panel { /* when JS opens the modal instead, hide inline */ }
.en-js .en-ap__panel { display: none; }          /* JS shows content in the modal */
.en-ap__details:not([open]) .en-ap__panel { display: none; }

/* --- Sketch carousel (drawer) ---
   Base markup works with zero JS: the viewport is a native horizontal
   scroll-snap strip, so touch swipe / scrollbar drag always work even
   before catalog.js binds the prev/next buttons, keyboard nav and counter. */
.en-carousel { position: relative; margin: 0 0 var(--en-sp-4, 1rem); border-radius: var(--en-radius, 12px); overflow: hidden; background: var(--en-cream, #f2eee8); }
.en-carousel__viewport {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; aspect-ratio: 4 / 3;
}
.en-carousel__viewport::-webkit-scrollbar { display: none; }
.en-carousel__slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; place-items: center; }
.en-carousel__slide img, .en-carousel--single img {
  width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 4%; cursor: zoom-in;
}
.en-carousel--single { aspect-ratio: 4 / 3; }
.en-carousel--empty { aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--en-sp-2, .5rem); color: var(--en-grey-mut, #6b6a67); }

.en-carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--en-anthracite, #1e2124);
  display: none; align-items: center; justify-content: center;
}
.en-js .en-carousel__nav { display: flex; } /* button-based nav needs JS to act; scroll-snap swipe already works without it */
.en-carousel__nav--prev { left: var(--en-sp-2, .5rem); }
.en-carousel__nav--next { right: var(--en-sp-2, .5rem); }
.en-carousel__nav:disabled { opacity: .35; cursor: default; }
.en-carousel__counter {
  position: absolute; bottom: var(--en-sp-2, .5rem); right: var(--en-sp-2, .5rem); z-index: 1;
  background: rgba(30,33,36,.72); color: #fff; font-size: var(--en-fs-300, .875rem); font-weight: 600;
  padding: .2em .7em; border-radius: var(--en-radius-pill, 999px);
}

/* Lightbox/zoom overlay — plain fixed layer inside the already-open, already
   focus-trapped <dialog>, so it inherits that focus trap for free instead of
   nesting a second native dialog. */
.en-lightbox {
  position: fixed; inset: 0; z-index: var(--en-z-popup, 1000); display: none;
  align-items: center; justify-content: center; background: rgba(15,16,18,.92); padding: var(--en-sp-5, 1.5rem);
}
.en-lightbox.is-open { display: flex; }
.en-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.en-lightbox__close {
  position: absolute; top: var(--en-sp-4, 1rem); right: var(--en-sp-4, 1rem);
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--en-anthracite, #1e2124);
  display: flex; align-items: center; justify-content: center;
}

/* --- Detail body --- */
.en-detail__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--en-sp-2, .5rem) var(--en-sp-4, 1rem); margin: var(--en-sp-3,.75rem) 0; }
.en-detail__grid > div { display: flex; flex-direction: column; }
.en-detail__grid dt { color: var(--en-grey-mut, #6b6a67); font-size: var(--en-fs-300, .875rem); margin: 0; }
.en-detail__grid dd { margin: 0; font-weight: 600; }
.en-detail__rooms p, .en-detail__dotari p { color: var(--en-ink-2, #33373b); }
.en-detail__cta { display: flex; flex-wrap: wrap; gap: var(--en-sp-2, .5rem); margin-top: var(--en-sp-4, 1rem); }
.en-detail__cta .en-btn { flex: 1 1 auto; }

/* --- Pager / empty --- */
.en-results__pager { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; margin-top: var(--en-sp-6, 2rem); }
.en-results__pager a, .en-results__pager span { padding: .5em .9em; border: 1px solid var(--en-grey-line, #e7e4df); border-radius: var(--en-radius-sm, 6px); text-decoration: none; }
.en-results__pager a { display: inline-flex; align-items: center; gap: .35em; }
.en-results__pager .current { background: var(--en-anthracite, #1e2124); color: #fff; border-color: var(--en-anthracite, #1e2124); }
.en-results__empty { text-align: center; padding: var(--en-sp-8, 4rem) var(--en-sp-4, 1rem); }

/* --- Modal drawer --- */
.en-modal { border: 0; border-radius: var(--en-radius-lg, 20px); padding: 0; width: min(640px, 94vw); max-height: 90vh; box-shadow: var(--en-shadow-lg, 0 12px 40px rgba(30,33,36,.14)); }
.en-modal::backdrop { background: rgba(30,33,36,.5); }
.en-modal__bar { position: sticky; top: 0; display: flex; justify-content: flex-end; padding: var(--en-sp-2, .5rem); background: #fff; border-bottom: var(--en-border, 1px solid #e7e4df); }
.en-modal__close { border: 0; background: var(--en-cream, #f2eee8); width: 40px; height: 40px; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.en-modal__content { padding: var(--en-sp-5, 1.5rem); overflow: auto; }

@media (min-width: 768px) {
  /* Right-side, full-height drawer — the apartment DETAILS panel only
     (carousel + specs + description can genuinely run long). The offer
     popup below is deliberately excluded: it's a short lead form and gets
     its own centered, content-height sizing instead. */
  #en-ap-modal.en-modal { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; border-radius: 20px 0 0 20px; width: min(520px, 96vw); }
}

/* --- "Solicită oferta" popup: always a centered dialog sized to its own
   content, on mobile AND desktop — never the full-height right-side drawer
   above (that treatment made sense for the long details panel, not a
   handful of short fields). `dvh` (not `vh`) accounts for mobile browser
   chrome; the safe-area terms keep the close button clear of notches/home
   indicators. Height is intentionally NOT set — the dialog sizes to its
   actual content and simply caps at max-height, so a short form has zero
   artificial empty space, and a form taller than the viewport scrolls
   inside .en-modal__content instead of overflowing the screen. */
#en-offer-modal.en-modal {
  margin: auto;
  width: min(480px, calc(100vw - 2rem));
  max-height: min(
    calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)),
    calc(100vh - 2rem)
  );
}
@media (max-width: 479px) {
  #en-offer-modal.en-modal { width: calc(100vw - 1.5rem); }
  #en-offer-modal .en-modal__content { padding: var(--en-sp-4, 1rem); }
  #en-offer-modal textarea { min-height: 100px; }
}

/* --- Solicită oferta popup (shares .en-modal chrome) --- */
.en-offer-form__context {
  background: var(--en-accent-tint, #f7ecdf); border: 1px solid var(--en-accent, #c6772f);
  border-radius: var(--en-radius, 12px); padding: var(--en-sp-3, .75rem) var(--en-sp-4, 1rem);
  margin-bottom: var(--en-sp-4, 1rem);
}
.en-offer-form__eyebrow { font-size: var(--en-fs-300, .875rem); font-weight: 600; color: var(--en-accent-strong, #a65e1f); margin: 0 0 .2em; text-transform: uppercase; letter-spacing: .03em; }
.en-offer-form__summary { font-size: var(--en-fs-500, 1.125rem); font-weight: 700; margin: 0 0 .2em; color: var(--en-anthracite, #1e2124); }
.en-offer-form__cod { font-size: var(--en-fs-300, .875rem); color: var(--en-grey-mut, #6b6a67); margin: 0; }

/* Body scroll lock while any modal/popup is open */
body.en-scroll-lock { overflow: hidden; }