/* ==========================================================================
   portfolio.css — услуги, проекти и галерии ( showcases )

   Зарежда се през $styles от шестте контролера:
     services.php · service.php · projects.php · project.php
     showcases.php · showcase.php
   както searching.css при категориите, product.css при продуктите и
   blog.css при статиите. global.css НЕ се пипа.

   Всички цветове и отстъпи идват от токените в :root на global.css
   ( --fd-ink, --fd-leaf, --fd-sprout, --fd-mist, --fd-space-*, --fd-fs-*,
     --fd-radius, --fd-wrap, --fd-ease ).

   ВНИМАНИЕ — договор с assets/js/blog.js:
   секция 7 ( галерия ) НЕ е свободна за преименуване. blog.js търси
   [data-post-gallery] и .fd-postgal__i, а wrapTables() обвива широките
   таблици в .fd-scroll-x. Същите имена стоят и в blog.css, но двата файла
   никога не се зареждат заедно ( блог ≠ портфолио ), затова дублирането е
   съзнателно: така лайтбоксът е един и същ навсякъде, без втора
   имплементация.

   Секции:
      1. Заглавен блок на списъка
      2. Грид + карта
      3. Детайлна: заглавен блок и корица
      4. Детайлна: решетка + сайдбар
      5. Сайдбар ( дърво на услугите, последни проекти )
      6. Текст от редактора
      7. Галерия      ( договор с blog.js )
      8. Лента „още по темата"
      9. Responsive
   ========================================================================== */


/* ==================== 1. Заглавен блок на списъка ==================== */

.fd-pf__head{
  padding:var(--fd-space-5) 0 var(--fd-space-4);
  background:var(--fd-surface);
  border-bottom:1px solid var(--fd-border);
}
.fd-pf__h1{
  font-size:var(--fd-fs-h1);
  line-height:var(--fd-lh-tight);
  letter-spacing:-.02em;
  margin:var(--fd-space-2) 0 0;
  text-wrap:balance;
}
.fd-pf__h2{
  font-size:var(--fd-fs-h3);
  font-weight:500;
  color:var(--fd-text-muted);
  margin:var(--fd-space-2) 0 0;
  max-width:70ch;
}
.fd-pf__intro{
  margin-top:var(--fd-space-3);
  max-width:75ch;
  color:var(--fd-text-muted);
  line-height:1.7;
}
.fd-pf__intro p{margin:0 0 var(--fd-space-2)}
.fd-pf__intro > *:last-child{margin-bottom:0}


/* ==================== 2. Грид + карта ==================== */

.fd-pf{padding:var(--fd-space-6) 0 var(--fd-space-7)}

.fd-pfgrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--fd-space-4);
}

.fd-pf__empty{
  padding:var(--fd-space-6) 0;
  color:var(--fd-text-muted);
  font-size:1.05rem;
}

.fd-tile{
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid var(--fd-border);
  border-radius:var(--fd-radius);
  overflow:hidden;
  background:var(--fd-paper);
  transition:border-color .18s var(--fd-ease),box-shadow .22s var(--fd-ease),transform .22s var(--fd-ease);
}
.fd-tile:hover{
  border-color:var(--fd-leaf-light);
  box-shadow:0 14px 30px -22px rgba(4,21,25,.5);
  transform:translateY(-2px);
}

.fd-tile__visual{
  display:block;
  position:relative;
  aspect-ratio:16/10;
  background:var(--fd-mist);
  overflow:hidden;
}
.fd-tile__visual img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .5s var(--fd-ease);
}
.fd-tile:hover .fd-tile__visual img{transform:scale(1.04)}

/* Плейсхолдър, когато записът няма снимка — четири варианта по id,
   за да не изглежда целият списък като едно и също поле. */
