/* SNDIA responsive adjustments. Desktop rules and legacy page content stay intact.
 * An important layer overrides the old YellowPencil/VC important declarations
 * without depending on their generated IDs. All layout rules are width-scoped.
 */
@layer sndia-mobile {
  @media (max-width: 1024px) {
    #content .vc_custom_1579162977861 {
      padding-left: 20px !important;
      padding-right: 20px !important;
    }
    #content .wpb_wrapper { left: auto !important; min-width: 0 !important; }
    #content .vc_column_container { min-width: 0 !important; }
    #content .vc_custom_1533130656186,
    #content .vc_custom_1533130801073 { padding: 40px 24px !important; }

    /* Keep full-size numbers and column relationships inside a local scroll area. */
    #content .sndia-scroll-region,
    #content .visualizer-front-container {
      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;
      scrollbar-width: thin;
      scrollbar-color: #6b755d #eef0eb;
      position: relative !important;
    }
    #content .sndia-scroll-region:focus-visible,
    #content .visualizer-front-container:focus-visible {
      outline: 2px solid #526440;
      outline-offset: 3px;
    }
    #content .sndia-scroll-region table {
      width: 100% !important;
      min-width: var(--sndia-table-width, 560px) !important;
      margin: 0 !important;
      table-layout: auto !important;
      font-size: 14px !important;
      line-height: 1.65 !important;
    }
    #content .sndia-scroll-region th,
    #content .sndia-scroll-region td {
      padding: 10px 12px !important;
      font-size: 14px !important;
      line-height: 1.65 !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
    }
    #content .visualizer-front { min-width: 560px !important; }
    #content .sndia-scroll-hint {
      display: block !important;
      margin: 8px 0 !important;
      font-size: 12px !important;
      line-height: 1.6 !important;
      color: #4f6041 !important;
      letter-spacing: 0 !important;
    }
    #content .sndia-scroll-hint[hidden] { display: none !important; }
    #content .visualizer-chart-shortcode { display: block !important; }
  }

  @media (max-width: 767px) {
    /* Use the screen width for the content, preserving WPBakery's row gutters. */
    #wrapper .container.entry-content { width: calc(100% - 36px) !important; max-width: none !important; }
    #content > .vc_row:not([data-vc-full-width]) { margin-left: -15px !important; margin-right: -15px !important; }
    #content > .vc_row:not(.vc_row-no-padding) { padding-left: 0 !important; padding-right: 0 !important; }
    #content > .vc_row:not(.vc_row-no-padding) > .vc_column_container > .vc_column-inner {
      padding-left: 18px !important;
      padding-right: 18px !important;
    }
    #content .vc_column_container { width: 100% !important; float: none !important; }
    #content .vc_row-flex { flex-wrap: wrap !important; }
    #content .wpb_text_column { margin-bottom: 24px !important; }
    #content .wpb_text_column p:not(.sndia-scroll-hint), #content .sh-event-description {
      font-size: 15px !important;
      line-height: 1.9 !important;
      overflow-wrap: anywhere;
    }
    #content h1, #content h2, #content h3 {
      overflow-wrap: anywhere !important;
      line-height: 1.6 !important;
      letter-spacing: .05em !important;
    }
    #content h1 { font-size: 22px !important; }
    #content h2 { font-size: 19px !important; margin-top: 0 !important; }
    #content h3 { font-size: 18px !important; }
    #content h1:first-letter { font-size: 1em !important; margin-right: 0 !important; }
    #content .sh-heading { margin-bottom: 16px !important; }
    #content .vc_custom_heading { margin-bottom: 16px !important; }
    #content .vc_empty_space { height: 24px !important; }
    #content img { max-width: 100% !important; height: auto !important; }
    #content video { max-width: 100% !important; }
    #content .wpb_video_widget, #content .wpb_single_image { max-width: 100% !important; }
    #content .wpb_video_widget iframe { width: 100% !important; }
    #content .vc_custom_1579163076182 { padding-top: 24px !important; }
    #content .vc_custom_1579166277754 .vc_custom_heading { margin-top: 24px !important; }

    /* Banners: lay out the existing text layers at readable sizes over the same image. */
    #content > .vc_row:first-child rs-fullwidth-wrap,
    #content > .vc_row:first-child rs-module-wrap,
    #content > .vc_row:first-child rs-module {
      height: 230px !important;
      min-height: 230px !important;
      max-height: none !important;
    }
    #content > .vc_row:first-child rs-module-wrap { position: relative !important; left: 0 !important; width: 100% !important; }
    #content > .vc_row:first-child rs-module { background-color: #252a22 !important; }
    #content > .vc_row:first-child rs-bgvideo { pointer-events: none !important; }
    /* Touch browsers expose video controls over the title. Use existing artwork. */
    :is(.home,.page-id-9146) #content > .vc_row:first-child rs-bgvideo { display: none !important; }
    :is(.home,.page-id-9146) #content > .vc_row:first-child :is(rs-sbg-px,rs-sbg-wrap,rs-sbg) {
      opacity: 1 !important;
      visibility: visible !important;
    }
    .home #content > .vc_row:first-child rs-sbg {
      background-image: linear-gradient(#0005,#0006), url('https://sndia.co.jp/wp-content/uploads/2020/08/NAO00283-7-29-2020--1024x683.jpg') !important;
      background-position: center !important;
      background-size: cover !important;
    }
    .page-id-9146 #content > .vc_row:first-child rs-sbg {
      background-image: linear-gradient(#0007,#0007), url('https://sndia.co.jp/wp-content/uploads/2020/06/トップ～製品.jpg') !important;
      background-position: center !important;
      background-size: cover !important;
    }
    #content > .vc_row:first-child rs-slide {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 12px !important;
      padding: 28px 22px !important;
    }
    #content > .vc_row:first-child rs-layer-wrap {
      position: relative !important;
      left: auto !important;
      top: auto !important;
      width: 100% !important;
      max-width: 600px !important;
    }
    #content > .vc_row:first-child rs-loop-wrap,
    #content > .vc_row:first-child rs-mask-wrap {
      position: relative !important;
      width: 100% !important;
    }
    #content > .vc_row:first-child rs-layer[data-type="text"] {
      display: block !important;
      width: 100% !important;
      height: auto !important;
      white-space: normal !important;
      text-align: center !important;
      font-size: 24px !important;
      line-height: 1.65 !important;
      letter-spacing: .05em !important;
      transform: none !important;
      text-shadow: 0 1px 5px #000 !important;
      text-wrap: balance;
    }
    #content > .vc_row:first-child rs-layer-wrap ~ rs-layer-wrap rs-layer[data-type="text"] {
      font-size: 14px !important;
    }
    .home #content > .vc_row:first-child rs-module-wrap,
    .home #content > .vc_row:first-child rs-module { height: 520px !important; min-height: 520px !important; }
    .home #content > .vc_row:first-child rs-slide { padding-top: 120px !important; }
    .home #content rs-layer-wrap:has(#slider-2-slide-5-layer-4) { order: -1 !important; }
    .home #content #slider-2-slide-5-layer-4 { font-size: clamp(18px, 4.8vw, 23px) !important; }
    .home #content #slider-2-slide-5-layer-0 { font-size: 18px !important; }
    .home #content #slider-2-slide-5-layer-3 { font-size: 14px !important; }
    .home #content #slider-2-slide-5-layer-3 br { display: none !important; }

    /* Product/intro sections: photo first, then full-width copy without tall empty bands. */
    :is(.home,.page-id-9146) #content .vc_custom_1533130656186,
    :is(.home,.page-id-9146) #content .vc_custom_1533130801073 { padding: 32px 22px !important; }
    :is(.home,.page-id-9146) #content .vc_row_reversed_columns { flex-direction: column-reverse !important; }
    .home #content .vc_column-inner:is(.vc_custom_1591908669937,.vc_custom_1596640840037,.vc_custom_1596640946583) {
      min-height: 220px !important;
      padding: 0 !important;
    }
    .page-id-9146 #content .vc_column-inner:is(.vc_custom_1593065991947,.vc_custom_1593067781305,.vc_custom_1593068105379,.vc_custom_1593068295033) {
      min-height: 240px !important;
      padding: 60px 24px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    .page-id-9146 #content .vc_column-inner:is(.vc_custom_1593065991947,.vc_custom_1593067781305,.vc_custom_1593068105379,.vc_custom_1593068295033) h2 {
      font-size: 26px !important;
      text-shadow: 0 1px 5px #222 !important;
    }
    #content .sh-event-title { margin-bottom: 10px !important; }
    #content .sh-event { padding-top: 20px !important; padding-bottom: 20px !important; }
    #content .sh-event-button { position: static !important; margin-top: 12px !important; }
    #content .vc_btn3, #content .sh-button, #content .button-4, #content .button-5, #content .button-6 {
      max-width: 100% !important;
      min-height: 44px !important;
      height: auto !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
    }
    #content .vc_btn3 { padding: 14px 22px !important; }
    #content .vc_btn3-icon { position: static !important; transform: none !important; margin-right: 8px !important; }
    #content .sh-button { padding: 12px 20px !important; line-height: 1.7 !important; }
    #content .sh-button-text { line-height: 1.7 !important; }
    #content .button-6 { position: relative !important; inset: auto !important; margin: 20px auto !important; }

    /* Show the existing PC news list on mobile as readable stacked entries. */
    .home #content #blog { padding: 32px 0 !important; }
    .home #content #blog > .vc_hidden-xs { display: block !important; }
    #content dl.case4, #content dl.case5 { width: 100% !important; margin: 16px 0 !important; }
    #content dl.case4 dt, #content dl.case5 dt { float: none !important; width: auto !important; padding: 0 !important; font-size: 14px !important; }
    #content dl.case4 dd, #content dl.case5 dd { padding: 6px 0 18px !important; margin: 0 0 16px !important; font-size: 15px !important; }
    #content dl.case4 dd span.cat { position: static !important; width: fit-content !important; padding: 2px 8px !important; margin-bottom: 6px !important; font-size: 12px !important; }
    #content dl.case4 dd a { display: block !important; line-height: 1.8 !important; }

    /* Contact bands and recruitment tiles retain the same artwork. */
    #content :is(.vc_custom_1592522065744,.vc_custom_1598516368357,.vc_custom_1578986617981,.vc_custom_1532544278408) {
      padding-top: 32px !important;
      padding-bottom: 32px !important;
      margin-bottom: 0 !important;
    }
    #content :is(.vc_custom_1592522065744,.vc_custom_1598516368357,.vc_custom_1578986617981,.vc_custom_1532544278408) .vc_column-inner { padding-top: 0 !important; }
    #content :is(.vc_custom_1592522065744,.vc_custom_1598516368357,.vc_custom_1578986617981,.vc_custom_1532544278408) img { display: block !important; width: 250px !important; margin: 12px auto 0 !important; }
    .home #content .vc_custom_1585113296570 { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px !important; padding: 18px !important; }
    .home #content .vc_custom_1585113296570 > .vc_column_container { padding: 0 !important; }
    .home #content .vc_custom_1585113296570 > .vc_column_container:last-of-type { grid-column: 1 / -1; width: 50% !important; justify-self: center; }
    #content .vc_custom_1570647940702 { height: auto !important; min-height: 240px !important; padding-top: 36px !important; padding-bottom: 36px !important; }
    #content .wpb_animate_when_almost_visible { opacity: 1 !important; animation: none !important; transform: none !important; }
    #content .vc_column-inner, #content .vc_row { animation: none !important; opacity: 1 !important; }
    #content h1, #content h2, #content h3 { transition: none !important; }
    #content .sh-element-margin { opacity: 1 !important; }
    .sh-header-mobile-navigation .container { width: calc(100% - 36px) !important; }
    .sh-footer .container { width: calc(100% - 36px) !important; }

    /* Phone typography: override tracking on nested spans as well as headings. */
    #content :is(h1,h2,h3,h4,p,li,dt,dd),
    #content :is(h1,h2,h3,h4,p,li,dt,dd) :is(span,strong,b,em,a),
    #content .sh-event-description,
    #content .sh-button-text,
    #content > .vc_row:first-child rs-layer[data-type="text"] {
      letter-spacing: 0 !important;
      word-spacing: normal !important;
    }
    #content .wpb_text_column p:not(.sndia-scroll-hint),
    #content .sh-event-description { line-height: 1.8 !important; }
    #content .vc_btn3,
    #content .sh-button,
    #content .sh-event-button,
    #content :is(.button-4,.button-5,.button-6) a {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      box-sizing: border-box !important;
      min-height: 48px !important;
      height: auto !important;
      max-width: 100% !important;
      padding: 12px 18px !important;
      font-size: 15px !important;
      line-height: 1.6 !important;
      letter-spacing: 0 !important;
      word-spacing: normal !important;
      text-align: center !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
      vertical-align: middle !important;
    }
    #content .vc_btn3,
    #content .sh-button { width: min(100%, 320px) !important; }
    #content .vc_btn3-container { margin: 16px 0 24px !important; }
    #content .vc_btn3-container.vc_btn3-center { text-align: center !important; }
    #content :is(.vc_btn3-icon,.sh-button-icon) {
      position: static !important;
      transform: none !important;
      flex: 0 0 auto !important;
      width: auto !important;
      height: auto !important;
      margin: 0 !important;
      line-height: 1 !important;
    }
    #content .sh-event-button { min-width: 148px !important; margin: 12px 0 0 !important; }
    #content :is(.button-4,.button-5,.button-6) {
      width: min(100%, 320px) !important;
      height: auto !important;
    }
    #content :is(.button-4,.button-5,.button-6) p { margin: 0 !important; }
    #content :is(.button-4,.button-5,.button-6) a { width: 100% !important; }
    #content .vc_btn3:focus-visible,
    #content .sh-event-button:focus-visible,
    #content .sh-button:focus-visible { outline: 2px solid #64784b !important; outline-offset: 3px !important; }
  }
}