/* ==========================================================================
   VINTAGE WINE CO. — BRANDS ARCHIVE
   Figma node: 131:370

   Shared archive filter, sidebar, accordion, selected-pill and mobile-overlay
   styles now live in desktop.css and responsive.css. This file contains only
   Brands archive layout, cards, loading and empty-state styling.
   ========================================================================== */

.vw-brands-archive {
  --vw-brands-card-background: var(--color-background-creame, #f4f1e8);
  --vw-brands-card-hover: var(--color-background-hover, #e9e4d3);

  position: relative;

  color: var(--color-text);
  background: var(--color-background);
}

.vw-brands-layout {
  align-items: flex-start;
}


/* --------------------------------------------------------------------------
   BRAND LOGO GRID
   -------------------------------------------------------------------------- */

.vw-brands-grid {
  align-items: stretch;
}

.vw-brand-card {
  min-width: 0;
}

.vw-brand-card-link {
  display: flex;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0.75rem;
  color: var(--color-heading);
  background: var(--vw-brands-card-background);
  text-decoration: none;
  transition: background-color 180ms ease;
}

.vw-brand-card-link:hover,
.vw-brand-card-link:focus-visible {
  color: var(--color-heading);
  background: var(--vw-brands-card-hover);
}

.vw-brand-card-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 180ms ease;
}

.vw-brand-card-link:hover .vw-brand-card-logo,
.vw-brand-card-link:focus-visible .vw-brand-card-logo {
  transform: scale(1.025);
}

.vw-brand-card-fallback {
  max-width: 90%;
  color: var(--color-heading);
  font-family: var(--font-family-heading);
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  line-height: 1.15;
  text-align: center;
}


/* --------------------------------------------------------------------------
   BRAND LOADING / EMPTY STATES
   -------------------------------------------------------------------------- */

.vw-brand-card-skeleton {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--vw-brands-card-background);
}

.vw-brand-card-skeleton-shape {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--vw-brands-card-background);
}

.vw-brands-no-results {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1rem;
  min-height: 18rem;
  padding: 2rem;
  background: var(--vw-brands-card-background);
}

.vw-brands-no-results h2,
.vw-brands-no-results p {
  margin: 0;
}


/* --------------------------------------------------------------------------
   BRANDS ARCHIVE RESPONSIVE LAYOUT
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 74.999em) {
 
}

@media only screen and (max-width: 47.999em) {
 
  .vw-brand-card-link {
    padding: 0.5rem;
  }
}


@media (prefers-reduced-motion: reduce) {
  .vw-brand-card-link,
  .vw-brand-card-logo {
    transition: none;
  }
}