/* =========================================================
   projects-category.css
   Стилі для сторінки каталогу проєктів (категорія "Проекти").
   Bootstrap 3 base. container max-width: 1400px.

   Цей файл — синхронізована копія стилів, які раніше жили інлайново
   у <style> блоці catalog/view/theme/.../ocapp_blogcategory_projects.twig.
   Підключається через ControllerOCappLabBlogOCappBlogCategory::index()
   та ::filterProjects() (документ->addStyle), тому діє і на першому
   завантаженні сторінки, і на AJAX-партіал ocapp_blogproject_cards.twig.

   При зміні верстки картки/фільтра — редагувати ТІЛЬКИ цей файл,
   inline <style> у твіг-шаблоні видалено.
   ========================================================= */

/* ---- Variables (дублюємо з sn.css, щоб файл був самодостатнім) ---- */
:root {
  --white: #fff;
  --black: #272727;
  --blue: #0083FE;
  --orange: #D76800;
  --lightblue: #C3E2FF;
  --gray: #D9D9D9;
  --graybg: #f5f5f5;
  --lightgray: #F7F7F7;
  --rubik: 'Rubik', sans-serif;
  --inter: 'Inter', sans-serif;
}

/* ---- Reset container width ---- */
.container {
  max-width: 1400px;
}

.pc-main { padding-top: 36px; padding-bottom: 80px; }

/* ---- Filter bar ---- */
.pc-filter-bar {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 10px; margin-bottom: 36px;
}

/* pf-dropdown — custom multi-select */
.pf-dropdown { position: relative; }

/* Trigger button for the dropdown — uses class pc-filter-select-wrap */
.pc-filter-select-wrap {
  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 8px;
  background: var(--white); border: 1.5px solid var(--gray);
  border-radius: 10px; padding: 0 16px 0 12px;
  height: 52px; min-width: 260px;
  cursor: pointer; text-align: left;
  font-family: var(--inter); font-size: 15px; color: var(--black);
  -webkit-transition: border-color .2s; transition: border-color .2s;
  white-space: nowrap; overflow: hidden;
}
.pf-dropdown.open > .pc-filter-select-wrap,
.pc-filter-select-wrap:focus { border-color: var(--blue); outline: none; }

