/* ============================================
   RITUAL.CSS — Section #ritual, 4 bước chăm da

   Đây là section đầu tiên cố ý PHÁ nhịp đều của trang. Sáu section kia cao
   630–900px và năm trong sáu dùng chung padding 112/129 — mắt đọc ra "từng
   block ngang ngang". Section này cao gấp ba rưỡi, nhịp dọc riêng.

   Từ 1024px: CỘT ẢNH DÍNH MỘT CHỖ, bốn khối chữ trôi qua nó, ảnh mờ chồng
   sang nhau theo bước đang đọc (js/animations.js §3). Bố cục so le
   phải-trái-phải-trái của bản trước đã bỏ — hai thứ loại trừ nhau: dính cần
   một cột cố định. Xem git log nếu cần lấy lại bản so le.

   Đo được ở 1440 (clientWidth 1425): section 3241px giữa dải 630–900 của
   sáu section kia, trang chủ 8553px. 1024 → 3107px. 768 → 2866px (xếp dọc).
   375 → 2546px, y hệt trước khi đổi: mobile không đụng tới.

   Không khai token dùng chung ở đây (CLAUDE.md luật 8). Ba biến dưới là hằng
   chỉnh tay của riêng section — vặn --ritual-img-max và --ritual-gap là đổi
   được toàn bộ chiều dài section, không phải sờ vào chỗ nào khác.
   ============================================ */

#ritual {
  --ritual-img-max: 440px;
  --ritual-gap: clamp(80px, 9vw, 160px);
  /* Bề ngang lề trái dành riêng cho chữ số bước */
  --ritual-num-w: clamp(56px, 6vw, 92px);

  /* 157/179 ở desktop, lệch hẳn khỏi 112/129 mà .section-py phát cho năm
     section kia. Section này KHÔNG mang .section-py nên không có xung đột
     nào cần giải; #ritual (1,0,0) cũng đã thắng sẵn. */
  padding-block: calc(var(--section-y) * 1.4) calc(var(--section-y) * 1.6);
}

/* ─── Đầu section: chữ số 4 khổng lồ đứng cạnh tiêu đề ─── */

.ritual-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin-block-end: var(--ritual-gap);
}

.ritual-head__numeral {
  font-family: var(--font-serif);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-light);
  /* --lh-tight bắt buộc: numeral tới 132px, nếu thừa kế --lh-body (1.55)
     thì line box thành 205px và đẩy toàn bộ đầu section xuống. */
  line-height: var(--lh-tight);
  color: var(--ink-a30);
  flex-shrink: 0;
  /* Lấn nhẹ vào chữ, như bên tham chiếu cho "4" chồng lên ESSENTIAL STEPS */
  margin-inline-end: calc(var(--sp-4) * -1);
}

.ritual-head__text {
  max-width: min(46ch, 560px);
}

.ritual-head__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--text-muted);
  margin-block-start: var(--sp-4);
}

/* ─── Danh sách 4 bước ─── */

/* `gap` ở đây mới là đòn tạo "khoảng thở", không phải padding của section:
   khe GIỮA hai bước lớn gấp mấy lần khe TRONG một bước, nên mắt đọc ra bốn
   điểm rời nhau thay vì một bảng bốn hàng.

   Ba dòng reset <ol> là bắt buộc, không phải cho gọn: mặc định
   padding-inline-start 40px + margin-block 1em đẩy cả danh sách lệch 40px so
   với .ritual-head, và mọi phép margin âm bên dưới lệch theo. */
.ritual-list {
  display: flex;
  flex-direction: column;
  gap: var(--ritual-gap);
  list-style: none;
  padding-inline-start: 0;
  margin-block: 0;
}

.ritual-step__media img {
  width: 100%;
  max-width: var(--ritual-img-max);
  /* Đặt sẵn để lúc .webp thật thay placeholder GIF 1×1 thì không nhảy layout */
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
}

.ritual-step__body {
  /* BẮT BUỘC. .ritual-step__num là position:absolute; không có dòng này thì
     nó rơi về initial containing block = góc trái trên của document. Bản đầu
     "chạy được" nhờ .ritual-step__body có transform (phần tử có transform tự
     thành containing block), nhưng transform đó là của reveal và bị xoá ngay
     khi observer gắn .in — bốn chữ số bay lên góc trang đúng lúc cuộn tới,
     không một lỗi console. */
  position: relative;
  /* Chừa lề trái cho .ritual-step__num nằm vào. Số nằm TRONG hộp chữ chứ
     không treo ra ngoài: bản treo ngoài (inset-inline-end: 100%) đo ở 768
     cho x = -69px ở bước chẵn — khối chữ chiếm trọn cột 5fr nên "ngoài" đã
     là ngoài mép trang, và overflow-x:clip cắt mất số. Bên tham chiếu cũng
     đặt số cạnh tiêu đề trong cùng khối chữ, không thả ra rãnh trang. */
  padding-inline-start: var(--ritual-num-w);
  /* Hẹp hơn cột chứa nó. Đo ở 1440: cột 7fr rộng 761px mà khối chữ chỉ
     489px (420 chữ + 69 lề số), dư ~272px trống ở mép ngoài — đúng thủ thuật
     section philosophy bên beautyinstem: nội dung nhỏ hơn hẳn khung. */
  max-width: calc(min(38ch, 420px) + var(--ritual-num-w));
  margin-block-start: var(--sp-8);
}

