/* 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;
  }
}