/* ============================================================
   Pose Bank Styles
   ============================================================ */

/* ─── MAIN LAYOUT ─────────────────────────────────────────── */
.poses-main {
  flex: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 3.5rem 2rem 5rem;
  width: 100%;
}

/* ─── PAGE HEADER ─────────────────────────────────────────── */
.poses-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.poses-page-header .studio-intro {
  margin-bottom: 0;
  text-align: left;
}
.poses-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.4rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.poses-add-btn:hover {
  background: var(--color-primary-hover, #244569);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ─── TOOLBAR ─────────────────────────────────────────────── */
.poses-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.poses-search-wrap {
  position: relative;
  max-width: 380px;
}
.poses-search-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-faint);
  pointer-events: none;
}
.poses-search {
  width: 100%;
  padding: 0.7rem 0.9rem 0.7rem 2.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--color-text);
  transition: border-color var(--transition);
  -webkit-appearance: none;
}
.poses-search:focus {
  outline: none;
  border-color: var(--color-accent);
}
.poses-filter-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.poses-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 9999px);
  background: none;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
}
.poses-filter-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.poses-filter-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.poses-filter-btn[data-category="favorites"].active {
  background: #c0392b;
  border-color: #c0392b;
}

/* ─── STATS BAR ───────────────────────────────────────────── */
.poses-stats {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-weight: 300;
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
}
.poses-stats-sep { color: var(--color-text-faint); }

/* ─── POSE GRID ───────────────────────────────────────────── */
.poses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

/* ─── POSE CARD ───────────────────────────────────────────── */
.pose-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}
.pose-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Card image area */
.pose-card-img-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--color-surface-offset);
  flex-shrink: 0;
  position: relative;
}
.pose-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.pose-card:hover .pose-card-img {
  transform: scale(1.04);
}
.pose-card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--color-text-faint);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.04em;
}

