/**
 * Promo Section Styles
 * Matching Next.js PromoSection component
 * 
 * @component PromoSection
 * @version 1.0.0
 */

/* Promo Section Container */
.modeo-promo-section {
    position: relative;
    width: 100%;
}

/* Promo Card Base Styles */
.modeo-promo-card {
    display: block;
    position: relative;
    overflow: hidden;
}

/* Promo Card Image Hover Effect */
.modeo-promo-card img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Promo CTA Button Styles */
.modeo-promo-cta-btn {
    text-decoration: none;
}

.modeo-promo-cta-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--primary, #cc1616);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    z-index: 0;
}

.modeo-promo-cta-btn:hover::before,
.modeo-promo-cta-btn:focus::before {
    transform: translateY(0);
}

/* Ensure text and icon are above overlay */
.modeo-promo-cta-btn span,
.modeo-promo-cta-btn svg {
    position: relative;
    z-index: 10;
}

/* Line clamp for descriptions */
.modeo-promo-card .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .modeo-promo-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

@media (min-width: 768px) {
    .modeo-promo-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

@media (min-width: 1024px) {
    .modeo-promo-section {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}