/* ========================================
   HYBRID DOG PAGES - STYLES
   styles_dogs_hybrid.css
   
   This stylesheet contains all hybrid-specific
   styles for the Furry Critter Network
   ======================================== */

/* Hero Section - Cream/Beige Color Scheme */
.hybrid-hero {
	background: linear-gradient(135deg, #f5f5dc 0%, #faf0e6 100%);
	padding: 60px 20px;
	text-align: center;
	margin-bottom: 40px;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.hybrid-hero h1 {
	color: var(--primary-red);
	font-size: 3rem;
	margin: 0 0 20px 0;
	font-weight: 700;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.hybrid-intro {
	font-size: 1.1rem;
	max-width: 800px;
	margin: 0 auto;
	line-height: 1.8;
	background: white;
	padding: 30px;
	border-radius: 8px;
	color: var(--text-secondary);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	border-left: 4px solid var(--primary-red);
}

/* Parent Breeds Container - Side by Side */
.parent-breeds-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 40px;
	margin: 40px 0;
}

/* Parent Breed Cards - Modern with Softer Colors */
.parent-breed-card {
	background: white;
	border-radius: 12px;
	padding: 30px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border-top: 4px solid var(--primary-red);
}

.parent-breed-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.parent-breed-card h2 {
	color: var(--primary-red);
	font-size: 2rem;
	margin: 0 0 20px 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.parent-breed-card h2 i {
	font-size: 1.5rem;
}

/* Breed Image */
.breed-image {
	display: block;
	margin: 20px auto;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Breed Description */
.breed-description {
	color: var(--text-primary);
	line-height: 1.8;
	margin-bottom: 25px;
}

/* Breed Highlights - Softer Yellow/Cream */
.breed-highlights {
	background: #fffbf0;
	padding: 20px;
	border-radius: 8px;
	margin: 20px 0;
	border-left: 4px solid #f0c674;
}

.breed-highlights h3 {
	color: var(--text-primary);
	font-size: 1.1rem;
	margin: 0 0 15px 0;
	font-weight: 600;
}

.highlight-grid {
	display: grid;
	gap: 12px;
}

.highlight-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.highlight-item i {
	color: var(--primary-red);
	margin-top: 4px;
	flex-shrink: 0;
}

.highlight-text {
	color: var(--text-secondary);
	line-height: 1.6;
}

.highlight-text strong {
	color: var(--text-on-light);
	font-weight: 600;
}

/* CTA Button */
.cta-button {
	display: inline-block;
	background: var(--primary-red);
	color: white;
	padding: 15px 40px;
	text-decoration: none;
	border-radius: 50px;
	font-weight: 600;
	font-size: 1.1rem;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);
	margin-top: 20px;
}

.cta-button:hover {
	background: #c62828;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(211, 47, 47, 0.4);
}

.cta-button i {
	margin-left: 8px;
}

/* Important Notice Box - Yellow/Cream */
.important-notice {
	background: #fffbf0;
	border: 1px solid #f0c674;
	border-left: 5px solid #f0ad4e;
	padding: 20px 25px;
	margin: 40px 0;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.important-notice h3 {
	color: var(--dark-charcoal);
	margin: 0 0 10px 0;
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
}

.important-notice h3 i {
	color: #f0ad4e;
	font-size: 1.5rem;
}

.important-notice p {
	color: var(--text-secondary);
	margin: 0;
	line-height: 1.6;
}

/* Back Navigation */
.back-nav {
	margin: 40px 0 20px 0;
	text-align: center;
}

.back-link {
    display: inline-block;
    padding: 15px 30px;
    background: linear-gradient(45deg, var(--primary-red), var(--accent-orange));
    color: var(--white);
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    box-shadow: 0 4px 15px var(--shadow-medium);
    transition: all 0.3s ease;
}

.back-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow-medium);
}

.back-link i {
	transition: margin-right 0.3s ease;
}

.back-link:hover i {
	margin-right: 5px;
}

/* Responsive Design - Mobile */
@media (max-width: 768px) {
	.parent-breeds-container {
		grid-template-columns: 1fr;
	}
	
	.hybrid-hero {
		padding: 40px 15px;
	}
	
	.hybrid-hero h1 {
		font-size: 2rem;
	}
	
	.hybrid-intro {
		font-size: 1rem;
		padding: 20px;
	}
	
	.parent-breed-card {
		padding: 25px 20px;
	}
}

/* Small Mobile */
@media (max-width: 480px) {
	.hybrid-hero h1 {
		font-size: 1.6rem;
	}
	
	.parent-breed-card h2 {
		font-size: 1.5rem;
	}
}