/*
 * Focused responsive repair for the five contact/VOC cards on the Thai home
 * page. Elementor 2.x keeps its desktop 60px section gutters at this width,
 * leaving the cards too narrow for their Thai labels.
 */
@media (max-width: 767px) {
    /* Polylang renders an empty legacy banner on the translated home page.
       Its desktop-only 180px margin becomes a blank band on mobile. */
    .header-banner-container {
        display: none;
        margin-top: 0 !important;
    }

    /* The translated home page shares this Elementor section ID with Thai,
       but the legacy theme adds a desktop 150px top margin to it. */
    .elementor-element.elementor-element-d0ab242 {
        margin-top: 0 !important;
    }

    /* Elementor 2.x saved the main translated-home column at a fixed desktop
       width. Let it participate in the mobile viewport before sizing cards. */
    .elementor-5688 .elementor-element.elementor-element-1e153c5,
    .elementor-8715 .elementor-element.elementor-element-1e153c5 {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* The home slider creates its own stacking context. Keep the complete
       header/menu layer above it, rather than allowing an opened menu to be
       painted behind the page. */
    .site-header {
        position: relative;
        z-index: 100000;
    }

    .elementor-element.elementor-element-450529d {
        padding: 24px 16px;
    }

    .elementor-element.elementor-element-450529d > .elementor-container > .elementor-row {
        display: flex;
        flex-wrap: wrap;
        width: 100% !important;
        gap: 12px;
    }

    .elementor-element.elementor-element-450529d > .elementor-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .elementor-element.elementor-element-450529d > .elementor-container > .elementor-row > .elementor-column,
    .elementor-element.elementor-element-450529d .elementor-col-20 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
    }

    .elementor-element.elementor-element-450529d .elementor-column-wrap {
        aspect-ratio: 386 / 199;
        min-height: 0;
        background-position: center;
        background-size: cover;
    }

    .elementor-element.elementor-element-450529d .elementor-widget-container > a {
        display: block;
        height: 100%;
        overflow: hidden;
    }

    .elementor-element.elementor-element-450529d .elementor-widget-container p {
        box-sizing: border-box;
        margin: 0;
        padding: 16px 18px 12px 42%;
        font-size: 14px !important;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .elementor-element.elementor-element-450529d .elementor-widget-container p span[style*="font-size:17px"] {
        font-size: clamp(16px, 4.3vw, 17px) !important;
        line-height: 1.35;
    }

    /* English home uses different Elementor IDs from the Thai translation. */
    /* Unlike Thai's 450529d section, EN's 04871b1 retained Elementor's
       desktop-only 60px gutter. That is the actual 280px width lock at a
       400px viewport; make its section/row/columns follow the Thai layout. */
    .elementor-8715 .elementor-element.elementor-element-04871b1 {
        padding: 24px 16px !important;
    }

    .elementor-8715 .elementor-element.elementor-element-04871b1 > .elementor-container,
    .elementor-8715 .elementor-element.elementor-element-04871b1 > .elementor-container > .elementor-row {
        width: 100% !important;
        max-width: 100% !important;
    }

    .elementor-8715 .elementor-element.elementor-element-04871b1 > .elementor-container > .elementor-row {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .elementor-8715 .elementor-element.elementor-element-04871b1 .elementor-column,
    .elementor-8715 .elementor-element.elementor-element-04871b1 .elementor-col-20 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
    }

    .elementor-8715 .elementor-element.elementor-element-04871b1 .elementor-column-wrap {
        aspect-ratio: 386 / 199;
        min-height: 0;
        background-position: center;
        background-size: cover !important;
    }

    .elementor-8715 .elementor-element.elementor-element-3c728b6,
    .elementor-8715 .elementor-element.elementor-element-92baf35,
    .elementor-8715 .elementor-element.elementor-element-de7c36e,
    .elementor-8715 .elementor-element.elementor-element-6aa1924,
    .elementor-8715 .elementor-element.elementor-element-91f0bbb {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .elementor-8715 .elementor-element.elementor-element-3c728b6 > .elementor-column-wrap,
    .elementor-8715 .elementor-element.elementor-element-92baf35 > .elementor-column-wrap,
    .elementor-8715 .elementor-element.elementor-element-de7c36e > .elementor-column-wrap,
    .elementor-8715 .elementor-element.elementor-element-6aa1924 > .elementor-column-wrap,
    .elementor-8715 .elementor-element.elementor-element-91f0bbb > .elementor-column-wrap {
        aspect-ratio: 386 / 199;
        min-height: 0;
        background-position: center;
        background-size: cover;
    }

    .elementor-8715 .elementor-element.elementor-element-3c728b6 .elementor-widget-container p,
    .elementor-8715 .elementor-element.elementor-element-92baf35 .elementor-widget-container p,
    .elementor-8715 .elementor-element.elementor-element-de7c36e .elementor-widget-container p,
    .elementor-8715 .elementor-element.elementor-element-6aa1924 .elementor-widget-container p,
    .elementor-8715 .elementor-element.elementor-element-91f0bbb .elementor-widget-container p {
        box-sizing: border-box;
        margin: 0;
        padding: 16px 18px 12px 42%;
        font-size: 14px !important;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .elementor-8715 .elementor-element.elementor-element-3c728b6 .elementor-widget-container p span[style*="font-size:17px"],
    .elementor-8715 .elementor-element.elementor-element-92baf35 .elementor-widget-container p span[style*="font-size:17px"],
    .elementor-8715 .elementor-element.elementor-element-de7c36e .elementor-widget-container p span[style*="font-size:17px"],
    .elementor-8715 .elementor-element.elementor-element-6aa1924 .elementor-widget-container p span[style*="font-size:17px"],
    .elementor-8715 .elementor-element.elementor-element-91f0bbb .elementor-widget-container p span[style*="font-size:17px"] {
        font-size: clamp(16px, 4.3vw, 17px) !important;
        line-height: 1.35;
    }

    /* Elementor saves page-specific selectors (for example `.elementor-5688`)
       in its generated stylesheet. Match that specificity and use the same
       layout contract for Thai and English, so a narrow device cannot fall
       back to the original 60px desktop gutter. */
    .elementor-5688 .elementor-element.elementor-element-450529d,
    .elementor-8715 .elementor-element.elementor-element-04871b1 {
        padding: 24px 16px !important;
    }

    .elementor-5688 .elementor-element.elementor-element-450529d > .elementor-container,
    .elementor-5688 .elementor-element.elementor-element-450529d > .elementor-container > .elementor-row,
    .elementor-8715 .elementor-element.elementor-element-04871b1 > .elementor-container,
    .elementor-8715 .elementor-element.elementor-element-04871b1 > .elementor-container > .elementor-row {
        width: 100% !important;
        max-width: 100% !important;
    }

    .elementor-5688 .elementor-element.elementor-element-450529d > .elementor-container > .elementor-row,
    .elementor-8715 .elementor-element.elementor-element-04871b1 > .elementor-container > .elementor-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px;
    }

    .elementor-5688 .elementor-element.elementor-element-450529d .elementor-column,
    .elementor-5688 .elementor-element.elementor-element-450529d .elementor-col-20,
    .elementor-8715 .elementor-element.elementor-element-04871b1 .elementor-column,
    .elementor-8715 .elementor-element.elementor-element-04871b1 .elementor-col-20 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
    }

    .elementor-5688 .elementor-element.elementor-element-450529d .elementor-column-wrap,
    .elementor-8715 .elementor-element.elementor-element-04871b1 .elementor-column-wrap {
        aspect-ratio: 386 / 199;
        min-height: 0;
        background-position: center;
        background-size: cover !important;
    }

    .elementor-5688 .elementor-element.elementor-element-450529d .elementor-widget-container p,
    .elementor-8715 .elementor-element.elementor-element-04871b1 .elementor-widget-container p {
        box-sizing: border-box;
        margin: 0;
        padding: 16px 18px 12px 42%;
        font-size: 14px !important;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .elementor-5688 .elementor-element.elementor-element-450529d .elementor-widget-container p span[style*="font-size:17px"],
    .elementor-8715 .elementor-element.elementor-element-04871b1 .elementor-widget-container p span[style*="font-size:17px"] {
        font-size: clamp(16px, 4.3vw, 17px) !important;
        line-height: 1.35;
    }

    /* Keep the legacy theme's off-canvas menu opaque: its original
       semi-transparent rules expose the page content between menu rows. */
    #site-navigation.main-navigation,
    #site-navigation.main-navigation .ak-container {
        background: #684d86;
    }

    .main-navigation.top #primary-menu {
        position: absolute;
        z-index: 100001;
        width: 100%;
        max-height: calc(100vh - 50px);
        overflow-y: auto;
        background: #684d86;
        box-shadow: 0 10px 24px rgba(40, 46, 58, 0.28);
    }

    /* navigation.js owns the button state. This selector must outrank the
       legacy `#primary-menu { display:none }` rule when the menu is open. */
    .main-navigation.top.toggled #primary-menu,
    .main-navigation.top.webreg-menu-open #primary-menu {
        display: block !important;
    }

    #site-navigation .mb-ham {
        display: block !important;
        z-index: 100002;
        width: 32px;
        height: 32px;
        padding: 6px 2px;
    }

    #site-navigation .mb-ham span {
        display: block !important;
        width: 28px;
        height: 3px;
        margin: 3px 0;
        background: #fff;
    }

    .main-navigation.top #primary-menu > li,
    .main-navigation.top #primary-menu > li > a {
        background: #684d86 !important;
    }

    .main-navigation.top #primary-menu > li {
        padding: 0 !important;
        border-color: rgba(255, 255, 255, 0.22);
    }

    .main-navigation.top #primary-menu > li > a {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        min-height: 52px;
        height: 52px;
        padding: 0 20px;
        color: #fff;
        font-weight: 600;
        line-height: 22px;
    }

    .main-navigation.top #primary-menu ul.sub-menu,
    .main-navigation.top #primary-menu ul.sub-menu > li,
    .main-navigation.top #primary-menu ul.sub-menu > li > a {
        background: #684d86 !important;
    }
}