/* wrapper & filter row */
.wppf-wrapper { max-width: 1200px; margin: 20px auto; font-family: Arial, sans-serif; }
.wppf-filter-row { display: flex; gap: 20px; align-items: center; margin-bottom: 24px; }

/* columns */
.wppf-filter-col { 
    flex: 0 0 240px; 
    position: relative; 
}
.wppf-search-col { flex: 1 1 auto; min-width: 260px; width: 100%; }

/* keep labels for accessibility but hide visually */
.wppf-label { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* select wrapper */
.wppf-select-wrapper { position: relative; }

/* select appearance removal across browsers */
.wppf-select {
    width: 100%;
    padding: 14px 38px 14px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    font-size: 15px;
    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    background-repeat: no-repeat;
    background-position: right center;
}

/* IE/Edge */
.wppf-select::-ms-expand { display: none; }

/* Firefox padding tweak */
@-moz-document url-prefix() {
  .wppf-select { padding-right: 40px; }
}

/* custom chevron uses global primary color var() with fallback */
.wppf-select-wrapper::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--e-global-color-primary, #4aa3d6);
    pointer-events: none;
}

/* search input styling */
.wppf-search {
    width:100%;
    padding:12px 16px;
    border:1px solid #ddd;
    border-radius:4px;
    font-size:15px;
}

/* grid: 2 columns desktop */
.wppf-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* card */
.wppf-card {
    display:flex;
    background:#fff;
    border-radius:4px;
    overflow:hidden;
    box-shadow: 0 0 0 1px #eee;
}

/* media */
.wppf-card-media { flex: 0 0 45%; max-width:45%; overflow:hidden; }
.wppf-card-media img { width:100%; height:100%; object-fit:cover; display:block; }

/* body */
.wppf-card-body { flex:1; padding:28px; background:#f7f8f9; display:flex; flex-direction:column; justify-content:center; }
.wppf-card-title { margin:0 0 8px; font-size:20px; color:var(--e-global-color-primary, #0b7f3a); font-weight:700; }
.wppf-card-title a { color:inherit; text-decoration:none; }
.wppf-card-date { color:#444; margin-bottom:10px; font-size:14px; }
.wppf-card-excerpt { color:#666; font-size:15px; line-height:1.6; margin-bottom:14px; }

/* read more */
.wppf-readmore {
    display:inline-block; text-decoration:none; padding:10px 24px; border-radius:999px;
    background: var(--e-global-color-primary, #0b481f); color:#fff; font-weight:600; font-size:13px;
}

/* pagination */
.wppf-pagination { margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.wppf-page-btn { padding:8px 12px; border:1px solid #ddd; background:#fff; cursor:pointer; border-radius:4px; }
.wppf-page-btn.active { background:var(--e-global-color-primary, #0b7f3a); color:#fff; border-color:var(--e-global-color-primary, #0b7f3a); }

/* no results */
.wppf-no-results { padding:20px; color:#666; }

/* responsive single column */
@media (max-width:900px) {
    .wppf-grid { grid-template-columns: 1fr; }
    .wppf-card { flex-direction:column; }
    .wppf-card-media { max-width:100%; height:220px; }
    .wppf-card-body { padding:18px; }
    .wppf-filter-row { flex-direction:column; gap:12px; }
}