/* =============================================================
   Section: Projects (Work) page intro + filter chips
   Maps to: template-parts/sections/section-work-page.php
   On WP migration: filter chips become hyperlinks to taxonomy
   archives (?sector=Roadway etc.) and the "in this view" count
   is rendered server-side from $wp_query->found_posts.
   ============================================================= */

.work-page {
  background: var(--ink);
  color: var(--bone);
  min-height: 60vh;
}

.work-page__intro {
  padding: clamp(var(--s-7), 12vw, var(--s-10)) 0 var(--s-6);
  border-bottom: 1px solid var(--rule-dark);
  position: relative;
}

.work-page__intro::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../img/textures/grain.svg");
  background-size: 320px 320px;
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.work-page__title {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: var(--s-3) 0 var(--s-5);
}

.work-page__lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.5;
  color: var(--muted-dark);
  max-width: 64ch;
}

/* ---- Search bar ---- */
.work-search {
  margin-top: var(--s-6);
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 480px;
  border: 1px solid var(--rule-dark);
  background: transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}

.work-search:hover {
  border-color: var(--bone);
}

.work-search:focus-within {
  border-color: var(--safety);
  outline: 2px solid var(--safety);
  outline-offset: 2px;
}

.work-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-dark);
  pointer-events: none;
  transition: color var(--dur-base) var(--ease-out);
}

.work-search:focus-within .work-search__icon,
.work-search.is-filled .work-search__icon {
  color: var(--bone);
}

.work-search__input {
  flex: 1 1 auto;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 40px 12px 42px;
  width: 100%;
  outline: none;
}

.work-search__input::placeholder {
  color: var(--muted-dark);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
}

/* Hide the browser's native search clear control — we render our own. */
.work-search__input::-webkit-search-cancel-button,
.work-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.work-search__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: var(--muted-dark);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}

.work-search__clear:hover,
.work-search__clear:focus-visible {
  color: var(--ink);
  background: var(--safety);
  outline: none;
}

.work-search__clear[hidden] {
  display: none;
}

/* ---- Filter chip row ---- */
.work-filters__eyebrow {
  margin-top: var(--s-6);
  margin-bottom: calc(var(--s-3) * -1);
  display: block;
}

.work-filters {
  margin-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.work-filter {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--rule-dark);
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.work-filter:hover {
  border-color: var(--bone);
}

.work-filter.is-active {
  background: var(--safety);
  color: var(--ink);
  border-color: var(--safety);
}

.work-filter:focus-visible {
  outline: 2px solid var(--safety);
  outline-offset: 3px;
}

/* ---- Awards-only toggle (custom checkbox) ----
   Sits below the discipline chips. Native checkbox is visually hidden
   but kept for keyboard + screen-reader use; the .work-awards-toggle__box
   is the painted box, and .work-awards-toggle__label carries the inline
   gold ribbon icon + label text. Echoes the .work-filter chip styling
   (mono uppercase, safety/gold accents) so it reads as part of the
   same filter row. */
.work-awards-toggle {
  --awards-gold: #f4b400;
  --awards-gold-dark: #c08a00;
  margin-top: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--rule-dark);
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

.work-awards-toggle:hover {
  border-color: var(--bone);
}

.work-awards-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.work-awards-toggle__box {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--rule-dark);
  background: transparent;
  color: var(--ink);
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

.work-awards-toggle__check {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.work-awards-toggle__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  transition: color var(--dur-base) var(--ease-out);
}

.work-awards-toggle__ribbon {
  color: var(--awards-gold);
  filter: drop-shadow(0 0 4px rgba(244, 180, 0, 0.45));
  transition: transform var(--dur-base) var(--ease-out),
              filter var(--dur-base) var(--ease-out);
}

.work-awards-toggle:hover .work-awards-toggle__ribbon {
  transform: rotate(-6deg) scale(1.06);
  filter: drop-shadow(0 0 7px rgba(244, 180, 0, 0.7));
}

/* Active (checked) state — gold-tinted to echo the ribbon badge */
.work-awards-toggle.is-active {
  border-color: var(--awards-gold);
  background: rgba(244, 180, 0, 0.08);
}

.work-awards-toggle.is-active .work-awards-toggle__box {
  background: linear-gradient(135deg, var(--awards-gold), var(--awards-gold-dark));
  border-color: var(--awards-gold-dark);
  color: var(--ink);
}

.work-awards-toggle.is-active .work-awards-toggle__check {
  opacity: 1;
  transform: scale(1);
}

.work-awards-toggle.is-active .work-awards-toggle__label {
  color: var(--awards-gold);
}

.work-awards-toggle__input:focus-visible + .work-awards-toggle__box {
  outline: 2px solid var(--awards-gold);
  outline-offset: 3px;
}

.work-page__count {
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

.work-page__count [data-work-count] {
  color: var(--safety);
  margin-right: 4px;
}

/* ---- Grid section wrapper (reuses .work styling under .work) ---- */
.work-page__grid-section {
  padding: var(--s-7) 0 var(--s-9);
}

/* On wide screens give the grid more breathing room than the
   default site wrap so the Projects page can show ~4 columns. */
@media (min-width: 1280px) {
  .work-page__grid-section .wrap {
    max-width: 1480px;
  }
}