From 9c3820866dc88d1fece2164e5c741a88b10122b4 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Sun, 6 Sep 2026 12:14:47 +0330
Subject: [PATCH] fix: resize and rearrange hero landing illustrations for
 tablet and mobile screens

---
 src/components/HeroSection.module.css       | 15 +++++++++++----
 src/components/ScenicHeroJourney.module.css | 12 +++++++-----
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/HeroSection.module.css b/src/components/HeroSection.module.css
index b0dd176..a9cb531 100644
--- a/src/components/HeroSection.module.css
+++ b/src/components/HeroSection.module.css
@@ -224,10 +224,17 @@
    TABLET  501px – 1100px — match the illustration breakpoint
    ================================================================ */
 @media (max-width: 1100px) and (min-width: 501px) {
+  .heroContentWrapper {
+    height: auto;
+    min-height: clamp(540px, 64vw, 640px);
+  }
+
   .heroContent {
-    /* Top-anchor content so it sits nicely in the upper-center zone */
+    height: auto;
+    min-height: clamp(540px, 64vw, 640px);
     justify-content: flex-start;
     padding-top: clamp(60px, 8vw, 90px);
+    padding-bottom: 40px;
   }
 
   .heroTitle {
@@ -253,7 +260,7 @@
 @media (max-width: 500px) {
   .heroContentWrapper {
     height: auto;
-    min-height: 520px;
+    min-height: 540px;
   }
 
   .topBar {
@@ -267,8 +274,8 @@
 
   .heroContent {
     height: auto;
-    min-height: 520px;
-    padding: 66px 16px 36px;
+    min-height: 540px;
+    padding: 66px 16px 40px;
     justify-content: flex-start;
   }
 
diff --git a/src/components/ScenicHeroJourney.module.css b/src/components/ScenicHeroJourney.module.css
index 99ff3b2..6614def 100644
--- a/src/components/ScenicHeroJourney.module.css
+++ b/src/components/ScenicHeroJourney.module.css
@@ -20,7 +20,8 @@
 .heroStage {
   position: relative;
   width: 100%;
-  height: clamp(360px, 46vw, 680px);
+  height: auto;
+  min-height: clamp(520px, 46vw, 680px);
   overflow: hidden;
   background: var(--bg-page);
 }
@@ -76,7 +77,8 @@
    ================================================================ */
 @media (max-width: 1100px) and (min-width: 501px) {
   .heroStage {
-    height: clamp(360px, 52vw, 480px);
+    height: auto;
+    min-height: clamp(540px, 64vw, 640px);
   }
 
   /* Left — visible slice ≈ width - 150px, always < content padding */
@@ -111,20 +113,20 @@
 @media (max-width: 500px) {
   .heroStage {
     height: auto;
-    min-height: 520px;
+    min-height: 540px;
   }
 
   .backdropLeft {
     top: clamp(75px, 16vw, 95px);
     bottom: auto;
-    left: clamp(-100px, calc(20vw - 230px), -100px);
+    left: clamp(-140px, calc(20vw - 230px), -100px);
     width: clamp(200px, 44vw, 250px);
   }
 
   .backdropRight {
     top: clamp(82px, 18vw, 102px);
     bottom: auto;
-    right: clamp(-120px, calc(20vw - 240px), -120px);
+    right: clamp(-150px, calc(20vw - 240px), -120px);
     width: clamp(210px, 46vw, 260px);
   }