/* Final card hierarchy and interaction layer for the gated Collections workspace. */
.collection-card{
  position:relative;
  isolation:isolate;
  border-color:#d7dde4;
  box-shadow:0 10px 30px rgba(16,24,40,.065);
}

.collection-card:hover{
  border-color:#b8c1cc;
  box-shadow:0 18px 44px rgba(16,24,40,.10);
}

.featured-card{
  border-color:#bfc8d4;
  box-shadow:0 16px 42px rgba(16,24,40,.10);
}

.card-palette{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(17,24,39,.10);
  background:#eef2f6;
}

.card-palette button{
  min-width:0;
  transition:filter .15s ease,transform .15s ease;
}

.card-palette button:hover{
  z-index:1;
  filter:saturate(1.08) brightness(1.04);
  transform:scaleY(1.035);
  transform-origin:bottom;
}

.card-palette button:focus-visible{
  z-index:2;
  outline:3px solid #fff;
  outline-offset:-6px;
  box-shadow:inset 0 0 0 9px rgba(17,24,39,.30);
}

.card-body{
  gap:0;
}

.card-top{
  min-height:0;
  align-items:flex-start;
}

.card-top>div{
  min-width:0;
}

.category-label{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  align-items:center;
  min-height:24px;
  margin-bottom:8px;
  padding:0 8px;
  border:1px solid #e4e7ec;
  border-radius:999px;
  background:#f8fafc;
  color:#475467;
  line-height:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.card-top h2{
  font-size:1.12rem;
  line-height:1.22;
  letter-spacing:-.025em;
}

.collection-title-link{
  color:#101828;
  text-decoration:none;
}

.collection-title-link:hover{
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:4px;
}

.collection-title-link:focus-visible{
  border-radius:4px;
  outline:3px solid rgba(17,24,39,.16);
  outline-offset:3px;
}

.favorite-button{
  width:40px;
  height:40px;
  border-color:#d0d5dd;
  border-radius:12px;
  background:#fff;
  color:#344054;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
}

.favorite-button:hover{
  border-color:#98a2b3;
  background:#f8fafc;
  color:#101828;
}

.favorite-button[aria-pressed="true"]{
  border-color:#e0b82f;
  background:#fff8d9;
  color:#7a5600;
}

.card-body>p{
  margin:12px 0 14px;
  color:#475467;
  font-size:.84rem;
  line-height:1.55;
}

.tag-list{
  gap:6px;
  margin-bottom:12px;
}

.tag-list button{
  min-height:28px;
  padding:0 9px;
  border:1px solid #e4e7ec;
  background:#f8fafc;
  color:#475467;
}

.tag-list button:hover{
  border-color:#cfd6dd;
  background:#f2f4f7;
  color:#101828;
}

.collection-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-bottom:14px;
}

.collection-metrics span{
  display:flex;
  min-width:0;
  min-height:38px;
  align-items:center;
  justify-content:center;
  padding:6px;
  border:1px solid #e7eaee;
  border-radius:10px;
  background:#fbfcfd;
  color:#475467;
  text-align:center;
  line-height:1.25;
}

.color-list{
  gap:6px;
  margin-bottom:16px;
}

.color-chip{
  min-height:30px;
  border-color:#dfe4e8;
  background:#fff;
}

.color-chip:hover{
  border-color:#98a2b3;
  background:#f8fafc;
}

.actions{
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(82px,.72fr);
  gap:8px;
  margin-top:auto;
}

.actions .details-link{
  border-color:#111827!important;
  background:#111827!important;
  color:#fff!important;
}

.actions .details-link:hover{
  border-color:#1d2939!important;
  background:#1d2939!important;
}

.actions .open{
  border-color:#cfd6dd!important;
  background:#fff!important;
  color:#101828!important;
}

.actions .open:hover{
  border-color:#98a2b3!important;
  background:#f8fafc!important;
}

.actions .copy{
  min-width:0;
  border-color:#dfe4e8!important;
  background:#f8fafc!important;
  color:#475467!important;
}

.actions .copy:hover{
  border-color:#c2c8d0!important;
  background:#f2f4f7!important;
  color:#101828!important;
}

.secondary-actions{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #edf0f3;
}

.secondary-actions a,
.secondary-actions button{
  min-height:38px;
  border-color:#e0e5ea;
  background:transparent;
  color:#475467;
}

.secondary-actions a:hover,
.secondary-actions button:hover{
  border-color:#b8c1cc;
  background:#f8fafc;
  color:#101828;
}

html[data-hc-theme="dark"] .collection-card{
  border-color:var(--hc-line)!important;
  background:var(--hc-surface)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.22)!important;
}

html[data-hc-theme="dark"] .featured-card{
  border-color:var(--hc-line-strong)!important;
}

html[data-hc-theme="dark"] .card-palette{
  border-color:var(--hc-line)!important;
  background:var(--hc-surface-soft)!important;
}

html[data-hc-theme="dark"] .category-label,
html[data-hc-theme="dark"] .tag-list button,
html[data-hc-theme="dark"] .collection-metrics span,
html[data-hc-theme="dark"] .color-chip{
  border-color:var(--hc-line)!important;
  background:var(--hc-surface-soft)!important;
  color:var(--hc-muted)!important;
}

html[data-hc-theme="dark"] .collection-title-link{
  color:var(--hc-text)!important;
}

html[data-hc-theme="dark"] .favorite-button,
html[data-hc-theme="dark"] .actions .open,
html[data-hc-theme="dark"] .actions .copy,
html[data-hc-theme="dark"] .secondary-actions a,
html[data-hc-theme="dark"] .secondary-actions button{
  border-color:var(--hc-line)!important;
  background:var(--hc-surface-raised)!important;
  color:var(--hc-text-soft)!important;
}

html[data-hc-theme="dark"] .favorite-button[aria-pressed="true"]{
  border-color:#8f7424!important;
  background:#3a3219!important;
  color:#ffe08a!important;
}

html[data-hc-theme="dark"] .secondary-actions{
  border-color:var(--hc-line)!important;
}

@media(max-width:760px){
  .collection-metrics{
    grid-template-columns:repeat(3,minmax(92px,1fr));
    overflow-x:auto;
    padding-bottom:2px;
  }

  .actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .actions .details-link{
    grid-column:1 / -1;
  }
}

@media(max-width:420px){
  .collection-metrics{
    grid-template-columns:1fr;
    overflow:visible;
  }

  .collection-metrics span{
    justify-content:flex-start;
    min-height:34px;
    padding-inline:10px;
    text-align:left;
  }

  .actions,
  .secondary-actions{
    grid-template-columns:1fr;
  }

  .actions .details-link{
    grid-column:auto;
  }
}