/* =========================
   Portfolio Page (La Dekor)
   ========================= */

/* ---- Page hero ---- */
.pagehero_section.pagehero--portfolio{
  position: relative;
  padding: 48px 0 40px;
  background:
    radial-gradient(900px 500px at 80% 10%, rgba(111,196,184,.10), transparent 60%),
    linear-gradient(180deg, #fff 0%, rgba(111,196,184,.06) 100%);
}
.pagehero_title{
  font-family: "Sen", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.1;
  margin: 10px 0 8px;
  color: var(--color-primary);
  font-size: clamp(32px, 4vw, 48px);
}
.pagehero_subtitle{
  color: var(--color-text);
  opacity: .9;
  font-size: clamp(15px, 1.2vw, 18px);
  margin: 8px auto 18px;
  max-width: 820px;
}
.breadcrumb_wrap{ margin-bottom: 8px; }
.breadcrumb{ background: transparent; padding: 0; margin: 0 0 6px; font-size: 13px; }
.breadcrumb a{ color: var(--color-primary); }
.breadcrumb .active{ color: rgba(3,21,58,.6); }

/* ---- Filteri ---- */
.pf_filters{
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 12px;
}
.pf_filter{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px; border-radius: 999px;
  font-weight: 700; font-size: 12px;
  background: rgba(0,60,114,.08);
  color: var(--color-primary);
  border: none;
  transition: transform .15s ease, background .15s ease;
  cursor: pointer;
}
.pf_filter:hover{ background: rgba(0,60,114,.14); transform: translateY(-1px); }
.pf_filter.is-active{ background: var(--color-primary); color: #fff; }

/* ---- Grid ---- */
.portfolio_grid{ padding: 28px 0 40px; }
.pf_grid{ row-gap: 18px; }

/* Card */
.pf_card{
  position: relative;
  background: #fff;
  border: 1px solid rgba(7,44,53,.06);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(7,44,53,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pf_card:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(7,44,53,.10); }

/* Slika (uniformni odnos stranica) */
.pf_img{
  width: 100%;
  aspect-ratio: 4/3;            /* moderan način za stabilnu mrežu */
  object-fit: cover;
  display: block;
}

/* Video thumb */
.pf_video_thumb{ position: relative; }
.pf_play{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 26px; width: 58px; height: 58px; border-radius: 999px;
  background: rgba(0,0,0,.45); color: #fff; margin: auto;
}

/* Hover overlay */
.pf_link{ position: relative; display: block; }
.pf_overlay{
  pointer-events: none;
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(0deg, rgba(3,21,58,.18), rgba(3,21,58,.18));
  opacity: 0; transition: opacity .18s ease;
}
.pf_card:hover .pf_overlay{ opacity: 1; }
.pf_action{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 12px; border-radius: 999px;
  background: #fff; color: var(--color-primary); font-weight: 800; font-size: 12px;
}

/* Meta */
.pf_meta{ padding: 10px 12px 12px; display: flex; align-items: center; justify-content: space-between; }
.pf_title{
  margin: 0; font-weight: 800; color: var(--color-primary);
  font-size: 16px; line-height: 1.25;
}
.pf_tag{
  display: inline-block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(0,60,114,.08);
  padding: 4px 8px; border-radius: 999px;
}

/* A11y focus */
a:focus, button:focus{
  outline: 3px solid rgba(0,60,114,.45);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Responsive */
@media (max-width: 991.98px){
  .pagehero_section.pagehero--portfolio{ padding: 40px 0 32px; }
}
@media (max-width: 575.98px){
  .pf_title{ font-size: 15px; }
}

/* ===== Masonry grid ===== */
.portfolio_masonry{ padding: 20px 0 36px; }
.pf_masonry{
  column-count: 3;
  column-gap: 14px;
}
.pf_masonry_item{
  display: inline-block;
  width: 100%;
  margin: 0 0 14px;
  break-inside: avoid; /* ključ za masonry */
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(7,44,53,.08);
}
.pf_masonry_item img{
  width: 100%;
  height: auto;
  display: block;
  transition: transform .25s ease;
}
.pf_masonry_item::after{
  content: "Pogledaj";
  position: absolute; left: 10px; bottom: 10px;
  font-size: 12px; font-weight: 800;
  background: #fff; color: var(--color-primary);
  padding: 6px 10px; border-radius: 999px;
  opacity: 0; transform: translateY(6px);
  transition: all .18s ease;
}
.pf_masonry_item:hover img{ transform: scale(1.03); }
.pf_masonry_item:hover::after{ opacity: 1; transform: translateY(0); }

/* Filteri iz hero sekcije rade i nad masonry gridom */
.pf_filter.is-active{ background: var(--color-primary); color: #fff; }

/* ===== Video grid ===== */
.portfolio_video{ padding: 8px 0 40px; background: linear-gradient(180deg, rgba(0,60,114,.04), rgba(0,60,114,.02)); }
.video_card{
  display: block; text-decoration: none;
}
.video_thumb{
  position: relative; border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 28px rgba(7,44,53,.10);
}
.video_thumb img{ width: 100%; display: block; }
.pf_play{
  position: absolute; inset: 0; display: grid; place-items: center;
  width: 58px; height: 58px; margin: auto; border-radius: 999px;
  background: rgba(0,0,0,.45); color: #fff; font-size: 24px;
}
.video_title{ margin: 8px 2px 0; font-size: 15px; color: var(--color-primary); font-weight: 800; }

/* Inline video koji otvara fancybox */
.video_inline{ display: none; max-width: 960px; }
.video_inline video{ width: 100%; height: auto; border-radius: 12px; }

/* Responsive masonry */
@media (max-width: 1199.98px){ .pf_masonry{ column-count: 3; } }
@media (max-width: 991.98px){ .pf_masonry{ column-count: 2; } }
@media (max-width: 575.98px){ .pf_masonry{ column-count: 1; } }