/* ==========================================================================
   TECHZILLA — WORK / PORTFOLIO
   ========================================================================== */

/* --------------------------------------------------------------------------
   PLACEHOLDER NOTICE
   -------------------------------------------------------------------------- */
.work-notice {
  display: grid; grid-template-columns: 22px 1fr; gap: .9rem;
  padding: 1.15rem 1.35rem; margin-top: 1.75rem;
  background: #fffaf0; border: 1px solid #f0dfb8;
  border-radius: var(--radius-md);
  font-size: .875rem; line-height: 1.6; color: #7a5a17;
}
.work-notice svg { width: 22px; height: 22px; color: #c69116; flex: none; }
.work-notice b { display: block; color: #6b4d10; margin-bottom: .2rem; }
.work-notice code {
  font-family: var(--font-mono); font-size: .82em;
  background: rgba(198, 145, 22, .12); padding: .1em .35em; border-radius: 4px;
}

/* --------------------------------------------------------------------------
   FILTERS
   -------------------------------------------------------------------------- */
.work-filters {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-line);
}
.work-filter {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.05rem;
  font-family: var(--font-body); font-size: .875rem; font-weight: 500;
  color: var(--color-ink-soft);
  background: var(--color-background);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.work-filter:hover { transform: translateY(-2px); border-color: var(--color-primary); color: var(--color-primary-dark); }
.work-filter.is-active {
  background: var(--color-accent); color: #fff; border-color: transparent;
}
.work-filter__count {
  font-family: var(--font-mono); font-size: .68rem;
  padding: .1rem .38rem; border-radius: 5px;
  background: var(--color-surface-2); color: var(--color-primary-dark);
}
.work-filter.is-active .work-filter__count { background: rgba(0, 224, 92, .22); color: var(--color-signal); }

.work-count {
  margin: 1.1rem 0 2rem;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-muted);
}
.work-empty { margin-top: 2rem; font-size: 1rem; color: var(--color-ink-soft); }

/* --------------------------------------------------------------------------
   EDITORIAL GRID
   -------------------------------------------------------------------------- */
.work-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.work-tile--feature { grid-column: span 2; }

.work-tile {
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.work-tile[hidden] { display: none; }
.work-tile.is-filtering { opacity: 0; transform: translateY(12px) scale(.985); }

.work-tile__link { display: block; }

.work-tile__media {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-dark);
  /* Card artwork is 3:2 and has type baked in — never crop it */
  aspect-ratio: 3 / 2;
}
.work-tile--feature .work-tile__media { aspect-ratio: 3 / 2; }
.work-tile__media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .92;
  transition: transform 1.2s var(--ease-out), opacity .5s var(--ease-out);
}
.work-tile__link:hover .work-tile__media img { transform: scale(1.05); opacity: 1; }
.work-tile__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(165deg, rgba(0, 224, 92, .08), transparent 42%, rgba(4, 24, 42, .5));
  opacity: 0; transition: opacity .5s var(--ease-out);
}
.work-tile__link:hover .work-tile__media::after { opacity: 1; }

.work-tile__flag {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: #7a5a17;
  background: rgba(255, 250, 240, .94);
  border: 1px solid #f0dfb8;
  padding: .28rem .6rem; border-radius: 5px;
}

/* --------------------------------------------------------------------------
   TILE BODY
   -------------------------------------------------------------------------- */
.work-tile__body { display: block; padding-top: 1.35rem; }

.work-tile__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  margin-bottom: .7rem;
}
.work-tile__cat {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-accent);
  background: var(--color-signal);
  padding: .22rem .6rem; border-radius: 4px;
}
.work-tile__client { font-family: var(--font-display); font-weight: 600; font-size: .875rem; color: var(--color-accent); }
.work-tile__year { font-family: var(--font-mono); font-size: .7rem; color: var(--color-muted); }

.work-tile__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  letter-spacing: -.025em; line-height: 1.2; color: var(--color-accent);
  margin-bottom: .5rem;
  transition: color var(--dur) var(--ease-out);
}
.work-tile--feature .work-tile__title { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2.1rem); }
.work-tile__link:hover .work-tile__title { color: var(--color-primary-dark); }

.work-tile__summary { display: block; font-size: .9375rem; color: var(--color-ink-soft); max-width: 60ch; }

.work-tile__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.work-tile__tags span {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em;
  color: var(--color-primary-dark);
  background: var(--color-surface-2);
  border: 1px solid var(--color-line-soft);
  padding: .22rem .55rem; border-radius: 5px;
}

.work-tile__cta {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.1rem;
  font-size: .875rem; font-weight: 600; color: var(--color-primary-dark);
}
.work-tile__cta .arrow { transition: transform var(--dur) var(--ease-out); }
.work-tile__link:hover .work-tile__cta .arrow { transform: translateX(5px); }

.work-tile__services {
  margin-top: .9rem; padding-top: .9rem;
  border-top: 1px solid var(--color-line-soft);
  font-size: .8125rem; color: var(--color-muted);
}
.work-tile__services a {
  color: var(--color-ink-soft);
  transition: color var(--dur-fast) var(--ease-out);
}
.work-tile__services a:hover { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-tile--feature { grid-column: span 1; }
  .work-tile--feature .work-tile__media { aspect-ratio: 3 / 2; }
}

@media (max-width: 640px) {
  .work-filters { gap: .4rem; }
  .work-filter { padding: .5rem .85rem; font-size: .8125rem; }
  .work-tile__media { aspect-ratio: 3 / 2; }
}

/* --------------------------------------------------------------------------
   PROJECT DETAIL + FEATURE LIST + LIVE LINK
   -------------------------------------------------------------------------- */
.work-tile__detail {
  display: block; margin-top: .6rem;
  font-size: .875rem; line-height: 1.6; color: var(--color-muted);
  max-width: 64ch;
}
.work-tile__features {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem 1.5rem; margin-top: 1.1rem;
}
.work-tile__features > span {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .8375rem; line-height: 1.45; color: var(--color-ink-soft);
}
.work-tile__features svg {
  width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--color-primary);
}
.work-tile__live { margin-top: 1rem; }
.work-tile__live a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.1rem;
  font-size: .8125rem; font-weight: 600;
  color: var(--color-accent);
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.work-tile__live a:hover {
  background: var(--color-accent); color: #fff; border-color: transparent; transform: translateY(-2px);
}
.work-tile__live .arrow { transition: transform var(--dur) var(--ease-out); }
.work-tile__live a:hover .arrow { transform: translateX(3px); }

@media (max-width: 640px) {
  .work-tile__features { grid-template-columns: 1fr; }
}