/**
 * Mobile layout for Services / Passion (full-width grids)
 * Card padding & stack gaps on Services → match jj-blog.css @767 (.jj-blog-card-body)
 */

@media screen and (max-width: 991px) {
  /* —— Services —— */
  .jj-services-page .jj-services-inner.main-grid.home.jj-wte-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start;
  }

  .jj-services-page .jj-services-inner .jj-value-wte-intro {
    grid-column: 1 / -1 !important;
    grid-row: 1;
    width: 100%;
    max-width: none;
    margin-bottom: 2em;
  }

  .jj-services-page .jj-services-inner .jj-section-right {
    grid-area: auto !important;
    grid-column: 1 / -1 !important;
    grid-row: 2;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .jj-services-page .jj-services-inner .jj-value-wte-title,
  .jj-services-page .jj-services-inner .jj-services-intro-dek,
  .jj-services-page .jj-services-hero-dek,
  .jj-services-page .jj-services-hero .passion {
    max-width: none;
  }

  .jj-services-workflow-layout.main-grid.home {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .jj-services-workflow-intro {
    grid-column: 1 / -1 !important;
    width: 100%;
    max-width: none;
    margin-bottom: 2em;
  }

  .jj-services-workflow-intro .jj-value-wte-title,
  .jj-services-workflow-dek {
    max-width: none;
  }

  .jj-services-workflow-steps {
    grid-column: 1 / -1 !important;
    width: 100%;
    margin-top: 0;
  }

  /* —— Passion —— */
  .page-wrapper.passion .main-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  .page-wrapper.passion .main-grid > * {
    grid-column: 1 / -1 !important;
    grid-area: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    box-sizing: border-box;
  }

  .page-wrapper.passion h1.passion,
  .page-wrapper.passion .inner-title-wrapper .paragraph,
  .page-wrapper.passion .jj-passion-youtube-dek,
  .page-wrapper.passion .jj-instagram-dek {
    max-width: none;
  }

  .page-wrapper.passion .youtube-block {
    display: flex;
    flex-direction: column;
    gap: 2.5em;
    width: 100%;
  }

  .page-wrapper.passion .jj-flickmatch-section .main-grid,
  .page-wrapper.passion .jj-instagram-section .main-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media screen and (max-width: 767px) {
  /* Shared section rhythm */
  .jj-services-page .section:has(.jj-services-inner) .container.home.w-container,
  .jj-services-page .jj-services-testi .container.home.w-container {
    box-sizing: border-box;
  }

  .jj-services-page .jj-services-inner.jj-wte-inner {
    padding: 3.5em 0 !important;
    margin-top: 0 !important;
  }

  .jj-services-page .jj-services-inner .jj-value-wte-intro {
    margin-bottom: 2.5em;
  }

  /* Same as .jj-blog-grid / .jj-blog-card-body @767 in jj-blog.css */
  .jj-services-page .jj-services-phases,
  .jj-services-page .jj-services-cases,
  .jj-services-page .jj-services-content-points,
  .jj-services-page .jj-services-engagement {
    gap: 5em;
  }

  .jj-services-page .jj-services-phase,
  .jj-services-page .jj-services-case-link,
  .jj-services-page .jj-services-content-point,
  .jj-services-page .jj-services-aside,
  .jj-services-page .jj-services-engagement-item {
    padding: 6em;
    box-sizing: border-box;
  }

  .jj-services-page .jj-services-phase,
  .jj-services-page .jj-services-content-point {
    gap: 3.4em;
  }

  .jj-services-page .jj-services-content-point {
    border: 1px solid rgba(19, 20, 23, 0.08);
    border-radius: 0.75em;
  }

  .jj-services-page .jj-services-content-stack {
    gap: 5em;
  }

  /* How I work — dark band */
  .jj-services-workflow-band__inner {
    padding-top: 3.5em;
    padding-bottom: 3.5em;
  }

  .jj-services-workflow-band .container.home.w-container {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .jj-services-workflow-intro {
    margin-bottom: 2.5em;
  }

  .jj-services-workflow-steps {
    margin-top: 0.5em;
    border-top-width: 1px;
  }

  .jj-services-workflow-card {
    padding: 4.55em 0 4.65em;
    gap: 0 1.25em;
  }

  .jj-services-page section.section.jj-services-section-last {
    margin-top: 14em;
  }

  .jj-services-workflow-card__inner {
    gap: 0 1.5em;
  }

  .jj-services-workflow-card__title {
    margin-bottom: 0.65em;
  }

  .jj-services-page .jj-services-testi .jj-testi-focus.jj-testi-inner {
    padding-top: 3.5em !important;
    padding-bottom: 3.5em !important;
  }

  /* Passion */
  .page-wrapper.passion .container.inner-hero.passion {
    padding-top: 5em;
    padding-bottom: 2.5em;
  }

  .page-wrapper.passion .section:not(.footer) {
    padding-top: 3.5em;
    padding-bottom: 3.5em;
    box-sizing: border-box;
  }

  .page-wrapper.passion .section:not(.footer):first-of-type {
    padding-top: 0;
  }

  .page-wrapper.passion .inner-title-wrapper {
    margin-bottom: 0.5em;
  }

  .page-wrapper.passion h1.passion {
    margin-bottom: 0.25em;
  }

  .page-wrapper.passion .youtube-block {
    gap: 3.25em;
    margin-top: 3.25em;
  }

  .page-wrapper.passion .jj-passion-youtube-intro {
    margin-top: 0;
    margin-bottom: 2em;
    max-width: none;
  }

  .page-wrapper.passion .jj-flickmatch-section {
    margin-top: 3.5em;
    padding-top: 3.5em;
  }

  .page-wrapper.passion .jj-instagram-section {
    margin-top: 3.5em;
    padding-top: 3.5em;
  }

  .page-wrapper.passion .jj-instagram-header {
    margin-bottom: 2.5em;
    gap: 1.25em;
  }

  .page-wrapper.passion .jj-instagram-header__copy {
    max-width: none;
    width: 100%;
  }
}