/* ==========================================================================
   Projects — archive and detail
   Reference: system-pages.css lines 123-198
   ========================================================================== */

/* -------------------------------------------------------------------------
   Projects archive — hero
   ------------------------------------------------------------------------- */

.nesr-projects-hero {
  padding-block: 34px 84px;
  background: var(--nesr-dark-1);
  color: var(--nesr-white);
}
/*
 * No min-height here.
 *
 * It used to be 380px with align-items: flex-end, which is the pattern the
 * store and solutions heroes use — but those have an image in the opposite
 * column that the height is matching. This hero has only the project count,
 * so the reserved height was never filled: it pushed the whole title block
 * down and left a band of dead space under the breadcrumb.
 */
.nesr-projects-hero__title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  margin-block-start: 44px;
}
.nesr-projects-hero__title > div { max-width: 820px; }
.nesr-projects-hero__title h1 {
  margin-block: 16px 18px;
  font-size: var(--nesr-fs-hero);
  line-height: 1.14;
  font-weight: 600;
}
.nesr-projects-hero__title p { color: rgba(255, 255, 255, .62); font-size: 18px; }

/*
 * Derived from the hero size rather than given its own clamp.
 *
 * With two independent clamps the count overtook the h1 between roughly
 * 1000px and 1300px, because the two curves cross. A ratio cannot cross.
 */
.nesr-archive-count {
  display: flex;
  flex-direction: column;
  color: var(--nesr-orange);
  font-size: calc(var(--nesr-fs-hero) * .85);
  line-height: 1;
}
.nesr-archive-count small {
  margin-block-start: 8px;
  color: rgba(255, 255, 255, .5);
  font-size: 12px;
}

/* -------------------------------------------------------------------------
   Filters — real taxonomy links that work without JavaScript
   ------------------------------------------------------------------------- */

/*
 * The projects archive has two sticky elements: header (78px) and filter bar (~72px).
 * The offset is defined on html, not body — CSS variables inherit downwards only,
 * and scroll-padding-top applies to html.
 */
html:has(.nesr-project-filters) { --nesr-sticky-offset: 150px; }

/*
 * Fallback for browsers without :has — keeps the targeted card from hiding
 * behind the two bars when jumped to or focused via keyboard.
 */
.nesr-project-card { scroll-margin-top: 166px; }

.nesr-project-filters {
  position: sticky;
  z-index: 20;
  top: 78px;
  border-bottom: 1px solid var(--nesr-border);
  background: rgba(248, 246, 243, .95);
  backdrop-filter: blur(16px);
}
.nesr-project-filters__list {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-block: 16px;
}
.nesr-project-filters__list a {
  flex: 0 0 auto;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding-inline: 16px;
  border: 1px solid var(--nesr-border);
  border-radius: 99px;
  color: var(--nesr-muted);
  font-size: 13px;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.nesr-project-filters__list a:hover,
.nesr-project-filters__list a[aria-current="page"] {
  border-color: var(--nesr-ink);
  background: var(--nesr-ink);
  color: var(--nesr-white);
}
.nesr-project-filters__count {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  margin-inline-start: auto;
  padding-inline: 14px;
  color: var(--nesr-muted);
  font-size: 12px;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Projects grid
   ------------------------------------------------------------------------- */

.nesr-project-grid-section { padding-block: 55px 105px; }
.nesr-project-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  gap: 42px 22px;
}

.nesr-project-card { grid-column: span 6; }
.nesr-project-card figure {
  position: relative;
  height: 420px;
  overflow: hidden;
  border-radius: var(--nesr-radius-card);
}
.nesr-project-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.84);
  transition: transform 400ms ease;
}
.nesr-project-card:hover figure img { transform: scale(1.03); }
.nesr-project-card figure > span {
  position: absolute;
  inset-inline-start: 14px;
  top: 14px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--nesr-ink);
  font-size: 11px;
}
.nesr-project-card__body {
  position: relative;
  padding-block-start: 18px;
  padding-inline-end: 48px;
}
.nesr-project-card__term { color: var(--nesr-orange-hover); font-size: 13px; font-weight: 600; }
.nesr-project-card h2 { margin-block: 6px; font-size: 25px; font-weight: 600; }
.nesr-project-card p { color: var(--nesr-muted); font-size: 14px; }
.nesr-project-card__arrow {
  position: absolute;
  inset-inline-end: 0;
  top: 24px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--nesr-border);
  border-radius: 50%;
}

