/* Mobile-Only Accordion for Main Description - CSS Only Solution */

/* Desktop - Normal display (no changes) */
.main-description-content {
    position: relative;
}

/* Mobile Only - Accordion behavior */
@media (max-width: 768px) {
    
    /* Accordion functionality only - no positioning changes */
    
    /* Collapsed state - show only first 3 lines */
    .main-description-content {
        max-height: 4.5em; /* ~3 lines of text */
        overflow: hidden;
        position: relative;
        transition: max-height 0.3s ease;
        line-height: 1.5em;
    }
    
    /* Fade effect at bottom when collapsed */
    .main-description-content::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2em;
        background: linear-gradient(to bottom, transparent, white);
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    
    /* Add Read More button using CSS */
    .main-description-title::after {
        content: 'Read More ▼';
        display: block;
        width: 100%;
        padding: 10px 16px;
        margin-top: 10px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        text-align: center;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        transition: all 0.3s ease;
    }
    
    .main-description-title:active::after {
        transform: translateY(1px);
    }
    
    /* Expanded state - when title is clicked/tapped */
    .main-description-title.expanded + .main-description-content {
        max-height: 5000px; /* Large enough for any content */
    }
    
    .main-description-title.expanded + .main-description-content::after {
        opacity: 0;
    }
    
    .main-description-title.expanded::after {
        content: 'Show Less ▲';
        background: linear-gradient(135deg, #5a6fd8 0%, #6a4195 100%);
    }
}

/* Tablet adjustments */
@media (max-width: 480px) {
    .main-description-content {
        max-height: 4em; /* Slightly less on small phones */
        font-size: 14px;
    }
    
    .main-description-title::after {
        padding: 8px 12px;
        font-size: 13px;
    }
}