.pfl-container {
max-width: 100%;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
} .pfl-filter-form {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.pfl-filter-form input[type='text'],
.pfl-filter-form select {
padding: 8px 12px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
flex: 1 1 200px;
}
.pfl-filter-form button {
padding: 8px 16px;
font-size: 14px;
background-color: #0073aa;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
flex: 0 0 auto;
}
.pfl-filter-form button:hover {
background-color: #005177;
} .pfl-posts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.pfl-post-item {
background: white;
border: 1px solid #ddd;
border-radius: 4px;
padding: 15px;
background-color: #fafafa;
display: flex;
flex-direction: column;
justify-content: flex-start;
transition: box-shadow 0.2s ease;
}
.pfl-post-item:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
} .pfl-post-image-wrapper {
width: 100%;
text-align: center;
margin-bottom: 12px;
}
.pfl-post-image {
max-width: 100%;
height: auto;
border-radius: 4px;
} .pfl-post-item h2 {
display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; font-size: 18px;
margin: 0 0 8px;
} .pfl-post-cats {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.pfl-post-cat {
background-color: #ececec;
padding: 4px 8px;
border-radius: 3px;
font-size: 12px;
color: #333;
} .pfl-post-item .pfl-post-excerpt {
display: -webkit-box;
-webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; flex-grow: 1;
font-size: 14px;
color: #555;
margin-bottom: 15px;
} .pfl-post-item a.pfl-read-more {
align-self: flex-start;
padding: 6px 12px;
background-color: #0073aa;
color: #fff;
border-radius: 4px;
text-transform: uppercase;
width: 100%;
text-align: center;
border-radius: 5px;
background-size: 300% 100% !important;
background-image: linear-gradient(to left, #5ec3bd, #235484, #5ec3bd) !important;
transition: .3s all;
}
.pfl-post-item a.pfl-read-more:hover {
background-color: #5ec3bd;
background-position: 100% 0 !important;
} .pfl-pagination {
display: flex;
justify-content: center;
margin-top: 30px;
gap: 8px;
flex-wrap: wrap;
}
.pfl-pagination a,
.pfl-pagination span.current {
display: inline-block;
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
text-decoration: none;
color: #0073aa;
font-size: 14px;
}
.pfl-pagination a:hover {
background-color: #f0f0f0;
}
.pfl-pagination span.current {
background-color: #0073aa;
color: #fff;
border-color: #0073aa;
}