/* templates/blocks/posts-grid/style.css — v15 (HEADER ALIGN FIX + FULL SYNC)
 * - FIX: Header title align lệch ngoài frontend do CSS global `.pf-title` (display:flex / justify-content)
 * - Add: Scoped reset for .pf-pgrid-head .pf-title to follow wrapper text-align
 * - Keep: v14 full features (Filter / Meta / Excerpt / Pagination / Builder preview)
 */

/* WRAPPER */
.pf-pgrid {
  width: var(--pf-container-w, 100%);
  margin: 0 auto var(--pf-bottom-space, 36px);
  padding: var(--pf-pad, 0);
  container-type: inline-size;
}
.pf-pgrid.is-loading .pf-pgrid-grid {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity .3s ease;
}

/* =========================================================
   HEADER FIX (IMPORTANT)
   - prevent global `.pf-title` rules from breaking align
========================================================= */
.pf-pgrid .pf-pgrid-head{
  /* allow your inline styles to win, but ensure block layout */
  display: block;
}

/* If some global css sets `.pf-title{display:flex...}`, reset it here */
.pf-pgrid .pf-pgrid-head > .pf-title,
.pf-pgrid .pf-pgrid-head .pf-title{
  display: block !important;
  width: 100%;
  max-width: 100%;
  text-align: inherit !important; /* follow wrapper text-align from render.php */
  justify-content: initial !important;
  align-items: initial !important;
}

/* Link inside title must not become flex item weirdness */
.pf-pgrid .pf-pgrid-head .pf-title a{
  color: inherit;
  text-decoration: none;
}

/* Decorative line element (safe) */
.pf-pgrid .pf-pgrid-head .pf-line{
  display: block;
}

/* Block header & Filter wrapper */
.pf-pgrid-header-filter-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 16px;
}

/* Inline mode: header + filter sit on one row */
.pf-pgrid-header-filter-wrap.is-inline .pf-pgrid-head {
  margin-bottom: 0;
  flex-grow: 1;
  min-width: 0;
}
.pf-pgrid-header-filter-wrap.is-inline .pf-filter {
  margin-bottom: 0;
  justify-content: var(--pf-head-filter-align, flex-start);
}

/* Keep for legacy (inline style already sets margin in render.php) */
.pf-pgrid-head {
  margin: var(--h-margin, 0 0 16px 0);
}

/* FILTER UI */
.pf-filter{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  flex-wrap:wrap;
  justify-content: var(--pf-head-filter-align, flex-start);
}
.pf-filter .pf-dropdown{
  min-width:180px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #e5e7eb;
}
.pf-filter .pf-pill, .pf-filter .pf-tab{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
  user-select:none;
}
.pf-filter .pf-tab{
  border-radius:10px
}
.pf-filter .is-active{
  background:#111827;
  color:#fff;
  border-color:#111827;
}

/* GRID */
.pf-pgrid-grid{
  display:grid;
  grid-template-columns: repeat(var(--pf-cols-sm,1), minmax(0,1fr));
  gap: var(--pf-gap,20px);
  transition: opacity .2s ease;
}

