/* Bìa tự sinh cho bài chưa có ảnh bìa.
 *
 * Vì sao là HTML CSS chứ không phải file ảnh: ảnh SVG nạp qua <img> KHÔNG dùng được
 * web font (nó là tài liệu cô lập, không tải font ngoài), nên tiêu đề sẽ ra font
 * Times mặc định, chẳng giống site chút nào. Dựng bằng HTML thì dùng đúng Playfair
 * Display và Patrick Hand như mọi chỗ khác, lại không tốn thêm lượt tải nào.
 *
 * Muốn một FILE ảnh thật (để ghim làm cover, hoặc dùng cho mạng xã hội) thì dựng
 * bằng scripts/cover-template.html rồi tải lên.
 */

.auto-cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1200 / 630;
  border-radius: var(--border-radius-lg, 22px);
  background: #fff4e6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 7%;
  container-type: inline-size;
}

/* vệt màu mép trái, giống nút chính của site */
.auto-cover::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 1.2%;
  background: #c4533d;
}
/* mảng tròn ấm góc dưới phải */
.auto-cover::after {
  content: '';
  position: absolute; right: -16%; bottom: -36%;
  width: 53%; aspect-ratio: 1; border-radius: 50%;
  background: #fde8e0;
}

.auto-cover > * { position: relative; z-index: 2; }

.auto-cover .ac-kicker {
  font-family: var(--font-script, 'Patrick Hand', cursive);
  color: #8e2c5e;
  font-size: 5cqw;
  margin-bottom: 1.2cqw;
  line-height: 1.2;
}

.auto-cover .ac-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-weight: 700;
  color: #1f1812;
  letter-spacing: -0.02em;
  line-height: 1.14;
  margin: 0;
  /* Cỡ chữ co theo độ dài, đặt bằng biến để chỗ gọi tự tính */
  font-size: var(--ac-size, 8cqw);
  /* Tiêu đề dài quá thì cắt bớt còn hơn tràn ra ngoài khung */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.auto-cover .ac-foot {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  margin-top: 4cqw;
}
.auto-cover .ac-foot img {
  width: 7cqw; height: 7cqw;
  border: 0.55cqw solid #1f1812;
  object-fit: cover;
  display: block;
  flex: 0 0 auto;
}
.auto-cover .ac-name {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-weight: 700;
  font-size: 2.6cqw;
  line-height: 1.3;
  color: #1f1812;
}
.auto-cover .ac-domain {
  font-size: 1.9cqw;
  font-weight: 600;
  color: #c4533d;
}

/* --- tông tối --- */
.auto-cover.ac-toi { background: #1f1812; }
.auto-cover.ac-toi .ac-title,
.auto-cover.ac-toi .ac-name { color: #fff4e6; }
.auto-cover.ac-toi .ac-kicker { color: #f2a0c4; }
.auto-cover.ac-toi .ac-domain { color: #ef8a72; }
.auto-cover.ac-toi .ac-foot img { border-color: #fff4e6; }
.auto-cover.ac-toi::after { background: rgba(196, 83, 61, .28); }

/* --- tông đỏ gạch --- */
.auto-cover.ac-gach { background: #c4533d; }
.auto-cover.ac-gach .ac-title,
.auto-cover.ac-gach .ac-name { color: #fff4e6; }
.auto-cover.ac-gach .ac-kicker { color: #ffe0d6; }
.auto-cover.ac-gach .ac-domain { color: #ffd9cd; }
.auto-cover.ac-gach .ac-foot img { border-color: #fff4e6; }
.auto-cover.ac-gach::before { background: #1f1812; }
.auto-cover.ac-gach::after { background: rgba(255, 244, 230, .13); }

/* Trong danh sách bài, khung nhỏ nên bỏ bớt phần chân cho đỡ rối */
.auto-cover.ac-nho { padding: 0 8%; }
.auto-cover.ac-nho .ac-foot { display: none; }
.auto-cover.ac-nho .ac-title { -webkit-line-clamp: 3; }

@supports not (container-type: inline-size) {
  /* Trình duyệt cũ không có container query: dùng cỡ cố định, xấu hơn nhưng đọc được */
  .auto-cover .ac-kicker { font-size: 1.1rem; }
  .auto-cover .ac-title { font-size: 1.9rem; }
  .auto-cover .ac-foot img { width: 54px; height: 54px; border-width: 4px; }
  .auto-cover .ac-name { font-size: 1rem; }
  .auto-cover .ac-domain { font-size: .8rem; }
}