/* Category badge on card */
.pose-card-badge {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

/* Favorite button on card */
.pose-card-fav {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background var(--transition), color var(--transition), transform var(--transition);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
[data-theme="dark"] .pose-card-fav {
  background: rgba(28,27,25,0.85);
}
.pose-card-fav:hover {
  transform: scale(1.15);
  color: #c0392b;
}
.pose-card-fav.is-fav {
  color: #c0392b;
}

/* Card body */
.pose-card-body {
  padding: 1rem 1.15rem 1.15rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pose-card-name {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1.2;
}
.pose-card-prompt {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.pose-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.3rem;
}
.pose-tag {
  padding: 0.15rem 0.55rem;
  background: var(--color-surface-offset, #f3f0ec);
  border-radius: var(--radius-full, 9999px);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}
[data-theme="dark"] .pose-tag {
  background: rgba(255,255,255,0.07);
}

/* ─── CATEGORY BADGE COLORS ───────────────────────────────── */
.badge-Maternity  { background: rgba(180,100,150,0.15); color: #9b3d7a; }
.badge-Portrait   { background: rgba(27,53,80,0.12);    color: #1b3550; }
.badge-Couples    { background: rgba(184,137,42,0.15);  color: #9a6c14; }
.badge-Family     { background: rgba(40,130,90,0.12);   color: #1a7a4a; }
.badge-Newborn    { background: rgba(80,130,200,0.12);  color: #2a5fa0; }
.badge-Boudoir    { background: rgba(140,50,50,0.12);   color: #8a3030; }

[data-theme="dark"] .badge-Maternity  { background: rgba(180,100,150,0.22); color: #e08ac0; }
[data-theme="dark"] .badge-Portrait   { background: rgba(100,150,200,0.18); color: #8ab8e0; }
[data-theme="dark"] .badge-Couples    { background: rgba(184,137,42,0.22);  color: #e8af34; }
[data-theme="dark"] .badge-Family     { background: rgba(40,130,90,0.22);   color: #6daa45; }
[data-theme="dark"] .badge-Newborn    { background: rgba(80,130,200,0.22);  color: #5591c7; }
[data-theme="dark"] .badge-Boudoir    { background: rgba(180,80,80,0.22);   color: #dd7070; }

/* ─── EMPTY STATE ─────────────────────────────────────────── */
.poses-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 5rem 2rem;
  color: var(--color-text-muted);
}
.poses-empty-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-faint);
  margin-bottom: 1.25rem;
}
.poses-empty-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.3rem; font-weight: 500;
  color: var(--color-text);
  margin-bottom: 0.4rem;
}
.poses-empty-sub {
  font-size: 0.85rem; font-weight: 300;
  color: var(--color-text-muted);
  max-width: 30ch;
}

/* ─── POSE DETAIL MODAL ───────────────────────────────────── */
.pose-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(3px);
  z-index: 9000;
}
.pose-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9001;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  width: min(560px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
}
.pose-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.5rem 0;
  flex-shrink: 0;
}
.pose-modal-meta { flex: 1; min-width: 0; }
.pose-modal-category {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.pose-modal-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.2;
  margin: 0;
}
.pose-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.pose-fav-btn {
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: none;
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.pose-fav-btn:hover, .pose-fav-btn.is-fav {
  border-color: #c0392b;
  color: #c0392b;
  background: rgba(192,57,43,0.08);
}
.pose-fav-btn.is-fav svg { fill: #c0392b; }
.pose-modal-close {
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: none;
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.pose-modal-close:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

/* Modal image */
.pose-modal-img-wrap {
  margin: 1.25rem 1.5rem 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-offset, #f3f0ec);
  aspect-ratio: 4/3;
  flex-shrink: 0;
}
.pose-modal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pose-modal-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--color-text-faint);
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.04em;
}

/* Modal body */
.pose-modal-body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}
.pose-modal-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 0.3rem;
}
.pose-modal-prompt {
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0;
}
.pose-modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.pose-modal-notes {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
  background: var(--color-surface-offset, #f3f0ec);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  border-left: 3px solid var(--color-accent);
}
[data-theme="dark"] .pose-modal-notes {
  background: rgba(255,255,255,0.04);
}

/* Modal footer */
.pose-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}
.pose-modal-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.15rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition);
}
.pose-modal-edit-btn:hover {
  background: var(--color-primary-hover, #244569);
  box-shadow: var(--shadow-sm);
}
.pose-modal-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.15rem;
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.pose-modal-delete-btn:hover {
  border-color: #c0392b;
  color: #c0392b;
}

/* ─── ADD / EDIT FORM MODAL ───────────────────────────────── */
.pose-form-modal {
  width: min(620px, 94vw);
}
.pose-form {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pose-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.pose-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pose-form-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pose-form-req { color: var(--color-accent); }
.pose-form-optional { font-weight: 300; text-transform: none; letter-spacing: 0; font-size: 0.7rem; }
.pose-form-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--color-text);
  transition: border-color var(--transition);
  -webkit-appearance: none;
}
.pose-form-input:focus {
  outline: none;
  border-color: var(--color-accent);
}
.pose-form-textarea { resize: vertical; min-height: 80px; }
.pose-form-hint {
  font-size: 0.72rem;
  color: var(--color-text-faint);
  margin: 0;
  font-weight: 300;
}
.pose-form-error {
  font-size: 0.82rem;
  color: #c0392b;
  background: rgba(192,57,43,0.08);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  margin: 0;
}
.pose-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  margin-top: 0.5rem;
}
.pose-form-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.4rem;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.pose-form-submit:hover {
  background: var(--color-accent-light, #d9a840);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .poses-main { padding: 2rem 1.25rem 4rem; }
  .poses-page-header { flex-direction: column; align-items: flex-start; }
  .pose-form-row { grid-template-columns: 1fr; }
  .poses-grid { grid-template-columns: 1fr 1fr; gap: 0.85rem; }
}
@media (max-width: 420px) {
  .poses-grid { grid-template-columns: 1fr; }
}