/* ═══════════════════════════════════════════════════════════════
   PLATFORM HOME — Artist Directory
   Standalone stylesheet — extends the shared design system tokens.
   ═══════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────── */

.ph-header {
  position:      sticky;
  top:           0;
  z-index:       100;
  height:        var(--nav-h, 60px);
  background:    var(--c-bg, #f8f8f6);
  border-bottom: 1px solid var(--c-border, #e4e4e0);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ph-header__inner {
  height:          100%;
  max-width:       var(--max-w, 1280px);
  margin:          0 auto;
  padding:         0 var(--gutter, 40px);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.ph-header__wordmark {
  font-family:    var(--f-display, 'Cormorant Garamond', serif);
  font-size:      var(--fs-md, 18px);
  font-weight:    300;
  font-style:     italic;
  letter-spacing: 0.04em;
  color:          var(--c-text, #141414);
}

/* ── Hero ────────────────────────────────────────────────────── */

.ph-hero {
  max-width:  var(--max-w, 1280px);
  margin:     0 auto;
  padding:    clamp(48px, 7vw, 96px) var(--gutter, 40px) clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--c-border, #e4e4e0);
}

.ph-hero__title {
  font-family:    var(--f-display, 'Cormorant Garamond', serif);
  font-size:      var(--fs-2xl, 80px);
  font-weight:    300;
  line-height:    1.0;
  letter-spacing: -0.02em;
  color:          var(--c-text, #141414);
  margin-bottom:  clamp(12px, 1.5vw, 20px);
}

.ph-hero__sub {
  font-size:      var(--fs-xs, 11px);
  font-weight:    400;
  letter-spacing: var(--ls-wider, 0.2em);
  text-transform: uppercase;
  color:          var(--c-muted, #767676);
}

/* ── Loading ─────────────────────────────────────────────────── */

.ph-loading {
  grid-column: 1 / -1;
  display:     flex;
  justify-content: center;
  align-items: center;
  gap:         10px;
  padding:     clamp(60px, 10vw, 120px) var(--gutter, 40px);
}

.ph-loading__dot {
  display:       block;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--c-border, #e4e4e0);
  animation:     ph-pulse 1.2s ease-in-out infinite;
}
.ph-loading__dot:nth-child(2) { animation-delay: 0.2s; }
.ph-loading__dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes ph-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.9); }
  40%            { opacity: 1;   transform: scale(1.1); }
}

/* ── Grid ────────────────────────────────────────────────────── */

.ph-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap:                   1px;
  background:            var(--c-border, #e4e4e0);
  max-width:             var(--max-w, 1280px);
  margin:                0 auto;
  border-bottom:         1px solid var(--c-border, #e4e4e0);
}

/* ── Artist Card ─────────────────────────────────────────────── */

.ph-card {
  display:        flex;
  flex-direction: column;
  background:     var(--c-bg, #f8f8f6);
  text-decoration:none;
  color:          inherit;
  opacity:        0;
  transform:      translateY(16px);
  transition:
    opacity   0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ph-card.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* Cover */
.ph-card__cover {
  position:     relative;
  overflow:     hidden;
  aspect-ratio: 3 / 2;
  background:   var(--c-border, #e4e4e0);
}

.ph-card__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ph-card:hover .ph-card__img {
  transform: scale(1.05);
}

.ph-card__cover-placeholder {
  width:      100%;
  height:     100%;
  background: linear-gradient(135deg, #e8e8e4 0%, #d8d8d4 100%);
}

/* Hover overlay */
.ph-card__overlay {
  position:        absolute;
  inset:           0;
  background:      rgba(14, 14, 14, 0.42);
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  transition:      opacity 0.3s ease;
}

.ph-card:hover .ph-card__overlay,
.ph-card:focus-visible .ph-card__overlay {
  opacity: 1;
}

.ph-card__cta {
  font-size:      var(--fs-xs, 11px);
  font-weight:    400;
  letter-spacing: var(--ls-wider, 0.2em);
  text-transform: uppercase;
  color:          #ffffff;
  border:         1px solid rgba(255,255,255,0.5);
  padding:        10px 22px;
  transition:     border-color 0.2s ease, background 0.2s ease;
}

.ph-card:hover .ph-card__cta {
  border-color: #ffffff;
  background:   rgba(255,255,255,0.1);
}

/* Info area */
.ph-card__info {
  padding:       clamp(20px, 2.5vw, 30px);
  display:       flex;
  flex-direction:column;
  gap:           10px;
  border-top:    1px solid var(--c-border, #e4e4e0);
  flex:          1;
}

.ph-card__meta {
  display:     flex;
  align-items: baseline;
  justify-content: space-between;
  gap:         12px;
}

.ph-card__name {
  font-family:    var(--f-display, 'Cormorant Garamond', serif);
  font-size:      clamp(20px, 2.5vw, 26px);
  font-weight:    300;
  line-height:    1.1;
  letter-spacing: 0.01em;
  color:          var(--c-text, #141414);
}

.ph-card__handle {
  font-size:      var(--fs-2xs, 10px);
  letter-spacing: var(--ls-wide, 0.12em);
  text-transform: lowercase;
  color:          var(--c-muted, #767676);
  white-space:    nowrap;
}

.ph-card__detail {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-wrap:   wrap;
}

.ph-card__location,
.ph-card__counts {
  font-size:      var(--fs-2xs, 10px);
  letter-spacing: var(--ls-wide, 0.12em);
  text-transform: uppercase;
  color:          var(--c-muted, #767676);
}

.ph-card__location::after {
  content: '·';
  margin-left: 12px;
  color: var(--c-border, #e4e4e0);
}

.ph-card__tagline {
  font-family: var(--f-display, 'Cormorant Garamond', serif);
  font-size:   clamp(13px, 1.5vw, 15px);
  font-style:  italic;
  font-weight: 300;
  color:       var(--c-muted, #767676);
  line-height: 1.5;
  margin-top:  2px;
}

/* Category pills */
.ph-card__cats {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
  margin-top:4px;
}

.ph-card__cat {
  font-size:      var(--fs-2xs, 10px);
  font-weight:    400;
  letter-spacing: var(--ls-wide, 0.12em);
  text-transform: uppercase;
  color:          var(--c-muted, #767676);
  border:         1px solid var(--c-border, #e4e4e0);
  padding:        3px 10px;
  transition:     background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ph-card:hover .ph-card__cat {
  border-color: rgba(20,20,20,0.2);
}

.ph-card__cat--more {
  border-style: dashed;
}

/* ── Empty / Error ───────────────────────────────────────────── */

.ph-empty {
  grid-column: 1 / -1;
  padding:     clamp(60px, 10vw, 120px) var(--gutter, 40px);
  text-align:  center;
}

.ph-empty__msg {
  font-size:   var(--fs-sm, 13px);
  color:       var(--c-muted, #767676);
  line-height: 1.7;
}

.ph-empty__msg code {
  font-family: monospace;
  font-size:   0.95em;
  background:  var(--c-border, #e4e4e0);
  padding:     2px 6px;
}

/* ── Footer ──────────────────────────────────────────────────── */

.ph-footer {
  padding:    clamp(24px, 3vw, 40px) var(--gutter, 40px);
  text-align: center;
}

.ph-footer__copy {
  font-size:      var(--fs-xs, 11px);
  letter-spacing: var(--ls-wide, 0.12em);
  text-transform: uppercase;
  color:          var(--c-muted, #767676);
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 720px) {
  .ph-grid {
    grid-template-columns: 1fr;
  }

  .ph-hero__title {
    font-size: clamp(48px, 12vw, 80px);
  }
}

@media (min-width: 1400px) {
  .ph-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ph-card {
    opacity:    1;
    transform:  none;
    transition: none;
  }
  .ph-card__img        { transition: none; }
  .ph-card__overlay    { transition: none; }
  .ph-loading__dot     { animation: none; opacity: 0.5; }
}