/* ══════════════════════════════════════
       SECTIONS
       ══════════════════════════════════════ */
.librarians-section {
    background: var(--bs-bg-page);
    padding: 26px 0 56px;
}

/* carousel กว้างเต็มจอ (เว้นขอบ 63px) ไม่ถูกบีบด้วย .container */
.librarians-section .container {
    max-width: 100%;
    padding-left: 63px;
    padding-right: 63px;
}

.librarians-section .slider-wrap {
    padding: 0;
}

/* ลูกศรห่างขอบจอ 30px (การ์ดเริ่มที่ 63px) */
.librarians-section .slider-wrap .owl-carousel .owl-nav .owl-prev {
    left: -33px;
}

.librarians-section .slider-wrap .owl-carousel .owl-nav .owl-next {
    right: -33px;
}

.arrivals-section {
    padding: 44px 0 52px;
    /* พื้นฟ้าอ่อนทึบแทนรูป bg-arrivals.webp - ตัวหนังสือบนรูปพื้นหลังตัวตรวจ WCAG วัดคอนทราสต์ไม่ได้ (ข้อควรระวัง AAA) */
    background-color: #eaf2fc;
}

/* ── ล็อกความสูงกล่องแท็บ New Arrivals ──
   แท็บที่ไม่มีรายการเตี้ยกว่าแท็บที่มีการ์ด ทำให้ section สูงไม่เท่ากัน
   background-size: cover จึงต้องครอปใหม่ ภาพพื้นหลังเลยขยับทุกครั้งที่สลับแท็บ
   กำหนดความสูงขั้นต่ำเท่ากับการ์ด 1 แถว (สินค้าจำกัด 5 ชิ้น = แถวเดียวตั้งแต่ lg ขึ้นไป)
   ตัวเลขอิงความกว้าง .container ของแต่ละ breakpoint: 960 / 1140 / 1320

   flow-root สำคัญ: .row ของ Bootstrap มี margin-top ติดลบ (-1 * gutter-y = -24px จาก g-4)
   ถ้าไม่สร้าง BFC มันจะ collapse ทะลุขอบบนของกล่องนี้ออกไป section เลยเตี้ยลง 24px
   เฉพาะแท็บที่มีการ์ด ส่วนแท็บว่างไม่มี .row จึงไม่โดน ผลคือสูงไม่เท่ากันอยู่ดี */
#tab-content-new-arrivals {
    display: flow-root;
}

@media (min-width: 992px) {
    #tab-content-new-arrivals {
        min-height: 380px;
    }
}

@media (min-width: 1200px) {
    #tab-content-new-arrivals {
        min-height: 430px;
    }
}

@media (min-width: 1400px) {
    #tab-content-new-arrivals {
        min-height: 475px;
    }
}

.popular-section {
    background-color: #fff;
    padding: 44px 0 52px;
}

/* ── Tab pills (New Arrivals) ── */
.tabs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
}

