/**
 * Intro Text Toggle Styling
 * Adds a "read more" toggle for category intro text on mobile
 */

/* Mobile only - hide on desktop */
@media screen and (max-width: 1023px) {
    .all-products__intro-text {
        position: relative;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    /* Collapsed state - show only 4-5 lines */
    .all-products__intro-text.is-collapsed {
        max-height: 7.5em; /* Approximately 5 lines */
        line-height: 1.5em;
    }

    /* Expanded state */
    .all-products__intro-text.is-expanded {
        max-height: none;
    }

    /* Toggle button */
    .intro-text-toggle {
        margin-bottom: 1em;
        background: transparent;
        border: none;
        color: #4e8a26;
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        font-weight: 700;
        margin-top: 8px;
        padding: 0;
        text-decoration: underline;
        transition: opacity 0.2s ease;
    }

    .intro-text-toggle:hover {
        opacity: 0.7;
    }

    .intro-text-toggle:focus {
        outline: 2px solid #4e8a26;
        outline-offset: 2px;
    }

    /* Hide toggle button when not needed */
    .intro-text-toggle.is-hidden {
        display: none;
    }

    /* Fade effect at bottom when collapsed */
    .all-products__intro-text.is-collapsed::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1.5em;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
        pointer-events: none;
    }

    .all-products__intro-text.is-expanded::after {
        display: none;
    }
}

/* Desktop - no changes needed */
@media screen and (min-width: 1024px) {
    .intro-text-toggle {
        display: none;
    }
}