.fd-tile__ph{
  position:absolute;inset:0;
  display:grid;place-items:center;
  background:linear-gradient(150deg,#eef3e6 0%,#dfe9d2 100%);
}
.fd-tile__ph[data-ph="1"]{background:linear-gradient(150deg,#eaf1f0 0%,#d5e3e0 100%)}
.fd-tile__ph[data-ph="2"]{background:linear-gradient(150deg,#f4f1e4 0%,#e6dfc9 100%)}
.fd-tile__ph[data-ph="3"]{background:linear-gradient(150deg,#edf0e2 0%,#dbe4c8 100%)}
.fd-tile__ph svg{width:56px;height:56px;color:var(--fd-leaf);opacity:.28}

.fd-tile__body{
  display:flex;
  flex-direction:column;
  gap:var(--fd-space-2);
  padding:var(--fd-space-3) var(--fd-space-3) var(--fd-space-4);
  flex:1;
}
.fd-tile__name{
  font-size:1.05rem;
  line-height:1.3;
  letter-spacing:-.01em;
  margin:0;
}
.fd-tile__name a{color:var(--fd-text)}
.fd-tile__name a:hover{color:var(--fd-leaf)}
.fd-tile__resume{
  margin:0;
  font-size:var(--fd-fs-body);
  line-height:1.6;
  color:var(--fd-text-muted);
}
.fd-tile__meta{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--fd-text-muted);
}
.fd-tile__more{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:auto;padding-top:var(--fd-space-2);
  font-size:var(--fd-fs-small);font-weight:700;color:var(--fd-leaf);
}
.fd-tile__more svg{width:14px;height:14px;transition:transform .18s var(--fd-ease)}
.fd-tile:hover .fd-tile__more svg{transform:translateX(3px)}

/* Галериите са предимно снимка — квадрат и без резюме. */
.fd-pfgrid--gal .fd-tile__visual{aspect-ratio:4/3}


/* ==================== 3. Детайлна: заглавен блок и корица ==================== */

.fd-entry__head{
  padding:var(--fd-space-5) 0 var(--fd-space-4);
  background:var(--fd-surface);
  border-bottom:1px solid var(--fd-border);
}
.fd-entry__h1{
  font-size:var(--fd-fs-h1);
  line-height:var(--fd-lh-tight);
  letter-spacing:-.02em;
  margin:var(--fd-space-2) 0 0;
  text-wrap:balance;
}
.fd-entry__h2{
  font-size:var(--fd-fs-h3);
  font-weight:500;
  color:var(--fd-text-muted);
  margin:var(--fd-space-2) 0 0;
  max-width:70ch;
}
.fd-entry__meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin-top:var(--fd-space-3);
  font-size:var(--fd-fs-small);color:var(--fd-text-muted);
}
.fd-entry__dot{
  width:4px;height:4px;border-radius:50%;
  background:currentColor;opacity:.45;
}

.fd-entry__cover{margin-top:var(--fd-space-5)}
.fd-entry__cover img{
  width:100%;
  aspect-ratio:21/9;
  object-fit:cover;
  border-radius:var(--fd-radius-lg);
  background:var(--fd-mist);
}


/* ==================== 4. Детайлна: решетка + сайдбар ==================== */

.fd-entry__grid{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:var(--fd-space-6);
  padding:var(--fd-space-6) 0 var(--fd-space-7);
  align-items:start;
}
/* Без сайдбар ( галерия ) — една колона, но същите отстъпи. */
.fd-entry__grid--solo{grid-template-columns:minmax(0,1fr)}

.fd-entry__aside{min-width:0;align-self:stretch}
.fd-entry__sticky{
  position:sticky;
  top:138px;
  display:flex;
  flex-direction:column;
  gap:var(--fd-space-4);
}
.fd-entry__main{min-width:0}


/* ==================== 5. Сайдбар ==================== */

.fd-pfside{
  border:1px solid var(--fd-border);
  border-radius:var(--fd-radius);
  padding:var(--fd-space-3);
  background:var(--fd-paper);
}
.fd-pfside--mist{background:var(--fd-mist);border-color:transparent}
.fd-pfside__h{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fd-text-muted);
  margin:0 0 var(--fd-space-3);
}

/* --- дърво на услугите ( сървърен HTML от model_services::tree ) --- */
.fd-pftree ul{margin:0;padding:0;list-style:none}
.fd-pftree > ul > li + li{border-top:1px solid var(--fd-border)}
.fd-pftree li a{
  display:block;
  padding:9px 0;
  font-size:var(--fd-fs-body);
  font-weight:600;
  color:var(--fd-text);
  line-height:1.4;
}
.fd-pftree li a:hover{color:var(--fd-leaf)}
.fd-pftree ul.child{
  margin:0 0 var(--fd-space-2) var(--fd-space-3);
  padding-left:var(--fd-space-3);
  border-left:2px solid var(--fd-border);
}
.fd-pftree ul.child li a{
  padding:6px 0;
  font-size:var(--fd-fs-small);
  font-weight:500;
  color:var(--fd-text-muted);
}
.fd-pftree ul.child li a:hover{color:var(--fd-leaf)}

/* --- малки карти ( последни проекти ) --- */
.fd-pfmini{display:grid;gap:var(--fd-space-3);margin:0;padding:0;list-style:none}
.fd-pfmini li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:11px;align-items:center}
.fd-pfmini__img{
  display:block;width:72px;height:54px;
  border-radius:8px;overflow:hidden;background:var(--fd-mist);
}
.fd-pfmini__img img{width:100%;height:100%;object-fit:cover}
.fd-pfmini__b{min-width:0}
.fd-pfmini__n{
  display:block;font-size:var(--fd-fs-small);font-weight:700;line-height:1.35;
  color:var(--fd-text);
}
.fd-pfmini__n:hover{color:var(--fd-leaf)}
.fd-pfmini time{display:block;margin-top:2px;font-size:11.5px;color:var(--fd-text-muted)}

/* --- прост списък с линкове ( други услуги ) --- */
.fd-pflinks{display:grid;margin:0;padding:0;list-style:none}
.fd-pflinks li + li{border-top:1px solid var(--fd-border)}
.fd-pflinks a{
  display:flex;align-items:center;gap:8px;
  padding:9px 0;
  font-size:var(--fd-fs-body);font-weight:600;color:var(--fd-text);line-height:1.4;
}
.fd-pflinks a svg{width:14px;height:14px;flex:none;color:var(--fd-leaf-light);transition:transform .18s var(--fd-ease)}
.fd-pflinks a:hover{color:var(--fd-leaf)}
.fd-pflinks a:hover svg{transform:translateX(3px);color:var(--fd-leaf)}


/* ==================== 6. Текст от редактора ==================== */

/* Страницата е на пълна ширина, но редът на четене — не. */
.fd-entry__resume{
  font-size:1.05rem;line-height:1.65;font-weight:500;color:var(--fd-text);
  border-left:3px solid var(--fd-sprout);
  padding-left:var(--fd-space-3);
  margin-bottom:var(--fd-space-5);
  max-width:80ch;
}
.fd-entry__content{font-size:1rem;line-height:1.8;color:var(--fd-text);max-width:80ch}
.fd-entry__content > *:first-child{margin-top:0}
.fd-entry__content > *:last-child{margin-bottom:0}
.fd-entry__content p{margin:0 0 var(--fd-space-3)}
.fd-entry__content h2{
  font-size:1.5rem;line-height:1.25;letter-spacing:-.015em;
  margin:var(--fd-space-6) 0 var(--fd-space-3);
  text-wrap:balance;
}
.fd-entry__content h3{font-size:1.2rem;line-height:1.3;margin:var(--fd-space-5) 0 var(--fd-space-2)}
.fd-entry__content h4{font-size:1.05rem;line-height:1.35;margin:var(--fd-space-4) 0 var(--fd-space-2)}
.fd-entry__content strong,.fd-entry__content b{font-weight:700}
.fd-entry__content a{color:var(--fd-leaf);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.fd-entry__content a:hover{color:var(--fd-leaf-lift)}
.fd-entry__content ul,.fd-entry__content ol{margin:0 0 var(--fd-space-3);padding:0;display:grid;gap:8px}
.fd-entry__content ul li{position:relative;padding-left:22px;list-style:none}
.fd-entry__content ul li::before{
  content:"";position:absolute;left:5px;top:.7em;
  width:6px;height:6px;border-radius:50%;background:var(--fd-sprout);
}
.fd-entry__content ol{padding-left:20px}
.fd-entry__content ol li{list-style:decimal;padding-left:4px}
.fd-entry__content img{max-width:100%;height:auto;border-radius:var(--fd-radius);margin:var(--fd-space-3) 0}
.fd-entry__content blockquote{
  margin:var(--fd-space-4) 0;padding:var(--fd-space-3) var(--fd-space-4);
  background:var(--fd-mist);border-radius:var(--fd-radius);
  font-style:italic;color:var(--fd-text);
}
.fd-entry__content hr{border:0;border-top:1px solid var(--fd-border);margin:var(--fd-space-5) 0}
.fd-entry__content table{width:100%;border-collapse:collapse;font-size:var(--fd-fs-body);margin:0 0 var(--fd-space-3)}
.fd-entry__content th,.fd-entry__content td{border:1px solid var(--fd-border);padding:9px 12px;text-align:left}
.fd-entry__content th{background:var(--fd-mist);font-weight:700}

/* blog.js обвива широките таблици в този контейнер ( wrapTables ) */
.fd-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:var(--fd-space-3)}
.fd-scroll-x table{margin-bottom:0}


/* ==================== 7. Галерия ( договор с blog.js ) ==================== */

.fd-postgal{margin-top:var(--fd-space-6)}
.fd-postgal--solo{margin-top:0}
.fd-postgal__h{font-size:1.25rem;letter-spacing:-.01em;margin:0 0 var(--fd-space-3)}
.fd-postgal__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--fd-space-2);
}
.fd-postgal__i{
  position:relative;display:block;padding:0;
  aspect-ratio:1;
  border:0;border-radius:var(--fd-radius);
  overflow:hidden;background:var(--fd-mist);
  cursor:zoom-in;
}
.fd-postgal__i img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--fd-ease)}
.fd-postgal__i:hover img{transform:scale(1.06)}
.fd-postgal__i:focus-visible{outline:2px solid var(--fd-sprout);outline-offset:2px}
.fd-postgal__zoom{
  position:absolute;right:8px;bottom:8px;
  width:28px;height:28px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(4,21,25,.55);color:#fff;
  opacity:0;transition:opacity .2s var(--fd-ease);
}
.fd-postgal__zoom svg{width:14px;height:14px}
.fd-postgal__i:hover .fd-postgal__zoom{opacity:1}


