From 9a6ec3d1f209536312208dbf805b77bca8ba97f0 Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Thu, 3 Sep 2026 13:39:23 -0300
Subject: [PATCH] feat(hero-banner): add conditional class for media presence
 and adjust styles

---
 .../hero-banner/hero-banner.component.html    |  5 ++-
 .../hero-banner/hero-banner.component.scss    | 32 ++++++++++++-------
 .../hero-banner/hero-banner.component.spec.ts | 15 +++++++++
 3 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/app/shared/components/hero-banner/hero-banner.component.html b/src/app/shared/components/hero-banner/hero-banner.component.html
index be58165..0fcf6db 100644
--- a/src/app/shared/components/hero-banner/hero-banner.component.html
+++ b/src/app/shared/components/hero-banner/hero-banner.component.html
@@ -1,5 +1,8 @@
 <div class="hero-banner-container">
-  <div class="hero-banner position-relative rounded">
+  <div
+    class="hero-banner position-relative rounded"
+    [class.hero-banner--with-media]="desktopImageUrl"
+  >
     @if (desktopImageUrl) {
       <picture class="hero-media" aria-hidden="true">
         @if (mobileImageUrl) {
diff --git a/src/app/shared/components/hero-banner/hero-banner.component.scss b/src/app/shared/components/hero-banner/hero-banner.component.scss
index baf1e1b..1b42b53 100644
--- a/src/app/shared/components/hero-banner/hero-banner.component.scss
+++ b/src/app/shared/components/hero-banner/hero-banner.component.scss
@@ -7,23 +7,23 @@
   min-height: 400px;
   display: flex;
   flex-direction: column;
+
+  &--with-media {
+    min-height: 0;
+  }
 }
 
 .hero-media {
-  position: absolute;
-  inset: 0;
+  position: relative;
   display: block;
+  width: 100%;
   overflow: hidden;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
   border-radius: inherit;
 
   img {
     display: block;
     width: 100%;
-    height: 100%;
-    object-fit: cover;
+    height: auto;
   }
 
   &::after {
@@ -52,6 +52,11 @@
   flex-grow: 1;
 }
 
+.hero-banner--with-media .hero-content {
+  position: absolute;
+  inset: 0;
+}
+
 ::ng-deep .hero-title,
 .hero-title {
   color: #666666;
@@ -179,24 +184,29 @@
     inset: auto;
     flex: 0 0 auto;
     width: 100%;
-    height: clamp(8.75rem, 44vw, 211px);
-    background-position: center center;
-    background-size: 140% auto;
+    overflow: visible;
     border-radius: 0;
   }
 
   .hero-media::after {
     top: auto;
-    height: 48%;
+    bottom: -2px;
+    height: calc(48% + 2px);
     background: linear-gradient(
       to bottom,
       rgba(245, 245, 245, 0) 0%,
       rgba(245, 245, 245, 0.78) 55%,
+      #f5f5f5 96%,
       #f5f5f5 100%
     );
     border-radius: 0;
   }
 
+  .hero-banner--with-media .hero-content {
+    position: relative;
+    inset: auto;
+  }
+
   .hero-content {
     justify-content: center !important;
     height: auto !important;
diff --git a/src/app/shared/components/hero-banner/hero-banner.component.spec.ts b/src/app/shared/components/hero-banner/hero-banner.component.spec.ts
index 2f25ef8..6d11bbe 100644
--- a/src/app/shared/components/hero-banner/hero-banner.component.spec.ts
+++ b/src/app/shared/components/hero-banner/hero-banner.component.spec.ts
@@ -22,6 +22,21 @@ describe('HeroBannerComponent', () => {
     expect(element.querySelector('img')?.getAttribute('src')).toBe(
       'https://example.com/desktop.jpg',
     );
+    expect(element.querySelector('.hero-banner')?.classList).toContain(
+      'hero-banner--with-media',
+    );
+  });
+
+  it('keeps the fallback banner sizing when there is no image', async () => {
+    await TestBed.configureTestingModule({ imports: [HeroBannerComponent] }).compileComponents();
+
+    const fixture = TestBed.createComponent(HeroBannerComponent);
+    fixture.componentRef.setInput('heroConfig', { title_html: 'Banner sin imagen' });
+    fixture.detectChanges();
+
+    const banner = (fixture.nativeElement as HTMLElement).querySelector('.hero-banner');
+
+    expect(banner?.classList).not.toContain('hero-banner--with-media');
   });
 
   it('expands and collapses the event schedules', async () => {