:root {
  /* Substitua pelas cores reais do seu tema */
  --bg-primary: #fff;
  --text-secondary: #595959;
  --bg-tertiary-hover: #f3f4f6;
  --text-brand-primary: #00587d;
  --text-sm: 0.875rem;
}

/* ================================
   1. O GRID (grid lg:grid-cols-5 sm:grid-cols-2 gap-3)
   ================================ */
.magazine-grid {
  display: grid;
  gap: 0.75rem; /* Equivalente a gap-3 no Tailwind */
  grid-template-columns: 1fr; /* Padrão (Mobile) */
}

/* Breakpoint SM (640px) */
@media (min-width: 640px) {
  .magazine-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Breakpoint LG (1024px) */
@media (min-width: 1024px) {
  .magazine-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ================================
   2. O CARD SMALL
   ================================ */
.magazine-card {
  display: flex;
  flex-direction: column;
  gap: calc(0.25rem * 2); /* gap-2 */
  padding: 0.5rem; /* p-2 */
  position: relative;
  border-radius: 0.5rem; /* rounded-lg */
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease; /* transition-all duration-300 */
}

/* Hover no Desktop */
@media (min-width: 640px) {
  .magazine-card:hover {
    box-shadow:
      0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    background-color: var(--bg-primary); /* hover:bg-primary */
    text-decoration: none;
  }
}

/* Comportamento base no Mobile (max-sm:shadow-lg max-sm:bg-primary) */
@media (max-width: 639px) {
  .magazine-card {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    background-color: var(--bg-primary);
    text-decoration: none;
  }
}

/* ================================
   3. IMAGEM E TAG
   ================================ */
.magazine-image-wrapper {
  position: relative;
}

.magazine-image {
  width: 100%;
  aspect-ratio: 3 / 4; /* aspect-3/4 */
  object-fit: cover; /* object-cover */
  border-radius: 0.25rem; /* rounded-sm */
  background-color: var(--bg-tertiary-hover); /* bg-tertiary-hover */
  display: block;
}

/* Exemplo genérico para a sua TagNew */
.tag-new {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: #000;
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 10;
}

/* ================================
   4. INFORMAÇÕES DE TEXTO
   ================================ */
.magazine-info {
  display: flex;
  flex: 1; /* flex-1 */
  flex-direction: column;
  gap: 0.75rem; /* gap-3 */
}

.magazine-meta {
  display: flex;
  justify-content: space-between; /* justify-between */
  color: var(--text-secondary); /* text-secondary */
  font-size: 0.75rem; /* text-xs */
  line-height: 1rem;
}

.magazine-meta p {
  margin: 0;
}

/* ================================
   5. BOTÃO DE AÇÃO
   ================================ */
.magazine-action {
  display: flex;
  justify-content: flex-end; /* justify-end */
  opacity: 0; /* opacity-0 */
  transition: opacity 0.3s ease; /* transition-opacity */
  color: var(--text-brand-primary);
  font-size: var(--text-sm);
}

/* Efeito group-hover:opacity-100 */
.magazine-card:hover .magazine-action {
  opacity: 1;
}

/* max-sm:hidden (esconde no mobile) */
@media (max-width: 639px) {
  .magazine-action {
    display: none;
  }
}

/* Estilização básica simulando o Button variant="subtle" */
.btn-subtle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: calc(0.25rem * 2.5);
  font-size: 0.875rem;
  font-weight: 500;
  background-color: transparent;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  color: inherit;
  transition: background-color 0.2s;
}