Responsive fixes across site — mobile padding, font sizes, hero text

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/layout/Footer.tsx

@@ -48,7 +48,7 @@ function NewsletterBox() {
       <div style={{ fontSize: 11, fontWeight: 700, color: 'rgba(255,255,255,0.45)', letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 10 }}>
         خبرنامه فولاد
       </div>
-      <div style={{ display: 'flex', border: '1px solid rgba(255,255,255,0.18)', maxWidth: 320 }}>
+      <div style={{ display: 'flex', border: '1px solid rgba(255,255,255,0.18)', maxWidth: '100%' }}>
         <input
           type="email" value={email}
           onChange={e => setEmail(e.target.value)}

src/pages/Archive/Archive.tsx

@@ -203,7 +203,7 @@ export default function Archive() {
       style={{
         maxWidth: 1280,
         margin: '0 auto',
-        padding: '64px 48px',
+        padding: 'clamp(24px,5vw,64px) clamp(16px,4vw,48px)',
         direction: 'rtl',
       }}
     >

src/pages/Events/Events.tsx

@@ -99,7 +99,7 @@ export default function Events() {
   const filtered = activeFilter === 'all' ? events : events.filter(e => e.type === activeFilter)
 
   return (
-    <div style={{ maxWidth: 1280, margin: '0 auto', padding: '64px 48px', direction: lang === 'fa' ? 'rtl' : 'ltr' }}>
+    <div style={{ maxWidth: 1280, margin: '0 auto', padding: 'clamp(24px,5vw,64px) clamp(16px,4vw,48px)', direction: lang === 'fa' ? 'rtl' : 'ltr' }}>
       <div style={{ display: 'flex', alignItems: 'stretch', borderBottom: '3px solid var(--ink)', marginBottom: 36 }}>
         <div style={{ background: 'var(--ink)', padding: '14px 28px', display: 'flex', alignItems: 'center' }}>
           <h1 style={{ fontSize: 24, fontWeight: 900, color: 'var(--paper)', letterSpacing: '-0.5px', whiteSpace: 'nowrap' }}>{t.heading}</h1>

src/pages/Home/sections/EventsSection.tsx

@@ -90,14 +90,15 @@ export default function EventsSection() {
           {displayed.map((event) => (
             <div
               key={event.id}
-              style={{
+              className="max-md:p-5"
+            style={{
                 padding: '32px 28px',
               }}
               className="border-r border-[var(--rule-thin)] first:border-r-0 max-md:border-r-0 max-md:border-b max-md:border-[var(--rule-thin)] max-md:nth-child(even):border-r max-md:nth-child(even):border-[var(--rule-thin)] max-sm:border-r-0 max-sm:border-b max-sm:last:border-b-0 max-md:nth-child(3):border-b-0 max-md:nth-child(4):border-b-0"
             >
               {/* Date block */}
               <div style={{ borderBottom: '2px solid var(--ink)', paddingBottom: 12, marginBottom: 16 }}>
-                <div style={{ fontSize: 52, fontWeight: 900, lineHeight: 1, color: 'var(--ink)' }}>
+                <div className="max-md:text-4xl" style={{ fontSize: 52, fontWeight: 900, lineHeight: 1, color: 'var(--ink)' }}>
                   {event.date.toLocaleString('fa-IR')}
                 </div>
                 <div style={{ fontSize: 12, color: 'var(--ink-4)', marginTop: 2 }}>

src/pages/Home/sections/HeroSection.tsx

@@ -90,15 +90,15 @@ export default function HeroSection() {
       {/* Content block */}
       <div
         ref={textRef}
-        className="max-md:!left-5 max-md:!right-5 max-md:!max-w-full max-md:text-center"
+        className="max-md:!left-4 max-md:!right-4 max-md:!max-w-full max-md:!top-1/2 max-md:text-center"
         style={{
           position:  'absolute',
-          top:       '28%',
+          top:       '38%',
           right:     lang === 'fa' ? 48 : 'auto',
           left:      lang === 'en' ? 48 : 'auto',
           transform: 'translateY(-50%)',
           zIndex:    3,
-          textAlign: 'center',
+          textAlign: lang === 'fa' ? 'right' : 'left',
           direction: lang === 'fa' ? 'rtl' : 'ltr',
           maxWidth:  520,
           padding:   '0 24px',
@@ -106,9 +106,9 @@ export default function HeroSection() {
       >
         {/* Headline */}
         <h1
-          className="max-md:!whitespace-normal"
+          className="max-md:!whitespace-normal max-md:!text-2xl"
           style={{
-            fontSize:      'clamp(18px, 2.2vw, 34px)',
+            fontSize:      'clamp(22px, 2.2vw, 34px)',
             fontWeight:    900,
             lineHeight:    1.2,
             letterSpacing: '-0.5px',

src/pages/Home/sections/LatestReportsSection.tsx

@@ -39,6 +39,7 @@ function ReportCard({ report, colIndex, rowIndex, totalRows }: ReportCardProps)
 
   return (
     <div
+      className="max-md:!p-5"
       style={{
         padding: '40px',
         borderBottom: isLastRow ? 'none' : '1px solid var(--rule-thin)',

src/pages/Risks/Risks.tsx

@@ -41,7 +41,7 @@ export default function Risks() {
       <div
         style={{
           borderBottom: '4px double var(--ink)',
-          padding: '40px 48px 32px',
+          padding: 'clamp(20px, 4vw, 40px) clamp(16px, 4vw, 48px) clamp(16px, 3vw, 32px)',
           background: 'var(--paper)',
         }}
       >
@@ -108,7 +108,7 @@ export default function Risks() {
         </div>
       </div>
 
-      <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '40px 48px 64px' }}>
+      <div style={{ maxWidth: '1200px', margin: '0 auto', padding: 'clamp(20px,4vw,40px) clamp(16px,4vw,48px) clamp(32px,6vw,64px)' }}>
         {/* Risk Matrix Table */}
         <div style={{ marginBottom: '56px' }}>
           <h2