/* DUNG MODA blog, info pages and contact form. Loaded on posts, categories, tags, pages and search (see dmg_page_assets). */

/* ---------- Page and post frame ---------- */
.pg-wide{max-width:1200px}
.pg-h,.post-h{font-family:var(--fd);font-weight:700}
.pg-sub{margin:0 0 20px;max-width:640px;color:var(--muted)}

/* ---------- Post cards and grid ---------- */
.bgrid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:8px}
.bcard{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#FFFFFF}
.bcard-img{display:block;aspect-ratio:4/3;background:var(--surf);overflow:hidden}
.bcard-img img{display:block;width:100%;height:100%;object-fit:cover}
.bcard-body{padding:16px 16px 20px}
.bcard-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:0;font-size:14px;color:var(--muted)}
.bcard-meta a{display:inline-flex;align-items:center;min-height:44px;color:var(--rose);font-weight:700;text-decoration:none}
.bcard-meta a:hover{text-decoration:underline}
.bcard-title{margin:0 0 8px;font:700 24px/1.2 var(--fd)}
.bcard-title a{color:var(--ink);text-decoration:none}
.bcard-title a:hover{color:var(--pri)}
.bcard-desc{margin:0;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:600px){.bgrid{grid-template-columns:repeat(2,1fr);gap:24px}}
@media (min-width:900px){.bgrid{grid-template-columns:repeat(3,1fr);gap:28px}}

.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:32px 0 8px}
.pager-btn{display:inline-flex;align-items:center;gap:6px;min-width:130px;min-height:48px;padding:0 18px;justify-content:center;border:1.5px solid var(--line2);border-radius:6px;background:#FFFFFF;color:var(--pri);font:700 15px/1 var(--fb);text-decoration:none}
.pager-btn:hover{border-color:var(--pri);color:var(--priD)}
.pager-btn.is-off{visibility:hidden}
.pager-now{font-size:15px;color:var(--muted)}
.blog-empty{padding:32px 0 48px;text-align:center}
.blog-empty p{margin:0 0 16px;color:var(--muted)}

/* ---------- Post ---------- */
.post-meta{margin:0 0 4px;font-size:14px;color:var(--muted)}
.post-meta a{display:inline-flex;align-items:center;min-height:44px;color:var(--rose);font-weight:700;text-decoration:none}
.post-h{margin:0 0 20px;font:700 34px/1.15 var(--fd);color:var(--ink)}
.post-img{margin:0 0 24px}
.post-img img{display:block;width:100%;height:auto;border-radius:10px}
.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0}
.post-related{margin-top:48px;padding-top:0}
.post-related-h{margin:0 0 16px;font:700 28px/1.2 var(--fd)}
@media (min-width:900px){.post-h{font-size:44px}}

/* ---------- Rich text from the editor (pages and posts) ---------- */
.ck-content{font-size:16px;line-height:1.7;color:var(--ink);overflow-wrap:anywhere}
.ck-content > :first-child{margin-top:0}
.ck-content h2,.ck-content h3,.ck-content h4{font-family:var(--fd);font-weight:700;line-height:1.2;color:var(--ink)}
.ck-content h2{margin:32px 0 12px;font-size:28px}
.ck-content h3{margin:24px 0 8px;font-size:23px}
.ck-content h4{margin:20px 0 8px;font-size:20px}
.ck-content p{margin:0 0 16px}
.ck-content ul,.ck-content ol{margin:0 0 16px;padding-left:24px}
.ck-content li{margin-bottom:6px}
.ck-content a{color:var(--pri);text-underline-offset:3px}
.ck-content a:hover{color:var(--priD)}
.ck-content img{max-width:100%;height:auto;border-radius:8px}
.ck-content figure{margin:0 0 16px}
.ck-content figure.table{display:block;overflow-x:auto}
.ck-content blockquote{margin:0 0 16px;padding:4px 0 4px 16px;border-left:3px solid var(--line2);color:var(--muted);font-style:italic}
.ck-content hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.ck-content table{width:100%;border-collapse:collapse;font-size:15px}
.ck-content th,.ck-content td{padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top}
.ck-content thead th,.ck-content tbody th{background:var(--surf);font-weight:700}
.ck-content .tbl{margin:0 0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ck-content .tbl table{font-size:14px}
.ck-content .tbl td,.ck-content .tbl th{padding:8px 6px;text-align:center}
@media (min-width:600px){.ck-content .tbl table{font-size:15px}.ck-content .tbl td,.ck-content .tbl th{padding:10px 12px}}
.ck-content .tbl tbody th{text-align:center}
.ck-content iframe{max-width:100%}

/* ---------- Contact details block ([dmg-contact-info]) ---------- */
.ck-content .cinfo,.cinfo{list-style:none;margin:0 0 24px;padding:0}
.ck-content .cinfo li{display:flex;align-items:flex-start;gap:12px;min-height:44px;margin:0;padding:10px 0;border-bottom:1px solid var(--line)}
.cinfo li:last-child{border-bottom:0}
.cinfo .ic{margin-top:1px;color:var(--pri)}
.cinfo a{font-weight:700}

/* ---------- Contact form (partials/contact-form.blade.php) ---------- */
.contact-form{margin:0 0 24px}
.cf-grid{display:grid;grid-template-columns:1fr;gap:16px}
.cf-field{min-width:0}
.cf-label{display:block;margin-bottom:6px;font-weight:700;font-size:15px;color:var(--ink)}
.cf-opt{font-weight:400;color:var(--muted)}
.cf-input{display:block;width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--line2);border-radius:6px;background:#FFFFFF;color:var(--ink);font:400 16px/1.4 var(--fb)}
.cf-input:focus{outline:3px solid var(--lilac);outline-offset:1px;border-color:var(--pri)}
.cf-input[aria-invalid]{border-color:var(--sale)}
.cf-area{min-height:140px;resize:vertical}
.cf-err{margin:6px 0 0;font-size:14px;color:var(--sale)}
.cf-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-check{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:8px 0;cursor:pointer;font-size:15px}
.cf-check input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--pri)}
.cf-check a{font-weight:700}
.cf-send{width:100%;margin-top:8px}
.cf-send[disabled]{opacity:.7;cursor:default}
.cf-msg{margin:16px 0 0;padding:14px 16px;border-radius:6px;font-weight:600}
.cf-msg.ok{background:var(--okSoft);color:var(--ok)}
.cf-msg.bad{background:var(--roseSoft);color:var(--sale)}
@media (min-width:600px){
  .cf-grid{grid-template-columns:1fr 1fr}
  .cf-wide{grid-column:1/-1}
  .cf-send{width:auto;min-width:220px}
}