/* ============================================================
   pages.css — Style riêng cho từng trang
   - Hero & Đọc nhiều nhất (trang chủ)
   - Banner chuyên mục
   - Bài viết chi tiết
   - Trang tìm kiếm
   - Trạng thái rỗng (.empty)
   Nạp SAU base.css & layout.css.
   ============================================================ */

/* ---------- TRANG CHỦ: KHỐI LEAD (giống tatlerasia.com) ---------- */
.lead{margin-bottom:8px}

/* Ảnh hero trong container (như tatlerasia.com — có padding 2 bên) */
.lead-hero{display:block}
.lead-hero img{width:100%;height:74vh;max-height:760px;object-fit:cover;display:block}

/* Hàng dưới hero: text bài dẫn (trái) + 2 card (phải) */
.lead-row{display:grid;grid-template-columns:1.25fr 1fr;gap:52px;margin-top:38px}
.lead-story{display:block}
.lead-story .badge{margin-bottom:12px}
.lead-story h1{font-size:2.9rem;line-height:1.08;margin-bottom:16px}
.lead-story p{color:var(--gray);font-size:1.08rem;line-height:1.6;max-width:48ch}
.lead-story:hover h1{text-decoration:underline}
.lead-cards{display:grid;grid-template-columns:1fr 1fr;gap:30px}

/* ---------- TRANG CHỦ: ĐỌC NHIỀU NHẤT ---------- */
.popular-block .section-head{margin-top:var(--section-gap)}
.popular{
  list-style:none;
  display:grid;grid-template-columns:repeat(5,1fr);gap:24px;
}
.popular li a{display:block}
.popular li a:hover .ptitle{text-decoration:underline}
.popular .num{display:block;font-family:var(--serif);font-size:2rem;font-weight:700;
  color:var(--ink);line-height:1;margin-bottom:8px;border-top:2px solid var(--ink);padding-top:10px}
.popular .ptitle{font-family:var(--serif);font-size:1.02rem;line-height:1.28}

/* ---------- BANNER CHUYÊN MỤC ---------- */
.cat-banner{
  padding:48px 0 36px;text-align:center;
  border-bottom:1px solid var(--line);margin-bottom:40px;
}
.cat-banner .eyebrow{margin-bottom:10px}
.cat-banner h1{font-size:2.8rem}

/* ---------- BÀI VIẾT CHI TIẾT ---------- */
.article{max-width:740px;margin:44px auto}   /* cột chữ hẹp dễ đọc */
.article h1{font-size:2.8rem;margin:10px 0;line-height:1.12}
.article .meta{color:var(--gray);font-size:.85rem;letter-spacing:.04em;margin-bottom:24px}
.article .cover{aspect-ratio:3/2;object-fit:cover;width:100%;margin-bottom:28px}
.article .body p{margin-bottom:20px;font-size:1.12rem;line-height:1.7}
.article > a{display:inline-block;margin-bottom:6px}  /* link badge chuyên mục */

/* ---------- TRANG TÌM KIẾM ---------- */
.search-head{margin:32px 0}
.search-head input{
  width:100%;max-width:480px;padding:12px;
  border:1px solid var(--line);font-size:1rem;margin-top:10px;
}
.result-count{color:var(--gray);margin-bottom:16px}

/* ---------- TRẠNG THÁI RỖNG ---------- */
.empty{padding:60px 0;text-align:center;color:var(--gray)}

/* ---------- ANIMATION CHUYỂN TRANG (fade in/out giống Tatler) ----------
   - #main fade-in nhẹ khi body có .is-ready (bật ở frame đầu).
   - Khi rời trang (body.is-leaving) thì mờ dần trước khi điều hướng. */
#main{opacity:0;transform:translateY(10px);transition:opacity .45s ease, transform .45s ease}
body.is-ready #main{opacity:1;transform:none}
body.is-leaving #main{opacity:0;transform:translateY(-10px);transition:opacity .24s ease, transform .24s ease}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px){
  .lead-hero img{height:46vh}
  .lead-row{grid-template-columns:1fr;gap:30px}   /* lead xếp 1 cột */
  .lead-story h1{font-size:2rem}
  .lead-cards{gap:20px}
  .popular{grid-template-columns:repeat(2,1fr)} /* đọc nhiều nhất 2 cột */
  .section-head a,.section-head span{font-size:1.3rem}
  .cat-banner h1{font-size:2rem}
  .article h1{font-size:2rem}
  .article .body p{font-size:1.05rem}
}
@media(max-width:480px){
  .popular{grid-template-columns:1fr}
  .lead-story h1{font-size:1.75rem}
  .lead-cards{grid-template-columns:1fr}
  .lead-hero img{height:40vh}
}