/* Firaasat Post Grid — front end */
.fpg-grid-wrap { --fpg-gap: 22px; --fpg-accent: #092f28; }
.fpg-grid {
    display: grid;
    grid-template-columns: repeat(var(--fpg-cols, 3), minmax(0, 1fr));
    gap: var(--fpg-gap);
}
@media (max-width: 1024px) { .fpg-grid { grid-template-columns: repeat(var(--fpg-cols-t, 2), minmax(0, 1fr)); } }
@media (max-width: 600px)  { .fpg-grid { grid-template-columns: repeat(var(--fpg-cols-m, 1), minmax(0, 1fr)); gap: 16px; } }

/* card shell */
.fpg-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; height: 100%; }
a.fpg-card { color: inherit; }

/* media / aspect */
.fpg-media { position: relative; display: block; width: 100%; overflow: hidden; background: #e7e2d6; border-radius: 10px; }
.fpg-ar-1-1 { aspect-ratio: 1 / 1; }
.fpg-ar-4-3 { aspect-ratio: 4 / 3; }
.fpg-ar-3-2 { aspect-ratio: 3 / 2; }
.fpg-ar-16-9 { aspect-ratio: 16 / 9; }
.fpg-media .fpg-img, .fpg-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.fpg-card:hover .fpg-media img { transform: scale(1.04); }
.fpg-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    font: 600 clamp(30px,5vw,54px)/1 Georgia,"Times New Roman",serif; color: #fff; background: var(--fpg-accent); }

/* category badge */
.fpg-badge { position: absolute; top: 10px; left: 10px; z-index: 2;
    background: var(--fpg-accent); color: #fff; font-size: 11px; font-weight: 600;
    letter-spacing: .3px; padding: 4px 9px; border-radius: 20px; }

/* body */
.fpg-body { display: flex; flex-direction: column; gap: 7px; padding: 13px 2px 4px; }
.fpg-meta { font-size: 11.5px; color: #6b6f76; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.fpg-sep { opacity: .55; }
.fpg-title { margin: 0; font-family: Georgia,"Times New Roman",serif; font-weight: 600; font-size: 19px; line-height: 1.28; color: #1d2327; }
.fpg-title a { color: inherit; text-decoration: none; }
.fpg-title a:hover { color: var(--fpg-accent); }
.fpg-excerpt { margin: 0; font-size: 13.5px; line-height: 1.6; color: #55595f; }
.fpg-readmore { margin-top: 2px; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--fpg-accent); text-decoration: none; }
.fpg-readmore span { transition: transform .2s ease; display: inline-block; }
.fpg-card:hover .fpg-readmore span { transform: translateX(3px); }

/* card (boxed) style */
.fpg-style-card .fpg-card { background: #fff; border: 1px solid #e7e3da; border-radius: 12px; overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease; }
.fpg-style-card .fpg-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.12); }
.fpg-style-card .fpg-media { border-radius: 0; }
.fpg-style-card .fpg-body { padding: 15px 16px 18px; }

/* plain style keeps rounded image */
.fpg-style-plain .fpg-media { border-radius: 10px; }

/* overlay style */
.fpg-style-overlay .fpg-media { border-radius: 12px; }
.fpg-style-overlay .fpg-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 72%); }
.fpg-style-overlay .fpg-overlay-in { padding: 16px; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.fpg-style-overlay .fpg-title { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.fpg-style-overlay .fpg-meta { color: #e9e4d8; }
.fpg-style-overlay .fpg-excerpt { color: #eee9dd; }
.fpg-style-overlay .fpg-readmore { color: #fff; }

/* pagination */
.fpg-pagination { margin-top: 30px; }
.fpg-pagination ul { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.fpg-pagination a, .fpg-pagination span { display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 13px; border: 1px solid #dcdcde; border-radius: 8px;
    text-decoration: none; color: #1d2327; font-size: 14px; background: #fff; }
.fpg-pagination a:hover { border-color: var(--fpg-accent); color: var(--fpg-accent); }
.fpg-pagination .current { background: var(--fpg-accent); border-color: var(--fpg-accent); color: #fff; }
.fpg-pagination .dots { border: none; background: none; }

/* load more */
.fpg-loadmore-wrap { text-align: center; margin-top: 30px; }
.fpg-loadmore { background: var(--fpg-accent); color: #fff; border: none; border-radius: 8px;
    padding: 12px 26px; font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; cursor: pointer;
    transition: opacity .2s ease; }
.fpg-loadmore:hover { opacity: .9; }
.fpg-loadmore[disabled] { opacity: .5; cursor: default; }
.fpg-loading { margin-left: 10px; color: #6b6f76; font-size: 13px; }

.fpg-empty { color: #6b6f76; font-style: italic; }