/* Nằm trong lề trái của khối chữ, một rule cho mọi bề ngang — không cần
   chuyển mobile/desktop. Không ẩn ở mobile: đây là thứ duy nhất trên trang
   nói "đây là bước mấy". */
.ritual-step__num {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(var(--sp-1) * -1);
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  /* a40 chứ không a16. Trên nền cream (#F9F9F9), a16 cho ~1.37:1 — ngoài
     nắng trên điện thoại là không thấy gì, mà chữ số này lại là thứ duy nhất
     trên trang nói "đây là bước mấy". a40 vẫn vô sắc (luật 7).
     Bên tham chiếu tô hồng nhạt; không sao chép hue đó. */
  color: var(--ink-a40);
}

.ritual-step__title {
  font-size: var(--fs-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  margin-block-end: var(--sp-2);
}

.ritual-step__desc {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--text-muted);
  margin-block-start: var(--sp-4);
}

.ritual-step__soon {
  color: var(--ink-a45);
}

/* ─── Cột ảnh dính một chỗ, chữ trôi qua ───

   Ngưỡng 1024px chứ không phải 768px như các khối khác trong repo. Đo ở 753:
   hai cột cho ảnh 264px cạnh chữ 313px — chật đến mức ảnh sản phẩm không còn
   đọc ra là gì. Bên tham chiếu cũng chuyển bố cục ở ~1100. Đừng hạ về 768
   cho "đồng bộ breakpoint"; đây là con số đo ra, không phải quên sửa.

   Dưới ngưỡng đó cột dính KHÔNG dùng được, và đây không phải lựa chọn thẩm
   mỹ: containing block của một grid item là grid AREA của nó. Một cột thì
   .ritual-rail và .ritual-list nằm hai hàng khác nhau, area của rail chỉ cao
   bằng chính nó → không còn quãng nào để trượt → sticky thành vô nghĩa.
   Mobile/tablet vì thế dùng ảnh rời trong từng .ritual-step__media như cũ.

   Ba file ảnh xuất hiện ở CẢ HAI nhánh, nhưng mỗi máy chỉ tải một bộ — và
   thứ làm được điều đó là loading="lazy" trong HTML, KHÔNG phải display:none.
   display:none không chặn tải ảnh; lazy mới chặn, vì nhánh bị ẩn không bao
   giờ vào viewport. Gỡ loading="lazy" khỏi .ritual-rail hay .ritual-step__media
   là lập tức tải đúp cả 6 ảnh trên mọi máy.
   Và đừng "dọn trùng lặp" bằng cách bỏ một nhánh: bỏ nhánh nào là mất ảnh ở
   nửa số thiết bị. */
.ritual-rail {
  display: none;
}

@media (min-width: 1024px) {
  .ritual-scroller {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--sp-16);
  }

  .ritual-step__media {
    display: none;
  }

  .ritual-rail {
    display: grid;
    /* center dọc, start ngang. Để `center` cả hai chiều thì ảnh 440px nằm
       giữa cột 544px → mép trái ảnh ở x=80 trong khi tiêu đề section ở x=28:
       lệch 52px, mắt đọc ra ngay là hai thứ không cùng một lề. */
    place-items: center start;
    position: sticky;
    top: 0;
    /* 100vh + place-items:center = ảnh đứng giữa màn hình suốt cả section.
       Chiều cao này phải là vh chứ không phải chiều cao ảnh: hộp thấp hơn
       màn hình thì ảnh dừng ở mép trên, không phải giữa. */
    height: 100vh;
  }

  .ritual-rail__img {
    /* Xếp chồng bằng grid-area chứ không position:absolute — absolute thì hộp
       rail mất nội dung có chiều cao và place-items không còn gì để căn. */
    grid-area: 1 / 1;
    width: 100%;
    max-width: var(--ritual-img-max);
    aspect-ratio: 1;
    object-fit: contain;
    opacity: 0;
    transition: opacity var(--dur-slower) var(--ease-editorial);
  }

  .ritual-rail__img.is-on {
    opacity: 1;
  }

  /* Mỗi bước cao gần một màn hình. Không phải để cho thoáng: dải nhận biết ở
     js/animations.js §3 chỉ dày 10% màn hình, bước ngắn hơn thì hai bước cùng
     cắt qua dải trong một lần cuộn và ảnh nhấp nháy đổi hai lần. */
  .ritual-step {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .ritual-step__body {
    margin-block-start: 0;
  }

  /* Khe giữa các bước về 0 — không phải để tiết kiệm chỗ. min-height 70vh +
     justify-content:center đã tự tạo khoảng trống quanh chữ, cộng thêm khe
     là mỗi bước chiếm 70vh + 160px và dải nhận biết ở giữa màn hình có lúc
     rơi đúng vào khe: không bước nào cắt qua nó, ảnh đứng im lưng chừng.
     Khe 0 thì bước nào cũng chiếm đúng 70vh liền mạch, dải luôn nằm trong
     một bước. Đo được: bỏ khe cắt section 3630 → 3150px. */
  .ritual-list {
    gap: 0;
  }
}