Fix: Unified language cards formatting and improved mobile text justification

- Added descriptive paragraphs to Slovenščina and Srbščina cards
- Changed Albanščina colon to period for consistency
- Updated hero CTA box margin (2.5rem top, 1.5rem bottom)
- Improved mobile justified text with hyphenation, letter-spacing, and word-breaking

css/style.css

@@ -209,6 +209,30 @@ body.no-scroll {
   box-shadow: 0 4px 15px rgba(251, 99, 57, 0.4)
 }
 
+/* Desktop/Mobile button visibility */
+.cta-button-mobile {
+  display: none;
+}
+
+.cta-button-desktop {
+  display: inline-block;
+}
+
+.cta-button-auto {
+  width: auto !important;
+  padding: 0.75rem 1rem;
+}
+
+@media (max-width: 768px) {
+  .cta-button-mobile {
+    display: inline-block;
+  }
+  
+  .cta-button-desktop {
+    display: none;
+  }
+}
+
 .services {
   padding: 80px 2rem;
   background: white
@@ -3913,7 +3937,8 @@ footer {
 .mediation-hero-text {
   display: flex;
   flex-direction: column;
-  gap: 2rem
+  gap: 2rem;
+  align-items: center;
 }
 
 .mediation-hero-text p {
@@ -5156,7 +5181,7 @@ footer {
 
 .pdf-button {
   display: inline-block;
-  padding: 0.8rem 1.8rem;
+  padding: 0.8rem 1.5rem;
   background: var(--primary-color);
   color: white;
   text-decoration: none;
@@ -5164,7 +5189,17 @@ footer {
   font-weight: 500;
   transition: var(--transition);
   margin-top: 1.5rem;
-  border: 2px solid transparent
+  border: 2px solid transparent;
+  width: auto;
+  align-self: center;
+}
+
+.workshop-text {
+  text-align: center;
+}
+
+.workshop-section {
+  text-align: left;
 }
 
 .pdf-button:hover {
@@ -5354,9 +5389,10 @@ footer {
 
 .recommendation-box-home { 
   grid-area: branje;
-  margin-top: 1rem;
+  margin-top: 0;
-  align-self: end;
+  align-self: start;
   width: 100%;
+  min-height: 320px;
 }
 
 #hero-welcome {
@@ -5369,7 +5405,7 @@ footer {
   background: rgba(251, 99, 57, 0.08);
   padding: 0.75rem 1rem;
   border-radius: 10px;
-  margin: 1rem 0;
+  margin: 2.5rem 0 1.5rem 0;
   border-left: 4px solid var(--primary-color);
 }
 
@@ -7554,3 +7590,27 @@ html, body {
     font-size: 1rem;
   }
 }
+
+/* Izboljšan popravek za prevelike razmike med besedami na mobilnikih */
+@media (max-width: 768px) {
+  p, 
+  .about-hero-text p, 
+  .about-accordion-content p, 
+  .step-card p, 
+  .mediation-detail-text p,
+  .article-body-text p {
+    text-align: justify !important;
+    text-justify: inter-word;
+    /* 1. Samodejno deljenje z vezaji (če brskalnik pozna slovenščino) */
+    -webkit-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+    /* 2. Prisiljen prelom dolgih besed (če vezaji ne delujejo) */
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    /* 3. Rahlo stiskanje črk (to vizualno močno pomaga zapolniti vrstico) */
+    letter-spacing: -0.02em;
+    /* 4. Preprečevanje raztegovanja zadnje vrstice v odstavku */
+    text-align-last: left;
+  }
+}

ponudba/index.html

@@ -187,6 +187,7 @@
               <div class="offer-language-header">
                 <h3>Slovenščina</h3>
               </div>
+              <p>Poučevanje jezika usvojenega v naravno govorečem okolju.</p>
               <ul>
                 <li>Inštrukcije za začetni nivo slovenščine</li>
                 <li>Tečaji osnov slovenščine za priseljence</li>
@@ -198,6 +199,7 @@
               <div class="offer-language-header">
                 <h3>Srbščina</h3>
               </div>
+              <p>Poučevanje jezika z izkušnjo naravnega govorca.</p>
               <ul>
                 <li>Tečaji in inštrukcije srbščine</li>
                 <li>Individualni pouk za otroke priseljencev</li>
@@ -209,7 +211,7 @@
               <div class="offer-language-header">
                 <h3>Albanščina</h3>
               </div>
-              <p>Poučevanje jezika usvojenega v naravno govorečem okolju:</p>
+              <p>Poučevanje jezika usvojenega v naravno govorečem okolju.</p>
               <ul>
                 <li>Inštruiranje osnov albanščine</li>
                 <li>Tečaji komunikacije</li>
@@ -218,7 +220,8 @@
           </div>
           
           <div style="text-align: center; margin-top: 3rem;">
-            <a href="/kontakt/" class="cta-button">Rezerviraj brezplačni posvet</a>
+            <a href="/kontakt/" class="cta-button cta-button-desktop cta-button-auto">Brezplačni posvet</a>
+            <a href="tel:+38630312855" class="cta-button cta-button-mobile cta-button-auto">Brezplačni posvet</a>
           </div>
           
           <div class="offer-section-shape shape-e"></div>