:root{}

.wpes-pg-wrapper{
  font-family: var(--wpes-pg-font-family, inherit);
}

.wpes-pg-header{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.wpes-pg-header-title{margin:0;font-size:18px;line-height:1.2}

.wpes-pg-filters{display:flex;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.wpes-pg-filter-label{font-size:14px;color:var(--wpes-pg-meta-color,#6b7280)}
.wpes-pg-filter-select{min-width:180px;padding:8px 10px;border:1px solid var(--wpes-pg-card-border-color,#e5e7eb);border-radius:10px;background:#fff}
.wpes-pg-filter-btn{padding:8px 12px;border-radius:10px;border:1px solid var(--wpes-pg-card-border-color,#e5e7eb);background:#fff}

.wpes-pg-grid{
  --wpes-pg-cols: 3;
  display:grid;
  gap: var(--wpes-pg-gap, 18px);
  grid-template-columns: repeat(var(--wpes-pg-cols), minmax(0,1fr));
}
.wpes-pg-grid[data-cols="1"]{--wpes-pg-cols:1}
.wpes-pg-grid[data-cols="2"]{--wpes-pg-cols:2}
.wpes-pg-grid[data-cols="3"]{--wpes-pg-cols:3}
.wpes-pg-grid[data-cols="4"]{--wpes-pg-cols:4}
.wpes-pg-grid[data-cols="5"]{--wpes-pg-cols:5}
.wpes-pg-grid[data-cols="6"]{--wpes-pg-cols:6}
.wpes-pg-grid[data-cols="7"]{--wpes-pg-cols:7}
.wpes-pg-grid[data-cols="8"]{--wpes-pg-cols:8}
.wpes-pg-grid[data-cols="9"]{--wpes-pg-cols:9}
.wpes-pg-grid[data-cols="10"]{--wpes-pg-cols:10}
.wpes-pg-grid[data-cols="11"]{--wpes-pg-cols:11}
.wpes-pg-grid[data-cols="12"]{--wpes-pg-cols:12}

@media (max-width: 989px){
  .wpes-pg-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 620px){
  .wpes-pg-grid{grid-template-columns: 1fr;}
}

.wpes-pg-card{
  background: var(--wpes-pg-card-bg, #fff);
  border: var(--wpes-pg-card-border-width, 1px) solid var(--wpes-pg-card-border-color, #e5e7eb);
  border-radius: var(--wpes-pg-card-radius, 14px);
  box-shadow: var(--wpes-pg-card-shadow, none);
  overflow:hidden;
}

.wpes-pg-cardlink{display:block;color:inherit;text-decoration:none}
.wpes-pg-media{position:relative;display:block;aspect-ratio:var(--wpes-pg-ar, 16 / 9);overflow:hidden;background:#f3f4f6}
.wpes-pg-thumb{width:100%;height:100%;display:block;object-fit:cover}
.wpes-pg-thumb--placeholder{aspect-ratio: 16/9;background:#f3f4f6}
.wpes-pg-badge{
  position:absolute;left:12px;top:12px;z-index:5;
  display:inline-flex;align-items:center;
  background: var(--wpes-pg-badge-bg,#111827);
  color: var(--wpes-pg-badge-color,#fff);
  border: var(--wpes-pg-badge-border-width,0px) solid var(--wpes-pg-badge-border-color,#111827);
  border-radius: var(--wpes-pg-badge-radius, 999px);
  padding: var(--wpes-pg-badge-padding, 6px 10px);
  font-size: var(--wpes-pg-badge-font-size, 13px);
  font-weight: var(--wpes-pg-badge-font-weight, 600);
  line-height:1;
}

.wpes-pg-body{padding: var(--wpes-pg-card-padding, 14px)}
.wpes-pg-title{margin:0 0 8px;color:var(--wpes-pg-title-color,#111827);font-size:var(--wpes-pg-title-font-size,18px);line-height:1.25}
.wpes-pg-meta{margin:0 0 10px;color:var(--wpes-pg-meta-color,#6b7280);font-size:var(--wpes-pg-meta-font-size,13px)}
.wpes-pg-meta a{color:inherit;text-decoration:none}
.wpes-pg-meta a:hover{text-decoration:underline}
.wpes-pg-excerpt{color:var(--wpes-pg-text-color,#374151);font-size:var(--wpes-pg-text-font-size,14px);line-height:1.5}

.wpes-pg-empty{padding:14px;border:1px dashed #d1d5db;border-radius:12px;color:#6b7280}

.wpes-pg-badge-block{padding: var(--wpes-pg-card-padding, 14px); padding-bottom: 0;}
.wpes-pg-media-wrap{position:relative;display:block;}
.wpes-pg-media-wrap > .wpes-pg-badge{position:absolute;}

/* Overlay layouts */
.wpes-pg-card--overlay .wpes-pg-media{position:relative}

.wpes-pg-card--overlay .wpes-pg-media{height:auto}

.wpes-pg-card--overlay .wpes-pg-thumb{height:100%;object-fit:cover}
.wpes-pg-overlay{position:absolute;inset:0;background:var(--wpes-pg-overlay-bg,rgba(0,0,0,0.45));}
.wpes-pg-card--overlay .wpes-pg-overlay{background:var(--wpes-pg-overlay-gradient,linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.65)))}
.wpes-pg-card--overlay .wpes-pg-body{position:absolute;left:0;right:0;bottom:0;padding:14px;color:var(--wpes-pg-overlay-text,#fff)}
.wpes-pg-card--overlay .wpes-pg-title,
.wpes-pg-card--overlay .wpes-pg-meta,
.wpes-pg-card--overlay .wpes-pg-excerpt{color:var(--wpes-pg-overlay-text,#fff)}
.wpes-pg-card--overlay{position:relative;min-height:220px}

/*
  Mosaic grids use fixed grid-auto-rows. A global min-height on overlay cards
  can force the card to overflow its grid area (and visually overlap).
  For mosaic/overlay layouts we let the grid define the height.
*/
.wpes-pg-layout-overlay_8_6 .wpes-pg-card--overlay,
.wpes-pg-layout-overlay_8_5 .wpes-pg-card--overlay,
.wpes-pg-layout-overlay_7_5 .wpes-pg-card--overlay,
.wpes-pg-layout-overlay_4_5 .wpes-pg-card--overlay,
.wpes-pg-layout-overlay_4_4 .wpes-pg-card--overlay,
.wpes-pg-layout-overlay_3_5 .wpes-pg-card--overlay{
  min-height: 0;
  height: auto;
}

/* Mosaic patterns (best-effort approximations) */
.wpes-pg-layout-overlay_8_6 .wpes-pg-grid{grid-auto-rows: var(--wpes-pg-mosaic-row, 8px)}
.wpes-pg-layout-overlay_8_6 .wpes-pg-card:nth-child(1){grid-column: span 2; grid-row: span 2;}
.wpes-pg-layout-overlay_8_6 .wpes-pg-card:nth-child(2){grid-column: span 2;}

.wpes-pg-layout-overlay_8_5 .wpes-pg-grid{grid-auto-rows: var(--wpes-pg-mosaic-row, 8px)}
.wpes-pg-layout-overlay_8_5 .wpes-pg-card:nth-child(1){grid-column: span 2; grid-row: span 2;}

.wpes-pg-layout-overlay_7_5 .wpes-pg-grid{grid-auto-rows: var(--wpes-pg-mosaic-row, 8px)}
.wpes-pg-layout-overlay_7_5 .wpes-pg-card:nth-child(1){grid-column: span 2; grid-row: span 2;}
.wpes-pg-layout-overlay_7_5 .wpes-pg-card:nth-child(2){grid-row: span 2;}

.wpes-pg-layout-overlay_4_5 .wpes-pg-grid{grid-auto-rows: var(--wpes-pg-mosaic-row, 8px)}
.wpes-pg-layout-overlay_4_5 .wpes-pg-card:nth-child(1){grid-column: span 2;}

.wpes-pg-layout-overlay_4_4 .wpes-pg-grid{grid-auto-rows: var(--wpes-pg-mosaic-row, 8px)}
.wpes-pg-layout-overlay_4_4 .wpes-pg-card:nth-child(1){grid-column: span 2; grid-row: span 2;}

.wpes-pg-layout-overlay_3_5 .wpes-pg-grid{grid-auto-rows: var(--wpes-pg-mosaic-row, 8px)}
.wpes-pg-layout-overlay_3_5 .wpes-pg-card:nth-child(1){grid-row: span 2;}

/* Scrollable layouts */
.wpes-pg-scroll{display:flex;gap:var(--wpes-pg-gap,18px);overflow:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.wpes-pg-scroll .wpes-pg-card--scrollitem{flex:0 0 320px;scroll-snap-align:start}
@media (max-width:620px){
  .wpes-pg-scroll .wpes-pg-card--scrollitem{flex-basis:85%}
}

/* Masonry (Pinterest) */
.wpes-pg-masonry{column-count:3;column-gap:var(--wpes-pg-gap,18px)}
.wpes-pg-masonry .wpes-pg-card--masonryitem{break-inside:avoid;margin:0 0 var(--wpes-pg-gap,18px)}
.wpes-pg-layout-pinterest1 .wpes-pg-body{display:none}
@media (max-width:989px){.wpes-pg-masonry{column-count:2}}
@media (max-width:620px){.wpes-pg-masonry{column-count:1}}

/* BigPost2 */
.wpes-pg-bigpost2{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--wpes-pg-gap,18px)}
.wpes-pg-layout-bigpost2 .wpes-pg-bigpost2 > article:first-child{grid-row:1 / span 2}
@media (max-width:989px){.wpes-pg-bigpost2{grid-template-columns:1fr}}

/* Collapsible */
.wpes-pg-collapsible{display:block}
.wpes-pg-collapse{border:1px solid var(--wpes-pg-card-border-color,#e5e7eb);border-radius:12px;padding:10px 12px;background:#fff}
.wpes-pg-collapse + .wpes-pg-collapse{margin-top:10px}
.wpes-pg-collapse-summary{cursor:pointer;font-weight:600;color:var(--wpes-pg-title-color,#111827)}
.wpes-pg-collapse-body{margin-top:10px}
.wpes-pg-collapse-link{display:inline-block;margin-bottom:8px;text-decoration:none}


/* Pagination */
.wpes-pg-pagination{margin-top:18px}
.wpes-pg-pagination ul{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.wpes-pg-pagination--left ul{justify-content:flex-start}
.wpes-pg-pagination--center ul{justify-content:center}
.wpes-pg-pagination--right ul{justify-content:flex-end}
.wpes-pg-pagination li{margin:0;padding:0}
.wpes-pg-pagination a,
.wpes-pg-pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;
  padding:0 12px;
  border:1px solid var(--wpes-pg-card-border-color,#e5e7eb);
  border-radius:10px;
  text-decoration:none;
  color: var(--wpes-pg-title-color,#111827);
  background:#fff;
}
.wpes-pg-pagination .current{
  background: var(--wpes-pg-badge-bg,#111827);
  color: var(--wpes-pg-badge-color,#fff);
  border-color: var(--wpes-pg-badge-bg,#111827);
}
.wpes-pg-pagination a:hover{filter:brightness(0.98)}


/* Mosaic tile specific ratios */
.wpes-pg-mosaic-large .wpes-pg-media{aspect-ratio:var(--wpes-pg-ar-large, var(--wpes-pg-ar, 16 / 9));}
.wpes-pg-mosaic-small .wpes-pg-media{aspect-ratio:var(--wpes-pg-ar-small, var(--wpes-pg-ar, 16 / 9));}