/* ==================================================== */
/*  12D – POSTS GRID                                    */
/*  Portable card grid (no EAEL selectors)              */
/* ==================================================== */

.d12-posts-grid {
  --d12-pg-cols: 3;
  --d12-pg-gap: 1.5rem;
  --d12-pg-auto-min: 280px;
  --d12-pg-justify: flex-start; /* default alignment for flex mode */
  /* image ratio token: 4-3 | 16-9 | 1-1 */
  --d12-pg-img-ratio: 4-3;
  width: 100%;
}

/* Grid */
.d12-posts-grid .d12-pg-grid {
  display: grid;
  column-gap: var(--d12-pg-col-gap, var(--d12-pg-gap, 1.5rem));
  row-gap: var(--d12-pg-row-gap, var(--d12-pg-gap, 1.5rem));
  /* Fixed mode (default) */
  grid-template-columns: repeat(var(--d12-pg-cols), minmax(0, 1fr));
}

/* Optional: Flex layout so last row can be centered/right */
.d12-posts-grid[data-layout="flex"] .d12-pg-grid{
  display: flex;
  flex-wrap: wrap;

  /* Use gap for flex (more reliable than row/column-gap) */
  gap: var(--d12-pg-row-gap, var(--d12-pg-gap, 1.5rem))
       var(--d12-pg-col-gap, var(--d12-pg-gap, 1.5rem));

  /* Alignment controlled via CSS variable from Elementor */
  justify-content: var(--d12-pg-justify, flex-start);

  /* THIS keeps cards equal height per row */
  align-items: stretch;
}

/* In flex mode, do NOT force 100% height on cards */
.d12-posts-grid[data-layout="flex"] .d12-pg-card{
  height: auto;
}

/* Fixed columns in flex mode */
.d12-posts-grid[data-layout="flex"][data-cols-mode="fixed"] .d12-pg-card{
  flex: 0 0 calc(
    (100% - ((var(--d12-pg-cols) - 1) * var(--d12-pg-col-gap, var(--d12-pg-gap, 1.5rem))))
    / var(--d12-pg-cols)
  );
  max-width: calc(
    (100% - ((var(--d12-pg-cols) - 1) * var(--d12-pg-col-gap, var(--d12-pg-gap, 1.5rem))))
    / var(--d12-pg-cols)
  );
}

/* Auto columns in flex mode */
.d12-posts-grid[data-layout="flex"][data-cols-mode="auto"] .d12-pg-card{
  flex: 1 1 var(--d12-pg-auto-min, 280px);
  max-width: 100%;
}


/* Auto mode (Elementor-controlled) */
.d12-posts-grid[data-cols-mode="auto"] .d12-pg-grid {
  grid-template-columns: repeat(auto-fit, minmax(var(--d12-pg-auto-min), 1fr));
}

/*
  Safety fallback:
  If something ever injects `--d12-pg-cols:auto` inline,
  repeat(auto, …) becomes invalid, so we force auto-fit.
*/
.d12-posts-grid[style*="--d12-pg-cols:auto"] .d12-pg-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Card */
.d12-posts-grid .d12-pg-card {
  overflow: hidden;
  height: 100%;
  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.d12-posts-grid .d12-pg-card:hover {
  transform: translateY(-6px) scale(1.03);
}

/* Thumbnail ratio box */
.d12-posts-grid .d12-pg-thumb {
  position: relative;
  width: 100%;
  overflow: hidden;

  /* Styling hooks */
  background: var(--d12-pg-thumb-bg, transparent);
  padding: var(--d12-pg-thumb-pad-top, 0) var(--d12-pg-thumb-pad-right, 0) var(--d12-pg-thumb-pad-bottom, 0) var(--d12-pg-thumb-pad-left, 0);
  box-sizing: border-box;
}

/* Ratio handling */
.d12-posts-grid[style*="--d12-pg-img-ratio:4-3"] .d12-pg-thumb {
  padding-bottom: calc(75% + var(--d12-pg-thumb-pad-top, 0) + var(--d12-pg-thumb-pad-bottom, 0));
}
.d12-posts-grid[style*="--d12-pg-img-ratio:16-9"] .d12-pg-thumb {
  padding-bottom: calc(56.25% + var(--d12-pg-thumb-pad-top, 0) + var(--d12-pg-thumb-pad-bottom, 0));
}
.d12-posts-grid[style*="--d12-pg-img-ratio:1-1"] .d12-pg-thumb {
  padding-bottom: calc(100% + var(--d12-pg-thumb-pad-top, 0) + var(--d12-pg-thumb-pad-bottom, 0));
}

.d12-posts-grid .d12-pg-thumb__img {
  position: absolute;
  inset: 0;              /* force fill */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s ease;
}

/* Placeholder if no featured image */
.d12-posts-grid .d12-pg-thumb__placeholder {
  position: absolute;
  top: var(--d12-pg-thumb-pad-top, 0);
  right: var(--d12-pg-thumb-pad-right, 0);
  bottom: var(--d12-pg-thumb-pad-bottom, 0);
  left: var(--d12-pg-thumb-pad-left, 0);
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--d12-pg-thumb-img-radius, 0);
}

