/* Supplementary utilities not present in the site's compiled Tailwind build.
   Loaded after style.css so it can fill the small gaps used by the
   category grid and the image-fallback placeholder. */

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.object-contain { object-fit: contain; }
.leading-relaxed { line-height: 1.625; }
.hover\:bg-amber-50:hover { background-color: #fffbeb; }

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Generator hub / product page utilities --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.min-w-\[36rem\] { min-width: 36rem; }
.min-w-\[52rem\] { min-width: 52rem; }
.items-end { align-items: flex-end; }
.self-start { align-self: flex-start; }
.first\:mt-0:first-child { margin-top: 0; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.border-zinc-800 { border-color: #27272a; }
.bg-zinc-950 { background-color: #09090b; }
.text-zinc-300 { color: #d4d4d8; }
.leading-8 { line-height: 2rem; }
.scroll-mt-24 { scroll-margin-top: 6rem; }
.tabular-nums { font-variant-numeric: tabular-nums; }

@media (min-width: 640px) {
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Category tile icon badge */
.cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  background-color: #fef3c6;
  color: #b75000;
  flex-shrink: 0;
  transition: background-color .15s ease, color .15s ease;
}

.group:hover .cat-icon {
  background-color: #f99c00;
  color: #18181b;
}