/* Realizate-only release: dedicated file, no global CSS overwritten.
   Load after the current realized gallery stylesheet, on /proiecte-realizate only.
   Every selector is scoped to main.realized-page or its body-level dialog.
   This preserves full source pixels; it cannot restore a roof/base missing in the source.
*/

/* Keep the current uniform card slots; show the whole photo inside each one. */
main.realized-page .project-card__visual {
  background: #f3f5f6;
}
main.realized-page .project-card__visual > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none !important;
}
main.realized-page .project-card__link:hover .project-card__visual > img {
  transform: none !important;
}

/* The story already uses contain. Preserve its native ratio and avoid stretched images. */
main.realized-page .story-gallery__main > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  transform: none;
}

/* Thumbnails must also retain the roof/base. */
main.realized-page .story-gallery__thumbs img,
body:has(main.realized-page) > #gallery-dialog .gallery-dialog__thumbs img {
  object-fit: contain;
  object-position: center;
  background: #f3f5f6;
}
main.realized-page .story-gallery__thumbs {
  justify-content: flex-start;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
}
main.realized-page .story-gallery__thumbs > button {
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* The hero uses independent grid areas: copy never overlays the photograph.
   Override the inherited fixed-height/absolute mobile hero with page-only rules.
   The real <img> supplies its native ratio, so no roof/base is hidden by cover.
*/
body #root#root .azd-public-shell.site-shell main.realized-page .page-hero {
  display: grid !important;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr) !important;
  grid-template-rows: auto auto !important;
  gap: 12px clamp(24px, 3vw, 50px) !important;
  align-items: center !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 110px 24px 40px !important;
  overflow: visible !important;
  background: #fff !important;
}
body #root#root .azd-public-shell.site-shell main.realized-page .page-hero__copy {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  position: static !important;
  inset: auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  color: #101827 !important;
  text-shadow: none !important;
}
body #root#root .azd-public-shell.site-shell main.realized-page .page-hero h1 {
  color: #101827 !important;
}
body #root#root .azd-public-shell.site-shell main.realized-page .page-hero__description {
  color: #56616e !important;
}
body #root#root .azd-public-shell.site-shell main.realized-page .page-hero__meta-line {
  color: #101827 !important;
}
body #root#root .azd-public-shell.site-shell main.realized-page .page-hero__location {
  display: flex !important;
  margin-top: 24px !important;
  color: #65717e !important;
}
body #root#root .azd-public-shell.site-shell main.realized-page .page-hero__actions {
  width: min(100%, 400px) !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
body #root#root .azd-public-shell.site-shell main.realized-page .page-hero__actions > a {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
body #root#root .azd-public-shell.site-shell main.realized-page .page-hero__visual {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: relative !important;
  inset: auto !important;
  align-self: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  background: #f3f5f6 !important;
  filter: none !important;
  transform: none !important;
  overflow: visible !important;
}
body #root#root .azd-public-shell.site-shell main.realized-page .page-hero__visual > img {
  display: block !important;
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}
body #root#root .azd-public-shell.site-shell main.realized-page .page-hero__visual::before,
body #root#root .azd-public-shell.site-shell main.realized-page .page-hero__visual::after {
  display: none !important;
}
body #root#root .azd-public-shell.site-shell main.realized-page .page-hero__editorial {
  grid-column: 2 !important;
  grid-row: 2 !important;
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  color: #56616e !important;
  text-shadow: none !important;
  font-size: 10px !important;
  line-height: 1.6 !important;
}
body #root#root .azd-public-shell.site-shell main.realized-page .page-hero__editorial::before,
body #root#root .azd-public-shell.site-shell main.realized-page .page-hero__editorial::after,
body #root#root .azd-public-shell.site-shell main.realized-page .page-hero__editorial i {
  display: none !important;
}
@media (min-width: 981px) and (max-width: 1200px) {
  body #root#root .azd-public-shell.site-shell main.realized-page .page-hero__actions > a {
    grid-template-columns: 32px minmax(0, 1fr) 32px !important;
    gap: 6px !important;
    padding-inline: 8px !important;
    font-size: 13px !important;
  }
  body #root#root .azd-public-shell.site-shell main.realized-page .page-hero__actions .hero-action__icon {
    width: 32px !important;
    height: 32px !important;
  }
}
@media (max-width: 980px) {
  body #root#root .azd-public-shell.site-shell main.realized-page .page-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 0 !important;
    padding: 0 !important;
  }
  body #root#root .azd-public-shell.site-shell main.realized-page .page-hero__visual {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  body #root#root .azd-public-shell.site-shell main.realized-page .page-hero__copy {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 28px clamp(20px, 4vw, 40px) 24px !important;
  }
  body #root#root .azd-public-shell.site-shell main.realized-page .page-hero__editorial {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    padding: 0 clamp(20px, 4vw, 40px) 28px !important;
    color: #56616e !important;
  }
}
/* At 901–980px the site's desktop header is still absolute. Reserve its row. */
@media (min-width: 901px) and (max-width: 980px) {
  body #root#root .azd-public-shell.site-shell main.realized-page .page-hero {
    padding-top: 88px !important;
  }
}

/* The dialog is a direct child of body, outside main.realized-page. */
body:has(main.realized-page) > #gallery-dialog .gallery-dialog__main > img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}
body:has(main.realized-page) > #gallery-dialog .gallery-dialog__body,
body:has(main.realized-page) > #gallery-dialog .gallery-dialog__main {
  min-height: 0;
  min-width: 0;
}
@media (max-width: 620px) {
  body:has(main.realized-page) > #gallery-dialog .gallery-dialog__header,
  body:has(main.realized-page) > #gallery-dialog .gallery-dialog__bottom {
    flex-shrink: 0;
  }
}

/* Disable inherited hover interpolation as well as image scale. */
main.realized-page .project-card__visual > img,
main.realized-page .page-hero__visual > img { transition: none !important; }