/* Blog — Sidebar (shared by archive + single).
   Both sidebars compose the same .pr-blog-sb-panel primitive so the design
   stays consistent. Each panel is a paper-tinted card with a teal→pine
   gradient head (icon + title + corner glow) and a tight body. Bottom
   panel is a recolored conversion CTA pointing to /kontakt/#form. */

/* --- Sticky wrapper --------------------------------------------------- */
.pr-blog-sidebar{
  display:none;
}

/* Internal scroll: when the panel stack is taller than the viewport,
   the sidebar itself scrolls in place so the reader can reach the CTA
   without scrolling the whole page to its bottom. Custom scrollbar is
   slim teal — visible but unobtrusive. */
@media(min-width:1024px){
  .pr-blog-sidebar{
    display:flex;
    flex-direction:column;
    gap:22px;
    position:sticky;
    top:128px;
    align-self:start;
    max-height:calc(100vh - 148px);
    overflow-y:auto;
    padding-right:10px;
    scrollbar-width:thin;
    scrollbar-color:rgba(31,91,84,.4) rgba(31,91,84,.08);
  }
  .pr-blog-sidebar::-webkit-scrollbar{width:8px}
  .pr-blog-sidebar::-webkit-scrollbar-track{
    background:rgba(31,91,84,.08);
    border-radius:999px;
    margin:4px 0;
  }
  .pr-blog-sidebar::-webkit-scrollbar-thumb{
    background:rgba(31,91,84,.4);
    border-radius:999px;
  }
  .pr-blog-sidebar::-webkit-scrollbar-thumb:hover{background:rgba(31,91,84,.6)}
}

/* --- Panel ------------------------------------------------------------- */
.pr-blog-sb-panel{
  background:var(--paper);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 18px rgba(10,42,39,.07);
  border:1px solid var(--line);
  flex:0 0 auto;
  transition:transform .25s ease, box-shadow .3s ease;
}
.pr-blog-sb-panel:hover{
  box-shadow:0 8px 26px rgba(10,42,39,.1);
}

/* Head — teal→pine gradient bar with icon + title + decorative glow. */
.pr-blog-sb-panel__head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 20px;
  background:linear-gradient(135deg, var(--teal) 0%, var(--pine) 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
}
/* Soft mint glow in the top-right corner of the head. */
.pr-blog-sb-panel__head::after{
  content:'';
  position:absolute;
  right:-18px;top:-18px;
  width:64px;height:64px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(156,196,189,.45), transparent 65%);
  pointer-events:none;
}

.pr-blog-sb-panel__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  border-radius:9px;
  background:rgba(255,255,255,.14);
  color:#cfe2dd;
  flex-shrink:0;
  position:relative;z-index:1;
}
.pr-blog-sb-panel__icon svg{width:17px;height:17px}

.pr-blog-sb-panel__title{
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.92rem;
  font-weight:800;
  letter-spacing:.05em;
  margin:0;
  color:#fff;
  position:relative;z-index:1;
}

.pr-blog-sb-panel__body{
  padding:18px 18px 20px;
}

