/* Audio Buyback | Unified Layout & Responsive System v1.6
 * Single content grid for all public pages, editorial, category hub, images and footer.
 * Loaded LAST; no changes to original HTML, image names or paths.
 */
:root {
  --ab-page-max: 1200px;
  --ab-page-gutter: clamp(16px, 2.4vw, 28px);
}
*, *::before, *::after { box-sizing: border-box; }
html { max-width: 100%; min-width: 0; }
body { max-width: 100%; min-width: 0; margin: 0; }
img, video, iframe, picture, canvas { max-width: 100%; }
img, video { height: auto; }
img { vertical-align: middle; }
pre { max-width: 100%; overflow-x: auto; }

/* Align all site content to exactly the same 1200px grid (and mobile gutters). */
.wrap,
.abh-hub .abh-shell,
.ap-article .ap-wrap,
.abf-footer .abf-wrap,
.legacy-fragment {
  width: min(var(--ab-page-max), calc(100% - var(--ab-page-gutter) - var(--ab-page-gutter)));
  max-width: var(--ab-page-max);
  margin-inline: auto;
}
/* The old standalone fragments have an inline max-width and inline padding. */
body .legacy-fragment {
  max-width: var(--ab-page-max) !important;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding: clamp(16px, 2.3vw, 28px) !important;
  margin-block: clamp(15px, 3vw, 32px) !important;
  border-radius: 14px;
}
body .legacy-fragment a { overflow-wrap: anywhere; }

/* Hero and full-width promotional images now match all content, not 1320px. */
.hero > img,
.image-band > img,
.big-image > img {
  display: block;
  width: min(var(--ab-page-max), calc(100% - var(--ab-page-gutter) - var(--ab-page-gutter)));
  max-width: var(--ab-page-max);
  height: auto;
  object-fit: contain;
  margin-inline: auto;
}
.hero, .image-band, .big-image { max-width: 100%; }
/* Portrait imagery stays in its proportional grid cell; never crops or stretches. */
.photo-card { max-width: 100%; min-width: 0; }
.photo-card img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; }

