/* ═══════════════════════════════════════════════════════
   LIT-CI Custom Blocks — Posts Row — Frontend styles
   ═══════════════════════════════════════════════════════ */

/* ── Color schemes ──────────────────────────────────── */
.litci-posts-row {
  --pr-bg:          #f4f5f7;
  --pr-title-color: #111;
  --pr-dot-color:   #cc0000;
  --pr-text:        #1a1a1a;
  --pr-meta:        #666;
  --pr-link-hover:  #cc0000;
  --pr-view-all:    #555;
  --pr-no-thumb:    #d0d0d0;

  background-color: var(--pr-bg);
  padding: 28px 24px 32px;
  box-sizing: border-box;
  font-family: inherit;
}

.litci-posts-row *,
.litci-posts-row *::before,
.litci-posts-row *::after {
  box-sizing: border-box;
}

/* light (default) — já definido acima */

.litci-posts-row--light {
  --pr-bg:       #f4f5f7;
  --pr-text:     #1a1a1a;
  --pr-meta:     #666;
  --pr-no-thumb: #d0d0d0;
}

.litci-posts-row--gray {
  --pr-bg:       #e2e4e8;
  --pr-text:     #1a1a1a;
  --pr-meta:     #555;
  --pr-no-thumb: #bfc1c5;
}

.litci-posts-row--slate {
  --pr-bg:       #2d3748;
  --pr-title-color: #f0f0f0;
  --pr-text:     #e2e8f0;
  --pr-meta:     #a0aec0;
  --pr-view-all: #a0aec0;
  --pr-no-thumb: #4a5568;
}

.litci-posts-row--dark {
  --pr-bg:       #1a1a1a;
  --pr-title-color: #f0f0f0;
  --pr-text:     #e0e0e0;
  --pr-meta:     #888;
  --pr-view-all: #888;
  --pr-no-thumb: #333;
}

.litci-posts-row--darkmode {
  --pr-bg:       #111;
  --pr-title-color: #fff;
  --pr-text:     #ddd;
  --pr-meta:     #777;
  --pr-view-all: #777;
  --pr-no-thumb: #2a2a2a;
}

/* ── Header ─────────────────────────────────────────── */
.litci-posts-row__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.litci-posts-row__section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pr-title-color);
  line-height: 1.2;
}

.litci-posts-row__section-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pr-dot-color);
  flex-shrink: 0;
}

.litci-posts-row__view-all {
  font-size: 0.82rem;
  color: var(--pr-view-all);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.litci-posts-row__view-all:hover {
  color: var(--pr-link-hover);
}

/* ── Grid ───────────────────────────────────────────── */
.litci-posts-row__grid {
  display: grid;
  gap: 20px;
}

.litci-posts-row__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.litci-posts-row__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.litci-posts-row__grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.litci-posts-row__grid--cols-6 { grid-template-columns: repeat(6, 1fr); }

/* ── Item ───────────────────────────────────────────── */
.litci-posts-row__item-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.litci-posts-row__thumb-wrap {
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 12px;
  aspect-ratio: 16 / 10;
  background: var(--pr-no-thumb);
}

.litci-posts-row__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.litci-posts-row__no-thumb {
  width: 100%;
  height: 100%;
}

.litci-posts-row__item-link:hover .litci-posts-row__thumb {
  transform: scale(1.05);
}

.litci-posts-row__item-body {
  padding: 0 2px;
}

.litci-posts-row__item-title {
  margin: 0 0 6px;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--pr-text);
  transition: color 0.2s;
}

.litci-posts-row__item-link:hover .litci-posts-row__item-title {
  color: var(--pr-link-hover);
}

.litci-posts-row__item-date {
  font-size: 0.78rem;
  color: var(--pr-meta);
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
  .litci-posts-row__grid--cols-5,
  .litci-posts-row__grid--cols-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 680px) {
  .litci-posts-row__grid--cols-4,
  .litci-posts-row__grid--cols-5,
  .litci-posts-row__grid--cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 420px) {
  .litci-posts-row__grid {
    grid-template-columns: 1fr !important;
  }
}