/* ============================================================
   stylist.css — home-stylist.html (Home Stylist: tính năng đang cập nhật)
   Nạp SAU common.css; .btn / .container / .section-pad lấy nguyên từ
   common.css, ở đây chỉ dựng phần riêng.

   Vì sao KHÔNG dùng lại error.css: khối .e404 ở đó neo vào con số lỗi cỡ
   180px làm phần tử chính, còn trang này lấy chính con dấu Home Stylist làm
   phần tử chính. Dùng chung sẽ phải thêm ngoại lệ vào một file đang phục vụ
   4 trang lỗi — đắt hơn là dựng riêng ~60 dòng.
   ============================================================ */

/* Căn giữa theo chiều dọc trong phần màn hình còn lại sau header.
   min-height chứ không height: khổ hẹp mô tả dài ra vẫn đẩy khối cao lên được
   thay vì bị cắt (cùng lý do với .page-error .main trong error.css). */
.page-stylist .main {
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--header-h));
}
.page-stylist .main > .section-pad { width: 100%; }

.stylist {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Nhãn "Sắp ra mắt" — chữ HOA cỡ nhỏ nên lấy --fw-ui chứ không --fw-title
   (xem ghi chú token trong common.css §2: 700 ở 12–13px + letter-spacing
   dương thì bết nét). */
.stylist__kicker {
  font-size: var(--fs-xs);
  font-weight: var(--fw-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: clamp(18px, 2.2vw, 26px);
}

/* Con dấu Home Stylist là phần tử chính của trang.
   Trong header ảnh này chỉ cao 26px; ở đây phóng theo bề ngang màn hình.
   alt rỗng trong HTML: <h1> ngay dưới đã nói đúng tên tính năng, để alt thật
   thì trình đọc màn hình đọc "Home Stylist" hai lần liên tiếp. */
.stylist__badge {
  width: clamp(190px, 26vw, 300px);
  height: auto;
  margin-bottom: clamp(22px, 2.8vw, 34px);
}

.stylist__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-title);
  color: var(--c-ink);
  line-height: 1.2;
  margin-bottom: clamp(12px, 1.6vw, 18px);
}

.stylist__text {
  max-width: 56ch;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--c-body);
  margin-bottom: clamp(26px, 3.4vw, 38px);
}

.stylist__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 640px) {
  /* Kéo nút giãn hết bề ngang cho vùng bấm đủ lớn ở khổ điện thoại,
     giống cách .contact__actions và .e404__actions xử lý. */
  .stylist__actions { width: 100%; }
  .stylist__actions .btn { width: 100%; }
}

/* Hiệu ứng hiện lên khi tải trang — CHỈ chạy trên transform, KHÔNG đụng
   opacity. Lý do đầy đủ ở cuối error.css: `fill-mode: both` giữ nguyên khung
   đầu cho tới khi animation chạy, mà trình duyệt tạm dừng animation ở tab nền
   — khung đầu là opacity:0 thì trang mở trong tab nền sẽ trắng trơn. */
@media (prefers-reduced-motion: no-preference) {
  .stylist__kicker,
  .stylist__badge,
  .stylist__title,
  .stylist__text,
  .stylist__actions { animation: stylist-in .5s var(--ease) both; }
  .stylist__badge   { animation-delay: .06s; }
  .stylist__title   { animation-delay: .12s; }
  .stylist__text    { animation-delay: .18s; }
  .stylist__actions { animation-delay: .24s; }
}
@keyframes stylist-in {
  from { transform: translateY(10px); }
  to   { transform: none; }
}