/* Inspiration Pool final uniform-card contract.
   Grid cards are not masonry: source media metadata never controls the outer
   card geometry. Every grid card owns the same 16:9 viewport, copy slots, and
   footer slot for the active card-density and container-width state. */
.inspiration-library[data-card-size] {
  --inspiration-card-stats-height: max(16px, calc(22px * var(--inspiration-card-scale)));
  --inspiration-card-tags-height: max(22px, calc(28px * var(--inspiration-card-scale)));
  --inspiration-card-copy-height: calc(
    (16px + 42px + 34px + 26px) * var(--inspiration-card-scale)
    + var(--inspiration-card-stats-height)
    + var(--inspiration-card-tags-height)
    + (40px * var(--inspiration-card-scale))
  );
  --inspiration-card-footer-height: calc(46px * var(--inspiration-card-scale));
}

.inspiration-library[data-card-size] .inspiration-grid {
  display: grid;
  min-width: 0;
  align-content: start;
  align-items: stretch;
  grid-auto-flow: row;
  grid-auto-rows: max-content;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--inspiration-card-target-width)), 1fr));
  gap: var(--inspiration-card-gap);
}

.inspiration-card.card-variant-p01 {
  container-type: inline-size;
  container-name: inspiration-card;
  display: grid;
  min-width: 0;
  min-height: 0;
  height: auto;
  grid-template-rows: minmax(0, 1fr) var(--inspiration-card-footer-height);
  overflow: clip;
}

.inspiration-card.card-variant-p01 .inspiration-card-open {
  display: grid;
  min-width: 0;
  min-height: 0;
  height: auto;
  grid-template-rows: auto var(--inspiration-card-copy-height);
  overflow: hidden;
}

