/* =========================================================
   job-details.css · helpvivo · job.php (single ad)
   2025-07-08
   ========================================================= */

/* ---------- 1.  Global reset / varovi ------------------- */
:root{
  --c-accent:#69a06a;
  --c-accent-hov:#4f8850;
  --c-accent-sec:#30abaf;
  --c-text:#333;
  --radius:22px;
  --shadow-lg:0 16px 42px rgba(0,0,0,.18);
  --shadow-sm:0 4px 16px rgba(0,0,0,.06);
  --glass-bg:hsla(0,0%,100%,.35);
  --glass-bg-dark:hsla(0,0%,15%,.3);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:"Montserrat",sans-serif;
  color:var(--c-text);
}

/* ---------- 2.  Glass card kontenjer -------------------- */
.card{
  width: min(780px, 92%);
  backdrop-filter: blur(18px) saturate(1.25);
  background: var(--glass-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 2.2rem 2.6rem;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 13vh;
}

/* dekorativni gradient film */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,
              rgba(48,171,175,.15) 0%, rgba(105,160,106,.25) 100%);
  mix-blend-mode:overlay;
  pointer-events:none;
}

/* ---------- 3.  Primarni naslov + badge ----------------- */
h1{
  font-size:1.9rem;
  font-weight:600;
  color:var(--c-accent);
  margin-bottom:.65rem;
  margin-top: 3vh;
}
.badge{
  display:inline-block;
  padding:.25rem .8rem;
  font-size:.78rem;
  font-weight:500;
  background:var(--c-accent-sec);
  color:#fff;
  border-radius:999px;
  margin-bottom:1.3rem;
}

/* ---------- 4.  Sekcije --------------------------------- */
.section{margin-top:1.6rem}
.section h3{
  font-size:1.1rem;
  font-weight:600;
  margin-bottom:.4rem;
}
.section p, .section ul{
  font-size:.97rem;
  color:#444;
  line-height:1.55;
}
.section ul{padding-left:1.2rem;list-style:circle}
.section ul li{margin-bottom:.3rem}

/* kontakt kutija */
.contact-box{
  display:flex;flex-direction:column;gap:.25rem;
  background:#71bada;
  backdrop-filter:blur(10px);
  padding:1rem 1.25rem;
  border-left:5px solid var(--c-accent);
  border-radius:14px;
  margin-top:.8rem;
  color:#fff;
}
.contact-box span{font-weight:500}
.contact-box em{font-size:.85rem;color:#fff}

/* ---------- 5.  Action buttons (owner/admin) ------------ */
.actions{
  margin-top:2rem;
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
}
.btn{
  padding:.6rem 1.45rem;
  font:inherit;
  border:none;
  border-radius:14px;
  cursor:pointer;
  transition:background .25s,transform .18s;
  text-align:center;
  text-decoration: none;
  background-color: #60a56f;
  color: #fff;
}

.btn:hover{
  background-color: #2b4431;
}

#back-b{
  text-align: right;
  color: #67B2D3;
  text-decoration: none;
  text-align:center;
  transition: .25s,transform .18s;
  margin-bottom: 1vh;
  font-weight: 600;
}

#back-b:hover{
  color: #2b4431;
}
.btn--primary{background:var(--c-accent);color:#fff}
.btn--primary:hover{background:var(--c-accent-hov);transform:translateY(-3px)}
.btn--danger{background:#e55353;color:#fff}
.btn--danger:hover{background:#c73c3c;transform:translateY(-3px)}

/* ---------- 6.  Responsive tweaks ----------------------- */
@media(max-width:540px){
  .card{padding:1.8rem 1.7rem}
  h1{font-size:1.65rem}
}
@media(max-width:400px){
  .actions{flex-direction:column}
  .btn{width:100%}
}

/* ---------------------------------------------------------
   Fiksna visina naslova (max 2 reda) + elegantan line-clamp
   --------------------------------------------------------- */
.job-card h2{
  font-size:1.25rem;
  font-weight:700;
  line-height:1.35;          /* 1.35rem po redu */
  
  /* ①  TAČNA visina za dva reda  →  1.35 × 2  =  2.7rem  */
  height:2.7rem;             
  overflow:hidden;

  /* ②  Clamp posle 2 reda – podržava svi moderni browseri */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* ③  Da badge uvek krene iz iste ravni (ispod 2 reda naslova) */
.job-card .badge{
  display:inline-block;
  margin-top:.9rem;          /* identično u svakoj kartici */
  min-height:1.6rem;         /* fiksna visina pilule */
}


.dugme-brzo{
  padding-top: 2vh;
}