/* ==================================================================
   DS 5.1 — Layout "revista" no catálogo (blocos assimétricos)

   Novo estilo de fileira: em vez de scroll horizontal uniforme,
   os cards se organizam em grid assimétrico inspirado em editorial.
   Pode ser ativado por seção na home via style_config.layout = 'magazine'.
   ================================================================== */

/* Grid editorial — 3 formatos que se alternam */
.row-magazine {
  display: grid;
  gap: var(--sp-3, 12px);
  padding: 0 var(--gutter);
}

/* Padrão: celular = 2 colunas, tablet = 3+1 grande, desktop = featured layout */
@media (max-width: 599px) {
  .row-magazine {
    grid-template-columns: repeat(2, 1fr);
  }
  .row-magazine > :first-child {
    grid-column: 1 / -1;
  }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .row-magazine {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
  }
  .row-magazine > :first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
}
@media (min-width: 1024px) {
  .row-magazine {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(180px, auto);
  }
  /* Primeiro item: destaque grande (ocupa 5 colunas e 2 linhas) */
  .row-magazine > :nth-child(1) {
    grid-column: span 5;
    grid-row: span 2;
  }
  /* Segundo e terceiro: empilhados ao lado do destaque */
  .row-magazine > :nth-child(2) { grid-column: span 4; }
  .row-magazine > :nth-child(3) { grid-column: span 3; }
  /* Quarto ao sexto: faixa de 3 */
  .row-magazine > :nth-child(n+4):nth-child(-n+6) { grid-column: span 4; }
  /* Sétimo em diante: 3 colunas de 4 */
  .row-magazine > :nth-child(n+7) { grid-column: span 4; }
}

/* Card editorial (pôster vertical com overlay de texto) */
.card-editorial {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-panel);
  background: var(--surface-2);
  cursor: pointer;
}
.card-editorial__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.card-editorial:hover .card-editorial__img {
  transform: scale(1.04);
}
.card-editorial__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-4, 16px) var(--sp-3, 12px);
  background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
  color: #FFF;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card-editorial__title {
  font-size: var(--fs-md);
  font-weight: 650;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-editorial__meta {
  font-size: var(--fs-xs);
  opacity: .75;
}

/* Destaque grande: título maior */
.row-magazine > :first-child .card-editorial__title {
  font-size: var(--fs-xl);
  font-weight: var(--display-weight, 750);
  letter-spacing: var(--display-track, -.005em);
}
.row-magazine > :first-child .card-editorial__overlay {
  padding: var(--sp-6, 24px) var(--sp-5, 20px);
}

/* Versão com badge de gênero */
.card-editorial__badge {
  position: absolute;
  top: var(--sp-3, 12px);
  left: var(--sp-3, 12px);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-control);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFF;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card-editorial__img { transition: none; }
  .card-editorial:hover .card-editorial__img { transform: none; }
}

/* Dentro da seção da home (.wrap já dá o recuo lateral) os cards comuns preenchem a célula da grade */
.row--magazine .row-magazine { padding: 0; }
.row--magazine .row-magazine > .card { width: 100%; min-width: 0; }