/*
 * assets/css/artist-profiles.css — Artist Profiles v2
 */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500&family=Ubuntu:wght@700&display=swap');

:root {
  --ap-font-display: 'Cinzel', serif;
  --ap-font-body:    system-ui, -apple-system, sans-serif;
  --ap-color-text:       #1a1a1a;
  --ap-color-muted:      #666;
  --ap-color-border:     #e8e8e8;
  --ap-color-bg:         #fff;
  --ap-color-bg-alt:     #f8f8f6;
  --ap-color-success:    #1a6640;
  --ap-color-success-bg: #eaf3de;
  --ap-color-error:      #8b1a1a;
  --ap-color-error-bg:   #fdf0f0;
  --ap-radius:           4px;
  --ap-max-width:        1100px;
  --ap-hero-img-size:    340px;
  --ap-gallery-gap:      20px;
}

.ap-directory-wrap,
.ap-profile-page {
  max-width: var(--ap-max-width);
  margin: 0 auto;
  padding: 40px 24px 80px;
  font-family: var(--ap-font-body);
  color: var(--ap-color-text);
}

/* ── Directory ───────────────────────────────────────────────────────────── */
.ap-sort-bar { display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-bottom:16px; }
.ap-sort-sep { color:#ddd;font-size:11px;padding:0 2px; }
.ap-sort-btn { font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 4px;color:#aaa;text-decoration:none;border-bottom:1px solid transparent;transition:all .15s; }
.ap-sort-btn:hover { color:var(--ap-color-text); }
.ap-sort-active { color:var(--ap-color-text) !important;border-bottom-color:var(--ap-color-text) !important; }

.ap-directory-grid { display:grid;gap:var(--ap-gallery-gap); }
.ap-cols-2 { grid-template-columns:repeat(2,1fr); }
.ap-cols-3 { grid-template-columns:repeat(3,1fr); }
.ap-cols-4 { grid-template-columns:repeat(4,1fr); }

.ap-artist-card { display:block;text-decoration:none;color:var(--ap-color-text);transition:opacity .2s; }
.ap-artist-card:hover { opacity:.8; }
.ap-artist-card,
.ap-artist-card:hover,
.ap-artist-card .ap-artist-name { text-decoration:none !important; }

.ap-artist-photo { aspect-ratio:1/1;overflow:hidden;background:var(--ap-color-bg-alt);border-radius:var(--ap-radius);margin-bottom:12px; }
.ap-artist-img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease; }
.ap-artist-card:hover .ap-artist-img { transform:scale(1.03); }
.ap-artist-initials { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:clamp(28px,6vw,52px);font-family:var(--ap-font-display);color:var(--ap-color-muted); }

.ap-artist-card-meta { text-align:center; }
.ap-artist-name { font-size:15px;font-weight:600;margin:0 0 4px;text-decoration:none; }
.ap-directory-empty { color:var(--ap-color-muted); }

/* ── Profile hero ────────────────────────────────────────────────────────── */
.ap-profile-hero { display:grid;gap:40px;padding:48px 0 40px;align-items:start; }
.ap-hero-image-left  { grid-template-columns:var(--ap-hero-img-size) 1fr; }
.ap-hero-image-right { grid-template-columns:1fr var(--ap-hero-img-size); }
.ap-hero-image-right .ap-profile-hero-img-wrap { order:2; }
.ap-hero-image-right .ap-profile-hero-text     { order:1; }
.ap-hero-image-top   { grid-template-columns:1fr;text-align:center; }
.ap-hero-image-top .ap-profile-hero-img-wrap { max-width:var(--ap-hero-img-size);margin:0 auto; }

.ap-profile-hero-img { width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--ap-radius);display:block; }
.ap-profile-eyebrow { font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ap-color-muted);margin:0 0 10px; }
.ap-profile-name { font-family:var(--ap-font-display);font-size:clamp(32px,5vw,52px);font-weight:500;margin:0 0 16px;line-height:1.1;letter-spacing:.02em; }
.ap-profile-short-bio { font-size:16px;line-height:1.65;max-width:56ch;margin:0 0 20px; }
.ap-text-center .ap-profile-short-bio { margin-left:auto;margin-right:auto; }
.ap-text-center { text-align:center; }
.ap-text-right  { text-align:right; }