/* Alternating visual rhythm, matching the reference */
.nesr-project-card:nth-child(even) { margin-block-start: 46px; }
.nesr-project-card:nth-child(even) figure { height: 360px; }
.nesr-project-card:nth-child(3n) figure { height: 480px; }

/* -------------------------------------------------------------------------
   Load more
   ------------------------------------------------------------------------- */

.nesr-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  margin-block-start: 54px;
}
.nesr-load-more .nesr-button { min-width: 230px; }
.nesr-load-more > span { color: var(--nesr-muted); font-size: 12px; }

/* Loading state */
.nesr-load-more__spinner {
  width: 18px;
  height: 18px;
  display: none;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: var(--nesr-white);
  border-radius: 50%;
  animation: nesr-spin 700ms linear infinite;
}
[data-nesr-load-more].is-loading .nesr-load-more__spinner { display: block; }
[data-nesr-load-more].is-loading {
  opacity: .75;
  cursor: progress;
  transform: none;
}
[data-nesr-load-more][aria-disabled="true"] { pointer-events: none; }

@keyframes nesr-spin {
  to { transform: rotate(360deg); }
}

/* Appended cards fade in instead of snapping into place */
.nesr-project-card { animation: nesr-card-in 320ms ease both; }

@keyframes nesr-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------------
   Filtering state

   The outgoing cards stay in place and fade rather than being cleared on
   click. Blanking the grid first would collapse the page height and throw
   the scroll position around for what is usually a sub-200ms request.
   ------------------------------------------------------------------------- */

.nesr-project-grid[aria-busy="true"] {
  opacity: .38;
  transition: opacity 160ms ease;
  pointer-events: none;
}

/*
 * An indeterminate line across the bottom of the sticky filter bar.
 * .nesr-project-filters is already position: sticky, which is a positioned
 * ancestor, so this anchors to it without any extra wrapper.
 */
.nesr-project-filters__progress {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  display: block;
  overflow: hidden;
  opacity: 0;
  transition: opacity 140ms ease;
  pointer-events: none;
}
.nesr-project-filters__progress::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inline-size: 38%;
  background: var(--nesr-orange);
  animation: nesr-progress 1s ease-in-out infinite;
}
.nesr-project-filters.is-loading .nesr-project-filters__progress { opacity: 1; }

/*
 * Chips stay clickable while a request is in flight — a newer choice aborts
 * the older one — but the stale count is dimmed so it is not misread.
 */
.nesr-project-filters.is-loading .nesr-project-filters__count { opacity: .45; }

@keyframes nesr-progress {
  from { inset-inline-start: -38%; }
  to   { inset-inline-start: 100%; }
}

/* -------------------------------------------------------------------------
   Empty state inside the grid
   ------------------------------------------------------------------------- */

/* It is a grid child, so switch the grid to block rather than let it sit in
   one 12-column track. */
.nesr-project-grid.is-empty { display: block; }
.nesr-project-grid .nesr-empty-state .nesr-icon {
  width: 34px;
  height: 34px;
  margin-block-end: 14px;
  color: var(--nesr-border);
}
.nesr-empty-state__action { margin-block-start: 20px; }

@media (prefers-reduced-motion: reduce) {
  .nesr-project-card { animation: none; }
  .nesr-load-more__spinner { animation-duration: 1.5s; }
  .nesr-project-filters__progress::before { animation-duration: 2.4s; }
}

/* -------------------------------------------------------------------------
   Project page
   ------------------------------------------------------------------------- */

.nesr-project-intro { padding-block: 32px 50px; }
/* Same reasoning as the archive hero: title plus a meta list, no image
   column, so a reserved height is only ever empty space. */
.nesr-project-intro__title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  margin-block-start: 40px;
}
.nesr-project-intro__title h1 {
  margin-block-start: 14px;
  font-size: var(--nesr-fs-hero);
  line-height: 1.14;
  font-weight: 600;
}
.nesr-project-meta {
  display: grid;
  grid-template-columns: auto auto;
  gap: 9px 25px;
  padding: 20px 0;
  border-block: 1px solid var(--nesr-border);
}
.nesr-project-meta dt { color: var(--nesr-muted); font-size: 13px; }
.nesr-project-meta dd { margin: 0; font-weight: 600; }

