/* ========= Theme tokens ========= */
:root{
  --pung-blue:#1B006D;
  --pung-blue-darker:#150056;
  --pung-yellow:#FFF600;
  --pung-red:#ef3960;
  --pung-text:#1b2230;
  --pung-border:#f2f2f2;
  --pung-league-icon-size: 50px;
}

/* ========= โครง container ========= */
.pung-analyze-latest-wrap,
.pung-analyze-archive-wrap{ 
  display:grid;
}

/* ========= หัวน้ำเงิน (LATEST) ========= */
.pung-analyze-blue-head{
  display:flex; align-items:center; gap:14px;
  background:var(--pung-blue); color:#fff;
  padding:12px 16px;
}
.pung-analyze-blue-head .head-left{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 var(--pung-league-icon-size);
}
.pung-analyze-blue-head .head-left img.pung-analyze-league-icon{
  width:80px !important; height:50px !important;
  min-width:50px; max-width:80px; min-height:50px; max-height:50px;
  object-fit:contain; display:block;
}
.pung-analyze-blue-head .head-center{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
}
.pung-analyze-blue-head .head-center .league,
.pung-analyze-blue-head .head-center .head-date-long{
  font-weight:600; font-size:22px; color:var(--pung-yellow);
}
.pung-analyze-blue-head .head-right{ display:none !important; }

/* ========= ลิสต์พื้นขาว (ใช้ทั้ง LATEST / ARCHIVE / GROUP) ========= */
.pung-analyze-white-list,
.pung-analyze-archive-wrap .white-list{
  display:grid;
  gap: 0; /* รายการชิดกัน มีเส้นกรอบคั่นเอง */
}

.pung-white-row{
  display:grid; 
  /* ✅ คอลัมน์กลางยืด-หดได้จริง ไม่ดันล้นจอ */
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items:center; gap:12px;
  background:#fff; color:var(--pung-text);
  border-top:1px solid var(--pung-red);
  border-left:1px solid var(--pung-red);
  border-right:1px solid var(--pung-red);
  padding:12px 14px;
  text-decoration:none;
  box-shadow: 0 0 0 1px var(--pung-border) inset;
  transition: transform .06s ease, box-shadow .12s ease;
  box-sizing:border-box; max-width:100%;
}
/* ✅ ให้ทุกคอลัมน์ในแถว “ยอมหด” */
.pung-white-row > *{ min-width:0; }

.pung-white-row:last-child{ border-bottom:1px solid var(--pung-red); }
.pung-white-row:hover{ box-shadow: 0 0 0 2px #e9e9e9 inset; }

/* === หัวข้อในแถว === */
.pw-title{ 
  font-weight:500; 
  font-size:18px; 
  line-height:1.35; 
  color:#000; 
  min-width:0;              /* ยอมหด */
  white-space:normal;       /* ตัดบรรทัดได้ */
  overflow-wrap:anywhere;   /* กันคำยาวติดกัน */
  word-break:break-word;
}

.pung-white-row a{ text-decoration:none; }

.pw-badges{ display:flex; align-items:center; gap:8px; }

.badge-new{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--pung-red); color:#fff; font-weight:800;
  padding:4px 10px; border-radius:999px; font-size:12px; text-transform:uppercase;
}

.pw-date{
  display:inline-block; background:var(--pung-blue); color:#fff;
  padding:6px 10px; border-radius:8px; font-weight:700; font-size:12px;
  white-space:nowrap; /* กันวันที่แตกเป็นสองบรรทัด */
}

/* รูปกลุ่มทุก shortcode ให้ขนาดเดียวกัน */
.pw-thumb img,
.pung-analyze-detail .group-row .group-img img{
  width:160px; height:30px; display:block; border-radius:6px; object-fit:cover;
}

/* ========= กลุ่มวัน (ARCHIVE & GROUP) ========= */
.pung-analyze-archive-wrap .day-group{ display:grid; gap:10px; }
.pung-analyze-archive-wrap .day-group a{ text-decoration:none; }

/* ถ้าอยากมีหัววันในอนาคต ใช้คลาสนี้ได้ */
.pung-analyze-archive-wrap .day-head{
  display:inline-block; background:var(--pung-blue); color:var(--pung-yellow);
  font-weight:800; padding:6px 12px; width:max-content; border-radius:6px;
}

