/**
 * Species Post Type CSS
 * Species-specific styling for single species pages
 */

/* Import base styles and components */
@import '../base/variables.css';
@import '../base/post-type-base.css';
@import '../utilities/layout.css';

.species-category-image img {
    width: 280px !important;
    height: 180px !important;
    object-fit: fill !important;
}

.species-category-image .card-body {
    text-wrap: nowrap !important;
    text-align: center !important;
    padding: var(--spacing-lg) !important;
}

.species-post-link .card {
    /*margin-bottom: var(--spacing-xl) !important;*/
    border-radius: var(--border-radius-md) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-light) !important;
    transition: transform var(--transition-fast) !important;
}


.species-category-image .card-body:hover {
    text-decoration: underline !important;
}



.species-category-image .card-body {
    color: #fff !important;
    background: #000;
}


.species-post-link {
    margin-bottom: var(--spacing-xl) !important;
}

.species-post-link .card {
    border: none !important;
    border-radius: var(--border-radius-md) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-light) !important;
    transition: transform var(--transition-fast) !important;
    background: var(--bg-white) !important;
    width: 310px !important;

}

.species-post-link .card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-medium) !important;
    border-color: var(--primary-green) !important;
}

.species-card-cover{
    background-size: cover !important;
    background-position-x: center;
    background-position-y: 0;
    height: 250px !important;
    width: 310px !important;
}

.species-post-link .card-body {
    /*padding: var(--spacing-lg) !important;*/
    text-align: center !important;
    text-wrap: nowrap !important;
    padding: var(--spacing-md) !important;
    background: #000;
    color: #fff !important;
}

.species-post-link img {
    width: 280px !important;
    height: 180px !important;
    object-fit: fill !important;
}

.species-post-link .card-body:hover {
    text-decoration: underline !important;
}

/* Species Categories Section */

.species-categories-section{
    margin-bottom: var(--spacing-xl) !important;
}

.species-categories-section .species-category-card {
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    text-align: center !important;
    border-radius: var(--border-radius-md) !important;
    background: var(--bg-white) !important;
    box-shadow: var(--shadow-light) !important;
    border: 2px solid transparent !important;
}

.species-categories-section .species-category-card.active {
    color: var(--text-white) !important;
    border-color: var(--primary-green-hover) !important;
}

.species-categories-section .species-category-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-medium) !important;
    border-color: var(--primary-green) !important;
}

.species-categories-section .species-category-card.active .species-category-title{
    background: var(--primary-green) !important;
    color: var(--text-white) !important;
    border-color: var(--primary-green-hover) !important;
}

.species-categories-section .species-category-image {
    width: 100% !important;
    height: var(--image-size-md) !important;
    object-fit: fill !important;
    border-radius: 4px 4px 0 0;
}

.species-categories-section .species-category-title {
    font-size: var(--font-size-lg) !important;
    font-weight: var(--font-weight-semibold) !important;
    text-align: center !important;
    margin: 0 !important;
    background: #000;
    color: #fff !important;
    border-radius: 0 0 4px 4px !important;
}