/*
 * AG Posts – Public Stylesheet
 * Uses !important throughout to prevent Kadence (and any other theme)
 * from overriding grid layout and card styles.
 *
 * CSS custom properties are set inline per-grid instance so each
 * grid on the same page can have independent column/gap/accent settings.
 */

/* ── Reset / Base ──────────────────────────────────────────────────────────── */

.ag-posts-grid *,
.ag-posts-grid *::before,
.ag-posts-grid *::after {
  box-sizing: border-box !important;
}

.ag-posts-grid {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 2em !important;
  padding: 0 !important;
  font-family: inherit !important;
}

/* ── Grid Inner ────────────────────────────────────────────────────────────── */

.agp-grid-inner {
  display: grid !important;
  grid-template-columns: repeat(var(--agp-columns, 3), 1fr) !important;
  gap: var(--agp-gap, 24px) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ── Responsive Breakpoints ────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .agp-grid-inner {
    grid-template-columns: repeat(var(--agp-columns-tablet, 2), 1fr) !important;
  }
}

@media (max-width: 600px) {
  .agp-grid-inner {
    grid-template-columns: repeat(var(--agp-columns-mobile, 1), 1fr) !important;
  }
}

/* ── Card ──────────────────────────────────────────────────────────────────── */

.agp-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ── Card Link (full-card click) ───────────────────────────────────────────── */

.ag-posts-grid.agp-link-card .agp-card-link {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  color: inherit !important;
  text-decoration: none !important;
}

.ag-posts-grid.agp-link-card .agp-card-link:hover {
  text-decoration: none !important;
}

/* ── Image ─────────────────────────────────────────────────────────────────── */

