/*
 * HI-BOND Projects Page Stylesheet
 * File: assets/css/projects.css
 *
 * Design language: matches main.css — Funnel Display headings,
 * DM Sans body, --theme blue (#005db5), clean white cards,
 * --box-shadow, Bootstrap 5 grid system.
 *
 * All classes prefixed with `hbp-` to avoid conflicts.
 */

/* ══════════════════════════════════════════════════════════════
   FILTER BAR
══════════════════════════════════════════════════════════════ */
.hbp-filter {
    padding: 40px 0 50px;
}

.hbp-filter__scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
@media (min-width:1200px){

    .hbp-filter__scroll{
        max-width:1180px;
    }

    .hbp-filter__btn{
        min-width:130px;
        text-align:center;
    }

}
@media (max-width:991px){

    .hbp-filter__scroll{
        max-width:760px;
    }

}

@media (max-width:575px){

    .hbp-filter__scroll{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:10px;
    }

    .hbp-filter__btn{
        width:100%;
        min-width:0;
        padding:9px 10px;
        font-size:13px;
        text-align:center;
    }

}
/* Individual filter button */
.hbp-filter__btn {
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--header);
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: 30px;
    padding: 8px 22px;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    white-space: nowrap;
    line-height: 1.4;
}

.hbp-filter__btn:hover {
    border-color: var(--theme);
    color: var(--theme);
    background: rgba(0, 93, 181, 0.04);
}

.hbp-filter__btn.is-active {
    background: var(--theme);
    border-color: var(--theme);
    color: #fff;
}

@media (max-width: 575px) {
    .hbp-filter {
        padding: 28px 0 36px;
    }

    .hbp-filter__btn {
        font-size: 11px;
        padding: 7px 16px;
    }
}

/* ══════════════════════════════════════════════════════════════
   GRID — 3 col desktop, 2 col tablet, 1 col mobile
══════════════════════════════════════════════════════════════ */
.hbp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: stretch;
    transition: opacity 0.22s ease;
}

/* Fade class applied briefly when switching pages / filter */
.hbp-grid.hbp-grid--fade {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 1199px) {
    .hbp-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 767px) {
    .hbp-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ══════════════════════════════════════════════════════════════
   PROJECT CARD
══════════════════════════════════════════════════════════════ */
.hbp-card {
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
}

.hbp-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 16px 48px rgba(0, 93, 181, 0.10);
    border-color: rgba(0, 93, 181, 0.08);
}

/* Thumbnail — forced 16:9 ratio */
.hbp-card__thumb {
    position: relative;
    padding-top: 56.25%;   /* 9 / 16 × 100 */
    overflow: hidden;
    background: var(--bg-2);
    flex-shrink: 0;
}

.hbp-card__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.hbp-card:hover .hbp-card__thumb img {
    transform: scale(1.04);
}

/* Body */
.hbp-card__body {
    padding: 22px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Category badge */
.hbp-card__cat {
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--theme);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1.5px solid rgba(0, 93, 181, 0.18);
    background: rgba(0, 93, 181, 0.04);
    border-radius: 30px;
    padding: 4px 12px;
    display: inline-block;
    width: fit-content;
    line-height: 1.4;
}

/* Title */
.hbp-card__title {
    font-family: "Funnel Display", sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--header);
    margin: 0;
    line-height: 1.3;
}

@media (max-width: 1199px) {
    .hbp-card__title {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .hbp-card__title {
        font-size: 17px;
    }
}

/* Location */
.hbp-card__loc {
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hbp-card__loc i {
    color: var(--theme);
    font-size: 11px;
    flex-shrink: 0;
}

/* Short description — 2-line clamp */
.hbp-card__desc {
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    color: var(--text);
    line-height: 1.65;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Card footer — divider + button */
.hbp-card__foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* "View Details" button */
.hbp-card__btn {
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--theme);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.25s ease, color 0.25s ease;
}

.hbp-card__btn:hover {
    gap: 10px;
    color: var(--header);
}

.hbp-card__btn i {
    font-size: 11px;
}

/* ══════════════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════════════ */
.hbp-empty {
    text-align: center;
    padding: 80px 20px;
    grid-column: 1 / -1;
}

.hbp-empty i {
    font-size: 44px;
    color: var(--border);
    display: block;
    margin-bottom: 16px;
}

.hbp-empty p {
    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    color: var(--text);
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════════════════ */
.hbp-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 52px;
    flex-wrap: wrap;
}

/* Shared button base */
.hbp-page-num,
.hbp-page-arrow {
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--header);
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Page number button */
.hbp-page-num {
    width: 40px;
    height: 40px;
    line-height: 1;
}

.hbp-page-num:hover {
    border-color: var(--theme);
    color: var(--theme);
}

.hbp-page-num.is-active {
    background: var(--theme);
    border-color: var(--theme);
    color: #fff;
    cursor: default;
}

/* Prev / Next buttons */
.hbp-page-arrow {
    height: 40px;
    padding: 0 18px;
    gap: 7px;
    font-weight: 600;
}

.hbp-page-arrow:hover {
    border-color: var(--theme);
    color: var(--theme);
}

.hbp-page-arrow i {
    font-size: 12px;
}

/* Disabled state */
.hbp-page-arrow.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 575px) {
    .hbp-pagination {
        gap: 6px;
        padding-top: 36px;
    }

    .hbp-page-num {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .hbp-page-arrow {
        height: 36px;
        padding: 0 14px;
        font-size: 13px;
    }
}

/* ══════════════════════════════════════════════════════════════
   PROJECT DETAIL MODAL — Premium Information Panel
   Uses Bootstrap .modal framework already on the page.
   All overrides scoped inside .hbp-modal.
   No project image shown — image is on the card.
══════════════════════════════════════════════════════════════ */

/* Backdrop blur — subtle, not distracting */
.modal-backdrop.show {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Dialog sizing — 900px desktop, fluid tablet/mobile */
.hbp-modal .modal-dialog {
    max-width: 900px;
}

@media (max-width: 991px) {
    .hbp-modal .modal-dialog {
        max-width: 90%;
    }
}

@media (max-width: 575px) {
    .hbp-modal .modal-dialog {
        max-width: calc(100% - 24px);
        margin: 12px auto;
    }
}

/* Modal card shell */
.hbp-modal .modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0px 32px 80px rgba(0, 0, 0, 0.18),
                0px 4px 16px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    position: relative;   /* anchor for absolute close button */
    background: #fff;
}

/* ── Circular close button ─────────────────────────────────
   Absolutely positioned on .modal-content so it remains
   at the top-right corner even while .modal-body scrolls.
──────────────────────────────────────────────────────────── */
.hbp-modal__close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 30;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.13);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--header);
    font-size: 15px;
    flex-shrink: 0;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.hbp-modal__close-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    background: var(--bg-2);
}