.tab-pill {
    border: 1px solid #e2e8f2;
    background: #f5f8fd; /* สีทึบ - สีโปร่งแสงตัวตรวจ WCAG วัดคอนทราสต์ไม่ได้ */
    border-radius: 6px;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 500;
    color: #454f69; /* 7.8:1 (AAA) */
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.tab-pill:hover {
    background: #fff;
    border-color: #c9d3e4;
    color: var(--bs-primary-900);
}

.tab-pill.on {
    background: #fff;
    border-color: #fff;
    color: var(--bs-primary-900);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(33, 48, 105, .14);
}

/* ── การ์ด Librarian's Choice ──
   ปกวางบนพื้นฟ้าอ่อน (แสดงเต็มปก ไม่ครอป) → หมวดหมู่ขีดแดง → เส้นคั่น → ชื่อเรื่อง → ผู้แต่ง */
.librarians-section .book-card {
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(33, 48, 105, .08);
}

.librarians-section .book-cover {
    aspect-ratio: 9 / 8;
    background: #DDE8F7EF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.librarians-section .book-cover img,
.librarians-section .book-cover-img {
    width: auto !important;
    max-width: 100%;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 3px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}

.librarians-section .book-info {
    padding: 16px 18px 20px;
}

.book-cat {
    font-size: 17px;
    font-weight: 700;
    color: var(--bs-primary-900);
    line-height: 1.25;
    padding-left: 10px;
    border-left: 4px solid var(--bs-secondary-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.librarians-section .book-name {
    font-size: 16px;
    color: var(--bs-primary-900);
    line-height: 1.45;
    border-top: 1px solid #E7EDF5;
    margin-top: 12px;
    padding-top: 14px;
    margin-bottom: 14px;
    min-height: calc(2 * 1.45em + 14px);
}

.librarians-section .book-sub {
    font-size: 14px;
    color: #677088; /* เข้มขึ้นจาก #8b93a7 ให้คอนทราสต์ผ่าน 4.5:1 */
}

/* ── การ์ด New Arrivals: เหลือแค่ชื่อเรื่อง ── */
.arrivals-section .book-name {
    font-size: 13px;
    color: var(--bs-primary-900);
    margin-bottom: 0;
    min-height: calc(2 * 1.4em);
}

/* .btn-see-all ย้ายไป main.css แล้ว (component frontend/components/see-more)
   หน้าอื่นก็ใช้ปุ่มนี้ แต่ไม่ได้โหลด home/sections.css */

/* .most-popular-empty / .new-avalible-empty รวมเป็น .empty-state ใน main.css แล้ว
   (component frontend/components/empty-state)

   แท็บ New Arrivals ล็อกความสูงไว้ กล่อง "ไม่พบรายการ" ต้องรับความสูงนั้นมาด้วย
   แล้วจัดข้อความไว้กึ่งกลาง ไม่ให้ลอยอยู่ด้านบน */
#tab-content-new-arrivals .empty-state {
    min-height: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ── Responsive ── */

/* สินค้ามาใหม่จำกัด 5 ชิ้น = พอดีแถวเดียวเฉพาะจอ lg (row-cols-lg-5)
   จอที่เล็กกว่านั้นแถวสุดท้ายเหลือการ์ดไม่เต็มแถว (2 คอลัมน์ได้ 2+2+1)
   ใบที่เหลือชิดซ้ายมีที่ว่างข้าง ๆ เลยดูเหมือนการ์ดตกหล่น
   จัดกึ่งกลางให้ดูตั้งใจ - แถวที่เต็มอยู่แล้วไม่ได้รับผลกระทบ */
@media (max-width: 991.98px) {
    #tab-content-new-arrivals > .row {
        justify-content: center;
    }

    /* ชื่อเรื่องยาวไม่เท่ากัน (1 บรรทัด vs 2 บรรทัด) การ์ดในแถวเดียวกันจึงสูงไม่เท่า
       กล่องขาวเหลื่อมกันดูไม่เป็นระเบียบ
       ให้ .col เป็น flex การ์ดจะยืดเท่าความสูงของแถวเอง (align-items:stretch)
       .pc-card ยังเป็น display:block เหมือนเดิม aspect-ratio ของ .pc-cover จึงไม่เพี้ยน */
    #tab-content-new-arrivals > .row > .col {
        display: flex;
    }

    #tab-content-new-arrivals > .row > .col > .pc-card {
        width: 100%;
    }
}

@media (max-width: 767.98px) {

    .librarians-section,
    .arrivals-section,
    .popular-section {
        padding: 28px 0 36px;
    }

    /* ขอบ 63px มีไว้เผื่อที่ให้ปุ่มลูกศร (owl-prev/next อยู่ที่ -33px)
       แต่ต่ำกว่า 768px carousel ตั้ง nav:false ไม่มีลูกศรแล้ว
       ขอบเท่านี้จึงกินความกว้างเปล่า ๆ - ที่ 390px การ์ดเหลือแค่ 264px
       ลดเหลือ 16px ให้การ์ดได้พื้นที่เต็ม */
    .librarians-section .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .tab-pill {
        font-size: 12px;
        padding: 4px 12px;
    }
}

@media (max-width: 575.98px) {

    .librarians-section,
    .arrivals-section,
    .popular-section {
        padding: 20px 0 28px;
    }

    .tabs-row {
        gap: 6px;
        margin-bottom: 16px;
    }

    .tab-pill {
        font-size: 11.5px;
        padding: 4px 10px;
    }
}