/* === UTILITIES === */

/* Screen reader only */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Glassmorphism panel */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Image grayscale with hover color reveal */
.grayscale-hover {
  filter: grayscale(100%);
  transition: filter var(--transition-slower), transform var(--transition-slower);
}
.grayscale-hover:hover {
  filter: grayscale(0);
  transform: scale(1.05);
}

/* 2-column editorial text (desktop only) */
.editorial-text {
  columns: 1;
}

@media (min-width: 1024px) {
  .editorial-text {
    columns: 2;
    column-gap: var(--space-12);
  }
}

/* Uppercase small-caps label style */
.text-small-caps {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-weight: var(--weight-bold);
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

/* Generic hidden state (used by JS via data-state)
   Exception to no-!important rule: JS relies on this to always override display. */
[data-state="hidden"] {
  display: none !important;
}

/* Custom scrollbar (webkit) */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--color-surface-container);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--color-primary);
}