/* ==========================================================================
   Section: Projects
   Hanging section tab → filters (sliding indicator) → dense project grid
   (FLIP-filtered by projects.js) → government works log → lightbox dialog.
   ========================================================================== */

.projects { overflow: hidden; }

/* Hanging tab drops from the top edge of the section (profile motif) */
.projects__head { position: relative; }
.projects__tab { margin-block-start: calc(var(--section-pad) * -1); margin-block-end: var(--space-6); }

/* ---------- Filters ---------- */
.projects__filters {
  display: flex;
  justify-content: center;
  margin-block-end: var(--space-10);
}
.projects__tabs { justify-content: center; max-width: 100%; }
@media (max-width: 639px) {
  .projects__tabs .tabs__btn { padding: 8px 12px; font-size: 13px; }
}

/* ---------- Grid ---------- */
.projects__grid {
  --row-h: clamp(220px, 22vw, 300px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: dense;
  gap: var(--space-8) var(--space-6);
}
@media (min-width: 640px) {
  .projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project--featured { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .projects__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.project { display: flex; flex-direction: column; min-width: 0; }
.project[hidden] { display: none; }

.project__link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--gradient-card);
  color: var(--white);
  isolation: isolate;
}
.project__media { display: block; height: var(--row-h); }
.project__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1100ms var(--ease-out), filter var(--dur-slow) var(--ease-standard);
}
/* Darkening + gold wash on hover */
.project__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8,7,14,.15) 0%, rgba(8,7,14,.05) 40%, rgba(8,7,14,.65) 100%);
  transition: background-color var(--dur-slow) var(--ease-standard);
}
.project__link:hover::before,
.project__link:focus-visible::before { background-color: rgba(8,7,14,.35); }
.project__link:hover .project__media > img,
.project__link:focus-visible .project__media > img { transform: scale(1.07); }

/* Gold corner lines draw in on hover (PhotoFrame motif) */
.project__link::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(var(--gold-500), var(--gold-500)) top left / 0 2px no-repeat,
    linear-gradient(var(--gold-500), var(--gold-500)) top left / 2px 0 no-repeat,
    linear-gradient(var(--gold-500), var(--gold-500)) bottom right / 0 2px no-repeat,
    linear-gradient(var(--gold-500), var(--gold-500)) bottom right / 2px 0 no-repeat;
  transition: background-size 520ms var(--ease-out);
}
.project__link:hover::after,
.project__link:focus-visible::after {
  background-size: 38% 2px, 2px 38%, 38% 2px, 2px 38%;
}

.project__badges {
  position: absolute;
  z-index: 3;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.project__count {
  position: absolute;
  z-index: 3;
  inset-block-end: 14px;
  inset-inline-end: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding-inline: 10px;
  border-radius: var(--radius-pill);
  background: rgba(8,7,14,.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: var(--weight-bold);
}
.project__count .fa-solid { color: var(--gold-500); }
.project__zoom {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--ink-900);
  font-size: 18px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-slow) var(--ease-out);
}
.project__link:hover .project__zoom,
.project__link:focus-visible .project__zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.project__info { display: flex; flex-direction: column; gap: 4px; padding-block-start: var(--space-4); }
.project__sector {
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--gold-500);
}
.project__title {
  font: var(--weight-extra) 17px/1.5 var(--font-arabic);
  color: var(--white);
}
.project__sub { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }

/* ---------- Government works log ---------- */
.record {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: var(--space-20);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
}
@media (min-width: 1024px) {
  .record { grid-template-columns: 340px minmax(0, 1fr); }
}
.record__side {
  display: flex;
  flex-direction: column;
  background: var(--gold-500);
  color: var(--ink-900);
}
.record__hazard { --hazard-h: 22px; --stripe: 8px; }
.record__side-body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); }
.record__side .section-tab { align-self: flex-start; background: var(--ink-900); color: var(--gold-500); }
.record__title { font: var(--weight-extra) clamp(20px, 2vw, 24px)/1.45 var(--font-arabic); }

