/* The Second Haven Zoo. Edit directly in dist/. */
.zoo-page { background: #fff9ee; }
.zoo-page main { overflow: clip; }
.zoo-hero { padding-block: 65px 70px; background: radial-gradient(ellipse at 15% 90%, #ffe0b2, transparent 65%), #f0e9d7; }
.zoo-breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; font-size: .85rem; margin-bottom: 35px; }
.zoo-hero-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: center; }
.zoo-kicker { color: #6e5124; font-size: .77rem; font-weight: 900; text-transform: uppercase; letter-spacing: .13em; margin-bottom: 18px; }
.zoo-hero h1 { font-size: clamp(2.8rem, 4.7vw, 4.4rem); color: #3a4931; }
.zoo-hero-copy > p:not(.zoo-kicker) { font-size: 1.12rem; margin-top: 25px; }
.zoo-hero .actions { margin-top: 28px; gap: 14px; }
.zoo-hero .button, .zoo-cta .button { background: #3a5b3c; }
.zoo-hero .button:hover, .zoo-cta .button:hover { background: #27432a; }
.zoo-hero-photo { position: relative; }
.zoo-hero-photo img { width: 100%; height: 420px; object-fit: cover; border-radius: 80px 24px 24px 24px; }
.zoo-hero-label { position: absolute; left: -16px; bottom: 20px; background: #fff9ee; padding: 13px 20px; border-radius: 10px; color: #3a4931; font-weight: 900; transform: rotate(-3deg); }
.zoo-gallery-section { padding-block: 75px; }
.zoo-section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 30px; }
.zoo-section-heading h2 { color: #3a4931; }
.zoo-section-heading > p { color: #65566b; }
.zoo-gallery { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; }
.zoo-photo { background: #e9eedf; border: 1px solid #d9dfcc; border-radius: 20px; overflow: hidden; }
.zoo-photo > a { display: block; height: 315px; background: #ebeedf; }
.zoo-photo img { width: 100%; height: 100%; object-fit: cover; }
.zoo-photo-invitation img { object-fit: contain; }
.zoo-photo figcaption { padding: 19px 23px; font-size: .94rem; }
.zoo-photo figcaption strong { display: block; margin-bottom: 6px; font-size: 1.08rem; color: #3a4931; }
.zoo-film-section { background: #3a4931; color: #fff9ee; padding-block: 75px; }
.zoo-film-grid { display: grid; grid-template-columns: 1fr .8fr; gap: 90px; align-items: center; }
.zoo-film-copy .zoo-kicker { color: #f6cb84; }
.zoo-film-copy h2 { font-size: clamp(2.4rem, 4vw, 3.6rem); color: #ffdc9f; }
.zoo-film-copy p:not(.zoo-kicker) { margin-top: 22px; }
.zoo-film-copy a { color: #fff9ee; }
.zoo-film-copy .text-link { display: inline-flex; margin-top: 25px; }
.zoo-film-copy .small { color: #ece9d9; }
.zoo-short { max-width: 360px; width: 100%; justify-self: center; }
.zoo-short .youtube-player { aspect-ratio: 9/16; border-radius: 20px; overflow: hidden; background: #1d2518; box-shadow: 0 14px 38px #0003; }
.zoo-short .youtube-launch img { object-fit: cover; background: #1d2518; }
.zoo-short figcaption { text-align: center; font-size: .81rem; margin-top: 13px; color: #ece9d9; }
.zoo-cta { padding-block: 65px; background: #ffecd5; }
.zoo-cta-grid { display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 60px; }
.zoo-cta h2 { color: #3a4931; }
.zoo-cta p { margin-top: 20px; }
.zoo-cta .actions { gap: 18px; justify-content: flex-end; }
.zoo-page .zoo-film-section :focus-visible { outline-color: #ffdc9f; }
@media (max-width: 1000px) {
  .zoo-hero-grid { gap: 35px; }
  .zoo-film-grid { gap: 45px; }
  .zoo-gallery { grid-template-columns: 1fr 1fr; }
  .zoo-photo > a { height: 270px; }
}
@media (max-width: 760px) {
  .zoo-hero, .zoo-gallery-section, .zoo-film-section, .zoo-cta { padding-block: 42px; }
  .zoo-hero-grid, .zoo-section-heading, .zoo-gallery, .zoo-film-grid, .zoo-cta-grid { grid-template-columns: 1fr; gap: 28px; }
  .zoo-breadcrumb { margin-bottom: 25px; }
  .zoo-hero-photo img { height: 310px; border-radius: 60px 20px 20px 20px; }
  .zoo-hero-label { left: -4px; font-size: .88rem; padding: 11px 16px; }
  .zoo-section-heading { gap: 18px; }
  .zoo-photo > a { height: 280px; }
  .zoo-short { max-width: 310px; }
  .zoo-cta .actions { justify-content: flex-start; }
}
@media (max-width: 420px) {
  .zoo-hero-photo img { height: 260px; }
  .zoo-photo > a { height: 220px; }
}