/* Final phone layout: keep Thai copy readable and data tables usable. */
@media screen and (max-width: 768px) {
  body.wzd-body :is(.wzd-hero-title, .wzd-page-title, .wzd-section-title, .wzd-sec-title,
    .wzd-art-body h1, .wzd-art-body h2, .wzd-art-body h3, .wzd-hub-content h2) {
    word-break: normal !important;
    overflow-wrap: break-word;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
  }

  body.wzd-body :is(.wzd-art-body, .wzd-hub-content, .wzd-mq-row-info,
    .wzd-mq-field, .wzd-cta-bar > div, .wzd-cta-bar-text) {
    min-width: 0;
    max-width: 100%;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* Tables with several columns scroll in their own region. Two-column
     specifications still fit the phone, without splitting Thai words. */
  html body.wzd-body .wzd-content-table-scroll {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    margin: 16px 0;
  }
  html body.wzd-body .wzd-content-table-scroll > table {
    display: table !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    table-layout: auto !important;
    margin: 0 !important;
  }
  html body.wzd-body .wzd-content-table-scroll.wzd-content-table-scroll--wide > table {
    min-width: calc(var(--wzd-table-columns, 3) * 150px) !important;
  }
  html body.wzd-body .wzd-content-table-scroll > table :is(th, td) {
    width: auto !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    padding: 10px 12px !important;
  }
  .wzd-content-table-scroll:focus-visible { outline: 2px solid #8e2521; outline-offset: 3px; }

  /* Long button labels must fit both quote steps and content callouts. */
  body.wzd-body :is(.wzd-cta-bar-actions, .wzd-mq-actions) { min-width: 0; max-width: 100%; flex-wrap: wrap; }
  body.wzd-body :is(.wzd-cta-bar-actions, .wzd-mq-actions) .wzd-btn,
  body.wzd-body .wzd-mq-btn-full {
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    white-space: normal !important;
    line-height: 1.5 !important;
    text-align: center;
  }
  body.wzd-body :is(.wzd-mq-dd-item, .wzd-mq-row-remove) { min-height: 44px; }

  /* The service overview has no carousel controls or scroll hint. Show all
     six services in the reading flow, rather than concealing five offscreen. */
  body.page-template-page-services .wzd-pillars {
    grid-auto-flow: row !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-columns: auto !important;
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  body.page-template-page-services .wzd-pillar { min-width: 0; padding: 16px 12px; }
  body.page-template-page-services .wzd-pillar-t { font-size: 15px; line-height: 1.5; }
  body.page-template-page-services .wzd-pillar-d { font-size: 14px; line-height: 1.65; }
  body.page-template-page-compare .wzd-fab { display: none !important; }

  /* Expanded cookie details must fit above the persistent phone navigation,
     including landscape screens and the iOS dynamic viewport. */
  #wdc-ck-panel.is-expanded {
    max-height: calc(100vh - 160px);
    max-height: calc(100dvh - 160px);
    overflow-y: auto;
  }
  #wdc-ck-panel.is-expanded .wdc-ck-desc {
    position: static !important;
    height: auto !important;
    white-space: normal;
    overflow: visible;
  }
}

@media screen and (max-width: 380px) {
  body.page-template-page-services .wzd-pillars { grid-template-columns: minmax(0, 1fr) !important; }
}

@media screen and (max-width: 768px) {
  .wzd-content-table-scroll--wide::before {
    content: "เลื่อนซ้าย–ขวาเพื่อดูตารางครบ";
    display: block;
    position: sticky;
    left: 0;
    margin-bottom: 8px;
    color: #5c5c61;
    font-size: 12px;
    line-height: 1.5;
  }
}

@media screen and (max-width: 768px) {
  html { scroll-padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
  .wzd-mq-actions { padding-bottom: 72px; }
  /* Keep controls and results reachable while the phone keyboard is open.
     Existing page padding stays in place, so hiding the action rails does not
     move the form when focus changes. */
  body:has(input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus)
    :is(.wzd-bottomnav, .wzd-fab, .wb-sticky, .wzd-pdp-sticky) {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  body.wzd-reading-table :is(#wdc-toc-pill, #wdcBackTop) {
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Comparison controls share the compact groove-selector scale. */
.wcp-carousel-nav { display: none; }
@media screen and (max-width: 640px) {
  html body.wzd-body .wcp-page {
    --wcp-mobile-control-fs: 12.5px;
    --wcp-mobile-control-h: 32px;
  }
  html body .wcp-glass .wcp-calc-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "area team wage cement"
      "dest dest dest dest"
      "groove groove groove groove";
    column-gap: 6px;
    row-gap: 10px;
    align-items: start;
  }
  html body .wcp-glass .wcp-calc-inner:not(:has(.wcp-calc-item--cement)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "area team wage" "dest dest dest";
  }
  html body .wcp-glass .wcp-calc-item:is(.wcp-calc-item--area, .wcp-calc-item--team,
    .wcp-calc-item--wage, .wcp-calc-item--cement) {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  html body.wzd-body .wcp-glass .wcp-calc-item .wcp-calc-label {
    width: auto !important;
    max-width: 100%;
    flex: none !important;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
  }
  html body .wcp-glass .wcp-calc-area-wrap { width: 100%; min-width: 0; gap: 5px; }
  html body.wzd-body .wcp-glass input:is(#wcp-area, #wcp-team, #wcp-wage, #wcp-cement-price, #wcp-destination),
  html body.wzd-body #wcp-page input.wcp-prod-price {
    height: var(--wcp-mobile-control-h) !important;
    min-height: var(--wcp-mobile-control-h) !important;
    padding: 5px 8px !important;
    border-radius: 8px;
    font-size: var(--wcp-mobile-control-fs) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
  }
  html body.wzd-body .wcp-glass .wcp-calc-area-wrap input {
    flex: 0 1 66px;
    width: 66px !important;
    min-width: 0;
    max-width: 100%;
  }
  html body.wzd-body .wcp-glass .wcp-calc-item--team input { flex-basis: 46px; width: 46px !important; }
  html body.wzd-body .wcp-glass #wcp-destination { width: 100% !important; }
  html body.wzd-body .wcp-page input.wcp-prod-price { width: 62px; max-width: 100%; }
  html body.wzd-body .wcp-glass .wcp-calc-item:is(.wcp-calc-item--area, .wcp-calc-item--team,
    .wcp-calc-item--wage, .wcp-calc-item--cement) .wcp-calc-label {
    font-size: 11px;
    white-space: nowrap;
    letter-spacing: 0;
  }
  html body .wcp-glass .wcp-calc-item:is(.wcp-calc-item--area, .wcp-calc-item--team,
    .wcp-calc-item--wage, .wcp-calc-item--cement) .wcp-calc-label i { display: none; }
  html body .wcp-glass .wcp-calc-area-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  html body.wzd-body .wcp-glass .wcp-calc-area-wrap input {
    flex: none;
    width: 100% !important;
  }
  html body .wcp-glass .wcp-calc-area-wrap > span {
    font-size: 10.5px;
    line-height: 1.4;
    text-align: center;
  }
  html body .wcp-glass .wcp-calc-btns {
    height: 32px;
    min-height: 32px;
    padding: 2px;
    align-items: center;
  }
  html body .wcp-glass .wcp-calc-btns button {
    height: 26px;
    min-height: 26px;
    padding: 3px 2px;
    font-size: var(--wcp-mobile-control-fs);
    font-weight: 500;
    line-height: 1.4;
  }
  html body .wcp-howto-bar { flex-direction: column; gap: 6px; }
  .wcp-mobile-carousel :is(.wcp-prod-row, .wcp-mini-prod-row, .wcp-table .wcp-row-vals) {
    touch-action: pan-x pan-y pinch-zoom;
    cursor: grab;
  }
  html body .wcp-mobile-carousel.wcp-dragging :is(.wcp-prod-row, .wcp-mini-prod-row, .wcp-table .wcp-row-vals) {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
  }
  .wcp-mobile-carousel .wcp-carousel-nav {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
  }
  .wcp-carousel-copy { min-width: 0; text-align: center; color: #5c5c61; line-height: 1.5; }
  .wcp-carousel-copy strong { display: block; font-size: 12px; font-weight: 500; color: #2e2e31; }
  .wcp-carousel-copy span { display: block; font-size: 11.5px; }
  .wcp-carousel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #dfd6cd;
    border-radius: 50%;
    background: #fff;
    color: #8e2521;
    cursor: pointer;
  }
  .wcp-carousel-arrow svg { width: 16px; height: 16px; }
  .wcp-carousel-arrow:disabled { opacity: .35; cursor: default; }
  .wcp-carousel-arrow:focus-visible { outline: 2px solid #8e2521; outline-offset: 2px; }
}

/* Reading content: centered captions and widths derived from the cell data. */
html body.wzd-body main :is(figcaption, .wp-caption-text) {
  box-sizing: border-box; max-width: 100%; margin: 0;
  padding: 12px 16px !important; text-align: center !important;
  line-height: 1.65; font-size: 14px; overflow-wrap: break-word;
}
html body.wzd-body :is(main, #wdc-article) .wzd-content-table-scroll--balanced {
  display: block !important; width: 100% !important; max-width: 100% !important;
  min-width: 0 !important; overflow-x: auto !important; margin: 16px 0;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
html body.wzd-body :is(main, #wdc-article) .wzd-content-table-scroll--balanced > table {
  display: table !important; width: 100% !important; max-width: none !important;
  min-width: var(--wzd-table-min, 0px) !important;
  table-layout: fixed !important; margin: 0 !important;
}
html body.wzd-body :is(main, #wdc-article) .wzd-content-table-scroll--balanced > table :is(th,td) {
  width: auto !important; white-space: normal !important; word-break: normal !important;
  overflow-wrap: break-word !important; vertical-align: top; line-height: 1.65;
  padding: 11px 12px !important;
}
@media(max-width:768px) {
  html body.wzd-body main :is(figcaption, .wp-caption-text) { padding: 10px 12px !important; font-size: 13px; }
  html body.wzd-body :is(main, #wdc-article) .wzd-content-table-scroll--balanced > table :is(th,td) {
    font-size: 13px !important; padding: 9px 8px !important;
  }
  html body.wzd-body :is(main, #wdc-article) .wzd-content-table-scroll--compact::before { display: none !important; }
}

html body.wzd-body :is(main, #wdc-article) .wzd-content-table-scroll--balanced > table > colgroup { display: table-column-group !important; }