/* =============================================================================
   Energia Residence — Homepage (flagship) section styles.
   Structure + content live in Elementor (editable); this file carries the fine
   visual design (following the approved mockups) via classes attached to the
   Elementor sections/widgets. Loaded only on the front page.
   ============================================================================= */

/* Header is left to Blocksy (solid brand bar). Hero sits directly below it. */

/* ================= Gallery (Elementor image-gallery) ================= */
.elementor-widget-image-gallery .gallery { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 1.5rem 0 0; }
.elementor-widget-image-gallery .gallery-item { width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.elementor-widget-image-gallery .gallery img {
  width: 100% !important; aspect-ratio: 4 / 3; object-fit: cover; height: auto !important;
  border: 0 !important; border-radius: var(--en-radius); display: block;
}
.elementor-widget-image-gallery .gallery-icon { height: 100%; display: block; }
@media (max-width: 600px) { .elementor-widget-image-gallery .gallery { grid-template-columns: repeat(2, 1fr); } }

/* Location image column (rendered as column background for reliability) */
.enh-loc-img { min-height: 360px; background-size: cover; background-position: center; border-radius: var(--en-radius-lg); }
@media (max-width: 767px) { .enh-loc-img { min-height: 240px; } }

/* ================= Legal / long-form text ================= */
.enh-legal-text { max-width: 820px; margin-inline: auto; }
.enh-legal-text p { margin: 0 0 1rem; line-height: 1.7; color: var(--en-ink-2); }
.enh-legal-text :is(h2,h3,h4) { margin: 1.8rem 0 .6rem; }
.enh-legal-text ul, .enh-legal-text ol { margin: 0 0 1rem 1.2rem; }
.enh-legal-text li { margin-bottom: .4rem; }
.enh-legal-text a { color: var(--en-accent-strong); }

/* ================= Section shell ================= */
.enh-section { padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem); }
.enh-dark { background: var(--en-green-900); color: var(--en-on-green); }
.enh-dark :is(h1,h2,h3,h4,h5) { color: #fff; }
.enh-light { background: var(--en-warm-white); color: var(--en-anthracite); }
.enh-cream { background: var(--en-cream); }

.enh-eyebrow {
  font-family: var(--en-font-body); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; font-size: .78rem; color: var(--en-accent);
  margin: 0 0 .8rem;
}
.enh-dark .enh-eyebrow { color: var(--en-accent); }
.enh-title { font-family: var(--en-font-head); line-height: 1.12; letter-spacing: -.01em; }
.enh-accent { color: var(--en-accent); font-style: italic; }

/* ================= PAGE HERO (interior pages) ================= */
.enh-pagehero { position: relative; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.enh-pagehero::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(20,48,42,.74) 0%, rgba(20,48,42,.64) 50%, rgba(20,48,42,.86) 100%); }
.enh-pagehero > .elementor-container { position: relative; z-index: 2; }
.enh-pagehero__title { font-family: var(--en-font-head); color: #fff;
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); margin: 0 0 .5rem;
  text-shadow: 0 2px 18px rgba(20,48,42,.55); }
.enh-pagehero__crumb { color: var(--en-on-green-mut); font-size: .95rem; }
.enh-pagehero__crumb a { color: #fff; text-decoration: none; }
.enh-pagehero__crumb a:hover { color: var(--en-accent); }
.enh-accent-rule { width: 60px; height: 3px; background: var(--en-accent); border: 0; margin: .2rem 0 1rem; }

/* ================= HERO ================= */
.enh-hero { position: relative; min-height: clamp(560px, 88vh, 860px);
  display: flex; align-items: center; color: #fff; overflow: hidden; }
.enh-hero::before { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20,48,42,.86) 0%, rgba(20,48,42,.62) 42%, rgba(20,48,42,.18) 100%),
    linear-gradient(0deg, rgba(20,48,42,.85) 0%, rgba(20,48,42,0) 40%);
  z-index: 1; }
.enh-hero > .elementor-container,
.enh-hero .elementor-widget-wrap { position: relative; z-index: 2; }
.enh-hero__title { font-family: var(--en-font-head); color: #fff;
  font-size: clamp(2.4rem, 1.6rem + 4.2vw, 4.4rem); line-height: 1.08; margin: 0 0 1.1rem; max-width: 15ch;
  text-shadow: 0 2px 20px rgba(20,48,42,.5); }
