/* Animals page specific CSS - 50% larger cards than index.html */

.animals-intro{max-width:900px;margin:40px auto 60px;padding:0 20px;font-size:1.15rem;line-height:1.6;text-align:center;color:#444}

/* Animals Photo Gallery - Goat Cards */
.goat-gallery{max-width:1400px;margin:40px auto 80px;padding:0 20px}

.goat-gallery-title{font-size:2rem;margin-bottom:50px;text-align:center;color:#333;font-weight:600}

/* Override stay-options for animals cards - 50% larger */
.animals-cards{display:flex;justify-content:center;gap:75px;max-width:1400px;margin:0 auto 80px;padding:0 20px;flex-wrap:wrap}

/* Animal card - 50% larger than standard stay-card (max-width: 480px → 720px) */
.animals-card{background:#fff;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.1);width:100%;max-width:720px;overflow:hidden;cursor:pointer;transition:box-shadow 0.3s ease;display:flex;flex-direction:column;outline-offset:3px;contain:layout style paint}

.animals-card:hover,.animals-card:focus-visible{box-shadow:0 8px 24px rgba(0,0,0,0.15)}

/* Animal card image - 50% larger (height: 400px → 600px) */
.animals-card .stay-image{height:600px;background-size:cover;background-position:center;position:relative;overflow:hidden;contain:layout style paint}

.animals-card .stay-image picture{width:100%;height:100%;display:block;position:relative;z-index:1}

.animals-card .stay-image img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;background:#f0f0f0;transition:opacity 0.35s ease, transform 0.5s ease;transform:translateX(0);will-change:opacity,transform}

.animals-card .stay-image img.slide-left{animation:slideLeft 0.5s ease forwards}

.animals-card .stay-image img.slide-right{animation:slideRight 0.5s ease forwards}

.animals-card .stay-image img.slide-in-from-left{animation:slideInFromLeft 0.5s ease forwards}

.animals-card .stay-image img.slide-in-from-right{animation:slideInFromRight 0.5s ease forwards}

.animals-card .stay-image img.fade-out{opacity:0}

.animals-card .stay-image img.fade-in{opacity:1}

/* Side nav buttons on animal cards */
.animals-card .side-nav{position:absolute;top:0;width:12%;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(0,0,0,0.05);transition:background-color 0.3s ease,color 0.3s ease;user-select:none;-webkit-user-select:none;font-size:2rem;color:rgba(255,255,255,0.35);border:0;padding:0;touch-action:none;font-weight:700;z-index:2;pointer-events:auto}

.animals-card .side-nav:hover{background:rgba(0,0,0,0.2);color:rgba(255,255,255,0.8)}

.animals-card .side-nav.prev{left:0}

.animals-card .side-nav.next{right:0}

.animals-card .carousel-dots{
	/* Full-height rectangular control matching the side-nav arrows */
	position:absolute;
	top:0;
	right:0;
	width:12%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	background:rgba(0,0,0,0.05);
	transition:background-color 0.3s ease,color 0.3s ease;
	color:rgba(255,255,255,0.35);
	border:0;
	padding:0;
	font-size:2rem;
	z-index:2;
	pointer-events:auto;
}

.animals-card .carousel-dots:hover{background:rgba(0,0,0,0.2);color:rgba(255,255,255,0.8)}

.animals-card .stay-image:hover .side-nav{color:rgba(255,255,255,0.5)}

/* Animal card content - scale up text (padding: 20px → 30px) */
.animals-card .stay-content{padding:30px;flex-grow:1;display:flex;flex-direction:column;justify-content:center}

.animals-card .stay-title{font-size:1.5rem;font-weight:700;margin-bottom:15px;color:#2a7ae2}

.animals-card .stay-description{font-size:1rem;line-height:1.6;color:#555;margin:0}

/* Slide animations for carousel */
@keyframes slideLeft{from{transform:translateX(0);opacity:1}to{transform:translateX(-100%);opacity:0}}

@keyframes slideRight{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}

@keyframes slideInFromLeft{from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}

@keyframes slideInFromRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* Responsive adjustments for animal cards */
@media (max-width:1024px){.animals-cards{gap:50px}.animals-card{max-width:100%}.animals-card .stay-image{height:500px}}

@media (max-width:768px){.animals-cards{gap:30px;margin:0 auto 60px}.animals-card{max-width:100%;width:90%}.animals-card .stay-image{height:400px}.animals-card .stay-content{padding:20px}.animals-card .stay-title{font-size:1.2rem;margin-bottom:12px}.goat-gallery-title{font-size:1.6rem;margin-bottom:35px}.carousel-thumbnails{display:none}}

@media (max-width:480px){.animals-cards{gap:20px;margin:0 auto 40px;padding:0 15px}.animals-card{max-width:100%;width:95%}.animals-card .stay-image{height:300px}.animals-card .stay-content{padding:15px}.animals-card .stay-title{font-size:1.1rem;margin-bottom:10px}.animals-card .stay-description{font-size:0.9rem}.goat-gallery-title{font-size:1.4rem;margin-bottom:25px}.carousel-thumbnails{display:none}}