/* templates/blocks/slider-3/style.css
   Slider-3: 1/2 (LEFT hero/slider) + 1/2 (RIGHT: 1 + 2) - Equal Height Version
   SAFE DELIVERY PROTOCOL: Tất cả selector đều scope trong .pf-s3
*/

/* ===== Wrapper ===================================================== */
.pf-s3{
  width: var(--pf-container-w, 100%);
  margin: 0 auto var(--pf-bottom-space, 36px);
  padding: var(--pf-pad, 0);

  border-style: var(--pf-b-style, solid);
  border-width: var(--pf-b-width, 0);
  border-color: var(--pf-b-color, transparent);
  border-radius: var(--pf-b-radius, 12px);
  box-shadow: var(--pf-shadow, none);
  background-color: var(--pf-bg, transparent);

  /* container queries scope */
  container-type: inline-size;
}

/* ===== Header ====================================================== */
.pf-s3-head{
  display:flex; flex-direction:column; align-items:var(--pf-head-align,flex-start);
  position:relative;
  padding:var(--pf-head-pad, 0);
  margin:var(--pf-head-m, 0 0 16px 0);
}
.pf-s3-head .pf-title-wrap{
  display:flex; align-items:center; justify-content:var(--pf-head-align,flex-start);
  width:100%; background:var(--pf-head-bg, transparent); color:var(--pf-head-color, inherit);
  flex-wrap:wrap; gap:15px;
}
.pf-s3-head .pf-title{
  margin:0; line-height:1.25;
  font-size: var(--pf-head-fs, 1.5rem);
  font-weight: var(--pf-head-fw, 700);
  font-style: var(--pf-head-fstyle, normal);
  text-transform: var(--pf-head-tt, none);
}
.pf-s3-head .pf-title a{ color:inherit; text-decoration:none; }

/* Decorative line */
.pf-s3-head[data-line="1"][data-line-pos="bottom"]::after,
.pf-s3-head[data-line="1"][data-line-pos="top"]::before{
  content:""; display:block; position:relative;
  height:var(--pf-head-line-thickness, 3px);
  width:var(--pf-head-line-len, 40%);
  background:var(--pf-head-line-color, currentColor);
  border-radius:2px;
}
.pf-s3-head[data-line="1"][data-line-pos="bottom"]::after{ margin-top:var(--pf-head-line-offset,6px); }
.pf-s3-head[data-line="1"][data-line-pos="top"]::before{ margin-bottom:var(--pf-head-line-offset,6px); }

/* ===== Layout Grid chính ========================================== */
.pf-s3-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pf-gap, 20px);
}
.pf-s3-left, .pf-s3-right{ padding:0; margin:0; }

/* Reset card chrome */
.pf-s3 .pf-pcard{
  border-width:0 !important;
  border-color:transparent !important;
  border-radius:0 !important;
  background:transparent;
}
.pf-s3 .pf-body-inner{ width:100%; }

/* ================================================================== */
/* LEFT: HERO / SLIDER                                               */
/* ================================================================== */
.pf-s3-left,
.pf-s3-left .pf-pcard,
.pf-s3-left .pf-thumb {
  height:100%;
  position:relative;
}
.pf-s3-left .pf-thumb::before{
  content:""; display:block;
  /* Nếu ratio là auto (0%), padding-top sẽ là 0 */
  padding-top: var(--pf-left-thumb-ratio, 56.25%);
}
.pf-s3-left[data-thumb-ratio-auto="true"] .pf-thumb::before{ display:none; }

