/* tpl-neela-tweaks.css — tinh chỉnh riêng cho HỌ TEMPLATE NEELA bản scrub
 * (template43, template56–template59; bản đang bán tương ứng là t11, t25–t28).
 *
 * Nạp SAU `templateN/css/style.css` — mọi selector ở đây cố ý đè lên file đó. Tiền tố
 * `.tpl-scrub` giữ phạm vi trong đúng các template scrub: t11/t25–t28 là hàng đang bán,
 * không được thay đổi.
 *
 * Ba việc:
 *   1. Thu khoảng cách tiêu đề -> nội dung trong thẻ chuyện tình.
 *   2. Bộ áo cho hộp gập + nút "xem thêm" (`tpl-story-collapse.js` lái phần đo đạc).
 *   3. Trả `.section-sub-title` về cỡ phụ đề.
 */

/* 1. KHOẢNG CÁCH TIÊU ĐỀ -> NỘI DUNG
 *
 * `style.css` để `padding-bottom: 40px` + `margin-bottom: 15px` trên h4. Hoạ tiết kim cương
 * là ::after cao 19px neo ở đáy phần padding, nên 40px đó chia thành 21px trống phía trên
 * hoạ tiết và 19px hoạ tiết; cộng 15px margin thành 55px từ chân chữ tới dòng đầu nội dung.
 * Thẻ chỉ rộng ~230px nên 55px đọc thành "tiêu đề rời khỏi đoạn văn của nó".
 *
 * 28 + 10: hoạ tiết còn 9px trống phía trên và 10px phía dưới — cân hai bên, và tổng
 * khoảng cách còn 38px. Đừng hạ dưới 19px+2: hoạ tiết sẽ chạm chữ.
 */
.tpl-scrub .timeline .description h4 {
    padding-bottom: 28px;
    margin-bottom: 10px;
}

/* 2. HỘP GẬP
 *
 * `max-height` do JS ghi inline (tính từ line-height thật × số dòng), không đặt ở đây:
 * font mỗi template một khác và nội dung dịch sang tiếng khác thì chiều cao dòng cũng khác.
 * CSS chỉ lo phần cắt + dải mờ báo hiệu "còn nữa".
 *
 * Trạng thái MẶC ĐỊNH của `.story-collapse` là MỞ. Chỉ khi JS đo xong và quyết định gập nó
 * mới thêm `.is-collapsed`. JS hỏng -> đọc được trọn nội dung; không bao giờ có chữ bị giấu
 * mà không có nút mở ra (cùng nguyên tắc với watchdog của `tpl-motion-scrub.js`).
 */
.tpl-scrub .timeline .description .story-collapse.is-collapsed {
    overflow: hidden;
    /* Mốc 78%: với 6 dòng thì chỉ dòng CUỐI mờ dần. Đặt sớm hơn (62% chẳng hạn) là mờ
     * mất hai dòng còn đọc được, trông như lỗi kết xuất chứ không thành tín hiệu "còn nữa". */
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

/* Nút mang `hidden` từ máy chủ; JS gỡ ra khi có thật nội dung bị cắt. `[hidden]` bị
 * `display: inline-block` ở dưới ghi đè nếu không chặn — quy tắc này phải đứng trước. */
.tpl-scrub .timeline .description .story-collapse-toggle[hidden] {
    display: none;
}

.tpl-scrub .timeline .description .story-collapse-toggle {
    display: inline-block;
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: 13px;
    letter-spacing: .04em;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: .85;
    cursor: pointer;
    transition: opacity .2s linear;
}

.tpl-scrub .timeline .description .story-collapse-toggle:hover,
.tpl-scrub .timeline .description .story-collapse-toggle:focus-visible {
    opacity: 1;
}

/* 3. PHỤ ĐỀ SECTION
 *
 * `components/gifts.blade.php` (dùng chung) in phụ đề bằng
 * `<h3 class="section-sub-title">`. Phần lớn template có quy tắc riêng cho class đó —
 * `css/libs.css` của họ thegoodday chẳng hạn đặt `font-size: 1.1rem`. **Họ neela không có
 * quy tắc nào**, nên thẻ rơi về cỡ `h3` chung của template: 40px, gần bằng tiêu đề section
 * (48px) — hai dòng đọc ra ngang vai nhau, và trên màn 390px câu này chiếm 4 dòng / 192px.
 *
 * 1.1rem theo đúng quy ước sẵn có trong repo. Không dùng `!important`: file này nạp sau
 * `css/style.css` nên cùng specificity đã thắng, và `.tpl-scrub` còn cộng thêm một class.
 * Đặt selector rộng theo class chứ không bó vào `#gifts`: bất kỳ section nào sau này dùng
 * `.section-sub-title` cũng phải ra đúng cỡ, không phải thêm một dòng nữa.
 */
.tpl-scrub .section-sub-title {
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 300;
}