/* ==========================================================================
   การ์ดหน้ารายละเอียด 3 แบบ (A / B / C) - component <x-detail-layout> (frontend/components/detail-layout)
   --------------------------------------------------------------------------
   ตาม mockup หน้ารายละเอียดพื้นที่จัดแสดง (1920px) แต่ไม่ยกขนาดจากภาพมาตรง ๆ:
   การ์ดกว้างตาม .container ของหน้า (สุด 1320px) ขนาดตัวอักษร/ระยะเป็น px แบบหน้ารายละเอียดอื่นของเว็บ
     A  .dl-media--hero เต็มกว้างบนสุดของการ์ด (มุมบนโค้งตามการ์ด)
     B  .dl-top รูป 38% | ข้อความ  แล้ว .dl-media--banner แบนเนอร์กว้าง
     C  .dl-top ข้อความ | รูป 38%
   สีตัวอักษรทุกคู่ผ่านความต่างสี 4.5:1 บนพื้นขาว / ไม่มี position: fixed
   ========================================================================== */

.dl {
    --dl-navy: #16306b;
    --dl-navy-deep: #002777;
    --dl-navy-soft: #eaf0fb;
    --dl-blue: #2d55b8;
    --dl-red: #c41a22;
    --dl-text: #1f2a44;
    --dl-muted: #5b6680;
    --dl-line: #dfe6f2;
    --dl-focus: rgba(45, 85, 184, .6);

    min-width: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(33, 48, 105, .10);
    color: var(--dl-text);
}
.dl-body { padding: 32px 36px 28px; }

/* ── รูป (หลัก / แบนเนอร์) - ครอปด้วย object-fit ── */
.dl-media {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: var(--dl-navy-soft);
}
.dl-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ยังไม่มีรูป - กล่องไล่สีมีไอคอน แบบเดียวกับการ์ดในหน้าเกี่ยวกับเรา */
.dl-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #213069 0%, #2d66cc 100%);
    color: rgba(255, 255, 255, .85);
    font-size: 40px;
}
.dl-media--hero { aspect-ratio: 3 / 1; border-radius: 0; }
.dl-media--side { aspect-ratio: 11 / 10; }
.dl-media--banner { aspect-ratio: 4 / 1; margin-top: 28px; }

/* ── แถวบนของ B / C: รูป 38% + ข้อความ (ข้อความชิดบน) ── */
.dl-top {
    display: grid;
    align-items: start;
    gap: 32px;
}
.dl--b .dl-top { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }
.dl--c .dl-top { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }

