fix: align homepage gutters and Persian heading line height

src/components/Footer.tsx

@@ -29,7 +29,7 @@ export default function Footer({ siteContent }: { siteContent: SiteContent }) {
 
   return (
     <footer className="bg-footer pb-[calc(5.5rem+env(safe-area-inset-bottom))] text-footer-foreground md:pb-0" dir="rtl">
-      <div className="container mx-auto px-4 py-10 md:py-12">
+      <div className="container mx-auto px-4 py-10 md:px-8 md:py-12 lg:px-12">
         <div className="grid gap-9 sm:grid-cols-2 lg:grid-cols-[1.5fr_0.8fr_1fr]">
           <div className="space-y-4">
             <Link to="/" className="inline-flex items-center gap-3 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent">

src/components/Navbar.tsx

@@ -124,7 +124,7 @@ export default function Navbar({ siteContent }: { siteContent: SiteContent }) {
       className="sticky top-0 z-40 border-b border-border bg-background/95 pt-[env(safe-area-inset-top)] backdrop-blur supports-[backdrop-filter]:bg-background/85 md:pt-0"
       dir="rtl"
     >
-      <div className="container mx-auto px-4 py-2">
+      <div className="container mx-auto px-4 py-2 md:px-8 lg:px-12">
         <div className="flex min-h-14 items-center justify-between gap-4">
           <Link to="/" className="flex min-w-0 items-center gap-3 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
             <div className="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-brand-wash p-1.5">

src/components/home/FeaturedEvents.tsx

@@ -14,7 +14,7 @@ export default function FeaturedEvents({ content, events }: FeaturedEventsProps)
 
   return (
     <section className="py-14 md:py-20" aria-labelledby="home-events-title">
-      <div className="container mx-auto px-4">
+      <div className="container mx-auto px-4 md:px-8 lg:px-12">
         <div className="mb-7 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between md:mb-9">
           <div className="max-w-2xl">
             <h2 id="home-events-title" className="text-2xl font-bold leading-relaxed text-foreground md:text-3xl">

src/components/home/FeaturedPosts.tsx

@@ -60,7 +60,7 @@ export default function FeaturedPosts({ content, siteContent, posts }: FeaturedP
 
   return (
     <section className="border-y border-border/70 bg-brand-wash/55 py-14 md:py-20" aria-labelledby="home-posts-title">
-      <div className="container mx-auto px-4">
+      <div className="container mx-auto px-4 md:px-8 lg:px-12">
         <div className="mb-7 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between md:mb-9">
           <div className="max-w-2xl">
             <h2 id="home-posts-title" className="text-2xl font-bold leading-relaxed text-foreground md:text-3xl">

src/views/Home.tsx

@@ -23,12 +23,12 @@ export default function Home({ content, siteContent, events, posts }: HomeProps)
   return (
     <main className="bg-background" dir="rtl">
       <section className="border-b border-border/70 bg-brand-wash/45" aria-labelledby="home-hero-title">
-        <div className="container mx-auto grid items-center gap-8 px-4 py-10 md:grid-cols-[1.15fr_0.85fr] md:gap-12 md:py-16">
+        <div className="container mx-auto grid items-center gap-8 px-4 py-10 md:grid-cols-[1.15fr_0.85fr] md:gap-12 md:px-8 md:py-16 lg:px-12">
           <div>
             <p className="mb-3 text-sm font-semibold text-brand-deep">
               {siteContent.faculty_subline}
             </p>
-            <h1 id="home-hero-title" className="max-w-3xl text-3xl font-extrabold leading-[1.45] tracking-tight text-brand-deep sm:text-4xl md:text-5xl">
+            <h1 id="home-hero-title" className="max-w-3xl text-3xl font-extrabold leading-[1.4] text-brand-deep sm:text-4xl sm:leading-[1.4] md:text-5xl md:leading-[1.15]">
               {content.hero_heading || content.title}
             </h1>
             <p className="mt-4 max-w-2xl text-base leading-8 text-muted-foreground md:text-lg">
@@ -58,7 +58,7 @@ export default function Home({ content, siteContent, events, posts }: HomeProps)
             </div>
           </div>
 
-          <div className="relative grid min-h-48 place-items-center overflow-hidden rounded-2xl border border-border/80 bg-brand-wash px-6 py-10 md:min-h-[320px]">
+          <div className="relative order-first grid min-h-48 place-items-center overflow-hidden rounded-2xl border border-border/80 bg-brand-wash px-6 py-10 md:order-none md:min-h-[320px]">
             <div className="pointer-events-none absolute inset-4 rounded-xl border border-primary/20" aria-hidden="true" />
             <div className="pointer-events-none absolute inset-x-0 top-0 h-1.5 bg-accent" aria-hidden="true" />
             <div className="pointer-events-none absolute -bottom-24 -left-16 h-56 w-56 rounded-full border border-primary/20" aria-hidden="true" />
@@ -79,7 +79,7 @@ export default function Home({ content, siteContent, events, posts }: HomeProps)
       <FeaturedPosts content={content} siteContent={siteContent} posts={posts} />
 
       <section className="bg-primary text-primary-foreground" aria-labelledby="home-participation-title">
-        <div className="container mx-auto flex flex-col gap-6 px-4 py-12 md:flex-row md:items-center md:justify-between md:py-16">
+        <div className="container mx-auto flex flex-col gap-6 px-4 py-12 md:flex-row md:items-center md:justify-between md:px-8 md:py-16 lg:px-12">
           {content.participation_image ? (
             <div className="hidden h-24 w-24 shrink-0 place-items-center overflow-hidden rounded-2xl border border-primary-foreground/20 bg-background/10 p-2 md:grid">
               <Image