Update workshop pages and medkulturno posredovanje

- Updated all workshop lead paragraphs with new bold text
- Added 'Priporočamo branje' section to all 4 workshop pages
- Updated medkulturno posredovanje hero: new kicker text, reordered elements, added font-weight 600
- Added CSS for workshop text alignment: justified on desktop, left on mobile
- Added CSS for workshop page mobile spacing improvements
- Updated delavnice index hero paragraph

css/style.css

@@ -3966,7 +3966,8 @@ footer {
   font-size: 3rem;
   line-height: 1.24;
   color: #1f2530;
-  margin: 0
+  margin: 0;
+  font-weight: 600; /* Dodano, da je debelina enaka kot pri "Učenje jezikov" */
 }
 
 .mediation-hero-lead {
@@ -7590,18 +7591,81 @@ html, body {
   }
 }
 
-/* Popravek za prevelike razmike med besedami na mobilnikih - leva poravnava */
+/* Popravek za mobilne naprave - Leva poravnava samo za izbrane elemente */
 @media (max-width: 768px) {
-  /* Dodali smo .purpose-goal in li ter splošne razrede */
-  p, 
-  li,
-  .purpose-goal,
-  .about-hero-text p, 
-  .about-accordion-content p, 
-  .step-card p, 
-  .mediation-detail-text p,
-  .article-body-text p {
-    /* Leva poravnava za mobilne naprave - preprečuje velike presledke */
+  /* 1. Splošna nastavitev za preprečevanje lukenj (deljenje besed) */
+  p, li {
+    -webkit-hyphens: auto;
+    -moz-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+  }
+  
+  /* 2. SPECIFIČNI ELEMENTI IZ SLIK - Poravnava LEVO 
+     To bo odpravilo velike presledke samo v teh okvirjih/seznami. */
+  
+  /* Kartice ponudbe (Slovenščina, Albanščina, seznami pri Angleščini) */
+  .offer-language-card p,
+  .offer-language-card li,
+  .offer-language-card ul,
+  
+  /* Zeleni oblaček na prvi strani (Prosberry - mesto...) */
+  .hero-info-box p,
+  
+  /* Uvodno besedilo na strani Kontakt */
+  .contact-hero-lead,
+  
+  /* Medkulturno posredovanje (kartice, primeri, cilji) */
+  .purpose-card p,
+  .purpose-example,
+  .purpose-goal {
+    text-align: left !important;    /* Ključno: poravnaj levo */
+    text-justify: none !important;  /* Izklopi raztegovanje */
+    letter-spacing: normal !important; /* Normalen razmak */
+  }
+}
+
+
+/* --- Popravki za mobilni prikaz DELAVNIC (naslovi in razmiki) --- */
+@media (max-width: 768px) {
+  /* 1. Popravek glavnega naslova */
+  .page-hero h1 {
+    line-height: 1.15 !important;      /* Močno zmanjša razdaljo med vrsticami naslova */
+    margin-bottom: 1.5rem !important;  /* Doda prostor med naslovom in podnaslovom */
+    font-size: 2.2rem !important;      /* Optimalna velikost za mobilne naprave */
+  }
+  
+  /* 2. Zmanjšanje luknje (rdeč krog) - dvig slike */
+  /* Zmanjšamo spodnji rob zgornje (roza) sekcije */
+  .page-hero {
+    padding-bottom: 20px !important;   /* Prej je bilo 60px ali več */
+  }
+  
+  /* Zmanjšamo zgornji rob spodnje (bele) sekcije */
+  .content-section {
+    padding-top: 10px !important;      /* Prej je bilo 60px */
+  }
+  
+  /* Dodatno zmanjšanje razmika specifično za mrežo delavnic */
+  .workshop-grid {
+    gap: 1.5rem !important;            /* Manjši razmik med elementi v mreži */
+  }
+}
+
+
+/* --- Poravnava delavnic: obojestranska na desktopu, leva na mobilnih --- */
+/* Desktop: obojestranska poravnava */
+.workshop-lead,
+.workshop-section p,
+.workshop-directory-hero-content p {
+  text-align: justify;
+}
+
+/* Mobile: leva poravnava */
+@media (max-width: 768px) {
+  .workshop-lead,
+  .workshop-section p,
+  .workshop-directory-hero-content p {
     text-align: left !important;
   }
 }