/* =========================ca
   Swiper slide visina
========================= */
.tt-swiper .swiper-slide{
  height: auto;
}

/* =========================
   TVOJTIM PREMIUM WIDGET
========================= */
.tt-block{
  position: relative;
  border-radius: 20px;
  padding: 22px;
  background:
    linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 22px 50px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* suptilan narandžasti glow */
.tt-block:before{
  content:"";
  position:absolute;
  right:-80px;
  top:-80px;
  width:260px;
  height:260px;
  background: radial-gradient(circle, rgba(249,115,22,.22), transparent 70%);
  pointer-events:none;
}

/* hover – malo “diše” */
.tt-block:hover{
  transform: translateY(-2px);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

/* =========================
   POWERED BY TVOJTIM BADGE
========================= */
.tt-powered{
  position:absolute;
  bottom:10px;
  right:12px;
  font-size:11px;
  letter-spacing:.02em;
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 4px 8px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

/* =========================
   Header
========================= */
.tt-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 14px;
}

/* Naslov bloka */
.tt-title{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  color: #e5e7eb;
  letter-spacing: -0.02em;
}

/* mali TvojTim brand detalj */
.tt-title::before{
  content:"◆";
  color:#f97316;
  margin-right:8px;
  font-size: 14px;
  vertical-align: middle;
}

/* CTA dugme – TvojTim stil */
.tt-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 16px;
  border-radius: 12px;
  text-decoration:none;
  font-weight: 800;

  background: linear-gradient(135deg, #f97316, #fb923c);
  color: #fff;
  border: none;
  box-shadow: 0 10px 26px rgba(249,115,22,.45);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;

  white-space: nowrap;
}

.tt-cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 14px 30px rgba(249,115,22,.55);
}

.tt-cta:active{
  transform: translateY(0);
  box-shadow: 0 10px 26px rgba(249,115,22,.45);
}

/* =========================
   Kartica oglasa
========================= */
/* Kartice oglasa – svjetlija teget varijanta */
.tt-card{
  display:flex;
  flex-direction:column;
  height: 155px;
  border:1px solid rgba(255,255,255,.70);
  border-radius:14px;
  padding:14px 14px 12px;
  text-decoration:none;

  background: linear-gradient(180deg, #134069 0%, #134069 60%); /* svjetlija teget */
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.tt-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.45);
  border-color: rgba(249,115,22,.45);
}

/* Naslov max 2 linije */
.tt-job-title{
  font-size:15px;
  font-weight:700;
  line-height:1.25;
  margin-bottom:6px;
  color:#f8fafc;
  letter-spacing: -0.01em;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Firma u jednoj liniji */
.tt-company{
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,.75);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Meta (grad + kategorija + plata) */
.tt-meta{
  margin-top: 6px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

/* Pillovi */
.tt-pill{
  font-size:11.5px;
  padding:5px 9px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.9);
  line-height: 1.1;
}

/* Plata ispod pillova */
.tt-salary{
  flex-basis: 100%;
  margin-left: 0;
  margin-top: 2px;
  font-size:12px;
  font-weight:700;
  color:#fdba74;
  white-space: nowrap;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 640px){

  .tt-card{
    height: auto !important;
    min-height: unset !important;
    padding: 12px;
    border-radius: 14px;
  }

  .tt-job-title{
    font-size: 16px;
    -webkit-line-clamp: 3;
    margin-bottom: 4px;
  }

  .tt-company{
    font-size: 12.5px;
    margin-bottom: 6px;
  }

  .tt-meta{
    margin-top: 6px;
    gap: 6px;
  }

  .tt-pill{
    padding: 0;
    border: none;
    background: transparent;
    font-size: 12px;
    color: rgba(255,255,255,.75);
  }

  .tt-pill::before{
    content: "• ";
    opacity: .6;
  }

  .tt-pill:first-child::before{
    content: "";
  }

  .tt-salary{
    display: block;
    flex-basis: 100%;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 700;
  }

  .tt-head{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 10px;
  }

  .tt-cta{
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    padding: 12px 14px;
    border-radius: 14px;
  }

  .tt-powered{
    font-size:10px;
    padding: 3px 7px;
    bottom:8px;
    right:8px;
  }
}

.tt-block .tt-cta,
.tt-block .tt-cta:hover,
.tt-block .tt-cta:visited,
.tt-block .tt-cta:focus,
.tt-block .tt-cta:active{
  color: #ffffff;
}

/* MOBILE HEADER LAYOUT – naslov u 2 reda + CTA desno */
@media (max-width: 640px){

  /* header u 2 kolone: lijevo naslov, desno CTA */
  .tt-head{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  /* naslov centriran, u 2 reda */
  .tt-title{
    text-align: left !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;

    display: block !important;      /* da ne clampuje u 1 liniju */
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }

  /* razbij naslov u 2 reda (ako je tekst "Pronađi tim — TvojTim.me") */
  .tt-title .tt-title-line{ 
    display:block; 
  }

  /* CTA desno, manji */
  .tt-cta{
    align-self: center !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    box-shadow: 0 6px 14px rgba(249,115,22,.35) !important;
  }
}

/* MOB: savršeno poravnanje naslova i CTA + simetričan razmak */
@media (max-width: 640px){

  /* Header u istom redu, vertikalno centriran */
  .tt-head{
    display: flex !important;
    align-items: center !important;        /* vertikalno poravnanje */
    justify-content: space-between !important;
    padding: 0 8px !important;             /* jednako lijevo/desno */
    margin-bottom: 12px !important;
  }

  /* Naslov – vertikalno u sredini sa dugmetom */
  .tt-title{
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    line-height: 1 !important;             /* skini dodatni line-height */
    padding: 0 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    font-size: 18px !important;
  }

  /* CTA – poravnat sa naslovom */
  .tt-cta{
    display: inline-flex !important;
    align-items: center !important;
    height: 34px !important;               /* fiksna visina da se poravna */
    padding: 0 10px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
}

/* Z FOLD / uski tableti – poseban layout */
@media (min-width: 650px) and (max-width: 900px){

  .tt-block{
    padding: 18px !important;
    border-radius: 20px !important;
  }

  /* Header: naslov + CTA u istom redu */
  .tt-head{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 10px !important;   /* simetrične margine */
    margin-bottom: 12px !important;
  }

  /* Naslov – max 1 red sa … */
  .tt-title{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    font-size: 22px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }

  /* CTA – manji */
  .tt-cta{
    padding: 10px 12px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    height: 38px !important;
    white-space: nowrap !important;
  }

  /* Kartice – malo kompaktnije */
  .tt-card{
    padding: 12px !important;
  }
}

/* Z FOLD POLISH (unfolded) */
@media (min-width: 650px) and (max-width: 900px){

  /* više vazduha sa strane + da se ne lijepi uz ivice */
  .tt-block{
    padding: 18px 20px !important;
  }

  /* Header: bolji balans lijevo/desno */
  .tt-head{
    padding: 0 14px !important;         /* simetrično */
    gap: 14px !important;
  }

  /* Naslov malo manji da ne “gura” CTA */
  .tt-title{
    font-size: 20px !important;
  }

  /* CTA malo kompaktniji da ne dominira */
  .tt-cta{
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
  }

  /* Kartice – fiksna visina i uredniji unutrašnji spacing */
  .tt-card{
    height: 170px !important;
    padding: 14px !important;
  }

  /* Da tekst u kartici ne “leti” */
  .tt-job-title{
    -webkit-line-clamp: 2 !important;
  }

  .tt-company{
    margin-top: 4px !important;
  }
}