/* Prairie Garden Trust: searchable Plants & Animals gallery (functional mock-up, Cuberis 2026-10-20).
   Sits inside the theme's main column, under the season photos, in the same white panel style. */
.pa-gallery {
  --pa-ink: #222;
  --pa-soft: #666;
  --pa-line: #d9ddd2;
  --pa-wash: #f3f4ef;
  --pa-accent: #4e6b2a;
  --pa-accent-ink: #fff;
  background: #fff;
  margin-top: 30px;
  padding: 1.5rem 1.5rem 2rem;
  color: var(--pa-ink);
}
.pa-title { margin: 0 0 .25rem; font-family: "Salom Sans", sans-serif; font-size: 1.9rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.pa-v-name { font-family: "Salom Sans", sans-serif; font-weight: 600; letter-spacing: .3px; }
.pa-intro { margin: 0 0 1.25rem; color: var(--pa-soft); }

/* search */
/* search box and Plants / Animals / All switch share one line; type chips sit below */
.pa-row { display: flex; align-items: stretch; gap: .75rem; margin: 0 0 1rem; }
.pa-search { position: relative; display: block; flex: 1 1 auto; min-width: 0; margin: 0; }
.pa-search input {
  width: 100%; height: 48px; padding: 0 44px 0 44px; font: inherit; font-size: 17px; color: var(--pa-ink);
  border: 1px solid #b9bfae; border-radius: 6px; background: #fff; -webkit-appearance: none; appearance: none;
}
.pa-search input::-webkit-search-cancel-button { display: none; }
.pa-search input:focus { outline: none; border-color: var(--pa-accent); box-shadow: 0 0 0 3px rgba(78, 107, 42, .2); }
.pa-search-icon, .pa-clear-q { position: absolute; top: 0; height: 48px; width: 44px; display: flex; align-items: center; justify-content: center; color: var(--pa-soft); }
.pa-search-icon { left: 0; pointer-events: none; }
.pa-clear-q { right: 0; border: 0; background: none; cursor: pointer; }
.pa-search svg { width: 20px; height: 20px; }

/* Plants / Animals switch */
.pa-kinds { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--pa-accent); border-radius: 6px; overflow: hidden; margin: 0; }
.pa-kinds button {
  font: inherit; font-size: 15px; padding: .5rem 1.1rem; border: 0; background: #fff; color: var(--pa-accent); cursor: pointer; min-height: 46px; white-space: nowrap;
}
.pa-kinds button + button { border-left: 1px solid var(--pa-accent); }
.pa-kinds button[aria-checked="true"] { background: var(--pa-accent); color: var(--pa-accent-ink); }
.pa-kinds button:focus-visible, .pa-chip:focus-visible, .pa-tile:focus-visible { outline: 3px solid #4fa3d9; outline-offset: 2px; }

/* type chips */
.pa-cats { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.pa-chip {
  font: inherit; font-size: 15px; padding: .4rem .85rem; min-height: 38px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--pa-line); background: var(--pa-wash); color: var(--pa-ink);
}
.pa-chip:hover { border-color: #aab39c; }
.pa-chip[aria-pressed="true"] { background: var(--pa-accent); border-color: var(--pa-accent); color: var(--pa-accent-ink); }
.pa-n { opacity: .65; font-size: .9em; margin-left: .15em; }
[aria-checked="true"] .pa-n, [aria-pressed="true"] .pa-n { opacity: .85; }

.pa-status { min-height: 1.5em; margin: 0 0 1rem; color: var(--pa-soft); font-size: 15px; }
.pa-status.pa-error { color: #a12; }
.pa-reset, .pa-sug, .pa-other { font: inherit; border: 0; background: none; padding: 0; color: var(--pa-accent); text-decoration: underline; cursor: pointer; }
.pa-status .pa-reset { margin-left: .5rem; }
.pa-empty { padding: 1.5rem 0; color: var(--pa-soft); }

/* grid */
.pa-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem 1rem; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.pa-item { margin: 0; }
.pa-tile { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.pa-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--pa-wash); }
.pa-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.pa-tile:hover .pa-img img { transform: scale(1.04); }
.pa-name { display: block; margin-top: .45rem; font-size: 16px; line-height: 1.25; }
.pa-tile:hover .pa-name { text-decoration: underline; }
.pa-latin { display: block; font-style: italic; font-size: 14px; color: var(--pa-soft); }
.pa-cat { display: block; font-size: 13px; color: var(--pa-soft); margin-top: .1rem; }

@media (max-width: 575px) {
  .pa-gallery { padding: 1.25rem 1rem 1.5rem; }
  .pa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .75rem; }
  .pa-cats { flex-wrap: nowrap; overflow-x: auto; margin-right: -1rem; padding-right: 1rem; padding-bottom: .25rem; scrollbar-width: none; }
  .pa-cats::-webkit-scrollbar { display: none; }
  .pa-chip { flex: 0 0 auto; }
  .pa-row { flex-direction: column; gap: .75rem; }
  .pa-kinds { display: flex; }
  .pa-kinds button { flex: 1; padding: .5rem .5rem; }
}

/* larger view */
html.pa-locked { overflow: hidden; }
.pa-viewer { position: fixed; inset: 0; z-index: 2000; background: rgba(20, 22, 16, .88); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.pa-viewer[hidden] { display: none; }
.pa-v-frame { position: relative; background: #fff; width: min(900px, 100%); max-height: calc(100vh - 2rem); display: flex; flex-direction: column; border-radius: 4px; overflow: hidden; }
.pa-v-photo { background: #e9ece4; width: 100%; max-height: calc(100vh - 11rem); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pa-v-photo img { display: block; max-width: 100%; max-height: calc(100vh - 11rem); width: auto; height: auto; object-fit: contain; transition: opacity .2s; }
.pa-v-photo.pa-loading img { opacity: 0; }
.pa-v-text { padding: .9rem 1.25rem 1.1rem; }
.pa-v-name { margin: 0; font-size: 22px; }
.pa-v-latin { margin: .1rem 0 0; font-style: italic; color: var(--pa-soft, #666); }
.pa-v-latin:empty, .pa-v-desc:empty { display: none; }
.pa-v-meta { margin: .3rem 0 0; font-size: 14px; color: #666; }
.pa-v-desc { margin: .5rem 0 0; }
.pa-v-close, .pa-v-prev, .pa-v-next {
  position: absolute; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: #222; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.pa-v-close svg, .pa-v-prev svg, .pa-v-next svg { width: 22px; height: 22px; }
.pa-v-close { top: .6rem; right: .6rem; }
.pa-v-prev, .pa-v-next { top: calc((100vh - 11rem) / 2 - 22px); }
.pa-v-prev { left: .6rem; }
.pa-v-next { right: .6rem; }
.pa-v-prev[hidden], .pa-v-next[hidden] { display: none; }
@media (min-height: 760px) { .pa-v-prev, .pa-v-next { top: 40%; } }
@media (max-width: 575px) {
  .pa-viewer { padding: 0; align-items: stretch; }
  .pa-v-frame { max-height: 100vh; border-radius: 0; justify-content: center; background: #111; }
  .pa-v-text { background: #fff; }
  .pa-v-prev, .pa-v-next { top: auto; bottom: 1rem; }
}