/*
 * Ideias de presente (home de vendas, 12/10/2026): matérias do blog para quem compra.
 * Herdou o estilo das antigas "Dicas do BrasiArte" (hb-dica), agora com prefixo hm-id-.
 * Celular: lista de 3 com a foto à esquerda (112 x 84). Tablet: 2 colunas.
 * Computador: 4 cards numa linha, capa 1200 x 630, título e trecho em 2 linhas.
 */
.hm-id { content-visibility: auto; contain-intrinsic-size: auto 420px; }

.hm-id-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.hm-id-item { min-width: 0; }
.hm-id-item--extra { display: none; }

.hm-id-card { display: flex; gap: 12px; align-items: flex-start; height: 100%; padding: 10px; border-radius: 18px; background: #fff;
              outline: 1px solid var(--hm-linha); box-shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 8px 22px -14px rgba(28, 25, 23, .18);
              transition: transform .2s ease, box-shadow .2s ease; }
.hm-id-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(28, 25, 23, .05), 0 14px 30px -14px rgba(28, 25, 23, .24); }
.hm .hm-id-card:focus-visible { outline: 3px solid var(--hm-ouro); outline-offset: 3px; border-radius: 18px; }

.hm-id-foto { flex: 0 0 112px; width: 112px; height: 84px; border-radius: 12px; overflow: hidden; background: #f5f5f4;
              display: grid; place-items: center; color: #a8a29e; font-size: 22px; }
.hm-id-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.hm-id-card:hover .hm-id-foto img { transform: scale(1.04); }

.hm-id-txt { min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-top: 2px; }
.hm-id-titulo { font-size: 14.5px; line-height: 1.3; font-weight: 700; color: var(--hm-tinta);
                display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-id-trecho { display: none; font-size: 12.5px; line-height: 1.45; color: var(--hm-suave); }
.hm-id-tempo { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--hm-verde); }
.hm-id-tempo i { font-size: 11px; }

/* Tablet: com 4 matérias, 2 colunas (2 x 2); com 3, a lista continua em 1 coluna */
@media (min-width: 640px) {
    .hm-id-lista--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .hm-id-lista--4 .hm-id-item--extra { display: block; }
}

/* Computador: cards em pé, capa no alto */
@media (min-width: 1024px) {
    .hm-id { contain-intrinsic-size: auto 400px; }
    .hm-id-lista,
    .hm-id-lista--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .hm-id-lista--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hm-id-item--extra { display: block; }
    .hm-id-card { flex-direction: column; gap: 0; padding: 0; overflow: hidden; border-radius: 20px; }
    .hm .hm-id-card:focus-visible { border-radius: 20px; }
    .hm-id-foto { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 1200 / 630; border-radius: 0; }
    .hm-id-txt { padding: 13px 15px 15px; gap: 6px; }
    .hm-id-titulo { font-size: 15.5px; }
    .hm-id-trecho { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (min-width: 1280px) {
    .hm-id-titulo { font-size: 16px; }
    .hm-id-trecho { font-size: 13px; }
}
@media (min-width: 1800px) {
    .hm-id-lista,
    .hm-id-lista--4 { gap: 20px; }
    .hm-id-txt { padding: 15px 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-id-card,
    .hm-id-foto img { transition: none; }
    .hm-id-card:hover { transform: none; }
    .hm-id-card:hover .hm-id-foto img { transform: none; }
}