/* Detail pages: the adoptable-animal profile (.canopy-detail) and the lost-pet carousel (.animal-carousel). Colors come from the Canopy tokens in canopy.css. */
.animal-carousel {
    height: 300px;
    overflow: hidden;
    border-radius: var(--canopy-radius-lg);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: var(--canopy-pale);
}

@media (min-width: 768px) {
    .animal-carousel {
        height: 400px;
    }
}

@media (min-width: 1200px) {
    .animal-carousel {
        height: 500px;
    }
}

.animal-carousel .carousel-inner {
    height: 100%;
}

.animal-carousel .carousel-item {
    height: 100%;
    position: relative;
}

/* Image styling */
.animal-carousel .carousel-item img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
}

/* Video container styling */
.animal-carousel .video-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* YouTube and Vimeo iframe styling */
.animal-carousel .video-container iframe {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    max-width: 100%;
    max-height: 100%;
}

/* HTML5 video element styling */
.animal-carousel .video-container video {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

/* Video link placeholder styling */
.animal-carousel .video-link-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.animal-carousel .video-placeholder {
    text-align: center;
    padding: 2rem;
    border-radius: var(--canopy-radius-lg);
    border: 2px dashed var(--canopy-line);
}

.animal-carousel .video-placeholder i {
    font-size: 3rem;
    color: var(--canopy-accent);
    margin-bottom: 1rem;
    display: block;
}

.animal-carousel .video-placeholder p {
    margin-bottom: 1rem;
    color: var(--canopy-muted);
    font-size: 1.1rem;
}

.animal-carousel .video-placeholder .btn {
    font-size: 1.1rem;
    padding: 0.75rem 1.5rem;
}

/* Responsive video adjustments */
@media (max-width: 768px) {
    .animal-carousel .video-container {
        width: 95%;
        height: 85%;
    }
    
    .animal-carousel .video-placeholder i {
        font-size: 2rem;
    }
    
    .animal-carousel .video-placeholder p {
        font-size: 1rem;
    }
    
    .animal-carousel .video-placeholder .btn {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }
}

/* Carousel controls styling */
.animal-carousel .carousel-control-prev,
.animal-carousel .carousel-control-next {
    background: rgba(0, 0, 0, 0.5);
    width: 40px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    height: 40px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.animal-carousel .carousel-control-prev:hover,
.animal-carousel .carousel-control-next:hover {
    opacity: 1;
}

.animal-carousel .carousel-control-prev {
    left: 10px;
}

.animal-carousel .carousel-control-next {
    right: 10px;
}

.animal-carousel .carousel-indicators {
    bottom: 10px;
}

/* Animal Description Styles for HTML Content */
.animal-description-html {
    line-height: 1.6;
    color: var(--canopy-ink);
}

.animal-description-html p {
    margin-bottom: 1rem;
}

.animal-description-html div {
    margin-bottom: 0.75rem;
}

.animal-description-html strong,
.animal-description-html b {
    font-weight: 600;
    color: inherit;
}

.animal-description-html em,
.animal-description-html i {
    font-style: italic;
}

.animal-description-html h1,
.animal-description-html h2,
.animal-description-html h3,
.animal-description-html h4,
.animal-description-html h5,
.animal-description-html h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--canopy-heading);
}

.animal-description-html ul,
.animal-description-html ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.animal-description-html li {
    margin-bottom: 0.25rem;
}

.animal-description-html blockquote {
    border-left: 4px solid var(--canopy-accent);
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
    background-color: var(--canopy-pale);
    padding: 1rem;
    border-radius: var(--canopy-radius);
}

/* Ensure proper spacing and readability */
.animal-description-html > *:first-child {
    margin-top: 0;
}

.animal-description-html > *:last-child {
    margin-bottom: 0;
}

