/* Styles for the placeholder image area (when cover image is missing) */

/* Style for the placeholder container itself */
.knowledge-card-image.is-placeholder {
    background: linear-gradient(to bottom, #2E8B57, #4F9F75); /* Green gradient */
    position: relative; /* Needed for absolute positioning of children */
    overflow: hidden; /* Hide potential overflow from children */
}

/* Style for the absolutely positioned icon (<i> tag) */
.placeholder-icon {
    position: absolute;
    left: 30px; /* Distance from left edge */
    top: 50%;   /* Position top edge at the vertical center */
    transform: translateY(-50%); /* Shift icon up for true vertical center */
    font-size: 70px; /* Adjust icon size */
    color: rgba(255, 255, 255, 0.2); /* Adjust icon transparency */
    z-index: 1; /* Ensure icon is potentially behind text if overlap needed */
}

/* Style for the title text inside the placeholder */
.placeholder-title {
    position: absolute;
    left: 130px; /* Start text after icon (adjust: icon pos + icon size + gap) */
    right: 20px; /* Distance from right edge */
    top: 50%;   /* Align top edge to vertical center */
    transform: translateY(-50%); /* Shift up for vertical centering */
    /* width calculated automatically by left/right */
    max-height: 100%; /* Allow text to take full height initially */
    color: #fff;
    font-size: 18px; /* Adjust title font size */
    font-weight: bold;
    line-height: 1.4;
    text-align: left;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Simple text shadow */
    overflow: hidden; /* Hide overflowing text */
    /* Attempt to limit to 3 lines with ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    z-index: 2; /* Ensure text is above icon */
}