/*
 * Filterable Blog Grid — Frontend Styles
 * Author: Sourav Basak
 */

/* ─── CSS Custom Properties ─── */
:root {
  --fbg-primary:       #3b82f6;
  --fbg-secondary:     #1e293b;
  --fbg-bg:            #f8fafc;
  --fbg-card-bg:       #ffffff;
  --fbg-text:          #1e293b;
  --fbg-text-muted:    #6b7280;
  --fbg-border:        #e5e7eb;
  --fbg-radius-card:   1rem;
  --fbg-radius-pill:   2rem;
  --fbg-shadow:        0 1px 4px 0 rgb(0 0 0 / .07), 0 2px 8px -2px rgb(0 0 0 / .06);
  --fbg-shadow-hover:  0 8px 24px -4px rgb(0 0 0 / .12), 0 2px 8px -2px rgb(0 0 0 / .06);
  --fbg-transition:    0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.fbg-wrapper { padding: 1.75rem 0; color: var(--fbg-text); font-family: inherit; }

.fbg-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ════════════════════════════════
   FILTER PANEL
   ════════════════════════════════ */
.fbg-filter-panel {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ════════════════════════════════
   DROPDOWN STYLE
   ════════════════════════════════ */
.fbg-filter-row--dropdowns {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* "Filter by:" label — left side */
.fbg-filter-label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--fbg-text);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Dropdowns wrapper — takes remaining space, centred */
.fbg-filter-controls {
  display: flex;
  gap: 0.75rem;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}

.fbg-filter-group { position: relative; }

.fbg-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--fbg-card-bg);
  border: 1.5px solid var(--fbg-border);
  border-radius: 0.5rem;
  color: var(--fbg-text);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9375rem;
  padding: 0.5rem 2.5rem 0.5rem 0.875rem;
  min-width: 180px;
  transition: border-color var(--fbg-transition), box-shadow var(--fbg-transition);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
}

.fbg-select:focus {
  outline: none;
  border-color: var(--fbg-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fbg-primary) 20%, transparent);
}

.fbg-select:hover { border-color: var(--fbg-primary); }

/* ════════════════════════════════
   TABS / PILLS STYLE
   ════════════════════════════════ */
.fbg-pill-row {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  overflow: hidden;
  transition: opacity var(--fbg-transition), max-height 0.3s ease;
  max-height: 300px; opacity: 1;
}

.fbg-pill-row--hidden { max-height: 0 !important; opacity: 0; pointer-events: none; }

.fbg-sub-row:not(.fbg-pill-row--hidden) { padding-top: 0.5rem; border-top: 1px solid var(--fbg-border); }

.fbg-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.375rem 1rem;
  border: 1.5px solid var(--fbg-border); border-radius: var(--fbg-radius-pill);
  background: var(--fbg-card-bg); color: var(--fbg-text-muted);
  font-family: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1.4;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background var(--fbg-transition), border-color var(--fbg-transition), color var(--fbg-transition), box-shadow var(--fbg-transition), transform var(--fbg-transition);
}

.fbg-pill:hover { border-color: var(--fbg-primary); color: var(--fbg-primary); background: color-mix(in srgb, var(--fbg-primary) 8%, #fff); }
.fbg-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fbg-primary) 28%, transparent); }
.fbg-pill:active { transform: scale(0.96); }

.fbg-pill.is-active {
  background: var(--fbg-primary); border-color: var(--fbg-primary);
  color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--fbg-primary) 30%, transparent);
}
.fbg-pill.is-active:hover { background: color-mix(in srgb, var(--fbg-primary) 88%, #000); border-color: color-mix(in srgb, var(--fbg-primary) 88%, #000); }

.fbg-pill-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem;
  border-radius: 1rem; background: color-mix(in srgb, currentColor 14%, transparent);
  font-size: 0.6875rem; font-weight: 700; line-height: 1;
}

.fbg-pill--sub { font-size: 0.8125rem; padding: 0.3125rem 0.875rem; }

/* ════════════════════════════════
   POSTS REGION
   ════════════════════════════════ */
.fbg-posts-region { min-height: 160px; transition: opacity var(--fbg-transition); }
.fbg-posts-region.is-loading { opacity: 0.4; pointer-events: none; }

.fbg-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1.25rem;
}

/* ════════════════════════════════
   POST CARD
   ════════════════════════════════ */