.pf-s3-left .pf-pcard .pf-thumb img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: var(--pf-thumb-fit, cover);
  object-position: center var(--pf-thumb-valign, 50%);
  border-radius: var(--pf-thumb-radius, 6px);
}
.pf-s3-left .pf-pcard .pf-body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:12px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%);
  color:#fff;
  border-radius: 0 0 var(--pf-thumb-radius, 6px) var(--pf-thumb-radius, 6px);
}
.pf-s3-left .pf-pcard .pf-title{ margin:0; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.pf-s3-left .pf-pcard .pf-meta{ color:#e5e7eb; }

/* ---- Tiny slider for LEFT (shared class name) ---- */
.pf-s3-left-slider .pf-sld-viewport{
  position:relative; overflow:hidden; border-radius: var(--pf-thumb-radius, 6px);
  height: 100%;
}
.pf-s3-left-slider .pf-sld-track{
  display:flex; width:100%; height: 100%;
  transition: transform var(--pf-sld-speed, 400ms) ease;
}
.pf-s3-left-slider .pf-sld-item{
  flex: 0 0 calc(100% / var(--pf-sld-vis, 1));
  height: 100%;
}
/* arrows */
.pf-s3-left-slider .pf-sld-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px; border:0;
  background: rgba(15,23,42,.55); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  z-index:5;
}
.pf-s3-left-slider .pf-sld-prev{ left:8px; }
.pf-s3-left-slider .pf-sld-next{ right:8px; }
.pf-s3-left-slider .pf-sld-arrow:hover{ background:rgba(15,23,42,.75); }
/* dots */
.pf-s3-left-slider .pf-sld-dots{
  position:absolute; left:0; right:0; bottom:8px; z-index:6;
  display:flex; gap:8px; justify-content:center; align-items:center;
}
.pf-s3-left-slider .pf-sld-dot{
  width:8px; height:8px; border-radius:999px; border:0;
  background: rgba(255,255,255,.6); cursor:pointer;
}
.pf-s3-left-slider .pf-sld-dot.is-active{ background:#fff; }

/* ================================================================== */
/* RIGHT: 1 + 2 (Equal Height)                                       */
/* ================================================================== */
.pf-s3-right-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr;
  gap: var(--pf-right-gap, var(--pf-gap, 15px));
  height: 100%;
}
.pf-s3-right-grid .pf-pcard{
  height:100%;
  position:relative;
  overflow:hidden;
  border-radius: var(--pf-thumb-radius, 6px);
}
/* Vị trí các item */
.pf-s3-right-grid .pf-pcard:nth-child(1){ grid-column: 1 / -1; grid-row: 1; }
.pf-s3-right-grid .pf-pcard:nth-child(2){ grid-column: 1; grid-row: 2; }
.pf-s3-right-grid .pf-pcard:nth-child(3){ grid-column: 2; grid-row: 2; }

/* Thumb lấp đầy card */
.pf-s3-right-grid .pf-pcard .pf-thumb{
  position:relative; display:block; height:100%;
}
.pf-s3-right-grid .pf-pcard .pf-thumb::before{ display:none; }
.pf-s3-right-grid .pf-pcard .pf-thumb img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: var(--pf-thumb-fit, cover); object-position:center;
  display:block;
}