/* Adoptable-animal profile: split hero (media | identity and actions), story and facts, inquiry. */
.canopy-detail-back { margin: 12px 0; }
.canopy-detail-back .canopy-icon { transform: scaleX(-1); }
.canopy-detail-back-end { margin-top: 48px; text-align: center; }
.canopy-detail-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--canopy-pale); border-radius: var(--canopy-radius-lg); overflow: hidden; }
.canopy-detail-media { position: relative; min-height: 600px; background: var(--canopy-secondary-tint); }
.canopy-detail-media .carousel { position: absolute; inset: 0; }
.canopy-detail-media :is(.carousel-inner, .carousel-item) { height: 100%; }
.canopy-detail-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.canopy-detail-media > .canopy-detail-photo { position: absolute; inset: 0; }
.canopy-detail-video { display: grid; place-items: center; height: 100%; background: #000; }
.canopy-detail-video :is(iframe, video) { width: 100%; height: 100%; border: 0; }
/* Keep player controls clear of the thumbnail dock that overlays the photo on desktop. */
@media (min-width: 992px) { .canopy-detail-media:has(.canopy-media-dock) .canopy-detail-video { padding-bottom: 104px; } }
.canopy-detail-video-link { text-align: center; padding: 2rem; color: #fff; }
.canopy-detail-video-link .canopy-icon { width: 48px; height: 48px; }
.canopy-media-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: var(--canopy-radius); background: #fff; color: var(--canopy-ink); box-shadow: 0 2px 10px rgb(0 0 0 / .12); }
.canopy-media-btn:hover { color: var(--canopy-accent); }
.canopy-media-prev { left: 20px; }
.canopy-media-prev .canopy-icon { transform: scaleX(-1); }
.canopy-media-next { right: 20px; }
.canopy-media-count { position: absolute; top: 20px; right: 20px; z-index: 2; padding: 4px 12px; border-radius: var(--canopy-radius); background: #fff; color: var(--canopy-ink); font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: 0 2px 8px rgb(0 0 0 / .1); }
.canopy-media-dock { position: absolute; left: 24px; bottom: 24px; z-index: 2; max-width: calc(100% - 48px); display: flex; gap: 8px; padding: 8px; overflow-x: auto; background: #fff; border-radius: var(--canopy-radius-lg); box-shadow: 0 8px 24px rgb(0 0 0 / .12); }
.canopy-media-thumb { flex: 0 0 72px; height: 54px; padding: 0; border: 0; border-radius: var(--canopy-radius); overflow: hidden; background: var(--canopy-pale); opacity: .8; }
.canopy-media-thumb:hover, .canopy-media-thumb[aria-current="true"] { opacity: 1; }
.canopy-media-thumb[aria-current="true"] { outline: 3px solid var(--canopy-accent); outline-offset: -3px; }
.canopy-media-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.canopy-media-thumb-video { display: grid; place-items: center; height: 100%; color: var(--canopy-accent); }
.canopy-detail-panel { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 56px 56px 56px 64px; min-width: 0; }
.canopy-adoptable-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; border-radius: var(--canopy-radius); background: #146c43; color: #fff; font-size: .875rem; font-weight: 600; line-height: 1.4; }
.canopy-adoptable-badge .canopy-icon { width: 18px; height: 18px; }
.canopy-app .canopy-detail-panel h1 { margin: 16px 0 8px; font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: 1.05; letter-spacing: -.02em; font-weight: 700; overflow-wrap: anywhere; }
.canopy-detail-summary { margin: 0; font-size: 1.2rem; color: var(--canopy-muted); }
.canopy-detail-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.canopy-detail-chips:not(:has(li)) { display: none; }
.canopy-detail-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 12px; border: 1px solid var(--canopy-line); border-radius: var(--canopy-radius); background: #fff; font-size: .95rem; font-weight: 550; }
.canopy-detail-chips .canopy-icon, .canopy-detail-days .canopy-icon { width: 18px; height: 18px; color: var(--canopy-accent); }
.canopy-detail-days { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; color: var(--canopy-muted); }
.canopy-detail-days strong { color: var(--canopy-ink); font-weight: 600; }
.canopy-detail-actions { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; max-width: 560px; margin-top: 32px; }
.canopy-app .canopy-detail-actions .btn { flex: 1 1 auto; min-height: 56px; padding-inline: 24px; font-size: 1.05rem; }
.canopy-detail-visit { display: flex; gap: 14px; align-items: flex-start; width: 100%; max-width: 560px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--canopy-line); font-size: .95rem; line-height: 1.5; }
.canopy-detail-visit p { margin: 0; color: var(--canopy-muted); }
.canopy-detail-visit a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.canopy-detail-visit .canopy-detail-visit-label { font-size: .875rem; font-weight: 600; }
.canopy-detail-visit .canopy-detail-visit-name { color: var(--canopy-ink); font-weight: 600; }
.canopy-detail-tile { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--canopy-radius); background: #fff; color: var(--canopy-accent); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.canopy-detail-tile .canopy-icon { width: 20px; height: 20px; }
.canopy-detail-tile-lg { width: 56px; height: 56px; border-radius: var(--canopy-radius-lg); }
.canopy-detail-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; margin-top: 72px; }
.canopy-app .canopy-detail-body > * > h2, .canopy-app .canopy-detail-inquiry h2 { margin: 0 0 16px; font-size: 2rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.canopy-detail-description { max-width: 64ch; font-size: 1.125rem; line-height: 1.7; }
.canopy-detail-facts { padding: 24px; background: #fff; border: 1px solid var(--canopy-line); border-radius: var(--canopy-radius-lg); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.canopy-app .canopy-detail-facts h2 { font-size: 1.375rem; margin-bottom: 20px; }
.canopy-detail-facts dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px 16px; margin: 0; }
.canopy-detail-facts dl > div { position: relative; min-height: 40px; padding-left: 52px; }
.canopy-detail-facts dt { font-size: .875rem; font-weight: 400; line-height: 1.4; color: var(--canopy-muted); }
.canopy-detail-facts dt .canopy-detail-tile { position: absolute; left: 0; top: 0; width: 40px; height: 40px; background: var(--canopy-pale); box-shadow: none; }
.canopy-detail-facts dd { margin: 2px 0 0; font-weight: 600; line-height: 1.4; }
.canopy-detail-id { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--canopy-line); font-size: .875rem; color: var(--canopy-muted); }
.canopy-detail-inquiry { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; margin-top: 72px; padding: 40px; background: var(--canopy-pale); border-radius: var(--canopy-radius-lg); }
.canopy-app .canopy-detail-inquiry h2 { margin-top: 20px; }
.canopy-detail-inquiry p { margin: 0; font-size: 1.06rem; }
.canopy-detail-inquiry .canopy-detail-required { margin-top: 16px; font-size: .875rem; color: var(--canopy-muted); }
.canopy-inquiry-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.canopy-inquiry-wide { grid-column: 1 / -1; }
.canopy-inquiry-form .form-control[readonly] { background: #fff; color: var(--canopy-muted); }
.canopy-inquiry-actions { display: flex; justify-content: flex-end; }
.canopy-app .canopy-inquiry-actions .btn { min-height: 52px; padding-inline: 32px; font-size: 1.06rem; }
.canopy-detail-inquiry .alert { margin: 20px 0 0; }
@media (max-width: 991.98px) {
    .canopy-detail-hero, .canopy-detail-body, .canopy-detail-inquiry { grid-template-columns: minmax(0, 1fr); }
    .canopy-detail-media { min-height: 0; }
    .canopy-detail-media .carousel { position: relative; aspect-ratio: 4 / 3; }
    .canopy-detail-media > .canopy-detail-photo { position: static; aspect-ratio: 4 / 3; }
    .canopy-media-dock { position: static; max-width: none; margin: 12px; box-shadow: none; border: 1px solid var(--canopy-line); }
    .canopy-detail-panel { padding: 32px 24px 40px; }
    .canopy-detail-body, .canopy-detail-inquiry { margin-top: 48px; gap: 32px; }
}
@media (max-width: 575.98px) {
    .canopy-detail-inquiry { padding: 24px; }
    .canopy-inquiry-form { grid-template-columns: minmax(0, 1fr); }
    .canopy-app .canopy-inquiry-actions .btn { width: 100%; }
    .canopy-detail-panel { padding: 28px 18px 32px; }
}