/* Grid media is always 16:9. sourceRatio controls presentation only. */
.inspiration-card.card-variant-p01 .inspiration-cover[data-context="grid"] {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.inspiration-card.card-variant-p01 .inspiration-cover[data-context="grid"] > img:not(.inspiration-cover-backdrop) {
  width: 100%;
  height: 100%;
  object-position: center;
}

.inspiration-card.card-variant-p01 .inspiration-cover[data-context="grid"][data-source-ratio="16:9"] > img:not(.inspiration-cover-backdrop),
.inspiration-card.card-variant-p01 .inspiration-cover[data-context="grid"][data-source-ratio="4:3"] > img:not(.inspiration-cover-backdrop) {
  object-fit: cover;
}

.inspiration-card.card-variant-p01 .inspiration-cover[data-context="grid"][data-source-ratio="1:1"] > img:not(.inspiration-cover-backdrop),
.inspiration-card.card-variant-p01 .inspiration-cover[data-context="grid"][data-source-ratio="4:5"] > img:not(.inspiration-cover-backdrop),
.inspiration-card.card-variant-p01 .inspiration-cover[data-context="grid"][data-source-ratio="3:4"] > img:not(.inspiration-cover-backdrop),
.inspiration-card.card-variant-p01 .inspiration-cover[data-context="grid"][data-source-ratio="9:16"] > img:not(.inspiration-cover-backdrop),
.inspiration-card.card-variant-p01 .inspiration-cover[data-context="grid"][data-media-kind="video"] > img:not(.inspiration-cover-backdrop) {
  object-fit: contain;
  background: transparent;
}

/* Inspector may show the source ratio; it is intentionally isolated from the
   uniform Grid Card contract. */
.inspiration-cover[data-context="inspector"][data-source-ratio="16:9"] { aspect-ratio: 16 / 9; }
.inspiration-cover[data-context="inspector"][data-source-ratio="4:3"] { aspect-ratio: 4 / 3; }
.inspiration-cover[data-context="inspector"][data-source-ratio="1:1"] { aspect-ratio: 1 / 1; }
.inspiration-cover[data-context="inspector"][data-source-ratio="4:5"] { aspect-ratio: 4 / 5; }
.inspiration-cover[data-context="inspector"][data-source-ratio="3:4"] { aspect-ratio: 3 / 4; }
.inspiration-cover[data-context="inspector"][data-source-ratio="9:16"] { aspect-ratio: 9 / 16; }

.inspiration-card.card-variant-p01 .inspiration-card-copy {
  display: grid;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  height: var(--inspiration-card-copy-height);
  align-content: start;
  grid-template-rows:
    calc(16px * var(--inspiration-card-scale))
    calc(42px * var(--inspiration-card-scale))
    calc(34px * var(--inspiration-card-scale))
    calc(26px * var(--inspiration-card-scale))
    var(--inspiration-card-stats-height)
    var(--inspiration-card-tags-height);
  row-gap: calc(4px * var(--inspiration-card-scale));
  overflow: hidden;
  padding: calc(10px * var(--inspiration-card-scale)) calc(16px * var(--inspiration-card-scale));
}

.inspiration-card.card-variant-p01 .inspiration-card-topline,
.inspiration-card.card-variant-p01 .inspiration-card-title,
.inspiration-card.card-variant-p01 .inspiration-card-summary,
.inspiration-card.card-variant-p01 .inspiration-author-row,
.inspiration-card.card-variant-p01 .inspiration-stats,
.inspiration-card.card-variant-p01 .inspiration-tag-row {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  margin: 0;
  overflow: hidden;
}

.inspiration-card.card-variant-p01 .inspiration-card-topline {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.inspiration-card.card-variant-p01 .inspiration-card-topline span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inspiration-card.card-variant-p01 .inspiration-card-topline span[aria-hidden="true"] {
  flex: 0 0 auto;
  overflow: visible;
}

.inspiration-card.card-variant-p01 .inspiration-card-title,
.inspiration-card.card-variant-p01 .inspiration-card-summary {
  display: -webkit-box;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.inspiration-card.card-variant-p01 .inspiration-card-title {
  font-size: max(11px, calc(15px * var(--inspiration-card-scale)));
  line-height: calc(20px * var(--inspiration-card-scale));
}

.inspiration-card.card-variant-p01 .inspiration-card-summary {
  font-size: max(9px, calc(12px * var(--inspiration-card-scale)));
  line-height: calc(16px * var(--inspiration-card-scale));
  -webkit-line-clamp: 2;
}

.inspiration-card.card-variant-p01 .inspiration-card-topline,
.inspiration-card.card-variant-p01 .inspiration-author-name,
.inspiration-card.card-variant-p01 .inspiration-stat,
.inspiration-card.card-variant-p01 .inspiration-stat b,
.inspiration-card.card-variant-p01 .inspiration-card-footer {
  font-size: max(9px, calc(11px * var(--inspiration-card-scale)));
}

.inspiration-card.card-variant-p01 .inspiration-author-row {
  display: flex;
  align-items: center;
  gap: calc(7px * var(--inspiration-card-scale));
  margin-top: 0;
}

.inspiration-card.card-variant-p01 .inspiration-author-avatar {
  flex: 0 0 auto;
  width: calc(22px * var(--inspiration-card-scale));
  height: calc(22px * var(--inspiration-card-scale));
  font-size: max(9px, calc(10px * var(--inspiration-card-scale)));
}

.inspiration-card.card-variant-p01 .inspiration-author-avatar [data-inspiration-author-initials] {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.inspiration-card.card-variant-p01 .inspiration-author-name {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspiration-card.card-variant-p01 .inspiration-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: calc(4px * var(--inspiration-card-scale));
  overflow: hidden;
  margin-top: 0;
}

.inspiration-card.card-variant-p01 .inspiration-stat {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: calc(3px * var(--inspiration-card-scale));
  overflow: hidden;
  white-space: nowrap;
}

.inspiration-card.card-variant-p01 .inspiration-stat .icon {
  flex: 0 0 auto;
  width: max(12px, calc(14px * var(--inspiration-card-scale)));
  height: max(12px, calc(14px * var(--inspiration-card-scale)));
}

.inspiration-card.card-variant-p01 .inspiration-stat b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspiration-card.card-variant-p01 .inspiration-tag-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 0;
  align-self: stretch;
}

.inspiration-card.card-variant-p01 .inspiration-tag-row .tag {
  box-sizing: border-box;
  flex: 0 1 auto;
  width: max-content;
  max-width: min(46%, 9em);
  min-width: 0;
  min-height: 0;
  height: auto;
  max-height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 7px;
  font-size: max(9px, calc(10px * var(--inspiration-card-scale)));
  line-height: 1.35;
}

.inspiration-card.card-variant-p01 .inspiration-tag-row .tag--more {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding-inline: 6px;
}

.inspiration-card.card-variant-p01 .inspiration-card-footer {
  position: static;
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--inspiration-card-footer-height);
  height: var(--inspiration-card-footer-height);
  margin: 0;
  align-self: stretch;
  overflow: hidden;
}

.inspiration-card.card-variant-p01 .inspiration-card-actions {
  flex: 0 0 auto;
}

/* List view is a separate, uniform horizontal row. It never reuses the source
   ratio as a row-height signal. */
.inspiration-library[data-card-size] .inspiration-grid[data-view="list"] {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
}

.inspiration-grid[data-view="list"] .inspiration-card.card-variant-p01 {
  height: calc(220px * var(--inspiration-card-scale));
  grid-template-rows: minmax(0, 1fr) var(--inspiration-card-footer-height);
}

.inspiration-grid[data-view="list"] .inspiration-card.card-variant-p01 .inspiration-card-open {
  display: grid;
  grid-template-columns: calc(224px * var(--inspiration-card-scale)) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.inspiration-grid[data-view="list"] .inspiration-card.card-variant-p01 .inspiration-cover[data-context="grid"] {
  width: 100%;
  height: 100%;
  grid-column: 1;
  grid-row: 1;
  aspect-ratio: auto;
}

.inspiration-grid[data-view="list"] .inspiration-card.card-variant-p01 .inspiration-card-copy {
  width: 100%;
  height: 100%;
  grid-column: 2;
  grid-row: 1;
  grid-template-rows:
    calc(15px * var(--inspiration-card-scale))
    calc(38px * var(--inspiration-card-scale))
    calc(19px * var(--inspiration-card-scale))
    calc(26px * var(--inspiration-card-scale))
    calc(20px * var(--inspiration-card-scale))
    calc(22px * var(--inspiration-card-scale));
  row-gap: calc(3px * var(--inspiration-card-scale));
  padding: calc(8px * var(--inspiration-card-scale)) calc(16px * var(--inspiration-card-scale));
}

.inspiration-grid[data-view="list"] .inspiration-card.card-variant-p01 .inspiration-card-summary {
  line-height: calc(17px * var(--inspiration-card-scale));
  -webkit-line-clamp: 1;
}

.inspiration-toolbar [data-action="gather-inspiration"] {
  border-color: transparent;
  background: transparent;
  color: var(--text-primary);
  box-shadow: none;
}

.inspiration-toolbar [data-action="gather-inspiration"]:hover,
.inspiration-toolbar [data-action="gather-inspiration"]:focus-visible,
.inspiration-toolbar #filter-trigger:hover,
.inspiration-toolbar #filter-trigger:focus-visible {
  background: var(--surface-hover);
}

.inspiration-library .copylibrary-smart-view-switcher { min-width: max-content; }

@container inspiration-library (max-width: 680px) {
  .inspiration-toolbar { align-items: stretch; }
  .inspiration-toolbar .copylibrary-toolbar-actions { flex-wrap: wrap; }
  .inspiration-toolbar .copylibrary-search {
    min-width: min(220px, 100%);
    flex: 1 1 220px;
  }
}

@container inspiration-library (max-width: 520px) {
  .inspiration-grid[data-view="list"] .inspiration-card.card-variant-p01 .inspiration-card-open {
    grid-template-columns: calc(132px * var(--inspiration-card-scale)) minmax(0, 1fr);
  }

  .inspiration-card.card-variant-p01 .inspiration-card-copy {
    padding-right: calc(13px * var(--inspiration-card-scale));
    padding-left: calc(13px * var(--inspiration-card-scale));
  }

  .inspiration-card.card-variant-p01 .inspiration-card-footer {
    padding-right: calc(11px * var(--inspiration-card-scale));
    padding-left: calc(13px * var(--inspiration-card-scale));
  }
}

@container inspiration-card (max-width: 280px) {
  .inspiration-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(3px * var(--inspiration-card-scale));
  }

  .inspiration-stat[data-stat-optional="true"] {
    display: none;
  }

  .inspiration-stat {
    gap: 2px;
  }
}