/* BAKU ZOO — ANIMALS. Card grid with category filters + badges. */

.page-hero { position: relative; min-height: 54vh; display:flex; align-items:flex-end; padding: calc(var(--header-h) + 4rem) 0 2.6rem; text-align: center; overflow: hidden; isolation:isolate; }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-2; background: url('../img/gen/tiger.jpg') center/cover; }
.page-hero::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(10,30,20,.35) 0%, rgba(10,30,20,.4) 50%, rgba(10,30,20,.85) 100%); }
.page-hero .container { position: relative; }
.page-hero .kicker { justify-content:center; margin-bottom:1rem; color:#fff; }
.page-hero h1 { font-size: clamp(2.2rem,1.6rem+3.6vw,4.2rem); color: #fff; text-shadow: 0 8px 30px rgba(0,0,0,.4); }
.page-hero p { max-width: 60ch; margin: 1.1rem auto 0; color: rgba(255,255,255,.92); }

.filters { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; padding-top:1.8rem; }
.chip { font-family:var(--f-display); font-weight:800; font-size:.85rem; padding:.6em 1.2em; border-radius:999px; border:2px solid var(--line); color: var(--ink-soft); transition:.3s var(--ease); background:#fff; }
.chip:hover { border-color: var(--leaf); color: var(--forest); }
.chip.is-active { background: var(--forest); border-color: var(--forest); color:#fff; }

.zoo { padding: 3rem 0 clamp(4rem,8vw,7rem); }
.zoo-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:1.4rem; }
@media (max-width:1040px){ .zoo-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width:760px){ .zoo-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:460px){ .zoo-grid{ grid-template-columns: 1fr;} }

.animal { background: var(--bg-card); border-radius: var(--r); overflow:hidden; box-shadow: var(--shadow); display:flex; flex-direction:column; transition: transform .4s var(--ease); }
.animal:hover { transform: translateY(-6px); }
.animal-img { position:relative; aspect-ratio: 4/3; overflow:hidden; background: var(--leaf-soft); }
.animal-img img { width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.animal:hover .animal-img img { transform: scale(1.07); }
.badge { position:absolute; inset-block-start:.7rem; inset-inline-start:.7rem; z-index:2; font-family:var(--f-display); font-weight:800; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; padding:.35em .7em; border-radius:999px; color:#fff; }
.badge.red { background: var(--coral); }
.badge.sym { background: var(--sand-dp); }
.animal-body { padding:1.2rem 1.2rem 1.4rem; flex:1; display:flex; flex-direction:column; }
.animal-body h3 { font-size:1.2rem; color: var(--ink); }
.animal-cat { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--teal); font-weight:700; margin-top:.3rem; }
.animal-body p { color: var(--ink-soft); font-size:.9rem; margin-top:.6rem; }

.zoo-note { margin-top:2.4rem; text-align:center; font-size:.84rem; color: var(--ink-soft); font-style: italic; }