/* ─────────────────────────────────────────────────────────────────────
   work.css — Portfolio section: toolbar, filter tabs, sort, grid, cards
───────────────────────────────────────────────────────────────────── */

.work { padding-block: 6rem; }


/* ─── TOOLBAR (filter tabs + sort dropdown) ──────────────────────────── */
.work__toolbar {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             1rem;
  flex-wrap:       wrap;
  margin-bottom:   3rem;
}

/* The toolbar provides bottom margin, so the tabs don't need their own */
.work__toolbar .filter-tabs { margin-bottom: 0; }


/* ─── FILTER TABS ─────────────────────────────────────────────────────── */
.filter-tabs {
  display:       flex;
  flex-wrap:     wrap;
  gap:           0.5rem;
  margin-bottom: 3rem;
}

.filter-tab {
  padding:       0.45rem 1.2rem;
  border:        1.5px solid var(--border);
  border-radius: 999px;
  background:    transparent;
  color:         var(--text-muted);
  font-size:     0.85rem;
  font-weight:   500;
  cursor:        pointer;
  transition:    all var(--t);
}
.filter-tab:hover {
  border-color: var(--accent);
  color:        var(--accent);
  box-shadow:   0 0 14px rgba(179, 141, 255, 0.22);
}
.filter-tab.active {
  background:   var(--accent);
  border-color: var(--accent);
  color:        var(--bg);
  font-weight:  600;
  box-shadow:   0 0 20px rgba(179, 141, 255, 0.4);
}


/* ─── SORT CONTROL ────────────────────────────────────────────────────── */
.sort-control {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  flex-shrink: 0;
  padding-top: 0.15rem;
}

.sort-label {
  font-size:   0.8rem;
  color:       var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.sort-select {
  background:    var(--bg-card);
  border:        1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color:         var(--text-muted);
  font-family:   var(--font-sans);
  font-size:     0.82rem;
  padding:       0.4rem 0.75rem;
  outline:       none;
  cursor:        pointer;
  transition:    border-color var(--t), color var(--t);
  min-width:     140px;
}
.sort-select:hover,
.sort-select:focus { border-color: var(--accent); color: var(--text); }


/* ─── PORTFOLIO GRID ─────────────────────────────────────────────────── */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:     1.75rem;
}


/* ─── CARD ────────────────────────────────────────────────────────────── */
.card {
  position:      relative;
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
  box-shadow:    0 4px 20px rgba(179, 141, 255, 0.07);
  transition:    transform var(--t), border-color var(--t), box-shadow var(--t);
}
.card:hover {
  transform:    translateY(-6px);
  border-color: var(--accent);
  box-shadow:   0 12px 40px rgba(179, 141, 255, 0.28),
                0 0 0 1px rgba(179, 141, 255, 0.32),
                inset 0 0 50px rgba(179, 141, 255, 0.04);
}
.card.is-hidden { display: none; }

.card__viewer-wrap {
  width:        100%;
  aspect-ratio: 4 / 3;
  background:   var(--bg-elevated);
}

.card__info {
  padding:        1.25rem 1.5rem 1.5rem;
  display:        flex;
  flex-direction: column;
  gap:            0.4rem;
}

.card__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             0.5rem;
}

.card__tag {
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--accent);
}

.card__date {
  font-size:   0.7rem;
  font-family: var(--font-mono);
  color:       var(--text-muted);
  opacity:     0.6;
  white-space: nowrap;
}

.card__title {
  font-size:   1.1rem;
  font-weight: 700;
}

.card__meta {
  font-size:     0.78rem;
  color:         var(--text-muted);
  font-family:   var(--font-mono);
  margin-bottom: 0.5rem;
}

.card__view-btn {
  align-self: flex-start;
  font-size:  0.85rem;
  padding:    0.45rem 1.1rem;
}


/* ─── CARD CORNER FLOURISHES ─────────────────────────────────────────── */
/* Top-left ornamental bracket */
.card::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0;
  width:      54px;
  height:     54px;
  pointer-events: none;
  z-index:    2;
  opacity:    0.5;
  transition: opacity 0.35s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54' fill='none'%3E%3Cpath d='M50,3 L16,3 Q3,3 3,16 L3,50' stroke='%23b38dff' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M3,3 C10,7 16,5 14,15 C12,23 5,21 8,29 C10,35 16,33 15,40' stroke='%23e8b4ff' stroke-width='0.95' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='3' r='2.5' fill='%23b38dff'/%3E%3Ccircle cx='3' cy='50' r='2.5' fill='%23b38dff'/%3E%3Ccircle cx='15' cy='40' r='1.6' fill='%23e8b4ff'/%3E%3C/svg%3E") no-repeat;
  background-size: 54px 54px;
}

/* Bottom-right — same ornament rotated 180° */
.card::after {
  content:    '';
  position:   absolute;
  bottom: 0; right: 0;
  width:      54px;
  height:     54px;
  pointer-events: none;
  z-index:    2;
  opacity:    0.5;
  transition: opacity 0.35s ease;
  transform:  rotate(180deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54' fill='none'%3E%3Cpath d='M50,3 L16,3 Q3,3 3,16 L3,50' stroke='%23b38dff' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M3,3 C10,7 16,5 14,15 C12,23 5,21 8,29 C10,35 16,33 15,40' stroke='%23e8b4ff' stroke-width='0.95' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='3' r='2.5' fill='%23b38dff'/%3E%3Ccircle cx='3' cy='50' r='2.5' fill='%23b38dff'/%3E%3Ccircle cx='15' cy='40' r='1.6' fill='%23e8b4ff'/%3E%3C/svg%3E") no-repeat;
  background-size: 54px 54px;
}

.card:hover::before,
.card:hover::after { opacity: 1; }


/* ─── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .work { padding-block: 4rem; }
  .work__toolbar { flex-direction: column; gap: 0.75rem; }
  .sort-control  { align-self: flex-start; }
}