/* ---------------------------------------------------------------------------
 * NepalNet community hub — the home page block.
 *
 * Everything is scoped under .kbnh so nothing here can reach the rest of the
 * home page, which is assembled by a page builder and full of generic class
 * names. Site palette: #253237 ink, #80b435 accent.
 * ------------------------------------------------------------------------- */

.kbnh {
    --kbnh-ink: #253237;
    --kbnh-accent: #80b435;
    --kbnh-line: #e3e7ea;
    --kbnh-muted: #6b7a80;
    --kbnh-bg: #f7f9fa;

    padding: 2.5rem 1rem;
    background: var(--kbnh-bg);
}

.kbnh__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.kbnh__title {
    margin: 0 0 1.1rem;
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--kbnh-ink);
}

/* --- Tab strip ----------------------------------------------------------- */

.kbnh__tabs {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--kbnh-line);
    padding-bottom: .6rem;
}

.kbnh__tab {
    appearance: none;
    border: 1px solid var(--kbnh-line);
    background: #fff;
    color: var(--kbnh-ink);
    border-radius: 999px;
    padding: .4rem 1rem;
    font-size: .92rem;
    line-height: 1.2;
    cursor: pointer;
}

.kbnh__tab:hover {
    border-color: var(--kbnh-accent);
}

/* A visible focus ring, kept deliberately. The tab strip is keyboard-driven
   with arrow keys, and removing the outline would make that unusable. */
.kbnh__tab:focus-visible {
    outline: 2px solid var(--kbnh-accent);
    outline-offset: 2px;
}

.kbnh__tab--current {
    background: var(--kbnh-ink);
    border-color: var(--kbnh-ink);
    color: #fff;
}

/* --- Panels -------------------------------------------------------------- */

/* Before the script runs, the panels are stacked and each needs its own
   heading and a rule between them. Once tabs attach, only one is visible and
   the heading is hidden. */
.kbnh__panel + .kbnh__panel {
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--kbnh-line);
}

.kbnh__panel[role="tabpanel"] + .kbnh__panel[role="tabpanel"] {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.kbnh__panel-title {
    margin: 0 0 .75rem;
    font-size: 1.1rem;
    color: var(--kbnh-ink);
}

/* --- The rows ------------------------------------------------------------ */

.kbnh__list {
    list-style: none;
    margin: 0 0 .9rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .75rem;
}

.kbnh__link {
    display: block;
    height: 100%;
    padding: .85rem 1rem;
    border: 1px solid var(--kbnh-line);
    border-radius: 8px;
    background: #fff;
    color: var(--kbnh-ink);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.kbnh__link:hover,
.kbnh__link:focus {
    border-color: var(--kbnh-accent);
    box-shadow: 0 2px 10px rgba(37, 50, 55, .08);
    text-decoration: none;
    color: var(--kbnh-ink);
}

.kbnh__item-title {
    display: block;
    font-weight: 600;
    font-size: .98rem;
    line-height: 1.3;
}

.kbnh__item-meta {
    display: block;
    font-size: .82rem;
    color: var(--kbnh-muted);
    margin-top: .1rem;
}

.kbnh__item-value {
    display: block;
    margin-top: .35rem;
}

.kbnh__item-value small {
    font-size: .78rem;
    color: var(--kbnh-muted);
    margin-right: .25rem;
}

.kbnh__item-value strong {
    font-size: 1.15rem;
    color: var(--kbnh-accent);
}

/* --- Footer of a panel --------------------------------------------------- */

.kbnh__foot {
    margin: 0;
    display: flex;
    gap: .75rem;
    align-items: baseline;
    flex-wrap: wrap;
}

.kbnh__all {
    font-weight: 600;
    color: var(--kbnh-ink);
    text-decoration: underline;
}

/* The compliance line — "advertised by travel agents, we do not sell tickets",
   "confirm before you send". Muted but a readable size: these sentences are
   the reason the block is allowed to summarise somebody else's prices. */
.kbnh__note {
    font-size: .84rem;
    line-height: 1.5;
    color: var(--kbnh-muted);
}

@media (max-width: 560px) {
    .kbnh {
        padding: 1.75rem .9rem;
    }

    .kbnh__list {
        grid-template-columns: 1fr;
    }

    /* The strip scrolls sideways rather than wrapping to three rows of pills
       on a narrow screen. */
    .kbnh__tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .kbnh__tab {
        flex: 0 0 auto;
    }
}