/* BAKU ZOO — VISIT. Practical: hours, tickets, prices, getting there, rules. */
.page-hero { position: relative; min-height: 54vh; display:flex; align-items:flex-end; padding: calc(var(--header-h) + 4rem) 0 3rem; text-align: center; overflow:hidden; isolation:isolate; }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-2; background: url('../img/photos/entrance-hires.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: 58ch; margin: 1.1rem auto 0; color: rgba(255,255,255,.92); }

.vsec { padding: clamp(3.5rem,7vw,5.5rem) 0; }
.vtop { display:grid; grid-template-columns: 1fr 1fr; gap:1.6rem; }
@media (max-width:820px){ .vtop{ grid-template-columns:1fr; } }
.vcard { background: var(--bg-card); border-radius: var(--r-lg); padding: 2.2rem; box-shadow: var(--shadow); }
.vcard h2 { font-size:1.5rem; color: var(--ink); margin-bottom:1.2rem; display:flex; align-items:center; gap:.6rem; }
.vcard h2 svg { width:1.4rem; height:1.4rem; color: var(--teal); }
.hrow { display:flex; justify-content:space-between; padding:.8rem 0; border-bottom:1px dashed var(--line); }
.hrow:last-of-type { border-bottom:0; }
.hrow .v { font-family:var(--f-display); font-weight:800; color: var(--forest); }
.vnote { font-size:.82rem; color: var(--ink-soft); font-style: italic; margin-top:1rem; }
.prices { display:flex; gap:1.2rem; margin:1.2rem 0; flex-wrap:wrap; }
.ptile { flex:1; min-width:120px; background: var(--leaf-soft); border-radius: var(--r); padding:1.2rem; text-align:center; }
.ptile .v { font-family:var(--f-display); font-weight:900; font-size:2rem; color: var(--forest); }
.ptile .l { font-size:.85rem; color: var(--ink-soft); margin-top:.2rem; }

.vbottom { display:grid; grid-template-columns: 1fr 1fr; gap:1.6rem; margin-top:1.6rem; }
@media (max-width:820px){ .vbottom{ grid-template-columns:1fr; } }
.rules { list-style:none; }
.rules li { display:flex; gap:.7rem; padding:.6rem 0; color: var(--ink-soft); }
.rules li svg { width:1.3rem; height:1.3rem; color: var(--leaf); flex:none; margin-top:.1rem; }
.fam { background: linear-gradient(120deg, var(--coral), var(--coral-dp)); color:#fff; }
.fam h2 { color:#fff; } .fam h2 svg{ color:#fff; } .fam p{ color:rgba(255,255,255,.95); }