/* ==================== 8. Лента „още по темата" ==================== */

.fd-pfrel{
  padding:var(--fd-space-6) 0;
  background:var(--fd-surface);
  border-top:1px solid var(--fd-border);
}
.fd-pfrel__h{font-size:var(--fd-fs-h3);letter-spacing:-.01em;margin:0 0 var(--fd-space-4)}


/* ==================== 9. Responsive ==================== */

@media (max-width:1180px){
  .fd-entry__grid{grid-template-columns:250px minmax(0,1fr);gap:var(--fd-space-5)}
}

@media (max-width:1000px){
  .fd-pfgrid{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* сайдбарът минава под текста и спира да е лепкав */
  .fd-entry__grid{grid-template-columns:minmax(0,1fr);gap:var(--fd-space-5)}
  .fd-entry__aside{order:2}
  .fd-entry__main{order:1}
  .fd-entry__sticky{
    position:static;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--fd-space-3);
  }

  .fd-entry__cover img{aspect-ratio:16/9}
  .fd-postgal__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:700px){
  .fd-pf__head,
  .fd-entry__head{padding:var(--fd-space-4) 0 var(--fd-space-3)}
  .fd-pf{padding:var(--fd-space-5) 0 var(--fd-space-6)}
  .fd-entry__grid{padding:var(--fd-space-5) 0 var(--fd-space-6)}

  .fd-pfgrid{grid-template-columns:minmax(0,1fr)}
  .fd-entry__sticky{grid-template-columns:minmax(0,1fr)}

  .fd-entry__cover img{aspect-ratio:16/10;border-radius:var(--fd-radius)}
  .fd-postgal__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fd-entry__content h2{margin-top:var(--fd-space-5)}
}

@media (prefers-reduced-motion:reduce){
  .fd-tile,
  .fd-tile__visual img,
  .fd-postgal__i img,
  .fd-tile__more svg,
  .fd-pflinks a svg{transition:none!important;transform:none!important}
}