/**
 * filter-bar.css — แถบกรอง/ค้นหา/สถานะว่าง ที่ใช้ร่วมกันระหว่างหน้าประกาศ (news.html) และหน้ากิจกรรม (trips.html)
 *
 * ย้ายมาจาก <style> ของ news.html ค่าทุกตัวคงเดิม เปลี่ยนแค่ชื่อคลาส news- → hof-
 * ตัวแปรที่แต่ละหน้าต้องตั้งเอง: --hof-topbar-h (ความสูงแถบบน · JS ตั้งจริง) · --hof-pad-x (padding ซ้ายขวาของ container)
 */

/* attribute hidden ต้องชนะ class ที่ตั้ง display (.hof-empty flex / .hof-search__clear grid / .hof-toast) */
[hidden] { display: none !important; }

/* ===== Search + Category Bar (sticky ใต้แถบบน) ===== */
/* --hof-topbar-h ตั้งจริงโดย JS (ResizeObserver) — ค่าใน CSS เป็นแค่ค่าสำรองก่อน JS ทำงาน */
.hof-filterbar {
    position: sticky;
    top: var(--hof-topbar-h, 100px);
    z-index: 50;
    background: var(--color-white);
    margin-inline: calc(-1 * var(--hof-pad-x));
    padding: 12px var(--hof-pad-x) 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hof-filterbar--stuck {
    box-shadow: 0 10px 18px -14px rgba(0,0,0,.45);
}

.hof-search {
    position: relative;
    display: flex;
    align-items: center;
}

.hof-search__icon {
    position: absolute;
    left: 14px;
    display: flex;
    color: #9A9AA3;
    pointer-events: none;
}

.hof-search__input {
    width: 100%;
    height: 46px;
    border-radius: 14px;
    background: #F0F0F3;
    border: 1.5px solid transparent;
    padding: 0 48px 0 44px;
    /* 16px กัน iPhone ซูมหน้าเองตอนโฟกัสช่องกรอก */
    font-size: 16px;
    font-weight: 500;
    font-family: inherit;
    color: #222228;
}

.hof-search__input::placeholder { color: #9A9AA3; }

.hof-search__input:focus {
    outline: none;
    border-color: #222228;
    background: var(--color-white);
}

.hof-search__input::-webkit-search-cancel-button { display: none; }

.hof-search__clear {
    position: absolute;
    right: 5px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #62626C;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.hof-search__clear:hover { background: #E4E4EA; }

.hof-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--hof-pad-x));
    padding-inline: var(--hof-pad-x);
}

.hof-chips::-webkit-scrollbar { display: none; }

.hof-chips--more {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}

.hof-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    height: 40px;
    padding: 0 8px 0 14px;
    border-radius: 99px;
    border: 1px solid #E4E4EA;
    background: var(--color-white);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #222228;
    white-space: nowrap;
    cursor: pointer;
}

.hof-chip svg { color: var(--color-red-deep); }

.hof-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 99px;
    background: #F0F0F3;
    font-size: 12px;
    font-weight: 700;
    color: #62626C;
    font-variant-numeric: tabular-nums;
}

.hof-chip--zero { color: #9A9AA3; }
.hof-chip--zero .hof-chip__count { color: #9A9AA3; }

.hof-chip[aria-pressed="true"] {
    background: var(--color-red);
    border-color: var(--color-red);
    color: var(--color-white);
}

.hof-chip[aria-pressed="true"] svg { color: var(--color-white); }

.hof-chip[aria-pressed="true"] .hof-chip__count {
    background: rgba(255,255,255,.24);
    color: var(--color-white);
}

/* ===== Empty / no-result states ===== */
.hof-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 44px 16px 52px;
    margin-top: 18px;
    border: 1.5px dashed #E4E4EA;
    border-radius: 16px;
}

.hof-empty__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #F0F0F3;
    color: #9A9AA3;
}

.hof-empty__title {
    font-size: 18px;
    font-weight: 700;
    color: #222228;
}

.hof-empty__text {
    font-size: 14px;
    color: #62626C;
    max-width: 34ch;
}

.hof-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
}

.hof-btn {
    height: 44px;
    padding: 0 18px;
    border-radius: 99px;
    border: 1px solid #E4E4EA;
    background: var(--color-white);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #222228;
    cursor: pointer;
}

.hof-btn--solid {
    background: #222228;
    border-color: #222228;
    color: var(--color-white);
}

mark {
    background: #FFE1E5;
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ===== Toast ===== */
.hof-toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    /* .news-popup-overlay = 9999 → toast ต้องอยู่เหนือหน้าต่างอ่าน */
    z-index: 10000;
    max-width: calc(100% - 32px);
    padding: 12px 18px;
    border-radius: 14px;
    background: #1C1C24;
    color: var(--color-white);
    font-size: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    overflow-wrap: anywhere;
}

/* ===== กล่องไอคอนแทนรูป (รายการที่ไม่มีรูป) =====
   เขียนคู่กับคลาสกล่องของแต่ละหน้า ไม่ใช่ .hof-tile เดี่ยว ๆ —
   .news-card__image / .ev-card__image อยู่ใน <style> ของหน้า (มาหลัง <link> นี้)
   specificity เท่ากันเมื่อไร พื้นเทาของกล่องจะชนะ แล้วกล่องจะกลายเป็นเทาแบบเงียบ ๆ */
.news-card__image.hof-tile,
.ev-card__image.hof-tile,
.ev-bigcard__image.hof-tile,
.ev-popup__image.hof-tile {
    background: var(--color-white);
    color: var(--color-red);
    display: grid;
    place-items: center;
    container-type: inline-size;
}

.news-card__image.hof-tile svg,
.ev-card__image.hof-tile svg,
.ev-bigcard__image.hof-tile svg,
.ev-popup__image.hof-tile svg {
    width: clamp(22px, 34cqw, 72px);
    height: clamp(22px, 34cqw, 72px);
}