/*
 * Community directory page.
 *
 * The tiles themselves are the community explorer widget's, styled in
 * elementor-widgets.css and enqueued alongside this file. What is here is only
 * what a full page needs and a homepage strip does not: a hero, a filter bar,
 * and a grid that breathes instead of packing sixteen circles into a row.
 */

/* Overrides the fluid padding-block .baipar-default-main gives every plain
   template, so the hero starts close to the header on this page. */
.baipar-communities {
    padding: 20px 0;
}

.baipar-communities__hero {
    margin-bottom: 22px;
    padding: clamp(22px, 3.4vw, 38px) clamp(20px, 3vw, 32px);
    border-radius: 16px;
    background: var(--baipar-primary-light-background, #e01b220d);
}

.baipar-communities__eyebrow {
    display: block;
    color: var(--baipar-primary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.baipar-communities__hero h1 {
    max-width: 22ch;
    margin: 8px 0 0;
    color: var(--baipar-secondary);
    font-family: "Plus Jakarta Sans", "DM Sans", sans-serif;
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.06;
}

.baipar-communities__hero p {
    max-width: 68ch;
    margin: 12px 0 0;
    color: var(--baipar-muted);
    font-size: 14px;
    line-height: 1.65;
}

/* Sticky, translucent and softly shadowed — the same toolbar language the
   Explore app uses, so moving between the two does not feel like two sites. */
.baipar-communities__toolbar {
    position: sticky;
    z-index: 15;
    top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 11px 12px;
    border: 1px solid var(--baipar-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 28px rgba(13, 27, 52, .08);
    backdrop-filter: blur(14px);
}

/* The toolbar and the status row ship hidden and the script reveals them. An
   author-level display beats the browser's own [hidden] rule, so without these
   they would be on screen for a visitor whose JavaScript never ran — and do
   nothing. */
.baipar-communities__toolbar[hidden],
.baipar-communities__status[hidden] {
    display: none;
}

.baipar-communities__search {
    min-width: 0;
    height: 46px;
    display: flex;
    flex: 0 1 340px;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
    border: 1px solid var(--baipar-line);
    border-radius: 11px;
    background: #fff;
}

.baipar-communities__search:focus-within {
    border-color: var(--baipar-primary);
}

.baipar-communities__search-icon {
    width: 17px;
    height: 17px;
    display: grid;
    flex: 0 0 17px;
    place-items: center;
    color: var(--baipar-muted);
}

.baipar-communities__search-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.baipar-communities__search input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--baipar-ink);
    font-size: 13px;
    font-weight: 500;
}

/* Region tabs. Four or five regions read better as visible pills than as one
   more dropdown — the choice is the point of the page, not a detail. */
.baipar-communities__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.baipar-communities__tabs button {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--baipar-line);
    border-radius: 999px;
    background: #fff;
    color: #657084;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.baipar-communities__tabs button:hover {
    border-color: var(--baipar-secondary);
    color: var(--baipar-secondary);
}

.baipar-communities__tabs button[aria-pressed="true"] {
    border-color: var(--baipar-secondary);
    background: var(--baipar-secondary);
    color: #fff;
}

.baipar-communities__selects {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.baipar-communities__select select {
    min-height: 38px;
    padding: 0 30px 0 11px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: #f2f4f7
        /* The chevron is inline so the control needs no extra markup and no
           icon request; currentColor is not available here, hence the literal. */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230d1b34' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E")
        no-repeat right 9px center / 14px 14px;
    color: var(--baipar-secondary);
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    appearance: none;
}

.baipar-communities__select select:focus-visible {
    border-color: var(--baipar-primary);
    outline: 0;
}

.baipar-communities__toggle {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: 9px;
    background: #f2f4f7;
    color: var(--baipar-secondary);
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}

.baipar-communities__toggle input {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    margin: 0;
    accent-color: var(--baipar-primary);
    cursor: pointer;
}

.baipar-communities__status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.baipar-communities__count {
    margin: 0;
    color: var(--baipar-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.baipar-communities__clear {
    padding: 5px 11px;
    border: 0;
    border-radius: 999px;
    background: #fff0f2;
    color: #9f2632;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.baipar-communities__clear[hidden] {
    display: none;
}

/* auto-fill rather than a column count: the page has to hold however many
   communities the site has added, at any width, without a media query per
   breakpoint. */
.baipar-communities__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 22px 12px;
    margin-bottom: 12px;
}

.baipar-communities__item {
    gap: 9px;
    padding: 14px 8px;
    border: 1px solid transparent;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 700;
}

.baipar-communities__item:hover,
.baipar-communities__item:focus-visible {
    border-color: var(--baipar-line);
    background: #fff;
    outline: 0;
}

/* The widget's circle is a 38px strip avatar; a page this size can afford
   the flag to actually be legible. */
.baipar-communities__item .baipar-community-explorer__media {
    width: 62px;
    height: 62px;
}

.baipar-communities__item small {
    color: var(--baipar-muted);
    font-size: 11px;
    font-weight: 600;
}

.baipar-communities__item.is-filtered {
    display: none;
}

.baipar-communities__blank {
    margin: 26px 0;
    color: var(--baipar-muted);
    font-size: 14px;
    text-align: center;
}

.baipar-communities__blank[hidden] {
    display: none;
}

@media (max-width: 760px) {
    .baipar-communities__hero { border-radius: 13px; }
    .baipar-communities__toolbar { position: static; align-items: stretch; flex-direction: column; gap: 9px; padding: 10px; }
    .baipar-communities__search { flex-basis: auto; }
    /* The region pills scroll sideways instead of stacking into a wall of
       buttons that pushes the grid off the first screen. */
    .baipar-communities__tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -10px; padding: 0 10px; scrollbar-width: none; }
    .baipar-communities__tabs::-webkit-scrollbar { display: none; }
    .baipar-communities__selects { margin-left: 0; }
    .baipar-communities__select { min-width: 0; flex: 1 1 130px; }
    .baipar-communities__select select { width: 100%; }
    .baipar-communities__toggle { flex: 1 1 100%; justify-content: center; }
    .baipar-communities__grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 18px 8px; }
    .baipar-communities__item { padding: 10px 5px; font-size: 12px; }
    .baipar-communities__item .baipar-community-explorer__media { width: 52px; height: 52px; }
}