.nesr-project-cover figure {
  height: min(72vw, 780px);
  overflow: hidden;
  border-radius: var(--nesr-radius-panel);
}
.nesr-project-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.84) contrast(1.04);
}

.nesr-project-story { padding-block: 100px; }
.nesr-project-story > .nesr-container {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
}
.nesr-project-story__index {
  display: block;
  margin-block-end: 55px;
  color: var(--nesr-orange);
  font-size: 62px;
  line-height: 1;
}
.nesr-project-story h2 { margin-block-start: 12px; font-size: 34px; font-weight: 600; }
.nesr-project-story__lead {
  max-width: 700px;
  color: var(--nesr-ink-2);
  font-size: 23px;
  line-height: 1.8;
}
.nesr-project-story dl {
  margin-block-start: 34px;
  padding-block: 20px;
  border-block: 1px solid var(--nesr-border);
}
.nesr-project-story dt { color: var(--nesr-muted); font-size: 13px; }
.nesr-project-story dd { margin: 4px 0 0; font-weight: 600; }

.nesr-project-gallery { padding-block-end: 105px; }
.nesr-project-gallery > .nesr-container {
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-template-rows: repeat(2, 330px);
  gap: 18px;
}
.nesr-project-gallery figure { overflow: hidden; border-radius: var(--nesr-radius-card); }
.nesr-project-gallery figure:first-child { grid-row: 1 / 3; }
.nesr-project-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.84);
}

/* -------------------------------------------------------------------------
   Related projects
   ------------------------------------------------------------------------- */

.nesr-related-projects { padding-block: 100px; }
.nesr-related-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-block-start: 34px;
}
.nesr-related-projects img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--nesr-radius-card);
  filter: saturate(.84);
}
.nesr-related-projects__term {
  display: block;
  margin-block-start: 14px;
  color: var(--nesr-orange-hover);
  font-size: 12px;
}
.nesr-related-projects h3 { margin-block-start: 4px; font-size: 19px; font-weight: 600; }

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 900px) {
  html:has(.nesr-project-filters) { --nesr-sticky-offset: 142px; }
  .nesr-project-card { scroll-margin-top: 158px; }

  .nesr-projects-hero__title { margin-block-start: 34px; }
  .nesr-project-filters { top: 70px; }
  .nesr-project-grid { gap: 50px 18px; }
  .nesr-project-card figure,
  .nesr-project-card:nth-child(3n) figure { height: 400px; }
  .nesr-project-intro__title { margin-block-start: 30px; }
  .nesr-project-story > .nesr-container { grid-template-columns: 1fr; gap: 40px; }
  .nesr-project-story__index { margin-block-end: 30px; }
}

@media (max-width: 640px) {
  .nesr-projects-hero { padding-block: 22px 58px; }
  /* Stacked, and the count moves above the title as a small stat line. */
  .nesr-projects-hero__title {
    align-items: flex-start;
    flex-direction: column-reverse;
    gap: 22px;
    margin-block-start: 26px;
  }
  .nesr-projects-hero__title p { font-size: 15px; }
  /* h1 and the count are both governed by their clamps at this width. */
  .nesr-project-filters { top: 64px; }
  html:has(.nesr-project-filters) { --nesr-sticky-offset: 132px; }
  .nesr-project-card { scroll-margin-top: 148px; }

  .nesr-project-grid { grid-template-columns: 1fr; }
  .nesr-project-card,
  .nesr-project-card:nth-child(even) { grid-column: 1; margin-block-start: 0; }
  .nesr-project-card figure,
  .nesr-project-card:nth-child(even) figure,
  .nesr-project-card:nth-child(3n) figure { height: 320px; }

  .nesr-project-intro__title {
    align-items: flex-start;
    flex-direction: column;
    gap: 26px;
    margin-block-start: 24px;
  }
  .nesr-project-cover figure { height: 440px; border-radius: 18px; }
  .nesr-project-story { padding-block: 70px; }
  .nesr-project-story__lead { font-size: 18px; }
  .nesr-project-gallery > .nesr-container {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 290px);
  }
  .nesr-project-gallery figure:first-child { grid-row: auto; }
  .nesr-related-projects__grid { grid-template-columns: 1fr; }
}