/*
 Theme Name: Astra Child
 Template: astra
*/

/* กล่องหน้าเพลง */
.song-single{ max-width:1180px; margin:40px auto; padding:0 16px; }
.song-card{ background:#fff; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.08); padding:24px; }

/* หัวข้อกลาง */
.song-header{ text-align:center; margin-bottom:18px; }
.song-header .song-title{ margin:0 0 8px; font-weight:700; }

/* Grid 4/3/2/1 คอลัมน์ */
.song-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  margin-top:20px;
  align-items:start;
}
@media (max-width:1200px){ .song-grid{ grid-template-columns:repeat(3,1fr); gap:20px; } }
@media (max-width:900px) { .song-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (max-width:600px) { .song-grid{ grid-template-columns:1fr; gap:16px; } }

/* เนื้อคอร์ด: ให้ห่อบรรทัดแต่คุมระยะได้ดี (เหมาะกับ output ของ ChordPress) */
.song-col pre,
.song-col .chordpress,
.song-col .cp-lyrics,
.song-col .chordpro{
  white-space: pre-wrap !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height:1.55;
  font-size: clamp(14px, 1.9vw, 17px);
  margin:0;
}
.song-col pre code{ white-space:inherit; font:inherit; }

/* เน้นคอร์ด */
.song-col .chord,
.song-col .cp-chord,
.song-col span[id="c_chord"]{ color:#0a58ff; font-weight:700; }

/* หัวท่อน (จาก {comment: ...}) */
.song-col p strong{
  display:inline-block; background:#f6f8fb; padding:8px 14px; border-radius:8px;
  margin:4px auto 10px;
}

/* ปิด sidebar */
.ast-right-sidebar #primary{ width:100% !important; }
.ast-right-sidebar #secondary{ display:none !important; }

/* ---- Newspaper columns for [songflow] (safe) ---- */
.song-columns{
  column-count: 4;
  column-gap: 36px;
  column-fill: balance;
  margin-top: 20px;
}

/* ให้ <hr> เป็นตัวตัดขึ้นคอลัมน์ใหม่ */
.song-columns hr{ border:0; height:0; margin:0; padding:0; }
.song-columns hr.song-colbreak{
  break-before: column;
  -webkit-column-break-before: always;
}

/* อย่าไปยุ่งกับโครงสร้างภายในของ ChordPress */
.song-columns .cpress{ display:block !important; }

/* ถ้าปลั๊กอินใช้ <pre> ให้ห่อบรรทัดได้ปกติ */
.song-columns pre{
  white-space: pre-wrap !important;
  line-height: 1.6;
  margin: 0;
}

/* (สำคัญ) ไม่ใส่กฎกว้าง ๆ กับ .song-columns p หรือ div อีก */
@media (max-width:1200px){ .song-columns{ column-count:3; } }
@media (max-width:900px) { .song-columns{ column-count:2; } }
@media (max-width:600px) { .song-columns{ column-count:1; } }