.pc-filter-icon {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  flex-shrink: 0; opacity: .5;
}
.pf-btn-label { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.pc-filter-chevron {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  color: #aaa; flex-shrink: 0; margin-left: auto;
  -webkit-transition: -webkit-transform .25s; transition: transform .25s;
}
.pf-dropdown.open .pc-filter-chevron { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

/* Меню дропдауну */
.pf-dropdown-menu {
  display: none; position: absolute; z-index: 1050;
  top: calc(100% + 6px); left: 0; min-width: 100%;
  background: var(--white); border: 1.5px solid var(--gray);
  border-radius: 8px; padding: 6px 0;
  max-height: 240px; overflow-y: auto;
  -webkit-box-shadow: 0 6px 20px rgba(0,0,0,.1); box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
.pf-dropdown.open .pf-dropdown-menu { display: block; }

/* Опція з кастомним чекбоксом */
.pf-option {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 10px; padding: 8px 14px;
  font-family: var(--inter); font-size: 15px; font-weight: 400;
  color: var(--black); cursor: pointer; margin: 0;
  -webkit-transition: background .15s; transition: background .15s;
  white-space: nowrap;
}
.pf-option:hover { background: var(--lightgray, #F7F7F7); }

/* Приховуємо нативний чекбокс */
.pf-check-input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Кастомний квадрат чекбоксу */
.pf-check-box {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 1.5px solid var(--gray); border-radius: 4px;
  background: var(--white); position: relative;
  -webkit-transition: border-color .2s, background .2s; transition: border-color .2s, background .2s;
}
.pf-check-input:checked ~ .pf-check-box {
  background: var(--blue); border-color: var(--blue);
}
.pf-check-input:checked ~ .pf-check-box::after {
  content: '';
  position: absolute; left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: 2px solid #fff; border-top: none; border-left: none;
  -webkit-transform: rotate(45deg); transform: rotate(45deg);
}

/* Reset button — sits inline with the dropdowns in the flex bar */
.pc-filter-actions {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.pc-filter-reset {
  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 7px;
  border: 1.5px solid var(--gray); border-radius: 10px;
  background: var(--white); padding: 0 20px; height: 52px;
  font-family: var(--inter); font-size: 15px; color: var(--black);
  cursor: pointer; -webkit-transition: border-color .2s, color .2s; transition: border-color .2s, color .2s;
}
.pc-filter-reset:hover { border-color: var(--blue); color: var(--blue); }
/* Result counter — direct child of .pc-filter-bar; margin-left:auto pushes it to the far right */
.pc-filter-count {
  font-family: var(--inter); font-size: 15px; color: #444;
  white-space: nowrap; font-weight: 400;
  margin-left: auto;
}

/* ---- Spinner ---- */
@-webkit-keyframes pc-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes pc-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
.pc-spinner { -webkit-animation: pc-spin 1s linear infinite; animation: pc-spin 1s linear infinite; }

/* ---- Grid ---- */
.pc-grid { margin-left: -12px; margin-right: -12px; }
.pc-card-col {
  padding-left: 12px; padding-right: 12px; margin-bottom: 24px;
  display: -webkit-box; display: -ms-flexbox; display: flex;
}

/* ---- Card ---- */
.pc-card {
  background: var(--white); border: 1.5px solid var(--gray); border-radius: 14px;
  /* overflow: hidden повернуто — бейджі (.pc-type-badges) лежать ВСЕРЕДИНІ
     .pc-card-img-wrap і не виходять за його межі, тому обрізку картки тут
     більше нічого не ламає. Без цього лишався білий проміжок зверху картки:
     .pc-card-img-wrap скруглений лише зверху (12px), а .pc-card — з усіх
     боків (14px), і без overflow:hidden цей зайвий 2px-кант було видно
     по периметру картки, найпомітніше — широкою білою смугою зверху. */
  overflow: hidden;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-orient: vertical; -webkit-box-direction: normal;
  -ms-flex-direction: column; flex-direction: column; width: 100%;
  position: relative;
  -webkit-transition: border-color .25s, -webkit-box-shadow .25s; transition: border-color .25s, box-shadow .25s;
}
.pc-card:hover { border-color: var(--blue); -webkit-box-shadow: 0 6px 28px rgba(0,131,254,.1); box-shadow: 0 6px 28px rgba(0,131,254,.1); }

/* Image */
.pc-card-img-wrap {
  position: relative;
  overflow: hidden; /* обрізає фото при zoom; бейджі лежать всередині й не виходять за межі */
  aspect-ratio: 16/10;
  border-radius: 12px 12px 0 0; /* скруглення верхніх кутів через обгортку */
}
.pc-card-img {
  width: 100%; height: 100%;
  -o-object-fit: cover; object-fit: cover;
  display: block;
  -webkit-transition: -webkit-transform .45s ease; transition: transform .45s ease;
}
.pc-card:hover .pc-card-img { -webkit-transform: scale(1.04); transform: scale(1.04); }

/* Badges wrapper — абсолютно позиціонований блок у лівому верхньому куті фото */
.pc-type-badges {
  position: absolute; top: 12px; left: 12px; z-index: 10;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-orient: vertical; -webkit-box-direction: normal;
  -ms-flex-direction: column; flex-direction: column;
  gap: 5px;
}
/* Окремий бейдж */
.pc-type-badge {
  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 5px; padding: 5px 11px 5px 8px; border-radius: 20px;
  font-family: var(--inter); font-size: 13px; font-weight: 500;
  color: var(--white); line-height: 1; -ms-flex-item-align: start; align-self: flex-start;
}
.pc-badge-ventilation  { background: rgba(0,131,254,.92); }
.pc-badge-conditioning { background: rgba(0,131,254,.92); }
.pc-badge-heating      { background: rgba(215,104,0,.92); }
.pc-badge-default      { background: rgba(108,143,164,.9); }

/* Card body */
.pc-card-body {
  padding: 20px 22px 24px;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-orient: vertical; -webkit-box-direction: normal;
  -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
}

/* Brand */
.pc-card-brand {
  min-height: 28px; margin-bottom: 12px;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  gap: 6px 14px;
}
.pc-brand-logo { max-height: 26px; max-width: 90px; width: auto; -o-object-fit: contain; object-fit: contain; display: block; }
.pc-brand-text { font-family: var(--inter); font-size: 13px; font-weight: 600; color: #6C8FA4; }

/* Title — font-weight 500 to match reference */
.pc-card-title { font-family: var(--rubik); font-size: 20px; font-weight: 500; color: var(--black); margin: 0 0 12px; line-height: 1.3; }
.pc-card-title a { color: var(--black); text-decoration: none; -webkit-transition: color .2s; transition: color .2s; }
.pc-card-title a:hover { color: var(--blue); }

/* Meta — location icon gap and row spacing match reference */
.pc-card-meta {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 6px; font-family: var(--inter); font-size: 14px; color: #666;
  margin-top: auto; margin-bottom: 20px;
}
/* Icon + location text: gap between pin icon and city name */
.pc-meta-location {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 5px;
}
.pc-meta-sep { color: var(--gray); padding: 0 2px; }

/* Link — align to the right edge of the card body */
.pc-card-link {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;
  gap: 5px; font-family: var(--inter); font-size: 15px; font-weight: 500;
  color: var(--blue)!important; text-decoration: none;
  -webkit-transition: gap .2s, color .2s; transition: gap .2s, color .2s;
}
.pc-card-link:hover { color: var(--orange)!important; gap: 9px; text-decoration: none; }

/* Empty */
.pc-empty { padding: 60px 0; text-align: center; font-family: var(--inter); font-size: 18px; color: #888; }

/* Pagination */
.pc-pagination-wrap { margin-top: 48px; text-align: center; }
.pc-pagination-wrap .pagination {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0;
}
.pc-pagination-wrap .pagination > li > a,
.pc-pagination-wrap .pagination > li > span {
  font-family: var(--inter); font-size: 15px; color: var(--black);
  border: 1.5px solid var(--gray); border-radius: 8px !important;
  min-width: 40px; height: 40px; padding: 0 10px;
  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  -webkit-transition: border-color .2s, color .2s, background .2s; transition: border-color .2s, color .2s, background .2s;
}
.pc-pagination-wrap .pagination > li > a:hover { border-color: var(--blue); color: var(--blue); background: var(--white); }
.pc-pagination-wrap .pagination > .active > a,
.pc-pagination-wrap .pagination > .active > span { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* Responsive */
@media (max-width: 991px) { .pc-filter-select-wrap { min-width: 190px; } }
@media (max-width: 767px) {
  .pc-filter-bar { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
  .pf-dropdown { width: 100%; }
  .pc-filter-select-wrap { min-width: unset; width: 100%; height: 48px; -webkit-box-sizing: border-box; box-sizing: border-box; }
  .pc-filter-actions { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
  .pc-filter-reset { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 48px; }
  .pc-filter-count { margin-left: 0; }
  .pc-card-col { display: block; }
  .pc-card-img-wrap { aspect-ratio: 16/9; }
}