/* ── Product category cards ── */

/* Hub canonical responsive 3 → 2 → 1 (User 2026-05-08). Mesma régua do
   .admin-card-grid: 3 cards/linha desktop (≥1024px), 2 tablet (640-1023px),
   1 mobile (<640px). Memory: feedback_hub_cards_responsive_3_2_1_canonical. */
.product-category-grid {
  display: grid;
  gap: 1rem;
  align-items: stretch;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .product-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .product-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.product-category-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  border-radius: 0.5rem;
  border-width: 1px;
  border-left-width: 4px;
  padding: 1.25rem;
  border-color: var(--color-surface-200, #e2e8f0);
  border-left-color: var(--color-surface-300, #cbd5e1);
  background: var(--color-surface-100, #f8fafc);
}

.product-category-card-active {
  background: var(--color-surface, #ffffff);
}

.product-category-tone-primary {
  border-left-color: var(--theme-primary);
}

.product-category-tone-sky {
  border-left-color: var(--color-tone-sky, #39a0e2);
}
.product-category-tone-purple {
  border-left-color: var(--color-tone-purple, #7c3aed);
}

.product-category-tone-amber {
  border-left-color: var(--color-tone-amber, #f59b42);
}

.product-category-tone-gold {
  border-left-color: var(--color-tone-gold, #d4a017);
}

.product-category-tone-emerald {
  border-left-color: var(--color-success, #047857);
}

.product-category-tone-mint {
  border-left-color: var(--color-tone-mint, #3fbf9b);
}

.product-category-card-name {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: var(--theme-primary);
  /* Wave 428 / Bug 366 — garante altura uniforme do título mesmo quando o
     nome curto ("Renda Fixa") cabe em 1 linha e o nome longo ("Fundos de
     investimento") quebra em 2 linhas no viewport tablet/mobile. */
  min-height: 3rem;
}

.product-category-card-desc {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary-rgb) / var(--tw-text-opacity, 1));
  /* Wave 428 / Bug 366 — descrição com 3 linhas reservadas estabiliza altura
     do card independente do tamanho do texto da categoria. */
  min-height: 4.5rem;
}

.product-category-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1rem;
  /* Wave 428 / Bug 366 — alinha footer dos cards "Em breve" (apenas span) com
     os cards ativos (span + link âncora) para manter altura uniforme do grid.
     Min-height = 1.25rem (line-height do link) + 1rem (padding-top) = 2.25rem. */
  min-height: 2.25rem;
}

.product-category-card-footer > * {
  /* Garante line-height consistente entre <span class="...soon"> e
     <a class="...link"> — sem isto o card "Em breve" fica 4px menor. */
  line-height: 1.25rem;
}

.product-category-card-count {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary-rgb) / var(--tw-text-opacity, 1));
}

.product-category-card-link {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--theme-primary);
}

.product-category-card-link:hover {
  color: var(--theme-accent);
  text-decoration: none;
}

.product-category-card-soon {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-muted-rgb) / var(--tw-text-opacity, 1));
}

/* ── Product shelf sections ── */

.product-shelf-section {
  margin-top: 2rem;
}

.product-shelf-section-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .product-shelf-section-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.product-shelf-section-header {
  margin-bottom: 1.25rem;
}

.product-shelf-section-title {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: var(--theme-primary);
}

.product-shelf-section-subtitle {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary-rgb) / var(--tw-text-opacity, 1));
}

/* ── Product shelf cards (opportunities) ── */

