/* What We Do — Surface Pro 7 / tablet (901–1100px): solution team section only.
   Loaded AFTER page CSS so it can override fixed 128px card heights. */

@media screen and (min-width: 901px) and (max-width: 1100px) {
  html body[class] #solution-os.solution-section {
    padding-left: 20px !important;
    padding-right: 72px !important;
    overflow-x: hidden;
  }

  html body[class] #solution-os.solution-section .container,
  html body[class] #solution-os.solution-section .solution-shell,
  html body[class] #solution-os.solution-section .solution-layers {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }

  html body[class] #solution-os.solution-section .solution-split {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px;
  }

  html body[class] #solution-os.solution-section .solution-media,
  html body[class] #solution-os.solution-section .solution-layers > .solution-media {
    order: -1;
    width: 100%;
    margin: 0 0 10px;
    min-height: 280px;
  }

  html body[class] #solution-os.solution-section .solution-media .media-frame,
  html body[class]
    #solution-os.solution-section
    .solution-layers
    > .solution-media
    .media-frame {
    min-height: 280px;
  }

  html body[class] #solution-os.solution-section .sol-layer {
    display: grid !important;
    grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) auto !important;
    height: auto !important;
    min-height: 112px !important;
    max-height: none !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    align-items: center !important;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  html body[class] #solution-os.solution-section .sol-layer > div:nth-child(2) {
    overflow: visible !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html body[class] #solution-os.solution-section .sol-title {
    white-space: normal;
  }

  html body[class] #solution-os.solution-section .sol-desc {
    min-height: 0 !important;
  }

  html body[class] #solution-os.solution-section .sol-num {
    white-space: nowrap;
  }

  html body[class] #solution-os.solution-section .sol-tag {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* CTA #get-matched perk cards — same as content-writing (Surface Pro only) */
@media screen and (min-width: 901px) and (max-width: 1100px) {
  html body[class] section.cta-section#get-matched {
    padding-left: 24px !important;
    padding-right: 72px !important;
  }

  html body[class] section.cta-section#get-matched .cta-inner {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px) !important;
    gap: 28px !important;
    max-width: 100%;
  }

  html body[class] section.cta-section#get-matched .cta-left,
  html body[class] section.cta-section#get-matched .cta-meta,
  html body[class] section.cta-section#get-matched .form-perks {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  html body[class] section.cta-section#get-matched .form-perk {
    display: block !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden !important;
    font-size: 13px;
    line-height: 1.4;
  }

  html body[class] section.cta-section#get-matched .form-perk > .role-icon,
  html body[class] section.cta-section#get-matched .form-perk > .svc-icon,
  html body[class] section.cta-section#get-matched .form-perk > i {
    float: left;
    margin-right: 10px;
  }

  html body[class] section.cta-section#get-matched .form-perk > span,
  html body[class] section.cta-section#get-matched .form-perk > .form-perk__text {
    display: block;
    overflow: hidden;
    min-width: 0;
  }

  html body[class] section.cta-section#get-matched .form-perk strong {
    font-weight: 700;
    margin-right: 0.25em;
  }

  html body[class] section.cta-section#get-matched .cta-form-wrap,
  html body[class] section.cta-section#get-matched .cta-banner-form {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* iPad Pro 13 only — video-editing.html solution-os match video-editing-v1 */
@media screen and (min-width: 1024px) and (max-width: 1040px) and (min-height: 1300px) {
  html body.page-video-editing #solution-os.solution-section {
    padding-left: 28px !important;
    padding-right: 68px !important;
  }

  html body.page-video-editing #solution-os.solution-section .solution-split {
    display: grid !important;
    flex-direction: unset !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) !important;
    gap: 14px !important;
    align-items: stretch;
  }

  html body.page-video-editing #solution-os.solution-section .solution-media,
  html body.page-video-editing #solution-os.solution-section .solution-layers > .solution-media {
    order: unset !important;
    width: 100% !important;
    margin: 0 !important;
    min-height: 310px;
  }

  html body.page-video-editing #solution-os.solution-section .sol-layer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    min-height: 112px !important;
    max-height: none !important;
    gap: 0 6px !important;
    padding: 14px 16px !important;
    overflow: visible !important;
    align-items: center !important;
  }

  html body.page-video-editing #solution-os.solution-section .sol-num {
    grid-column: 1;
    grid-row: 1;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap;
  }

  html body.page-video-editing #solution-os.solution-section .sol-tag {
    grid-column: 2;
    grid-row: 1;
    width: max-content;
    min-width: 0;
    max-width: none;
    white-space: nowrap;
    padding: 5px 10px;
    flex-shrink: 0;
  }

  html body.page-video-editing #solution-os.solution-section .sol-layer > div:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
    overflow: visible !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html body.page-video-editing #solution-os.solution-section .sol-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  html body.page-video-editing #solution-os.solution-section .sol-desc {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 0 !important;
  }
}

/* Surface Pro 10 only — video-editing.html solution-os match video-editing-v1 */
@media screen and (min-width: 950px) and (max-width: 970px) {
  html body.page-video-editing #solution-os.solution-section {
    padding-left: 24px !important;
    padding-right: 68px !important;
  }

  html body.page-video-editing #solution-os.solution-section .solution-split {
    display: grid !important;
    flex-direction: unset !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) !important;
    gap: 14px !important;
    align-items: stretch;
  }

  html body.page-video-editing #solution-os.solution-section .solution-media,
  html body.page-video-editing #solution-os.solution-section .solution-layers > .solution-media {
    order: unset !important;
    width: 100% !important;
    margin: 0 !important;
    min-height: 300px;
  }

  html body.page-video-editing #solution-os.solution-section .sol-layer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    min-height: 112px !important;
    max-height: none !important;
    gap: 0 6px !important;
    padding: 14px 16px !important;
    overflow: visible !important;
    align-items: center !important;
  }

  html body.page-video-editing #solution-os.solution-section .sol-num {
    grid-column: 1;
    grid-row: 1;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap;
  }

  html body.page-video-editing #solution-os.solution-section .sol-tag {
    grid-column: 2;
    grid-row: 1;
    width: max-content;
    min-width: 0;
    max-width: none;
    white-space: nowrap;
    padding: 5px 10px;
    flex-shrink: 0;
  }

  html body.page-video-editing #solution-os.solution-section .sol-layer > div:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
    overflow: visible !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html body.page-video-editing #solution-os.solution-section .sol-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  html body.page-video-editing #solution-os.solution-section .sol-desc {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 0 !important;
  }
}