/* Reusable published Ranch animal presentation. Native Custom CSS stays intact.
   Source-specific focal adjustments remain with their WordPress owner. */
:is(#meet, .rrr-animal-directory) { --ranch-rope: url("../images/animal-profile-rope.svg"); }
:is(#meet, .rrr-animal-directory) .rrr-animal-types { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px 20px; }
:is(#meet, .rrr-animal-directory) .rrr-animal-tile { align-items: center; text-align: center; padding: 20px 12px; border: 0; background: transparent; overflow: visible; }
:is(#meet, .rrr-animal-directory) .rrr-animal-tile[aria-current=true] { border: 0; background: #f6eedc; box-shadow: inset 0 0 0 2px #0b3422; }
:is(#meet, .rrr-animal-directory) .rrr-animal-tile img,
:is(#meet, .rrr-animal-directory) .rrr-animal-mark,
:is(#meet, .rrr-animal-directory) .rrr-animal-card img,
:is(#meet, .rrr-animal-directory) .rrr-animal-story>img,
:is(#meet, .rrr-animal-directory) .rrr-animal-story .wp-block-gallery img {
  box-sizing: border-box; border: 14px solid transparent; border-radius: 50%; background-image: var(--ranch-rope); background-size: 100% 100%; background-origin: border-box; background-repeat: no-repeat; object-fit: cover; aspect-ratio: 1; box-shadow: 0 5px 16px #54391b20;
}
:is(#meet, .rrr-animal-directory) .rrr-animal-tile img,
:is(#meet, .rrr-animal-directory) .rrr-animal-mark { width: 100%; max-width: 210px; height: auto; margin: 0 auto 18px; aspect-ratio: 1; }
:is(#meet, .rrr-animal-directory) .rrr-animal-mark { font-size: 52px; background-color: #f4e5c7; }
:is(#meet, .rrr-animal-directory) .rrr-animal-tile h3 { font-size: 25px; color: #0b3422; margin: 0 0 10px; }
:is(#meet, .rrr-animal-directory) .rrr-animal-tile span:last-child { font-size: 13px; line-height: 1.4; }
:is(#meet, .rrr-animal-directory) .rrr-animal-tile:focus-visible { outline: 3px solid #983a2f; outline-offset: 4px; }
:is(#meet, .rrr-animal-directory) .rrr-animal-cards { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; }
:is(#meet, .rrr-animal-directory) .rrr-animal-card { overflow: visible; border: 1px solid #ddcfb5; background: #fffdf8; text-align: center; padding-top: 22px; }
:is(#meet, .rrr-animal-directory) .rrr-animal-card>a:first-child { display: block; width: calc(100% - 44px); max-width: 260px; margin: auto; }
:is(#meet, .rrr-animal-directory) .rrr-animal-card img { display: block; width: 100%; height: auto; }
:is(#meet, .rrr-animal-directory) .rrr-animal-card-body { padding: 20px 22px 26px; }
:is(#meet, .rrr-animal-directory) .rrr-animal-card-body h3 { margin: 0 0 14px; }
:is(#meet, .rrr-animal-directory) .rrr-animal-card-body p { font-size: 15px; line-height: 1.7; }
:is(#meet, .rrr-animal-directory) .rrr-animal-story>img { display: block; width: min(100%,430px); height: auto; max-height: none; margin: 24px auto 38px; }
:is(#meet, .rrr-animal-directory) .rrr-animal-story>h2,
:is(#meet, .rrr-animal-directory) .rrr-animal-story>p.eyebrow { text-align: center; }
:is(#meet, .rrr-animal-directory) .rrr-animal-story .wp-block-gallery { gap: 26px!important; align-items: start; }
:is(#meet, .rrr-animal-directory) .rrr-animal-story .wp-block-gallery figure.wp-block-image { flex-grow: 0!important; }
:is(#meet, .rrr-animal-directory) .rrr-animal-story .wp-block-gallery img { width: 100%!important; height: auto!important; max-width: 100%; }
:is(#meet, .rrr-animal-directory) .rrr-animal-search { padding: 18px; background: #f6eedc; border-radius: 12px; }
@media(max-width:900px) {
  :is(#meet, .rrr-animal-directory) .rrr-animal-types { grid-template-columns: repeat(3,minmax(0,1fr)); }
  :is(#meet, .rrr-animal-directory) .rrr-animal-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  :is(#meet, .rrr-animal-directory) .rrr-animal-types { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 10px; }
  :is(#meet, .rrr-animal-directory) .rrr-animal-tile { padding: 12px 4px; }
  :is(#meet, .rrr-animal-directory) .rrr-animal-tile img,
  :is(#meet, .rrr-animal-directory) .rrr-animal-mark { max-width: 175px; }
  :is(#meet, .rrr-animal-directory) .rrr-animal-cards { grid-template-columns: 1fr; }
  :is(#meet, .rrr-animal-directory) .rrr-animal-tile h3 { font-size: 22px; }
  :is(#meet, .rrr-animal-directory) .rrr-animal-story>img { max-width: 320px; }
  :is(#meet, .rrr-animal-directory) .rrr-animal-story .wp-block-gallery figure.wp-block-image { width: 100%!important; max-width: 330px; margin-left: auto!important; margin-right: auto!important; }
}
:is(#meet, .rrr-animal-directory) .rrr-animal-story .wp-block-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px; }
:is(#meet, .rrr-animal-directory) .rrr-animal-story .wp-block-gallery figure.wp-block-image { width: 100%!important; margin: 0!important; }
@media(max-width:600px) {
  :is(#meet, .rrr-animal-directory) .rrr-animal-story .wp-block-gallery { grid-template-columns: 1fr; }
  :is(#meet, .rrr-animal-directory) .rrr-animal-story .wp-block-gallery figure.wp-block-image { margin: 0 auto!important; }
}