/* ==========================================================================
   BIXYN — Work Page
   Reuses the Home portfolio grid + project-card components.
   Adds only the category-filter UI and the header layout for this page.
   ========================================================================== */

/* Section spacing (this page has no hero) */
.work {
  padding-block: 120px 96px;
}

/* Head — title on the left, filters on the right (desktop) */
.work__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-32);
  margin-bottom: var(--space-48);
}

/* Filter buttons */
.work-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.filter-btn {
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--color-white-70);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.0833em;
  text-transform: uppercase;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.filter-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.filter-btn.is-active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

/* Cards filtered out by the current category */
.project-card.is-hidden {
  display: none;
}

/* Project card link */

.project-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}


/* Hide filtered project */

.project-card-link.is-hidden {
    display: none;
}


/* Filter transition — cards fade/slide out and back in on category change.
   `.is-hidden` still does the actual hiding, so the filtering logic is unchanged. */

.project-card-link {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.project-card-link.is-leaving,
.project-card-link.is-entering {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {

    .project-card-link {
        transition: none;
    }

    .project-card-link.is-leaving,
    .project-card-link.is-entering {
        opacity: 1;
        transform: none;
    }
}


/* -------------------------------------------------- iPad / Tablet (≤1024px) */
@media (max-width: 1024px) {
  .work {
    padding-block: 96px 80px;
  }

  /* Filters drop below the title, left-aligned (per iPad reference) */
  .work__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-24);
    margin-bottom: var(--space-48);
  }
}

/* -------------------------------------------------- Mobile (≤640px) */
@media (max-width: 640px) {
  .work {
    padding-block: 64px 40px;
  }

  .work__head {
    gap: var(--space-16);
    margin-bottom: var(--space-32);
  }

  .filter-btn {
    padding: 8px 12px;
    font-size: 11px;
  }
}

/*html.has-filter .portfolio__grid .project-card-link {*/
/*    visibility: hidden;*/
/*}*/