/* ========= Pagination (ทุกหน้า) ========= */
.pung-pager{
  margin:16px 0 8px; display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center;
}
.pung-pager a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 12px;
  border-radius:10px; font-weight:700; font-size:14px;
  color:#fff; background:var(--pung-blue); text-decoration:none;
  box-shadow: 0 2px 0 rgba(0,0,0,.1);
  transition: transform .06s ease, background .12s ease, box-shadow .12s ease;
}
.pung-pager a:hover{ transform: translateY(-1px); background:#26009b; }
.pung-pager a.current{
  background:var(--pung-red); color:#fff; box-shadow:none;
}

/* ===================== */
/*  DETAIL PAGE STYLES   */
/*  [pung_analyze_detail]*/
/* ===================== */

.pung-analyze-detail{
  display:grid;
  gap:16px;
}
.pung-analyze-detail .title{ margin-bottom:0 !important; }

.pung-analyze-detail .group-row{
  display:flex; align-items:center; gap:10px;
  background:var(--pung-blue); color:#fff; padding:12px 14px;
}
.pung-analyze-detail .group-row .group-img{ display:flex; align-items:center; }
.pung-analyze-detail .group-row .group-date{
  background:var(--pung-blue-darker); color:#fff;
  padding:6px 12px; border-radius:8px; font-weight:400; font-size:18px;
}

/* แถวโลโก้ทีม (เวอร์ชันใช้โลโก้เดียว) */
.pung-analyze-detail .team-row{
  display:flex; align-items:center; justify-content:center;
  gap:18px; flex-wrap:wrap;
}
.pung-analyze-detail .team-row .team img,
.pung-analyze-detail .team-row .league-mid img{
  width:600px; height:200px; object-fit:contain; display:block;
}

/* บทนำให้ตัวใหญ่ขึ้น */
.pung-analyze-detail .team-row + .section .rich{
  font-size:1.15rem; line-height:1.8;
}

/* หัวข้อย่อย */
.pung-analyze-detail .section-head{ margin:8px 0 6px; }

.section-img-wrap img {
  width: 100%;
  height: auto;
}

/* ========= Responsive ========= */
/* ========= Responsive (Mobile only) ========= */
@media (max-width: 768px){

  /* layout แถวพื้นขาวเหมือนเดิม */
  .pung-white-row{
    grid-template-columns: auto minmax(0,1fr) auto;
    grid-template-rows: auto auto;
    column-gap:4px; row-gap:6px; align-items:center;
    width:100%;
    max-width:100%;
  }
  .pung-white-row .pw-badges{ display:contents; }
  .pung-white-row .pw-thumb{ grid-column:1; grid-row:1; }
  .pung-white-row .pw-date{  grid-column:2; grid-row:1; justify-self:start; white-space:nowrap; }
  .pung-white-row .badge-new{grid-column:3; grid-row:1; justify-self:start; }
  .pung-white-row .pw-title{ grid-column:1 / -1; grid-row:2; min-width:0; }

  .pw-title{
    font-weight: 400;
  }
  /* 1) รูปกลุ่ม (thumb + แถบหัวกลุ่ม) → 100x20 */
  .pw-thumb img,
  .pung-analyze-detail .group-row .group-img img{
    width:100px; height:20px; display:block; border-radius:6px; object-fit:cover;
  }

  /* 2) .pw-date → 100x20 และจัดตัวอักษรกลางกล่อง */
  .pw-date{
    display:inline-flex; align-items:center; justify-content:center;
    width:100px; height:20px; padding:0;
    background:var(--pung-blue); color:#fff;
    border-radius:8px; font-weight:700; font-size:12px;
    white-space:nowrap;
  }

  /* 3) .badge-new สูง 20px */
  .badge-new{
    display:inline-flex; align-items:center; justify-content:center;
    height:20px; padding:0 8px; gap:6px;
    background:var(--pung-red); color:#fff; font-weight:800;
    border-radius:999px; font-size:12px; text-transform:uppercase;
  }

  /* 4) ซ่อนโลโก้ทีม “เฉพาะ mobile” */
  .pung-analyze-detail .team-row{ display:none !important; }

  /* 5) ตัวอักษรหัวพื้นหลังน้ำเงิน (league/date) บนมือถือ → 14px */
  .pung-analyze-blue-head .head-center .league,
  .pung-analyze-blue-head .head-center .head-date-long{
    font-size:14px;
    font-weight: 300;
  }
    /* ซ่อนรูป league icon ในหัวสีน้ำเงิน */
  .pung-analyze-blue-head .head-left img.pung-analyze-league-icon{
    display: none !important;
  }

  /* (แนะนำ) ถ้าไม่อยากเหลือช่องว่างซ้าย ให้ซ่อน container ด้วย */
  .pung-analyze-blue-head .head-left{
    display: none !important;
  }
}

/* ========= ช่วยให้รู้ว่ารูปกลุ่มคลิกได้ (ทุกหน้า) ========= */
img.group[group--linkable],
img.group[data-gurl]{ cursor:pointer; }