/* Розділ «Проєкти»: архів, фільтри, пагінація й сторінка окремого проєкту, перенесено з html/css/style.css */

.projectPageGrid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
.projectPage-filter { display: none; }
.projectPage-filter-btn { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; width: 100%; font-size: 15px; font-weight: 600; letter-spacing: -0.5px; color: var(--fontColor1); background: var(--bgColor4); border: 0; padding: 12px; border-radius: 6px; text-decoration: none; cursor: pointer; }
.projectFilter-block { display: flex; flex-direction: column; margin: 0 0 24px 0; }
.projectFilter-block h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; margin: 0; padding: 0 0 24px 0; }
/* Fieldset — вимога доступності (contracts/templates.md §6.3), якої немає у
   верстці. Він стає новим батьком міток, тож мусить сам бути flex-колонкою:
   інакше .filterCheckbox зі своїм inline-flex течуть у рядок. min-width: 0
   знімає власну мінімальну ширину fieldset, яка ламає flex-розкладку. */
.projectFilter-block fieldset { display: flex; flex-direction: column; border: 0; margin: 0; padding: 0; min-width: 0; }
.projectPage-list { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.projectPage-pager { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; justify-content: center; margin: 56px 0; }
.projectPage-pager > * { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; font-size: 13px; font-weight: 300; color: var(--fontColor1); text-decoration: none; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 6px; }
.projectPage-pager > *.active { font-weight: 800; background: var(--bgColor4); border: 1px solid var(--bgColor4); }
.projectPage-empty { grid-column: 1 / -1; }

.fullProjectPageGrid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
.fullProject-left { font-size: 17px; font-weight: 300; letter-spacing: -0.5px; line-height: 1.4; }
.fullProject-left b { font-weight: 600; }
.fullProject-media { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; margin: 0 0 24px 0; }
.fullProject-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.fullProject-media img[hidden] { display: none; }
.fullProject-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--bgColor2); border-radius: 12px; padding: 24px; order: -1; }
.fullProject-cta > *:first-child { font-size: 20px; font-weight: 700; }
.fullProject-cta > *:last-child { font-size: 15px; font-weight: 700; color: var(--fontColor1); padding: 8px 18px; border-radius: 6px; background: var(--bgColor4); border: 0; text-decoration: none; cursor: pointer; }
.fullProject-btn-left { position: absolute; left: 24px; top: 50%; width: 18px; height: 18px; border: 0; background: transparent; padding: 0; cursor: pointer; }
.fullProject-btn-right { position: absolute; right: 24px; top: 50%; width: 18px; height: 18px; border: 0; background: transparent; padding: 0; cursor: pointer; }
.fullProject-btn-left::before { content: ""; display: block; width: 18px; height: 18px; border-left: 2px solid var(--bgColor0); border-bottom: 2px solid var(--bgColor0); transform: rotate(45deg); }
.fullProject-btn-right::before { content: ""; display: block; width: 18px; height: 18px; border-top: 2px solid var(--bgColor0); border-right: 2px solid var(--bgColor0); transform: rotate(45deg); }

.filterCheckbox { display: inline-flex; gap: 12px; cursor: pointer; user-select: none; margin: 0 0 12px 0; }
.filterCheckbox input { position: absolute; opacity: 0; pointer-events: none; }
.filterCheckbox-box { position: relative; display: block; flex: 0 0 24px; width: 24px; height: 24px; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 4px; background: var(--bgColor0); transition: 0.2s ease; }
.filterCheckbox input:checked + .filterCheckbox-box { background: var(--bgColor4); border-color: var(--bgColor4); }
.filterCheckbox input:checked + .filterCheckbox-box::after { content: ""; position: absolute; left: 10px; top: 5px; width: 4px; height: 9px; border: solid var(--bgColor3); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.filterCheckbox input:focus-visible + .filterCheckbox-box { outline: 4px solid var(--focusColor); outline-offset: 4px; }
.filterCheckbox-text { font-size: 16px; font-weight: 400; letter-spacing: -0.25px; padding: 3px 0 0 0; }

.projectFilter-submit { display: block; width: 100%; margin: 12px 0 0 0; font-size: 15px; font-weight: 600; letter-spacing: -0.5px; color: var(--fontColor1); background: var(--bgColor4); border: 0; padding: 12px; border-radius: 6px; cursor: pointer; }

/* JS активний: кнопка «Застосувати» самоподає форму на change, окрема
   кнопка стає зайвою (contracts/templates.md §6.3). */
.js .projectFilter-submit { display: none; }

@media (min-width: 768px) {
	.projectPage-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }

	.fullProjectPageGrid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
	.fullProject-left { font-size: 17px; font-weight: 300; letter-spacing: -0.5px; line-height: 1.4; }
	.fullProject-left b { font-weight: 600; }
	.fullProject-media { position: relative; aspect-ratio: auto; border-radius: 12px; overflow: hidden; margin: 0 0 24px 0; }
	.fullProject-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
	.fullProject-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--bgColor2); border-radius: 12px; padding: 24px; order: -1; }
	.fullProject-cta > *:first-child { font-size: 20px; font-weight: 700; }
	.fullProject-cta > *:last-child { font-size: 15px; font-weight: 700; color: var(--fontColor1); padding: 8px 18px; border-radius: 6px; background: var(--bgColor4); border: 0; text-decoration: none; cursor: pointer; }
	.fullProject-btn-left { left: 48px; }
	.fullProject-btn-right { right: 48px; }
}