/* Body */
.d12-posts-grid .d12-pg-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Title */
.d12-posts-grid .d12-pg-title {
  display: -webkit-box;
  -webkit-line-clamp: var(--d12-pg-title-lines, 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Excerpt */
.d12-posts-grid .d12-pg-excerpt {
  /* wrapper exists so Elementor can target it if needed */
}

.d12-posts-grid .d12-pg-excerpt p {
  margin: 0;
}

/* Keep excerpt color stable even when the whole card is an <a> (global a:hover would otherwise recolor it) */
.d12-posts-grid .d12-pg-excerpt,
.d12-posts-grid .d12-pg-excerpt p {
  color: var(--d12-pg-excerpt-color, inherit);
}

.d12-posts-grid .d12-pg-card:hover .d12-pg-excerpt,
.d12-posts-grid .d12-pg-card:hover .d12-pg-excerpt p,
.d12-posts-grid .d12-pg-card:focus .d12-pg-excerpt,
.d12-posts-grid .d12-pg-card:focus .d12-pg-excerpt p,
.d12-posts-grid .d12-pg-card:focus-within .d12-pg-excerpt,
.d12-posts-grid .d12-pg-card:focus-within .d12-pg-excerpt p {
  color: var(--d12-pg-excerpt-color, inherit);
}

/* Read more */
.d12-posts-grid .d12-pg-readmore-wrap {
  margin-top: 0.25rem;
}

.d12-posts-grid .d12-pg-readmore {
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--bering-accent, #91b6c7);
}

.d12-posts-grid .d12-pg-readmore:hover {
  color: var(--bering-accent-hover, #437491);
}

/* Footer meta (structure + variable-driven spacing; colors/typography via Elementor) */
.d12-posts-grid .d12-pg-meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--d12-pg-meta-gap, 0.75rem);
  padding-top: var(--d12-pg-meta-pt, 0.75rem);
}

/* Meta wrapper – keeps divider + meta pinned to bottom */
.d12-posts-grid .d12-pg-meta-wrap {
  margin-top: auto;
  display: flex;
  flex-direction: column;
}

/* Divider above meta (styled via Elementor) */
.d12-posts-grid .d12-pg-divider {
  width: 100%;
  flex-shrink: 0;
}

/* Pagination (paginate_links list output) */
.d12-posts-grid .d12-pg-pagination {
  margin-top: var(--d12-pg-pagination-mt, 1.8rem);
  text-align: center;
}

.d12-posts-grid .d12-pg-pagination ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: var(--d12-pg-pagination-gap, 0.25rem);
  flex-wrap: wrap;
  justify-content: center;
}

.d12-posts-grid .d12-pg-pagination a,
.d12-posts-grid .d12-pg-pagination span {
  display: inline-block;
  padding: var(--d12-pg-pagination-pad-y, 0.35rem) var(--d12-pg-pagination-pad-x, 0.85rem);
  border-radius: var(--d12-pg-pagination-radius, 999px);
  border: var(--d12-pg-pagination-border-w, 1px) solid var(--d12-pg-pagination-border, transparent);
  font-size: var(--d12-pg-pagination-fs, 0.9rem);
  text-decoration: none;
  color: var(--d12-pg-pagination-color, inherit);
  background: var(--d12-pg-pagination-bg, transparent);
}

.d12-posts-grid .d12-pg-pagination a:hover {
  border-color: var(--d12-pg-pagination-hover-border, var(--bering-accent-hover, #437491));
  color: var(--d12-pg-pagination-hover-color, var(--bering-accent-hover, #437491));
  background: var(--d12-pg-pagination-hover-bg, transparent);
}

.d12-posts-grid .d12-pg-pagination .current {
  background-color: var(--d12-pg-pagination-current-bg, var(--bering-accent, #91b6c7));
  border-color: var(--d12-pg-pagination-current-border, var(--bering-accent, #91b6c7));
  color: var(--d12-pg-pagination-current-color, #ffffff);
}

/* Placeholder messages (shown when there is no content) */
.d12-posts-grid .d12-pg-placeholder {
  padding: 0.85rem 1rem;
  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.65);
  font-size: 0.95rem;
}

/* End of file posts-grid.css */