.enh-hero__lead { font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); color: #f2efe9;
  max-width: 42ch; margin: 0 0 2rem; }
.enh-hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; }
/* Two hero buttons are separate widgets — keep them inline. */
.enh-hero .elementor-widget-button { display: inline-block; width: auto; vertical-align: top; margin: .3rem .7rem .3rem 0; }
.enh-lead .enh-benefit-list ul { grid-template-columns: 1fr; }

/* ================= STATS BAR ================= */
.enh-stats { background: var(--en-green-800); }
.enh-stats .elementor-container { border-radius: 0; }
.enh-stat { text-align: left; padding: .4rem 0; }
.enh-stat__num { font-family: var(--en-font-head); font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  color: #fff; line-height: 1; }
.enh-stat__label { color: var(--en-on-green-mut); font-size: .95rem; margin-top: .3rem; }
.enh-stat--divider { border-inline-start: 1px solid rgba(255,255,255,.14); padding-inline-start: 1.4rem; }

/* ================= TYPE CARDS (dark) ================= */
.enh-typecard { background: var(--en-green-800); border: 1px solid var(--en-green-700);
  border-radius: var(--en-radius-lg); padding: 2rem 1.5rem; text-align: center; height: 100%; }
.enh-typecard h3 { font-family: var(--en-font-body); text-transform: uppercase; letter-spacing: .08em;
  font-size: 1.15rem; color: #fff; margin: 1rem 0 .4rem; font-weight: 700; }
.enh-typecard p { color: var(--en-on-green-mut); margin: 0 0 1.3rem; }
.enh-typecard .enh-type-ico { width: 56px; height: 56px; color: var(--en-accent); }

/* ================= BENEFITS ================= */
.enh-benefit-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem 2rem; }
@media (min-width: 700px) { .enh-benefit-list ul { grid-template-columns: 1fr 1fr; } }
.enh-benefit-list li { display: flex; gap: .7rem; align-items: flex-start; }
.enh-benefit-list li::before { content: "✓"; flex: 0 0 auto; width: 1.4em; height: 1.4em;
  display: grid; place-items: center; border-radius: 50%; background: var(--en-status-available);
  color: #fff; font-size: .8em; font-weight: 700; margin-top: .1em; }
.enh-benefit-card { background: #fff; border: 1px solid var(--en-grey-line);
  border-radius: var(--en-radius); padding: 1.6rem 1.2rem; text-align: center; height: 100%; }
.enh-benefit-card svg, .enh-benefit-card .enh-type-ico { width: 40px; height: 40px; color: var(--en-accent); margin-bottom: .8rem; }

/* ================= BLOC SELECTOR (Energia 3 "Alege blocul") ================= */
.en-bloc-selector { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: start; }
/* aspect-ratio lives on the container (not the <img>s) because the two
   crossfade layers below are position:absolute — an absolutely-positioned
   element can't contribute its own aspect-ratio to establish the parent's
   height, so the container itself must reserve the box. This is also what
   keeps the visual from ever changing size while blocks are switched.
   16:10 (not 4:3) — the source renders are ~16:9; a 4:3 box needs 25% of
   the image's WIDTH cropped away by object-fit:cover (12.5% off each
   side), which was enough to push a highlight near either edge (like
   Bloc 6's, measured at just 1–10% from the image's left edge) almost
   entirely out of frame. At 16:10 only ~10% of the width is ever cropped
   (~5% per side), and — because 16:10 is narrower than the 16:9 source —
   0% of the HEIGHT is ever cropped, so object-position-y never matters. */
.en-bloc-selector__visual { position: relative; border-radius: var(--en-radius-lg); overflow: hidden; background: var(--en-cream); aspect-ratio: 16 / 10; }
/* Two stacked layers crossfade between block images (bloc-selector.js): the
   incoming layer's src loads while hidden, then both opacities swap
   together — the visible layer is never blank, so there's no white flash.
   Specificity note (same recurring pattern as the render-mosaic fix above):
   Elementor core's frontend.css ships a plain ".elementor img { height:
   auto }" at (0,1,1) specificity, which otherwise beats a single-class
   ".en-bloc-selector__visual-img { height:100% }" at (0,1,0) — the image
   then falls back to its natural aspect ratio instead of filling the
   container, leaving a visible gap of background color under a shorter
   image. Repeating the class pushes this to (0,2,0), safely above it.
   object-position comes from two CSS custom properties (set inline per
   block, in class-bloc-selector.php and bloc-selector.js) so desktop and
   mobile can use different focal points without extra classes — each
   image's crop needs a different horizontal focal point since the
   red-highlighted segment sits in a different place in every file. */
.en-bloc-selector__visual .en-bloc-selector__visual-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: var(--en-bloc-pos-desktop, 50% 50%);
  opacity: 0; transform: scale(1.02); transition: opacity .32s ease, transform .32s ease;
}
@media (max-width: 1023px) {
  /* Matches the 1023px aspect-ratio/stacking threshold below — the "mobile"
     focal point is really "whichever breakpoint uses the 4:3 container". */
  .en-bloc-selector__visual .en-bloc-selector__visual-img { object-position: var(--en-bloc-pos-mobile, 50% 50%); }
}
.en-bloc-selector__visual-img.is-visible { opacity: 1; transform: scale(1); z-index: 1; }
/* z-index: 2 — strictly above the visible image layer (z-index:1). Without
   this the caption sat at its default z-index:auto, which per the CSS
   stacking algorithm ALWAYS paints behind any sibling with a positive
   z-index regardless of DOM order — the visible image layer silently
   covered the caption completely, on every load, not just after a click.
   Confirmed by getBoundingClientRect() + elementFromPoint() in a live
   browser: the image, not the caption, was the topmost element at the
   caption's own on-screen coordinates. */
/* Kept deliberately compact (not the original 3-line, ~100px-tall card):
   the container is now noticeably shorter than before (16:10 vs the old
   4:3), so a caption sized for the taller box occupied a big enough
   fraction of it to physically overlap Bloc 6's highlight, which — of all
   6 — sits lowest and furthest left in its source frame (measured Y up to
   77.3% down the image). The "Bloc selectat" eyebrow label was dropped
   (it's decorative context, not one of the 3 required fields — bloc name,
   status, and count all remain) to buy the vertical room needed to clear
   that corner without moving the card out of the bottom-left. */
.en-bloc-selector__caption {
  position: absolute; left: 1rem; bottom: 1rem; right: 1rem; max-width: 240px; z-index: 2;
  background: rgba(255,255,255,.96); padding: .5rem .75rem; border-radius: var(--en-radius);
  box-shadow: 0 10px 28px rgba(20,48,42,.18); display: flex; flex-direction: column; gap: .1rem;
}
.en-bloc-selector__caption strong { font-size: 1rem; line-height: 1.2; color: var(--en-anthracite); }
.en-bloc-selector__caption [data-en-bloc-caption-meta] { font-size: .78rem; line-height: 1.3; color: var(--en-grey-mut); }
@media (max-width: 480px) {
  /* At narrow phone widths the container's absolute height is small enough
     that even the compact caption above still grazed the last couple of
     percentage points of Bloc 6's highlight bounds (measured: caption top
     at 75.1% of container height vs. the highlight's 77.3% bottom edge —
     a ~6px overlap). Shaving a little more off padding/line-height here
     clears it with margin, without shrinking the caption on wider phones/
     tablets where there was no overlap to begin with. */
  .en-bloc-selector__caption { padding: .3rem .55rem; gap: .05rem; }
  .en-bloc-selector__caption strong { font-size: .88rem; line-height: 1.05; }
  .en-bloc-selector__caption [data-en-bloc-caption-meta] { font-size: .68rem; line-height: 1.1; }
}

.en-bloc-selector__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
/* Specificity note: Elementor's site-wide kit CSS carries a
   ".elementor-kit-{id} button, ... .elementor-button { background: <accent> }"
   rule at (0,1,1) specificity that otherwise wins over a plain class
   selector at (0,1,0) and paints every raw <button> copper — repeating the
   class (a standard, harmless specificity bump, not a hack) pushes these
   rules to (0,2,0)/(0,3,0), safely above it regardless of stylesheet order.
   Border-width is a constant 2px in EVERY state (only its color ever
   changes) so an appearing/disappearing border never resizes the card. */
.en-bloc-selector__item.en-bloc-selector__item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 1.2rem .8rem; border: 2px solid var(--en-grey-line); border-radius: var(--en-radius);
  background-color: #fff; cursor: pointer; font: inherit; text-align: center; min-height: 108px;
  box-shadow: none; transform: translateY(0);
  transition: background-color var(--en-dur-1, .14s), color var(--en-dur-1, .14s),
    border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* The exact bug: the kit's ".elementor-kit-30382 button:hover, ...:focus
   {background-color:#8F4F18; color:#fff}" rule sits at (0,2,1) specificity —
   ONE HIGHER than our base rule's (0,2,0) — and our own :hover rule below
   only ever touched border-color, never background-color. Per-property
   cascade resolution means background-color was decided by comparing ALL
   rules that set it, and the kit's higher-specificity one won on :hover/
   :focus specifically, painting the button copper-brown with white text
   illegible against the (still copper) icon. Confirmed by computed-style
   measurement in a live browser: hover background was rgb(143,79,24)
   (#8F4F18) before this fix. Fixed by explicitly re-declaring
   background-color here so our rule's specificity is what's being compared. */
.en-bloc-selector__item.en-bloc-selector__item:focus {
  background-color: #fff;
}
.en-bloc-selector__item.en-bloc-selector__item:hover,
.en-bloc-selector__item.en-bloc-selector__item:focus-visible {
  background-color: #fff;
  border-color: var(--en-accent);
  box-shadow: 0 6px 16px rgba(192, 122, 69, .22);
  transform: translateY(-2px);
}
.en-bloc-selector__item.en-bloc-selector__item:focus-visible {
  outline: 2px solid var(--en-accent);
  outline-offset: 2px;
}
.en-bloc-selector__item.en-bloc-selector__item:hover .en-icon,
.en-bloc-selector__item.en-bloc-selector__item:focus-visible .en-icon {
  color: #96602c; /* deeper copper on hover/focus — stays legible, never the illegible fill */
}
.en-bloc-selector__item .en-icon { width: 26px; height: 26px; color: var(--en-accent); transition: color .2s ease; }
.en-bloc-selector__item-name { font-weight: 700; color: var(--en-anthracite); }
.en-bloc-selector__item-status { font-size: .74rem; color: var(--en-grey-mut); }
.en-bloc-selector__item-check {
  position: absolute; top: .5rem; right: .5rem; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; color: var(--en-green-900); display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.5); transition: opacity .18s ease, transform .18s ease;
}
.en-bloc-selector__item-check .en-icon { width: 13px; height: 13px; color: var(--en-green-900); }
/* Selected state stays clearly distinct from hover: solid brand fill (not
   just a border), permanent regardless of mouse position, PLUS the check —
   never relying on color alone. aria-checked (radiogroup pattern) carries
   the accessible state for screen readers. */
.en-bloc-selector__item.en-bloc-selector__item.is-active {
  background-color: var(--en-green-900); border-color: var(--en-green-900); box-shadow: none; transform: translateY(0);
}
.en-bloc-selector__item.is-active .en-bloc-selector__item-name { color: #fff; }
.en-bloc-selector__item.is-active .en-icon { color: #fff; }
.en-bloc-selector__item.is-active .en-bloc-selector__item-status { color: var(--en-on-green-mut); }
.en-bloc-selector__item.is-active .en-bloc-selector__item-check { opacity: 1; transform: scale(1); }
/* The exact "check only visible on hover" bug: both the building icon AND
   the checkmark glyph share the ".en-icon" class, so the general-purpose
   ".is-active .en-icon {color:#fff}" rule (0,3,0) — meant only for the
   BUILDING icon, to stay legible on the dark green active fill — was ALSO
   repainting the checkmark white, on a white circle: invisible by design,
   regardless of hover. The ":hover/:focus-visible .en-icon {color:#96602c}"
   rule above is even more specific (0,4,0) and would ALSO repaint the
   checkmark (copper-on-white, visible) whenever the mouse happened to be
   over the already-active card — which is exactly why the check appeared
   to "come and go with hover": it was never controlled by :hover, its
   COLOR was, as an unintended side effect of a same-class selector meant
   for a completely different icon. The checkmark's opacity/scale (the
   actual show/hide mechanism) was already correctly tied to .is-active
   only — this fixes the last visible symptom by force-pinning its color,
   at a higher specificity (0,5,0) than either rule above, regardless of
   hover/focus/active state. */
.en-bloc-selector__item.en-bloc-selector__item .en-bloc-selector__item-check.en-bloc-selector__item-check .en-icon {
  color: var(--en-green-900);
}
.en-bloc-selector__cta { width: 100%; margin-top: 1rem; }
@media (max-width: 1023px) {
  /* Threshold moved from 767px to 1023px after measuring the caption vs.
     each block's highlight bounds at all 4 required test widths (390/768/
     1366/1440): at 768px the OLD threshold left this section still on the
     2-column desktop grid (1.1fr/1fr of a 748px row), squeezing the image
     into a 375×234px box — smaller than the stacked mobile version at
     390px, and easily the worst case for the caption-overlap fix below.
     Stacking single-column at 768px too gives the image the section's
     full width instead of ~half of it, which combined with the taller
     4:3 ratio leaves enough room for the caption. */
  .en-bloc-selector { grid-template-columns: 1fr; }
  /* Deliberately NOT 16:10 here (unlike desktop) — this range keeps the
     original, taller 4:3. A narrow container at 16:10 doesn't leave the
     compact caption enough absolute headroom in the bottom-left corner
     without risking the same overlap-with-the-highlight bug this ratio
     change was fixed to avoid on desktop; 4:3 does. */
  .en-bloc-selector__visual { aspect-ratio: 4 / 3; }
  .en-bloc-selector__grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .en-bloc-selector__visual-img,
  .en-bloc-selector__item.en-bloc-selector__item,
  .en-bloc-selector__item-check,
  .en-bloc-selector__item .en-icon {
    transition: none !important;
  }
  .en-bloc-selector__item.en-bloc-selector__item:hover,
  .en-bloc-selector__item.en-bloc-selector__item:focus-visible {
    transform: none;
  }
}

/* ================= RENDER MOSAIC (Energia 3 "Galerie") ================= */
.en-render-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; gap: .9rem; }
.en-render-mosaic__item { border-radius: var(--en-radius); overflow: hidden; }
.en-render-mosaic__item--tall { grid-row: span 2; }
/* Elementor's own frontend.css ships a plain ".elementor img { height: auto }"
   reset at the same (0,1,1) specificity as a single-class-plus-tag selector,
   and it wins on source order — bumping to (0,2,1) via the mosaic's own
   wrapper class beats it regardless of stylesheet load order. Without this,
   every tile's image reverts to its natural aspect ratio instead of filling
   the (possibly 2-row-tall) grid cell, leaving blank space beneath. */
.en-render-mosaic .en-render-mosaic__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1023px) { .en-render-mosaic { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 130px; } }
@media (max-width: 767px) {
  .en-render-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; gap: .6rem; }
  .en-render-mosaic__item--tall { grid-row: span 2; }
}

/* ================= LOCATION ================= */
.enh-poi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.enh-poi li { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; }
.enh-poi .enh-poi__ico { color: var(--en-accent); width: 26px; height: 26px; }
.enh-poi .enh-poi__time { color: var(--en-accent); font-weight: 600; }

/* ================= LEAD FORM ================= */
.enh-brosura { background: var(--en-green-900); color: var(--en-on-green); border-radius: var(--en-radius-lg);
  padding: 2rem; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.enh-brosura h3 { color: #fff; }

/* ================= CTA BAND ================= */
.enh-ctaband { background: var(--en-green-900); border-radius: var(--en-radius-lg); }
.enh-ctaband .elementor-widget-wrap { align-items: center; }

/* ================= Elementor button tweaks ================= */
.enh-hero .elementor-button,
.enh-ctaband .elementor-button { font-size: 1rem; }
.enh-btn-ghost .elementor-button {
  background: transparent !important; border: 1px solid rgba(255,255,255,.65) !important; color: #fff !important;
}
.enh-btn-ghost .elementor-button:hover { background: rgba(255,255,255,.12) !important; }
.enh-btn-wa .elementor-button { background: #1f7a4d !important; color: #fff !important; }
.enh-btn-wa .elementor-button:hover { background: #1a6740 !important; }
/* Contact info icon-boxes: readable on light */
.enh-contactcard .elementor-icon-box-title { margin-bottom: .1rem; }
.enh-typecard .elementor-button { width: 100%; }
/* Icon inside a copper circle for benefit/contact cards */
.enh-ico-circle { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--en-accent-tint); color: var(--en-accent); margin-inline: auto; }
.enh-dark .enh-ico-circle { background: rgba(192,122,69,.15); }

/* ================= Responsive helpers ================= */
@media (max-width: 767px) {
  .home .ct-header { position: absolute; }
  .enh-stat--divider { border-inline-start: 0; padding-inline-start: 0; }
  .enh-hero { min-height: 78vh; }
}

/* Never allow the front page to scroll sideways */
.home, .home #main { overflow-x: clip; }