/* Text overlay cho RIGHT giống LEFT */
.pf-s3-right-grid .pf-pcard .pf-body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:10px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.8) 100%);
  color:#fff;
}
.pf-s3-right-grid .pf-pcard .pf-title{ margin:0; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.pf-s3-right-grid .pf-pcard .pf-meta{ color:#e5e7eb; }

/* ===== Category tag positioning & underline fix ==================== */
.pf-s3 .pf-thumb{ position:relative; }
.pf-s3 .pf-thumb > .pf-badge{
  position:absolute; top:8px; left:8px; z-index:3;
}
.pf-s3 [data-catalign="right"] .pf-thumb > .pf-badge{ left:auto; right:8px; }
.pf-s3 [data-catalign="center"] .pf-thumb > .pf-badge{ left:50%; transform:translateX(-50%); }
.pf-s3 .pf-body .pf-badge{ display:inline-block; }
.pf-s3 .pf-badge, .pf-s3 .pf-badge a{ color:var(--pf-badge-text, var(--pf-cat-color, inherit)); }
/* Không gạch chân cho category link */
.pf-s3 .pf-badge a{ text-decoration:none !important; }
.pf-s3 .pf-badge{
  display: var(--pf-cat-display, inline-block);
  margin: var(--pf-badge-spacing, var(--pf-cat-spacing, 0 6px 6px 0));
  padding: var(--pf-badge-padding, var(--pf-cat-padding, 4px 10px));
  border-style: solid;
  border-width: var(--pf-badge-bw, var(--pf-cat-bw, 0));
  border-radius: var(--pf-badge-br, var(--pf-cat-br, 6px));
  background-color: var(--pf-badge-bg, var(--pf-cat-bg, transparent));
  border-color: var(--pf-badge-bc, var(--pf-cat-bc, transparent));
  font-size: var(--pf-badge-fs, var(--pf-cat-fs, 13px));
  font-weight: var(--pf-badge-fw, var(--pf-cat-fw, 600));
  text-transform: var(--pf-badge-tt, var(--pf-cat-tt, none));
  font-style: var(--pf-cat-style, normal);
  line-height: var(--pf-cat-lh, 1);
}

/* ===== Text & Meta ================================================= */
.pf-s3 .pf-pcard .pf-title,
.pf-s3 .pf-pcard .pf-title a{
  color: var(--pf-title-color, inherit);
  background: var(--pf-title-bg, transparent);
}
.pf-s3 .pf-pcard .pf-title{
  margin: var(--pf-title-space, 10px 0 10px 0);
  padding: var(--pf-title-pad, 0);
  border-radius: var(--pf-title-br, 0);
  border-width: var(--pf-title-bw, 0);
  border-style: var(--pf-title-bs, solid);
  border-color: var(--pf-title-bc, transparent);
  text-align: var(--pf-title-align, left);
  line-height: var(--pf-title-lh, 1.4);
  font-size: var(--pf-title-fs, 18px);
  font-weight: var(--pf-title-fw, 700);
  text-transform: var(--pf-title-tt, none);
}
.pf-s3 .pf-pcard .pf-title a{ text-decoration:none; }

/* Meta container (parity với block-1) */
.pf-s3 .pf-meta{
  display:flex; flex-wrap:wrap; align-items:center;
  gap: var(--pf-meta-gap, 8px);
  justify-content: var(--pf-meta-justify, flex-start);
  margin: var(--pf-meta-space, 0);
  padding: var(--pf-meta-pad, 0);
  font-size: var(--pf-meta-fs, 14px);
  font-weight: var(--pf-meta-fw, 400);
  color: var(--pf-meta-color, inherit);
}
.pf-s3 .pf-meta-item{ display:inline-flex; align-items:center; gap:.4em; line-height:1; }

/* Icon style sync với Block-1/Slider-2 */
.pf-s3 .pf-meta-item .pf-meta-icon,
.pf-s3 .pf-meta-item svg.pf-meta-icon{
  width:1em; height:1em; display:inline-block;
  vertical-align:-0.125em;
  fill:none; stroke:currentColor; stroke-width:1.7px;
  flex-shrink:0;
}
.pf-s3 .pf-meta-item .pf-meta-icon *,
.pf-s3 .pf-meta-item svg.pf-meta-icon *{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.7px !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  vector-effect:non-scaling-stroke;
}

/* ===== FIX: chặn pseudo-icon nền chèn thêm vào meta ================= */
.pf-s3 .pf-meta .pf-meta-item::before,
.pf-s3 .pf-meta .pf-meta-item::after,
.pf-s3 .pf-meta [data-meta]::before{
  content:"" !important;
  display:none !important;
  width:0 !important; height:0 !important;
  margin:0 !important; padding:0 !important;
  background:none !important;
}
/* Không cho ép font icon trong khu vực meta */
.pf-s3 .pf-meta .pf-meta-item,
.pf-s3 .pf-meta .pf-meta-item span{
  font-family: inherit !important;
}

/* ===== Front-end toggles (data-attr) =============================== */
.pf-s3 [data-thumb="0"] .pf-thumb,
.pf-s3 [data-cat="0"] [data-meta="category"],
.pf-s3 [data-meta="0"] .pf-meta,
.pf-s3 [data-author="0"] [data-meta="author"],
.pf-s3 [data-date="0"] [data-meta="date"]{ display:none !important; }

/* ===== Container Queries (stack on small) ========================== */
@container (max-width: 768px){
  .pf-s3-grid{ grid-template-columns: 1fr; gap: var(--pf-gap-m, var(--pf-gap, 20px)); }
  .pf-s3-left, .pf-s3-right{ grid-column: 1 / -1; width:100%; height: auto; }
  .pf-s3-right-grid { grid-template-rows: auto; height: auto; }
  .pf-s3-right-grid .pf-pcard:nth-child(n) { grid-row: auto; grid-column: auto; }
  .pf-s3-right-grid .pf-pcard:nth-child(1){ grid-column: 1 / -1; aspect-ratio: 16/9; }
  .pf-s3-right-grid .pf-pcard:nth-child(n+2){ aspect-ratio: 16/9; }
}

/* ===== Fallback khi không hỗ trợ container queries ================= */
@supports not (container-type: inline-size){
  @media (max-width: 768px){
    .pf-s3-grid{ grid-template-columns:1fr; }
    .pf-s3-left, .pf-s3-right{ grid-column:auto; height: auto; }
    .pf-s3-right-grid { grid-template-rows: auto; height: auto; }
    .pf-s3-right-grid .pf-pcard:nth-child(n) { grid-row: auto; grid-column: auto; }
    .pf-s3-right-grid .pf-pcard:nth-child(1){ grid-column: 1 / -1; aspect-ratio: 16/9; }
    .pf-s3-right-grid .pf-pcard:nth-child(n+2){ aspect-ratio: 16/9; }
  }
}