/* FindForJob plugin v1.5 - responsive CSS (assets-ffj.css) */

/* Base */
.ffj-latest-wrapper,
.ffj-grid { box-sizing: border-box; }

/* Desktop default: 2-column layout for latest (image + content) and 3-column grid */
.ffj-latest-wrapper { display:flex; gap:30px; align-items:flex-start; padding:20px 0; }
.ffj-latest-image { width:40%; }
.ffj-latest-image img { width:100%; height:auto; border-radius:8px; display:block; object-fit:cover; }
.ffj-latest-content { width:60%; }
.ffj-latest-content h2.ffj-title { font-size:28px; margin:0 0 12px; line-height:1.4; }
.ffj-meta, .ffj-info { color:#777; font-size:14px; }

/* Grid desktop */
.ffj-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:30px; margin-top:30px; }
.ffj-grid-item img { width:100%; height:auto; display:block; border-radius:8px; }
.ffj-grid-item h3.ffj-grid-title { font-size:20px; margin:10px 0; }

/* Labels */
.ffj-label, .ffj-label-small { background:#0066ff; color:#fff; padding:4px 10px; border-radius:4px; display:inline-block; font-size:13px; }

/* Responsive rules */
@media (max-width: 767px) {
  .ffj-latest-wrapper { display:block !important; padding:12px 10px; }
  .ffj-latest-image, .ffj-latest-content { width:100% !important; }
  .ffj-latest-image img { margin-bottom:12px; border-radius:8px; }
  .ffj-latest-content h2.ffj-title { font-size:22px !important; line-height:1.12 !important; margin:0 0 10px 0; word-break:break-word; }
  .ffj-latest-content p { font-size:14px; line-height:1.45; color:#666; }
  .ffj-grid { grid-template-columns: 1fr !important; gap:18px; padding:12px 10px 40px; }
  .ffj-grid-item h3.ffj-grid-title { font-size:18px !important; margin-top:8px; margin-bottom:6px; }
  .ffj-meta, .ffj-info { font-size:13px !important; }
  .ffj-latest-post-link, .ffj-grid-item { padding:6px 0; display:block; text-decoration:none; color:inherit; }
}

/* Tablets */
@media (min-width:768px) and (max-width:1024px) {
  .ffj-grid { grid-template-columns: repeat(2,1fr); gap:20px; }
  .ffj-latest-content h2.ffj-title { font-size:26px; }
}

/* Utility */
.ffj-thumb { display:block; max-width:100%; height:auto; }

/* ===========================================
   BLOG GRID (3 POSTS ONLY)
   Matches your existing grid styling
=========================================== */

.ffj-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.ffj-blog-item {
    text-decoration: none;
    color: #000;
    display: block;
}

.ffj-blog-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.ffj-blog-title {
    font-size: 20px;
    font-weight: 600;
    margin: 10px 0;
}

.ffj-blog-meta {
    font-size: 14px;
    color: #777;
}

/* MOBILE */
@media (max-width: 767px) {
    .ffj-blog-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 12px 10px 30px;
    }

    .ffj-blog-title {
        font-size: 18px;
        margin-top: 8px;
        margin-bottom: 6px;
    }

    .ffj-blog-meta {
        font-size: 13px;
    }
}

/* FIX BLUE TEXT CAUSED BY THEME OVERRIDING <a><p> */
.ffj-latest-post-link p,
.ffj-grid-item p,
.ffj-latest-content p,
.ffj-meta span,
.ffj-info,
.ffj-meta-small span {
    color: #444 !important;
    text-decoration: none !important;
}