.agp-card-image {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.agp-card-image a {
  display: block !important;
}

/* Aspect ratios */
.agp-ratio-1-1  { padding-top: 100% !important; }
.agp-ratio-4-3  { padding-top: 75% !important; }
.agp-ratio-16-9 { padding-top: 56.25% !important; }
.agp-ratio-3-2  { padding-top: 66.67% !important; }
.agp-ratio-2-3  { padding-top: 150% !important; }
.agp-ratio-auto { padding-top: 0 !important; }

.agp-ratio-1-1 .agp-thumb,
.agp-ratio-4-3 .agp-thumb,
.agp-ratio-16-9 .agp-thumb,
.agp-ratio-3-2 .agp-thumb,
.agp-ratio-2-3 .agp-thumb {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.agp-ratio-auto .agp-thumb {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
}

/* ── Card Body ─────────────────────────────────────────────────────────────── */

.agp-card-body {
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  gap: 8px !important;
}

/* ── Categories ────────────────────────────────────────────────────────────── */

.agp-card-cats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 0 4px !important;
}

.agp-cat-label {
  display: inline-block !important;
  padding: 2px 10px !important;
  background: var(--agp-accent, #0073aa) !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  line-height: 1.6 !important;
  border: none !important;
  box-shadow: none !important;
}

.agp-cat-label:hover {
  background: color-mix(in srgb, var(--agp-accent, #0073aa) 80%, #000) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ── Title ─────────────────────────────────────────────────────────────────── */

.agp-card-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #1a1a1a !important;
  border: none !important;
  background: none !important;
}

.agp-card-title a {
  color: inherit !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.agp-card-title a:hover {
  color: var(--agp-accent, #0073aa) !important;
  text-decoration: none !important;
}

/* ── Meta ──────────────────────────────────────────────────────────────────── */

.agp-card-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  font-size: 0.8rem !important;
  color: #777 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.agp-meta-date,
.agp-meta-author {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.agp-card-meta a {
  color: #777 !important;
  text-decoration: none !important;
}

.agp-card-meta a:hover {
  color: var(--agp-accent, #0073aa) !important;
  text-decoration: none !important;
}

/* ── Excerpt ───────────────────────────────────────────────────────────────── */

.agp-card-excerpt {
  font-size: 0.9rem !important;
  line-height: 1.65 !important;
  color: #555 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
}

.agp-card-excerpt p {
  margin: 0 !important;
}

/* ── Read More ─────────────────────────────────────────────────────────────── */

.agp-read-more {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 4px !important;
  padding: 8px 20px !important;
  background: var(--agp-accent, #0073aa) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
  align-self: flex-start !important;
  transition: background 0.2s ease, opacity 0.2s ease !important;
}

.agp-read-more:hover {
  background: color-mix(in srgb, var(--agp-accent, #0073aa) 80%, #000) !important;
  color: #fff !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CARD STYLES
   ══════════════════════════════════════════════════════════════════════════════ */

/* Default */
.ag-posts-grid.agp-style-default .agp-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  border: 1px solid #eee !important;
}

/* Minimal */
.ag-posts-grid.agp-style-minimal .agp-card {
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.ag-posts-grid.agp-style-minimal .agp-card-body {
  padding: 14px 0 !important;
}

/* Bordered */
.ag-posts-grid.agp-style-bordered .agp-card {
  box-shadow: none !important;
  border: 2px solid var(--agp-accent, #0073aa) !important;
}

/* Shadow */
.ag-posts-grid.agp-style-shadow .agp-card {
  border: none !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.14) !important;
}

/* Overlay */
.ag-posts-grid.agp-style-overlay .agp-card {
  border: none !important;
  box-shadow: none !important;
  background: #222 !important;
}

.ag-posts-grid.agp-style-overlay .agp-card-image {
  padding-top: 75% !important;
}

.ag-posts-grid.agp-style-overlay .agp-card-body {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%) !important;
  color: #fff !important;
  padding: 24px 16px 16px !important;
  z-index: 2 !important;
}

.ag-posts-grid.agp-style-overlay .agp-card-title,
.ag-posts-grid.agp-style-overlay .agp-card-title a {
  color: #fff !important;
}

.ag-posts-grid.agp-style-overlay .agp-card-excerpt,
.ag-posts-grid.agp-style-overlay .agp-card-meta {
  color: rgba(255,255,255,0.8) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HOVER EFFECTS
   ══════════════════════════════════════════════════════════════════════════════ */

/* Lift */
.ag-posts-grid.agp-hover-lift .agp-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.16) !important;
}

/* Image Zoom */
.ag-posts-grid.agp-hover-zoom .agp-card .agp-thumb {
  transition: transform 0.4s ease !important;
}

.ag-posts-grid.agp-hover-zoom .agp-card:hover .agp-thumb {
  transform: scale(1.07) !important;
}

/* Fade Darken */
.ag-posts-grid.agp-hover-fade .agp-card-image::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0) !important;
  transition: background 0.3s ease !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.ag-posts-grid.agp-hover-fade .agp-card:hover .agp-card-image::after {
  background: rgba(0,0,0,0.25) !important;
}

/* Accent Border */
.ag-posts-grid.agp-hover-border .agp-card {
  border-top: 3px solid transparent !important;
  transition: border-color 0.25s ease, transform 0.25s ease !important;
}

.ag-posts-grid.agp-hover-border .agp-card:hover {
  border-top-color: var(--agp-accent, #0073aa) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════════════════════ */

/* Numbered */
.agp-pagination {
  margin-top: 32px !important;
  display: flex !important;
  justify-content: center !important;
}

.agp-pagination ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.agp-pagination ul li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.agp-pagination ul li a,
.agp-pagination ul li span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 10px !important;
  background: #f5f5f5 !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  font-size: 0.875rem !important;
  color: #333 !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s !important;
}

.agp-pagination ul li a:hover {
  background: var(--agp-accent, #0073aa) !important;
  border-color: var(--agp-accent, #0073aa) !important;
  color: #fff !important;
}

.agp-pagination ul li span.current {
  background: var(--agp-accent, #0073aa) !important;
  border-color: var(--agp-accent, #0073aa) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* Load More */
.agp-load-more-wrap {
  text-align: center !important;
  margin-top: 32px !important;
}

.agp-load-more {
  display: inline-block !important;
  padding: 12px 36px !important;
  background: var(--agp-accent, #0073aa) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.15s !important;
  box-shadow: none !important;
  outline: none !important;
}

.agp-load-more:hover {
  background: color-mix(in srgb, var(--agp-accent, #0073aa) 80%, #000) !important;
  color: #fff !important;
}

.agp-load-more:active {
  transform: scale(0.98) !important;
}

.agp-load-more:disabled,
.agp-load-more.is-loading {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* ── No Posts ───────────────────────────────────────────────────────────────── */

.agp-no-posts {
  color: #888 !important;
  font-style: italic !important;
  padding: 20px 0 !important;
  margin: 0 !important;
}