/* Prevent min-content widths from pushing text / cards outside their grid. */
.nav, .grid-2, .cta-strip .wrap, .cards, .badges, .care-grid,
.ap-hero, .ap-columns, .ap-main, .ap-sticky, .ap-answers,
.abh-hub .abh-grid, .abh-hub .abh-link-grid, .abh-hub .abh-header,
.abf-footer .abf-hero, .abf-footer .abf-info-grid { min-width: 0; }
.grid-2 { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.badges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.care-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 > *, .cards > *, .badges > *, .care-grid > *,
.cta-strip .wrap > *, .ap-columns > *, .ap-hero > *,
.ap-answers > *, .abf-footer .abf-hero > *,
.abh-hub .abh-header > * { min-width: 0; max-width: 100%; }
.card, .panel, .care, .badge, .ap-main,
.ap-hero, .abh-card, .abf-footer .abf-column { overflow-wrap: break-word; }

/* Logo / navigation never force a wider-than-screen header. */
.topbar .nav { min-width: 0; }
.topbar .brand { min-width: 0; flex-shrink: 1; }
.topbar .brand img { flex: 0 0 auto; max-width: 58px; height: auto; }
.topbar .brand span { min-width: 0; overflow-wrap: anywhere; }
.topbar .menu { min-width: 0; }
.topbar .menu-toggle { flex-shrink: 0; }

/* Article, link directory and footer use the same shared grid even on ultrawide screens. */
.ap-article .ap-wrap, .abh-hub .abh-shell, .abf-footer .abf-wrap {
  width: min(var(--ab-page-max), calc(100% - var(--ab-page-gutter) - var(--ab-page-gutter)));
  max-width: var(--ab-page-max);
}
.ap-article .ap-columns { grid-template-columns: minmax(205px, 245px) minmax(0, 1fr); }
.ap-article .ap-main, .ap-article .ap-table-scroll { max-width: 100%; min-width: 0; }
.ap-article .ap-table-scroll { -webkit-overflow-scrolling: touch; }
.ap-standalone-nav {
  padding-inline: max(var(--ab-page-gutter), calc((100% - var(--ab-page-max)) / 2));
}

@media (max-width: 1024px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .care-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-article .ap-columns { grid-template-columns: 205px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .grid-2, .cta-strip .wrap { grid-template-columns: minmax(0, 1fr); }
  .cards, .care-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-article .ap-columns { grid-template-columns: minmax(0, 1fr); }
  .hero, .image-band { padding-block: clamp(13px, 3vw, 22px); }
  .hero > img, .image-band > img {
    border-radius: clamp(12px, 2vw, 18px);
    border-width: clamp(2px, .5vw, 4px);
  }
}
@media (max-width: 640px) {
  .topbar .nav { gap: 8px; }
  .topbar .brand { flex: 1 1 auto; gap: 7px; }
  .topbar .brand img { width: 43px; max-width: 43px; }
  .topbar .brand span { font-size: clamp(14px, 4.5vw, 18px); line-height: 1.3; }
  .topbar .menu { max-width: 100%; }
  .topbar .menu-toggle { padding: 8px 10px; }
  .cards, .care-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .badge { min-width: 0; padding: 13px 9px; border-radius: 13px; overflow-wrap: anywhere; }
  .panel { min-width: 0; padding: 18px; border-radius: 18px; }
  .card, .care { padding: 18px; border-radius: 16px; }
  .photo-card { border-width: 3px; border-radius: 16px; }
  .hero > img, .image-band > img { border-radius: 13px; }
  .ap-article .ap-hero .ap-lead { font-size: 14px; line-height: 1.75; }
  .ap-article .ap-intro p, .ap-article .ap-chapter p { font-size: 14px; line-height: 1.85; }
  .ap-article .ap-main { overflow-wrap: anywhere; }

  /* Replace the three-column editorial table with legible mobile cards:
     no sideways page scroll or hidden columns on narrow phones. */
  .ap-article .ap-table-scroll { border: 0; border-radius: 0; overflow: visible; }
  .ap-article .ap-table { display: block; width: 100%; min-width: 0; border-collapse: separate; background: transparent; }
  .ap-article .ap-table thead { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ap-article .ap-table tbody { display: grid; gap: 10px; min-width: 0; }
  .ap-article .ap-table tr {
    display: block; min-width: 0; padding: 12px 14px;
    border: 1px solid #e0d5c2; border-radius: 11px;
    background: #fffdfa; box-shadow: 0 4px 14px rgba(55,41,20,.04);
  }
  .ap-article .ap-table tbody tr:nth-child(even) { background: #fffaf1; }
  .ap-article .ap-table tbody th,
  .ap-article .ap-table tbody td {
    display: block; min-width: 0; width: 100%; padding: 5px 0;
    border: 0; line-height: 1.65; white-space: normal; overflow-wrap: anywhere;
  }
  .ap-article .ap-table tbody th {
    font-size: 14px; font-weight: 900; color: #3b2821;
    border-bottom: 1px solid #eee4d3; padding-bottom: 8px; margin-bottom: 6px;
  }
  .ap-article .ap-table tbody td { font-size: 13px; }
  .ap-article .ap-table tbody td::before {
    display: block; margin: 0 0 1px; color: #866333;
    font-size: 10px; font-weight: 900; letter-spacing: .025em;
  }
  .ap-article .ap-table tbody td:nth-of-type(1)::before { content: 'รายละเอียดที่ควรบันทึก'; }
  .ap-article .ap-table tbody td:nth-of-type(2)::before { content: 'หลักฐานที่ช่วยยืนยัน'; }
}
@media (max-width: 360px) {
  .topbar .brand img { width: 37px; max-width: 37px; }
  .topbar .brand span { font-size: 14px; }
  .topbar .menu-toggle { padding-inline: 9px; }
  .abf-footer .abf-action-text b { font-size: 13px; }
  .ap-article .ap-wrap { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}