.product-shelf-grid {
  display: grid;
  width: 100%;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .product-shelf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .product-shelf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.product-shelf-card {
  display: flex;
  height: 100%;
  min-width: 0px;
  /* Altura mínima uniforme entre cards de Renda Fixa e Fundos (mesma régua do .shelf-card) */
  min-height: 16rem;
  flex-direction: column;
  border-radius: 0.75rem;
  border-width: 1px;
  border-left-width: 4px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.25rem;
  border-color: var(--color-surface-200, #e2e8f0);
  border-left-color: var(--color-surface-300, #cbd5e1);
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease;
  container-type: inline-size;
  container-name: product-shelf-card;
}

.product-shelf-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.product-shelf-tone-primary {
  border-left-color: var(--theme-primary);
}

.product-shelf-tone-sky {
  border-left-color: var(--color-tone-sky, #39a0e2);
}
.product-shelf-tone-purple {
  border-left-color: var(--color-tone-purple, #7c3aed);
}

.product-shelf-tone-amber {
  border-left-color: var(--color-tone-amber, #f59b42);
}

.product-shelf-tone-gold {
  border-left-color: var(--color-tone-gold, #d4a017);
}

.product-shelf-tone-emerald {
  border-left-color: var(--color-success, #047857);
}

.product-shelf-tone-mint {
  border-left-color: var(--color-tone-mint, #3fbf9b);
}

.product-shelf-card-top {
  margin-bottom: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.product-shelf-card-type {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  border-radius: 0.25rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(var(--theme-primary-rgb), 0.08);
  color: var(--theme-primary);
}

.product-shelf-card-indexer {
  min-width: 0px;
  flex: 1 1 0%;
  text-align: right;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.375;
  letter-spacing: 0.05em;
  color: var(--theme-primary-muted);
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.product-shelf-card-issuer {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  line-height: 1.375;
  color: var(--theme-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-shelf-card-issuer-full {
  min-height: 4.125rem;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.product-shelf-card-yield {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}

.product-shelf-card-yield strong {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: var(--theme-primary);
}

.product-shelf-card-meta {
  margin-bottom: 0.75rem;
  display: grid;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
  row-gap: 0.75rem;
  border-top-width: 1px;
  padding-top: 0.75rem;
  border-color: var(--color-hover-muted, #f1f5f9);
  /* 2×2 em cards estreitos; 4 colunas quando o card tem largura suficiente (container query) */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container product-shelf-card (min-width: 25.5rem) {
  .product-shelf-card-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Fallback sem container queries: em viewports médias força 2×2 */

@supports not (container-type: inline-size) {
  .product-shelf-card-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (min-width: 1280px) {
    .product-shelf-card-meta {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}

.product-shelf-card-meta-item {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.125rem;
}

.product-shelf-card-meta-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(var(--color-muted-rgb) / var(--tw-text-opacity, 1));
}

.product-shelf-card-meta-value {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  line-height: 1.375;
  color: var(--theme-secondary);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.product-shelf-card-tags {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.product-shelf-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background: var(--color-hover-muted, #f1f5f9);
  color: var(--color-text-secondary, #64748b);
}

.product-shelf-tag-success {
  background: var(--color-success-soft, #dcfce7);
  color: var(--color-success-dark, #166534);
}

.product-shelf-tag-mint {
  background: var(--color-text-primary, #334155);
  color: var(--color-surface, #ffffff);
}

.product-shelf-tag-info {
  background: var(--color-info-soft, #dbeafe);
  color: var(--color-info-dark, #1e40af);
}

.product-shelf-tag-conservative {
  background: var(--color-success, #059669);
  color: var(--color-surface, #ffffff);
}

.product-shelf-tag-moderate {
  background: var(--color-info, #2563eb);
  color: var(--color-surface, #ffffff);
}

.product-shelf-tag-bold {
  background: var(--color-warning, #d97706);
  color: var(--color-surface, #ffffff);
}

.product-shelf-tag-aggressive {
  background: var(--color-error, #dc2626);
  color: var(--color-surface, #ffffff);
}
.product-shelf-tag-sophisticated {
  background: var(--color-tone-purple, #7c3aed);
  color: var(--color-surface, #ffffff);
}

/* Card indisponível (produto desabilitado/sem intake): mantém leitura, remove convite à ação. */
.product-shelf-card-unavailable {
  opacity: 0.62;
  filter: grayscale(0.35);
}

.product-shelf-card-unavailable .product-shelf-card-yield strong {
  color: var(--color-text-secondary, #6b7280);
}