/* ==========================================================================
   Pet-friendly page: subtle pet accents on top of the shared results layout.
   Accent colour is the brand sage (warm, outdoorsy); everything else stays on-brand.
   ========================================================================== */

/* ---- Banner ---- */
.page-hero--pets {
    background:
        radial-gradient(700px 360px at 85% 70%, rgba(187, 195, 146, .45), transparent 70%),
        radial-gradient(520px 300px at 10% 0%, rgba(240, 184, 169, .28), transparent 70%),
        var(--cream);
}
.page-hero--pets .eyebrow { color: #6f7a3f; }
.page-hero--pets .eyebrow .icon { color: #8e9a55; }

.pet-scene { position: relative; width: 100%; max-width: 560px; justify-self: end; aspect-ratio: 16 / 9; }
.pet-scene__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.paw-trail use { color: var(--mauve); }

/* Optional photo, framed in the house shape from the logo */
.pet-scene__photo {
    position: absolute; right: 0; top: 4%; width: 44%; height: 86%; object-fit: cover;
    clip-path: polygon(50% 0, 100% 22%, 100% 100%, 0 100%, 0 22%);
    box-shadow: var(--shadow-lg);
}

.pet-scene__heart { color: #d9665a; fill: currentColor; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* Paw prints appear one by one, walking home; then a small heart. Runs once. */
@media (prefers-reduced-motion: no-preference) {
    .paw-trail use { opacity: 0; animation: paw-in .45s ease forwards; }
    .paw-trail use:nth-child(1) { animation-delay: .2s; }
    .paw-trail use:nth-child(2) { animation-delay: .45s; }
    .paw-trail use:nth-child(3) { animation-delay: .7s; }
    .paw-trail use:nth-child(4) { animation-delay: .95s; }
    .paw-trail use:nth-child(5) { animation-delay: 1.2s; }
    .paw-trail use:nth-child(6) { animation-delay: 1.45s; }
    .paw-trail use:nth-child(7) { animation-delay: 1.7s; }
    .paw-trail use:nth-child(8) { animation-delay: 1.95s; }
            .pet-scene__heart { animation: heart-in .7s 2.4s ease forwards; }
}
@media (prefers-reduced-motion: reduce) {
    .paw-trail use { opacity: .7; }
    .pet-scene__heart { opacity: .9; }
}
/* Opacity only: a CSS transform here would override each print's SVG position. */
@keyframes paw-in { from { opacity: 0; } to { opacity: .7; } }
@keyframes heart-in {
    0% { opacity: 0; transform: translateY(8px) scale(.6); }
    60% { opacity: 1; transform: translateY(-2px) scale(1.12); }
    100% { opacity: .9; transform: none; }
}

@media (max-width: 820px) {
    .pet-scene { max-width: 420px; justify-self: center; margin-top: 4px; }
}

/* ---- "What does your pet need?" quick filters: sage instead of the default slate ---- */
.quick-filters--pets .need-chip:hover { border-color: var(--sage); }
.quick-filters--pets .need-chip__icon { background: var(--sage-soft); color: #6f7a3f; }
.quick-filters--pets .need-chip__check { color: #6f7a3f; }
.quick-filters--pets .need-chip[aria-pressed="true"] { border-color: #8e9a55; background: var(--sage-soft); }
.quick-filters--pets .need-chip[aria-pressed="true"] .need-chip__icon { background: #8e9a55; color: #fff; }

/* ---- Cards: "Pets welcome" badge ---- */
.badge--pet { background: var(--sage); color: var(--ink); }

/* ---- Tips band, with a very faint paw-print texture ---- */
.pet-tips {
    padding: 64px 0;
    background: url("../img/paw-pattern.svg") repeat, var(--sage-soft);
}
.pet-tips__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.pet-tips .eyebrow { color: #6f7a3f; }
.pet-tips .eyebrow .icon { color: #8e9a55; }
.pet-tips__list { margin: 20px 0 0; padding-left: 1.3em; display: grid; gap: 14px; }
.pet-tips__list li::marker { color: #8e9a55; font-weight: 600; }
.pet-tips__list strong { display: block; color: var(--ink); font-weight: 600; }

.pet-tips__cta { position: relative; background: #fff; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.pet-tips__cta-icon { position: absolute; top: -18px; right: 24px; width: 40px; height: 40px; color: #d9665a; fill: currentColor; }
.pet-tips__cta h3 { font-size: 1.5rem; }
.pet-tips__cta p { color: var(--muted); }
.pet-tips__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 820px) { .pet-tips__grid { grid-template-columns: 1fr; } }

/* ---- Empty state ---- */
.empty-results--pets { border-color: var(--sage); background: #fff; }
.empty-results--pets .empty-results__icon { color: #8e9a55; fill: currentColor; stroke: none; }