/* ── หัวข้อ / วันที่ / ข้อความนำ ── */
.dl-head { min-width: 0; }
.dl-title {
    margin: 0 0 12px;
    color: var(--dl-navy-deep);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.dl-date {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    color: var(--dl-navy);
    font-size: 15px;
    line-height: 1.5;
}
.dl-date i { font-size: 14px; }
.dl-intro {
    margin: 0;
    font-size: 16px;
    line-height: 1.85;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* ── เนื้อหา (html ที่กรองแล้ว) ── */
.dl-prose {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.85;
    overflow-wrap: anywhere;
}
.dl-top + .dl-prose { margin-top: 28px; }
.dl-prose > :first-child { margin-top: 0; }
.dl-prose > :last-child { margin-bottom: 0; }
.dl-prose p { margin: 0 0 1em; }
.dl-prose h2,
.dl-prose h3,
.dl-prose h4 {
    margin: 1.4em 0 .6em;
    color: var(--dl-navy);
    font-weight: 600;
    line-height: 1.45;
}
.dl-prose h2 { font-size: 21px; }
.dl-prose h3 { font-size: 19px; }
.dl-prose h4 { font-size: 17px; }
.dl-prose ul,
.dl-prose ol { margin: 0 0 1em; padding-left: 1.5em; }
.dl-prose blockquote {
    margin: 1.5em 0;
    padding: .5em 1.25em;
    border-left: 4px solid var(--dl-line);
    color: var(--dl-muted);
}
.dl-prose a { color: var(--dl-blue); text-decoration: underline; }
.dl-prose a:focus-visible { outline: 3px solid var(--dl-focus); outline-offset: 2px; border-radius: 2px; }

/* ── ตารางภาพ: 6 ช่องย่อย ภาพละ 2 ช่อง = 3 คอลัมน์ / จำนวนไม่ลงตัวขยายแถวท้ายให้เต็ม ── */
.dl-gallery {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}
.dl-gallery > li {
    grid-column: span 2;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    background: var(--dl-navy-soft);
}
.dl-gallery img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dl-gallery.is-n1 > li { grid-column: span 6; aspect-ratio: 21 / 9; }
.dl-gallery.is-n2 > li,
.dl-gallery.is-tail-2 > li:nth-last-child(-n + 2),
.dl-gallery.is-tail-1 > li:nth-last-child(-n + 4) { grid-column: span 3; }

/* ── ท้ายการ์ด: เส้นคั่น / ลิงก์ของผู้ดูแล (ซ้าย) | แชร์ (ชิดขวา) ── */
.dl-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px 20px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--dl-line);
}
.dl-actions { margin-right: auto; font-size: 14px; }
.dl-share {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dl-share-label {
    flex: none;
    font-size: 16px;
    white-space: nowrap;
}
.dl-share-list {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dl-share-list > li { display: flex; align-items: center; }
/* เส้นคั่นบาง ๆ ระหว่างปุ่ม (ไม่มีหน้าปุ่มแรก) */
.dl-share-list > li + li::before {
    content: "";
    width: 1px;
    height: 36px;
    background: var(--dl-line);
}
.dl-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    min-height: 44px;
    margin: 0 4px;
    border-radius: 8px;
    color: var(--dl-navy-deep);
    font-size: 22px;
    text-decoration: none;
    transition: color .15s, background-color .15s;
}
.dl-share-btn:hover { color: var(--dl-red); background: var(--dl-navy-soft); }
.dl-share-btn:focus-visible { outline: 3px solid var(--dl-focus); outline-offset: 2px; }

@media (max-width: 1199.98px) {
    .dl-title { font-size: 24px; }
}
/* แท็บเล็ต: แถวบน B / C ยังสองคอลัมน์ แต่รูปแคบลง */
@media (max-width: 991.98px) {
    .dl-body { padding: 28px 28px 24px; }
    .dl-top { gap: 24px; }
    .dl-media--hero { aspect-ratio: 5 / 2; }
    .dl-media--banner { aspect-ratio: 3 / 1; }
    .dl-gallery { gap: 12px; }
}
/* มือถือ: คอลัมน์เดียว / ตารางภาพ 2 คอลัมน์ */
@media (max-width: 767.98px) {
    .dl { border-radius: 12px; }
    .dl-body { padding: 20px 18px; }
    .dl--b .dl-top,
    .dl--c .dl-top { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .dl-media--hero { aspect-ratio: 16 / 9; }
    .dl-media--side { aspect-ratio: 4 / 3; }
    .dl-media--banner { aspect-ratio: 2 / 1; margin-top: 20px; }
    .dl-title { font-size: 22px; }
    .dl-gallery { gap: 10px; margin-top: 20px; }
    .dl-gallery > li,
    .dl-gallery.is-tail-2 > li:nth-last-child(-n + 2),
    .dl-gallery.is-tail-1 > li:nth-last-child(-n + 4) { grid-column: span 3; }
    .dl-gallery.is-n1 > li { grid-column: span 6; aspect-ratio: 16 / 9; }
    /* จำนวนคี่: ภาพสุดท้ายเต็มกว้าง */
    .dl-gallery:not(.is-n1) > li:last-child:nth-child(odd) { grid-column: span 6; }
    .dl-foot { margin-top: 24px; }
}
@media (max-width: 575.98px) {
    .dl-title { font-size: 20px; }
    .dl-share { flex: 1 1 100%; justify-content: space-between; }
    .dl-share-list { flex: 1; justify-content: flex-end; }
    .dl-share-btn { width: 48px; margin: 0 2px; font-size: 20px; }
    .dl-actions { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .dl-share-btn { transition: none; }
}