.record__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-8);
  padding: var(--space-6) var(--space-8);
}
@media (min-width: 768px) {
  .record__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.record__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: 13px;
  border-block-end: 1px solid var(--border-subtle);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  transition: color var(--dur-base) var(--ease-standard), padding var(--dur-slow) var(--ease-out);
}
.record__list li:hover { color: var(--white); padding-inline-start: 6px; }
.record__list .fa-solid { margin-block-start: 4px; color: var(--gold-500); font-size: 13px; }

/* ==========================================================================
   Lightbox
   ========================================================================== */
html.lightbox-open { overflow: hidden; }

.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  overflow: hidden;
}
.lightbox::backdrop {
  background: rgba(5,0,9,.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lightbox[open] { animation: bx-lb-in 320ms var(--ease-out); }
.lightbox[open]::backdrop { animation: bx-fade-in 320ms var(--ease-standard); }
.lightbox.is-closing { animation: bx-lb-out 200ms var(--ease-standard) forwards; }
@keyframes bx-lb-in  { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes bx-lb-out { from { opacity: 1; } to { opacity: 0; transform: scale(.98); } }

.lightbox__inner {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  padding: var(--space-4) var(--space-4) var(--space-5);
  gap: var(--space-4);
}
.lightbox__bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--container-max);
  width: 100%;
  margin-inline: auto;
}
.lightbox__title {
  flex: 1;
  min-width: 0;
  font: var(--weight-extra) clamp(15px, 1.6vw, 19px)/1.4 var(--font-arabic);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lightbox__counter {
  flex: none;
  font-family: var(--font-display-latin);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gold-500);
}

.lightbox__btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: rgba(8,7,14,.6);
  color: var(--white);
  font-size: 17px;
  transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), transform var(--dur-slow) var(--ease-out);
}
.lightbox__btn:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-900); }
.lightbox__close:hover { transform: rotate(90deg); }

.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  min-height: 0;
  touch-action: pan-y;
}
.lightbox__img {
  max-width: min(100%, 1400px);
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transition: opacity 220ms var(--ease-standard), transform 360ms var(--ease-out);
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox__stage.is-leaving .lightbox__img  { opacity: 0; transform: scale(.97); }
.lightbox__stage.is-entering .lightbox__img { opacity: 0; transform: scale(1.03); transition: none; }

.lightbox__spinner {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: var(--gold-500);
  border-radius: 50%;
  opacity: 0;
  animation: bx-spin 800ms linear infinite;
  transition: opacity var(--dur-base) var(--ease-standard);
  pointer-events: none;
}
.lightbox__stage.is-loading .lightbox__spinner { opacity: 1; transition-delay: 200ms; }
@keyframes bx-spin { to { transform: rotate(360deg); } }

.lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  margin-top: -23px;
}
.lightbox__nav--prev { inset-inline-start: var(--space-4); }
.lightbox__nav--next { inset-inline-end: var(--space-4); }
[dir="ltr"] .lightbox__nav .fa-solid { transform: scaleX(-1); }
.lightbox.is-single .lightbox__nav,
.lightbox.is-single .lightbox__thumbs { display: none; }

.lightbox__thumbs {
  display: flex;
  justify-content: safe center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px;
}
.lightbox__thumbs::-webkit-scrollbar { display: none; }
.lightbox__thumb {
  flex: none;
  width: 72px;
  height: 50px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--ink-750);
  opacity: .5;
  transition: opacity var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-slow) var(--ease-out);
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__thumb:hover { opacity: .85; }
.lightbox__thumb[aria-current="true"] { opacity: 1; border-color: var(--gold-500); transform: translateY(-2px); }

@media (max-width: 639px) {
  .lightbox__nav { top: auto; bottom: 86px; margin-top: 0; }
  .lightbox__thumb { width: 56px; height: 40px; }
}