/* Feature: Content Expansion Styling */
.article-wrapper {
    position: relative;
    overflow: hidden;
    transition: max-height 0.8s ease-in-out;
    max-height: 10000px; /* Pura khulne ke baad ki height */
}

.article-wrapper.collapsed {
    max-height: 400px; /* Shuru mein kitna dikhana hai (isey change kar sakte hain) */
}

.read-more-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, rgba(13, 13, 13, 0), rgba(13, 13, 13, 1));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20px;
    transition: opacity 0.5s ease;
}

.btn-read-more {
    background: #141414;
    color: #00d4ff;
    border: 1px solid #007bff;
    padding: 10px 25px;
    border-radius: 25px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.4);
    transition: all 0.3s ease;
    z-index: 2;
}

.btn-read-more:hover {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
    color: #fff;
}