.hbp-modal__close-btn:focus-visible {
    outline: 2px solid var(--theme);
    outline-offset: 3px;
}

/* ── Sticky header ─────────────────────────────────────────
   Override Bootstrap's flex modal-header to a block layout.
   Right padding keeps content clear of the close button.
──────────────────────────────────────────────────────────── */
.hbp-modal .modal-header.hbp-modal__hdr {
    display: block;
    padding: 28px 72px 22px 32px;
    border-bottom: 1px solid var(--border);
    background: #fff;
    flex-shrink: 0;
}

@media (max-width: 575px) {
    .hbp-modal .modal-header.hbp-modal__hdr {
        padding: 22px 64px 18px 20px;
    }
}

/* Category badge */
.hbp-modal__cat {
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--theme);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1.5px solid rgba(0, 93, 181, 0.22);
    background: rgba(0, 93, 181, 0.04);
    border-radius: 30px;
    padding: 3px 12px;
    display: inline-block;
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Project title */
.hbp-modal__title {
    font-family: "Funnel Display", sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--header);
    margin: 0 0 14px;
    line-height: 1.25;
}

@media (max-width: 767px) {
    .hbp-modal__title {
        font-size: 21px;
    }
}

@media (max-width: 575px) {
    .hbp-modal__title {
        font-size: 18px;
        margin-bottom: 11px;
    }
}

/* Meta row — location · client · status */
.hbp-modal__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.hbp-modal__meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    color: var(--text);
    line-height: 1;
}

.hbp-modal__meta-item i {
    color: var(--theme);
    font-size: 12px;
    flex-shrink: 0;
}

/* ── Scrollable body ───────────────────────────────────────
   Two columns on desktop (lg+), single column on mobile.
   col-lg-7 = left  (description + scope)
   col-lg-5 = right (products)
──────────────────────────────────────────────────────────── */
.hbp-modal .modal-body.hbp-modal__body {
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Column base */
.hbp-modal__col {
    padding: 28px 32px;
}

/* Left column — white, holds long text */
.hbp-modal__col--left {
    background: #fff;
}

/* Right column — light tinted, with left border on lg+ */
.hbp-modal__col--right {
    background: var(--bg-2);
    border-left: 1px solid var(--border);
}

@media (max-width: 991px) {
    /* Stack columns; right gets top border instead */
    .hbp-modal__col {
        padding: 24px 28px;
    }

    .hbp-modal__col--right {
        border-left: none;
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 575px) {
    .hbp-modal__col {
        padding: 20px;
    }
}

/* Content section block */
.hbp-modal__section {
    margin-bottom: 28px;
}

.hbp-modal__section:last-child {
    margin-bottom: 0;
}

/* Section label — uppercase, muted */
.hbp-modal__label {
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--text);
    opacity: 0.65;
    display: block;
    margin-bottom: 10px;
}

/* Body text */
.hbp-modal__text {
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    color: var(--text);
    line-height: 1.78;
    margin: 0;
}

/* Product chips / tags */
.hbp-modal__products {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hbp-modal__tag {
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--header);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 14px;
    display: inline-block;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.hbp-modal__tag:hover {
    border-color: var(--theme);
    color: var(--theme);
}

/* Completion status inline badge */
.hbp-modal__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.hbp-modal__status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Status colour variants */
.hbp-modal__status--completed            { color: #16a34a; }
.hbp-modal__status--completed .hbp-modal__status-dot   { background: #16a34a; }

.hbp-modal__status--ongoing              { color: var(--theme); }
.hbp-modal__status--ongoing .hbp-modal__status-dot     { background: var(--theme); }

.hbp-modal__status--under-construction   { color: #d97706; }
.hbp-modal__status--under-construction .hbp-modal__status-dot { background: #d97706; }

/* ── Open/close animation — scale + fade ──────────────────
   Replaces Bootstrap's default translateY slide.
──────────────────────────────────────────────────────────── */
.hbp-modal.fade .modal-dialog {
    transform: scale(0.96) translateY(6px);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.25s ease;
}

.hbp-modal.show .modal-dialog {
    transform: scale(1) translateY(0);
}