@media (min-width: 1200px) {
	.projectPageGrid { display: grid; grid-template-columns: 1fr 3fr; gap: 32px; align-items: start; }
	.projectPage-filter { display: block; border-right: 2px solid rgba(0, 0, 0, 0.05); padding-right: 24px; }
	/* На ≥1200 px панель завжди видима: перебиває специфічність
	   .collapse:not(.show) із Bootstrap, під яку підпадає форма без
	   класу .show (contracts/templates.md §6.1). */
	#ge-project-filters.projectPage-filter { display: block !important; }
	.projectPage-filter-btn { display: none; }
	.projectFilter-block { display: flex; flex-direction: column; margin: 0 0 24px 0; }
	.projectFilter-block h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; margin: 0; padding: 0 0 24px 0; }
	.projectPage-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
	.projectPage-pager { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; justify-content: center; margin: 72px 0; }
	.projectPage-pager > * { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; font-size: 13px; font-weight: 300; color: var(--fontColor1); text-decoration: none; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 6px; }
	.projectPage-pager > *.active { font-weight: 800; background: var(--bgColor4); border: 1px solid var(--bgColor4); }

	.fullProjectPageGrid { display: grid; grid-template-columns: 6fr 2fr; gap: 32px; align-items: start; }
	.fullProject-left { font-size: 17px; font-weight: 300; letter-spacing: -0.5px; line-height: 1.4; }
	.fullProject-left b { font-weight: 600; }
	.fullProject-media { position: relative; aspect-ratio: auto; border-radius: 12px; overflow: hidden; margin: 0 0 24px 0; }
	.fullProject-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
	.fullProject-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--bgColor2); border-radius: 12px; padding: 24px; order: 1; }
	.fullProject-cta > *:first-child { font-size: 20px; font-weight: 700; }
	.fullProject-cta > *:last-child { font-size: 15px; font-weight: 700; color: var(--fontColor1); padding: 8px 18px; border-radius: 6px; background: var(--bgColor4); border: 0; text-decoration: none; cursor: pointer; }
	.fullProject-btn-left { left: 48px; }
	.fullProject-btn-right { right: 48px; }

	.filterCheckbox { display: inline-flex; gap: 12px; cursor: pointer; user-select: none; margin: 0 0 12px 0; }
	.filterCheckbox input { position: absolute; opacity: 0; pointer-events: none; }
	.filterCheckbox-box { position: relative; display: block; flex: 0 0 24px; width: 24px; height: 24px; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 4px; background: var(--bgColor0); transition: 0.2s ease; }
	.filterCheckbox input:checked + .filterCheckbox-box { background: var(--bgColor4); border-color: var(--bgColor4); }
	.filterCheckbox input:checked + .filterCheckbox-box::after { content: ""; position: absolute; left: 10px; top: 5px; width: 4px; height: 9px; border: solid var(--bgColor3); border-width: 0 2px 2px 0; transform: rotate(45deg); }
	.filterCheckbox input:focus-visible + .filterCheckbox-box { outline: 4px solid var(--focusColor); outline-offset: 4px; }
	.filterCheckbox-text { font-size: 16px; font-weight: 400; letter-spacing: -0.25px; padding: 3px 0 0 0; }

	.projectFilter-submit { display: none; }
}