.fbg-post-card {
  background: var(--fbg-card-bg);
  border: 1px solid var(--fbg-border);
  border-radius: var(--fbg-radius-card);
  box-shadow: var(--fbg-shadow);
  overflow: hidden;
  transition: box-shadow var(--fbg-transition), transform var(--fbg-transition), background var(--fbg-transition), border-color var(--fbg-transition);
}

.fbg-post-card:hover { box-shadow: var(--fbg-shadow-hover); transform: translateY(-2px); }

.fbg-card-link {
  display: block; text-decoration: none; color: inherit;
  padding: 1.375rem 1.5rem; height: 100%;
}

.fbg-card-link:focus-visible {
  outline: 2px solid var(--fbg-primary);
  outline-offset: -2px;
  border-radius: calc(var(--fbg-radius-card) - 1px);
}

/* ── Card Image ── */
.fbg-card-image {
  display: block;
  width: 100%;
  height: 200px;
  overflow: hidden;
  /* No padding — image sits above card body */
  margin: 0;
}

/* Image is outside the padded link — wrap separately */
.fbg-post-card .fbg-card-image {
  border-radius: 0; /* top radius handled per card */
}

.fbg-card-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--fbg-transition);
}

.fbg-post-card:hover .fbg-card-image img { transform: scale(1.04); }

/* Placeholder image */
.fbg-card-image-placeholder {
  width: 100%; height: 100%;
  background: #f1f5f9;
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8;
}

.fbg-card-image-placeholder svg { width: 48px; height: 48px; }

/* Card body — text content */
.fbg-card-body { display: flex; flex-direction: column; gap: 0.5rem; }

.fbg-card-title {
  font-size: 1.0625rem; font-weight: 700; line-height: 1.45;
  margin: 0; color: var(--fbg-text);
  transition: color var(--fbg-transition);
}
.fbg-card-link:hover .fbg-card-title { color: var(--fbg-primary); }

.fbg-card-meta {
  display: flex; align-items: center; gap: 0.375rem;
  color: var(--fbg-text-muted); font-size: 0.8125rem; line-height: 1;
}
.fbg-clock-icon { flex-shrink: 0; opacity: 0.65; }

.fbg-card-excerpt {
  font-size: 0.9rem; color: var(--fbg-text-muted); line-height: 1.65; margin: 0;
}

/* ─── No Results ─── */
.fbg-no-results { text-align: center; color: var(--fbg-text-muted); padding: 3rem 1rem; font-size: 0.9375rem; }

/* ─── Pagination ─── */
.fbg-pagination { display: flex; flex-wrap: wrap; gap: 0.375rem; justify-content: center; margin-top: 2.25rem; }

.fbg-page-btn {
  background: var(--fbg-card-bg); border: 1.5px solid var(--fbg-border); border-radius: 0.5rem;
  color: var(--fbg-text); cursor: pointer; font-family: inherit;
  font-size: 0.875rem; font-weight: 500; min-width: 2.25rem; padding: 0.4rem 0.75rem;
  transition: background var(--fbg-transition), border-color var(--fbg-transition), color var(--fbg-transition);
}
.fbg-page-btn:hover { background: color-mix(in srgb, var(--fbg-primary) 8%, #fff); border-color: var(--fbg-primary); color: var(--fbg-primary); }
.fbg-page-btn.is-active { background: var(--fbg-primary); border-color: var(--fbg-primary); color: #fff; font-weight: 700; }
.fbg-page-btn:focus-visible { outline: 2px solid var(--fbg-primary); outline-offset: 2px; }

/* ─── Color Scheme Presets ─── */
.fbg-wrapper[data-scheme="dark"]   { --fbg-bg: #0f172a; --fbg-card-bg: #1e293b; --fbg-text: #f1f5f9; --fbg-border: #334155; --fbg-text-muted: #94a3b8; }
.fbg-wrapper[data-scheme="forest"] { --fbg-primary: #16a34a; --fbg-bg: #f0fdf4; --fbg-card-bg: #ffffff; --fbg-text: #14532d; --fbg-border: #bbf7d0; }

/* ─── Editor placeholder ─── */
.fbg-editor-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 120px; }

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .fbg-filter-row--dropdowns { flex-wrap: wrap; }
  .fbg-filter-label { width: 100%; }
  .fbg-filter-controls { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .fbg-pill-row { gap: 0.375rem; }
  .fbg-pill { font-size: 0.8125rem; padding: 0.3125rem 0.75rem; }
  .fbg-select { min-width: 0; width: 100%; }
  .fbg-filter-controls { flex-direction: column; }
  .fbg-posts-grid { grid-template-columns: 1fr; }
  .fbg-card-link { padding: 1.125rem; }
}