.ap-social-links { display:flex;flex-wrap:wrap;gap:8px;margin-top:4px; }
.ap-social-link { font-size:12px;padding:5px 12px;border:1px solid var(--ap-color-border);border-radius:20px;color:var(--ap-color-text);text-decoration:none;transition:background .15s; }
.ap-social-link:hover { background:var(--ap-color-bg-alt); }
.ap-text-center .ap-social-links { justify-content:center; }
.ap-text-right  .ap-social-links { justify-content:flex-end; }

.ap-divider { border:none;border-top:1px solid var(--ap-color-border);margin:48px 0; }
.ap-section-eyebrow { font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ap-color-muted);margin:0 0 8px; }
.ap-section-title { font-family:var(--ap-font-display);font-size:clamp(22px,3vw,32px);font-weight:500;margin:0 0 32px;letter-spacing:.02em; }

/* ── Gallery ─────────────────────────────────────────────────────────────── */
.ap-gallery-grid { display:grid;gap:var(--ap-gallery-gap); }
.ap-cols-masonry { display:block;column-count:3;column-gap:var(--ap-gallery-gap); }
.ap-cols-masonry .ap-artwork-card { break-inside:avoid;margin-bottom:var(--ap-gallery-gap); }

.ap-artwork-card { display:flex;flex-direction:column; }
.ap-artwork-img-wrap { position:relative;overflow:hidden;background:var(--ap-color-bg-alt);border-radius:var(--ap-radius);margin-bottom:12px; }
.ap-artwork-img { width:100%;display:block;transition:transform .35s ease; }
.ap-artwork-card:hover .ap-artwork-img { transform:scale(1.03); }
.ap-artwork-img-placeholder { aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--ap-color-muted);font-size:13px; }

.ap-artwork-badge { position:absolute;top:10px;left:10px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:3px; }
.ap-badge-sold      { background:#1a1a1a;color:#fff; }
.ap-badge-available { background:var(--ap-color-success-bg);color:var(--ap-color-success); }

.ap-artwork-title    { font-size:14px;font-weight:600;margin:0 0 3px;line-height:1.3; }
.ap-artwork-year     { font-weight:400;color:var(--ap-color-muted); }
.ap-artwork-material { font-size:13px;margin:0 0 2px; }
.ap-artwork-dims     { font-size:12px;color:var(--ap-color-muted);margin:0 0 4px; }
.ap-artwork-price    { font-size:13px;font-weight:600;margin:4px 0 0; }
.ap-artwork-sats     { font-size:12px;font-weight:400;color:var(--ap-color-muted);margin-left:2px; }

.ap-embed-wrap { max-width:800px; }
.ap-embed-wrap iframe { width:100%;aspect-ratio:16/9;border:none;border-radius:var(--ap-radius); }
.ap-bio-section { max-width:680px; }
.ap-bio-body { font-size:16px;line-height:1.75; }
.ap-bio-body p { margin:0 0 1.2em; }

.ap-profile-page { background:#fff; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ap-hero-image-left,
  .ap-hero-image-right { grid-template-columns:1fr; }
  .ap-hero-image-right .ap-profile-hero-img-wrap,
  .ap-hero-image-right .ap-profile-hero-text { order:unset; }
  .ap-cols-4 { grid-template-columns:repeat(2,1fr); }
  .ap-cols-3 { grid-template-columns:repeat(2,1fr); }
  .ap-cols-masonry { column-count:2; }
}
@media (max-width: 480px) {
  .ap-cols-4,
  .ap-cols-3,
  .ap-cols-2 { grid-template-columns:1fr; }
  .ap-cols-masonry { column-count:1; }
}

/* ── SEO-only text ───────────────────────────────────────────────────────────
   Holds artwork descriptions inside the post content so search engines index
   them, while keeping them out of the visible layout. Uses off-screen clipping
   (not display:none) so the text is still crawled and read by assistive tech. */
.ap-seo-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}