@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap');

:root {
    --floc-green: #3d6b4f; --floc-green-dark: #2a4d38;
    --floc-tan: #c8a96e; --floc-cream: #f7f3ed;
    --floc-brown: #5a3e28; --floc-border: #ddd5c8;
    --floc-shadow: 0 2px 14px rgba(60,50,30,0.13);
}

.floc-grid { display: grid; gap: 24px; }
.floc-cols-3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.floc-cols-2 { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }

.floc-card { background: #fff; border-radius: 10px; box-shadow: var(--floc-shadow); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.floc-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(60,50,30,0.2); }

.floc-card-img { position: relative; overflow: hidden; height: 220px; }
.floc-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.floc-card:hover .floc-card-img img { transform: scale(1.04); }

.floc-type-badge { position: absolute; top: 12px; left: 12px; background: rgba(61,107,79,0.92); color: #fff; font-family: 'Lato', sans-serif; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 4px 12px; border-radius: 20px; }

.floc-card-body { padding: 20px; }
.floc-title { font-family: 'Playfair Display', serif; font-size: 1.2rem; margin: 0 0 8px; }
.floc-title a { color: var(--floc-brown); text-decoration: none; }
.floc-title a:hover { color: var(--floc-green); }
.floc-excerpt { font-family: 'Lato', sans-serif; font-size: .9rem; color: #666; line-height: 1.55; margin: 0 0 12px; }

.floc-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.floc-badge { color: #fff; font-family: 'Lato', sans-serif; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 3px 10px; border-radius: 20px; }
.floc-meta-item { font-family: 'Lato', sans-serif; font-size: .85rem; color: #555; }

.floc-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.floc-btn { background: var(--floc-green); color: #fff; padding: 9px 20px; border-radius: 5px; font-family: 'Lato', sans-serif; font-weight: 700; font-size: .9rem; text-decoration: none; transition: background .2s; }
.floc-btn:hover { background: var(--floc-green-dark); color: #fff; }
.floc-btn-outline { background: transparent; border: 2px solid var(--floc-green); color: var(--floc-green); }
.floc-btn-outline:hover { background: var(--floc-green); color: #fff; }

/* Single page detail box */
.floc-detail-box, .floc-tips-box { background: var(--floc-cream); border: 1px solid var(--floc-border); border-radius: 10px; padding: 24px 28px; margin: 32px 0; }
.floc-detail-box h3, .floc-tips-box h3 { font-family: 'Playfair Display', serif; color: var(--floc-brown); margin-top: 0; }
.floc-detail-list { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; }
.floc-detail-list dt { font-family: 'Lato', sans-serif; font-weight: 700; color: var(--floc-brown); }
.floc-detail-list dd { font-family: 'Lato', sans-serif; color: #444; margin: 0; }
.floc-tips-box p { font-family: 'Lato', sans-serif; line-height: 1.65; color: #444; margin: 0; }

@media (max-width: 600px) { .floc-cols-3, .floc-cols-2 { grid-template-columns: 1fr; } }