/* DIVIDER styles */
.pf-pgrid.div-solid .pf-pcard:not(:last-child){ border-bottom:1px solid var(--pf-div-color,#e5e7eb); }
.pf-pgrid.div-dotted .pf-pcard:not(:last-child){ border-bottom:1px dotted var(--pf-div-color,#e5e7eb); }
.pf-pgrid.div-dashed .pf-pcard:not(:last-child){ border-bottom:1px dashed var(--pf-div-color,#e5e7eb); }

/* CARD */
.pf-pcard{
  background: var(--pf-card-bg, #fff);
  border-style: var(--pf-b-style, solid);
  border-width: var(--pf-b-width, 0px);
  border-color: var(--pf-b-color, transparent);
  border-radius: var(--pf-b-radius, 0px);
  box-shadow: var(--pf-shadow, none);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* THUMB WRAP + overlay */
.pf-thumb-wrap{
  position:relative;
}
.pf-pcard .pf-thumb{
  position:relative;
  display:block;
  background:#f3f4f6;
  overflow:hidden;
  width:var(--pf-thumb-w,100%);
  flex-shrink: 0;
}
.pf-pcard .pf-thumb::before{
  content:"";
  display:block;
  width:100%;
  padding-top:var(--pf-ratio,56.25%);
}
.pf-pcard .pf-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: 50% var(--pf-obj-y, 50%);
  transition: transform .25s ease, box-shadow .25s ease;
  border-radius: var(--pf-img-radius, 0);
}
.pf-pcard:hover .pf-thumb img[data-hover="zoom"]{ transform: scale(1.05); }
.pf-pcard:hover .pf-thumb img[data-hover="lift"]{ transform: translateY(-3px); }
.pf-pcard:hover .pf-thumb img[data-hover="shadow"]{ box-shadow: 0 10px 20px rgba(0,0,0,.15); }

/* position left/right/cover */
.pf-pos-left, .pf-pos-right{ display:flex; flex-direction: row; gap:12px; }
.pf-pos-left .pf-thumb, .pf-pos-right .pf-thumb{ flex:0 0 auto; width:var(--pf-thumb-w, 40%); }
.pf-pos-left .pf-body, .pf-pos-right .pf-body{ flex:1 1 auto; }
.pf-pos-right{ flex-direction: row-reverse; }

.pf-pos-cover{ position:relative; }
.pf-pos-cover .pf-thumb::before{ padding-top:var(--pf-ratio,56.25%); }
.pf-pos-cover .pf-body{
  position:absolute; inset:auto 0 0 0; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
}

/* CATEGORY BADGE */
.pf-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin: var(--pf-cat-space, 0px 6px 6px 0px);
  padding: var(--pf-cat-pad, 4px 8px);
  border-radius: var(--pf-cat-br, 999px);
  border-width: var(--pf-cat-bw, 0);
  border-style: solid;
  border-color: var(--pf-cat-bc, transparent);
  font-size: var(--pf-badge-fs, .75rem);
  font-weight: var(--pf-badge-fw, 600);
  line-height: 1;
  background-color:var(--pf-badge-bg, #eef2ff); color:var(--pf-badge-text, #3730a3);
}
.pf-badge a{
  color:inherit;
  text-decoration:none;
}
.pf-badge .pf-cat-label {
  opacity: 0.8;
  margin-right: 4px;
}

.pf-cat-over{
  position:absolute;
  top: 10px;
  z-index: 2;
  left: var(--pf-cat-over-left, 10px);
  right: var(--pf-cat-over-right, auto);
  transform: var(--pf-cat-over-transform, none);
}

.pf-cat-row{
  display:flex;
  justify-content: var(--pf-cat-align, flex-start);
}

/* BODY */
.pf-pcard .pf-body{
  padding:12px 14px 14px;
  display:flex;
  flex-direction:column;
  flex-grow: 1;
}
.pf-body-inner{
  margin: 0 0 auto 0; /* Pushes excerpt and button to the bottom */
}

/* TITLE */
.pf-pcard .pf-title{
  margin: var(--pf-title-space, 0);
  font-size: var(--pf-title-fs, 1rem);
  font-weight: var(--pf-title-fw, 700);
  line-height: var(--pf-title-lh, 1.35);
  text-transform: var(--pf-title-tt, none);
  text-align: var(--pf-title-align, left);
  padding: var(--pf-title-pad, 0);
  background-color: var(--pf-title-bg, transparent);
  border-width: var(--pf-title-bw, 0);
  border-style: solid;
  border-color: var(--pf-title-bc, transparent);
  border-radius: var(--pf-title-br, 0);
}
.pf-pcard .pf-title a{
  text-decoration:none;
  color:var(--pf-title-color, inherit);
}
.pf-pcard .pf-title a:hover{
  opacity: 0.8;
}

/* META line */
.pf-meta{
  display:flex;
  flex-wrap:wrap;
  align-items: var(--pf-meta-v, center);
  gap: var(--pf-meta-gap, 10px);
  justify-content: var(--pf-meta-h, flex-start);
  font-size: var(--pf-meta-fs, 14px);
  font-weight: var(--pf-meta-fw, 400);
  color:var(--pf-meta-color, #6b7280);
  font-style: var(--pf-meta-fstyle, normal);
  text-transform: var(--pf-meta-tt, none);
  line-height: var(--pf-meta-lh, 1.4);
  margin: var(--pf-meta-box-m, 0);
  padding: var(--pf-meta-box-pad, 13px 0 0 0);
  background: var(--pf-meta-box-bg, transparent);
  border-radius: var(--pf-meta-box-br, 0);
  border-width: var(--pf-meta-box-bw, 0);
  border-style: solid;
  border-color: var(--pf-meta-box-bc, transparent);
}
.pf-meta > span{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pf-meta svg{
  width: 1.1em;
  height: 1.1em;
  opacity: 0.7;
}

.pf-author{
  gap: var(--pf-au-gap, 6px) !important;
}
.pf-author img{
  width:var(--pf-au-size, 20px);
  height:var(--pf-au-size, 20px);
  border-radius:var(--pf-au-radius, 50%);
  object-fit:cover;
}

/* STARS */
.pf-stars{
  display:inline-flex;
  gap: var(--pf-stars-gap, 0px);
  margin-left: var(--pf-stars-space, 0px);
}
.pf-stars svg{
  width:16px;
  height:16px;
}

/* EXCERPT */
.pf-excerpt{
  margin: var(--pf-ex-space, 20px 0 0 0);
  column-count: var(--pf-ex-cols, 1);
  column-gap: var(--pf-ex-gap, 48px);
  text-align: var(--pf-ex-align, left);
  font-size: var(--pf-ex-fs, 14px);
  font-weight: var(--pf-ex-fw, 400);
  line-height: var(--pf-ex-lh, 1.5);
  padding: var(--pf-ex-pad, 0);
  background-color: var(--pf-ex-bg, transparent);
  color: var(--pf-ex-color, #374151);
  border-width: var(--pf-ex-bw, 0);
  border-style: solid;
  border-color: var(--pf-ex-bc, transparent);
  border-radius: var(--pf-ex-br, 0);
}

/* BUTTON */
.pf-readmore{
  margin: var(--pf-btn-space, 20px 0 0 0);
  align-self: var(--pf-btn-align, flex-start);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: var(--pf-btn-pad, 10px 15px);
  border-radius: var(--pf-btn-radius, 8px);
  text-decoration:none;
  font-weight: var(--pf-btn-fw, 600);
  font-size: var(--pf-btn-fs, 14px);
  text-transform: var(--pf-btn-tt, none);
  background-color: var(--pf-readmore-bg, transparent);
  color: var(--pf-readmore-color, inherit);
  border: var(--pf-btn-bw, 0) solid rgba(0,0,0,.06);
}

/* PAGINATION */
.pf-pgrid-pagi{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:20px;
  flex-wrap:wrap;
}
.pf-pgrid-pagi button{
  display:inline-flex;
  min-width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--pf-pagi-bc, #e5e7eb);
  background:var(--pf-pagi-bg, #fff);
  color: var(--pf-pagi-color, inherit);
  text-decoration:none;
  cursor:pointer;
  transition: opacity .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pf-pgrid-pagi button:not(:disabled):hover {
  opacity: 0.8;
}
.pf-pgrid-pagi button.is-active{
  background:var(--pf-pagi-bg-active, #111827);
  color:var(--pf-pagi-color-active, #fff);
  border-color:var(--pf-pagi-bc-active, #111827);
}
.pf-pgrid-pagi button:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}
.pf-pgrid-pagi .pf-page-indicator {
  padding: 0 8px;
  color: var(--pf-pagi-color, #6b7280);
}

.pf-pgrid-load{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top: 20px;
}
.pf-pgrid-load button{
  padding:10px 16px;
  border-radius:10px;
  border:1px solid var(--pf-loadmore-bc, #e5e7eb);
  background:var(--pf-loadmore-bg, #fff);
  color: var(--pf-loadmore-color, inherit);
  cursor:pointer;
  transition: opacity .2s ease;
}
.pf-pgrid-load.is-button-mode button{
  display: inline-flex;
}
.pf-pgrid-load:not(.is-button-mode) button{
  display: none;
}
.pf-pgrid-load button:hover {
  opacity: 0.8;
}
.pf-pgrid-load button:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

/* CONTAINER QUERIES */
@container (min-width: 640px){
  .pf-pgrid-grid{ grid-template-columns: repeat(var(--pf-cols-md,2), minmax(0,1fr)); }
}
@container (min-width: 1024px){
  .pf-pgrid-grid{ grid-template-columns: repeat(var(--pf-cols-lg,3), minmax(0,1fr)); }
}
@container (min-width: 1280px){
  .pf-pgrid-grid{ grid-template-columns: repeat(var(--pf-cols-xl,4), minmax(0,1fr)); }
}

/* VIEWPORT MQ fallback (older browsers) */
@media (max-width: 639.98px){
  .pf-pgrid:not(:has(style)) .pf-pgrid-grid{ grid-template-columns: repeat(var(--pf-cols-sm,1), minmax(0,1fr)); }
}
@media (min-width: 640px) and (max-width: 1023.98px){
  .pf-pgrid:not(:has(style)) .pf-pgrid-grid{ grid-template-columns: repeat(var(--pf-cols-md,2), minmax(0,1fr)); }
}
@media (min-width: 1024px) and (max-width: 1279.98px){
  .pf-pgrid:not(:has(style)) .pf-pgrid-grid{ grid-template-columns: repeat(var(--pf-cols-lg,3), minmax(0,1fr)); }
}
@media (min-width: 1280px){
  .pf-pgrid:not(:has(style)) .pf-pgrid-grid{ grid-template-columns: repeat(var(--pf-cols-xl,4), minmax(0,1fr)); }
}

/* Live Preview inside builder */
.b-block-preview .pf-pgrid-grid{
  padding: 10px;
}
.b-block-preview .pf-title a{
  color: var(--pf-title-color, #f1f5f9);
}
.b-block-preview .pf-readmore{
  color: var(--pf-readmore-color);
  background-color: var(--pf-readmore-bg);
}