/* --- Search panel ----------------------------------------------------- */
.pr-blog-sb-search{
  display:flex;
  gap:0;
  border:1.5px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:var(--cream);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.pr-blog-sb-search:focus-within{
  border-color:var(--teal);
  background:var(--paper);
  box-shadow:0 0 0 3px rgba(31,91,84,.08);
}

.pr-blog-sb-search input[type="search"]{
  flex:1;min-width:0;
  padding:11px 14px;
  border:none;
  background:transparent;
  outline:none;
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.92rem;
  color:var(--pine);
}
.pr-blog-sb-search input::placeholder{color:var(--muted)}

.pr-blog-sb-search button{
  flex-shrink:0;
  width:46px;
  background:var(--teal);
  color:#fff;
  border:none;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.pr-blog-sb-search button:hover{background:var(--pine)}
.pr-blog-sb-search button svg{width:16px;height:16px}

/* --- Recent posts (shared between archive + single sidebars) -------- */
.pr-blog-sb-recent{
  list-style:none;
  margin:0;padding:0;
  display:flex;flex-direction:column;
}

.pr-blog-sb-recent__item{
  padding:13px 0;
  border-bottom:1px solid var(--line);
}
.pr-blog-sb-recent__item:first-child{padding-top:0}
.pr-blog-sb-recent__item:last-child{padding-bottom:0;border-bottom:none}

.pr-blog-sb-recent__link{
  display:flex;
  gap:13px;
  text-decoration:none;
  color:inherit;
  transition:transform .25s ease;
}
.pr-blog-sb-recent__link:hover{transform:translateX(3px)}

.pr-blog-sb-recent__thumb{
  flex-shrink:0;
  width:64px;height:64px;
  border-radius:10px;
  overflow:hidden;
  background:var(--cream);
}
.pr-blog-sb-recent__thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
}

.pr-blog-sb-recent__body{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:5px;
  justify-content:center;
}

.pr-blog-sb-recent__title{
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.9rem;
  font-weight:600;
  color:var(--pine);
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:color .2s;
}
.pr-blog-sb-recent__link:hover .pr-blog-sb-recent__title{color:var(--teal)}

.pr-blog-sb-recent__date{
  display:inline-flex;align-items:center;gap:6px;
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.76rem;
  color:var(--teal);
  font-weight:600;
}
.pr-blog-sb-recent__date svg{width:12px;height:12px;flex-shrink:0}

/* "Sve objave" pill — centered below the recent list. */
.pr-blog-sb-recent__all{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:18px auto 0;
  padding:10px 22px;
  background:var(--teal);
  color:#fff;
  text-decoration:none;
  border-radius:999px;
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.84rem;font-weight:700;
  letter-spacing:.04em;
  transition:background .2s ease, transform .15s ease, gap .2s ease;
  width:max-content;
  max-width:100%;
}
.pr-blog-sb-recent__all:hover{
  background:var(--pine);
  transform:translateY(-1px);
  gap:12px;
}
.pr-blog-sb-recent__all svg{width:14px;height:14px}

/* --- Categories list -------------------------------------------------- */
.pr-blog-sb-cats{
  list-style:none;
  margin:0;padding:0;
  display:flex;flex-direction:column;gap:8px;
}

.pr-blog-sb-cats__link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 14px;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:10px;
  text-decoration:none;
  transition:background .25s ease, border-color .25s ease, transform .15s ease;
}
.pr-blog-sb-cats__link:hover{
  background:var(--mint-50);
  border-color:var(--mint);
  transform:translateX(3px);
}
.pr-blog-sb-cats__item.is-active .pr-blog-sb-cats__link{
  background:var(--teal);
  border-color:var(--teal);
}

.pr-blog-sb-cats__name{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.9rem;
  font-weight:600;
  color:var(--pine);
  transition:color .2s;
}
.pr-blog-sb-cats__name svg{
  width:16px;height:16px;
  color:var(--teal);
  flex-shrink:0;
  transition:color .2s;
}
.pr-blog-sb-cats__item.is-active .pr-blog-sb-cats__name,
.pr-blog-sb-cats__item.is-active .pr-blog-sb-cats__name svg{color:#fff}

.pr-blog-sb-cats__count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:22px;padding:0 8px;
  background:var(--teal);
  color:#fff;
  border-radius:999px;
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.72rem;font-weight:800;line-height:1;
}
.pr-blog-sb-cats__item.is-active .pr-blog-sb-cats__count{
  background:#fff;
  color:var(--teal);
}

/* --- CTA promo panel ------------------------------------------------ */
.pr-blog-sb-panel--cta{overflow:hidden}

.pr-blog-sb-cta__head{
  background:linear-gradient(135deg, var(--sage) 0%, var(--teal) 100%);
  color:#fff;
  padding:22px 24px 18px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
/* Decorative dots in the corner for visual interest. */
.pr-blog-sb-cta__head::before{
  content:'';
  position:absolute;
  bottom:-20px;left:-20px;
  width:80px;height:80px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
  pointer-events:none;
}

.pr-blog-sb-cta__title{
  font-family:"Fraunces",serif;
  font-size:1.4rem;
  font-weight:400;
  margin:0 0 4px;
  color:#fff;
  letter-spacing:-.01em;
  position:relative;z-index:1;
}
.pr-blog-sb-cta__sub{
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.74rem;
  color:rgba(255,255,255,.88);
  margin:0;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  position:relative;z-index:1;
}

.pr-blog-sb-cta__body{
  padding:22px 22px 24px;
  text-align:center;
}

.pr-blog-sb-cta__text{
  font-size:.92rem;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0 0 18px;
}

.pr-blog-sb-cta__icons{
  display:flex;
  gap:10px;
  justify-content:center;
  margin:0 0 20px;
}

.pr-blog-sb-cta__dot{
  width:32px;height:32px;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--mint-50);
  color:var(--teal);
  border:1px solid var(--mint);
  box-shadow:0 2px 6px rgba(10,42,39,.06);
  transition:transform .25s ease, background .25s ease;
}
.pr-blog-sb-cta__dot:hover{
  transform:translateY(-2px);
  background:var(--mint);
}
.pr-blog-sb-cta__dot svg{width:14px;height:14px}

.pr-blog-sb-cta__btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 28px;
  background:var(--teal);
  color:#fff;
  text-decoration:none;
  border-radius:999px;
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.82rem;font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background .2s ease, transform .15s ease, box-shadow .25s ease;
  box-shadow:0 6px 16px rgba(31,91,84,.24);
}
.pr-blog-sb-cta__btn:hover{
  background:var(--pine);
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(15,58,54,.32);
}