/*
 * OneCloud shared plan grid layout rules.
 *
 * Owns count-aware card grid behavior for Microsoft-style storefront pages.
 * Brand-specific card colors stay in their matching storefront CSS files.
 */

#order-onecloud .oc-ms-plan-grid.oc-plan-grid--count-1,
#order-onecloud .oc-cf-plan-grid.oc-plan-grid--count-1,
#order-onecloud .oc-sp-plan-grid.oc-plan-grid--count-1,
#order-onecloud .oc-cp-plan-grid.oc-plan-grid--count-1,
#order-onecloud .oc-yearly-plan-grid.oc-plan-grid--count-1 {
  grid-template-columns: minmax(0, 1fr) !important;
}

#order-onecloud .oc-ms-plan-grid.oc-plan-grid--count-2,
#order-onecloud .oc-cf-plan-grid.oc-plan-grid--count-2,
#order-onecloud .oc-sp-plan-grid.oc-plan-grid--count-2,
#order-onecloud .oc-cp-plan-grid.oc-plan-grid--count-2,
#order-onecloud .oc-yearly-plan-grid.oc-plan-grid--count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#order-onecloud .oc-ms-plan-grid.oc-plan-grid--count-3,
#order-onecloud .oc-cf-plan-grid.oc-plan-grid--count-3,
#order-onecloud .oc-sp-plan-grid.oc-plan-grid--count-3,
#order-onecloud .oc-cp-plan-grid.oc-plan-grid--count-3,
#order-onecloud .oc-yearly-plan-grid.oc-plan-grid--count-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (min-width: 901px) {
  #order-onecloud .oc-plan-grid--count-1 .oc-ms-plan-card.product {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.42fr) minmax(0, 1fr);
    grid-template-areas:
      "header price features"
      "header button features";
    column-gap: 24px;
    align-items: start;
    min-height: 0;
  }

  #order-onecloud .oc-plan-grid--count-1 .oc-ms-plan-card header {
    grid-area: header;
    min-height: 0;
    height: 100%;
    border-right: 1px solid #eef1f5;
    border-bottom: 0;
  }

  #order-onecloud .oc-plan-grid--count-1 .oc-ms-plan-card__price {
    grid-area: price;
    padding: 28px 0 8px;
  }

  #order-onecloud .oc-plan-grid--count-1 .oc-ms-plan-card__btn {
    grid-area: button;
    justify-self: start;
    width: auto !important;
    min-width: 180px;
    margin: 10px 0 28px !important;
    padding-inline: 24px;
  }

  #order-onecloud .oc-plan-grid--count-1 .oc-ms-plan-card__section {
    grid-area: features;
    padding: 28px 26px 28px 0;
  }

  #order-onecloud .oc-plan-grid--count-1 .oc-ms-plan-card header p {
    min-height: 0;
  }
}

#order-onecloud .oc-plan-grid--count-1 .oc-ms-plan-card__btn,
#order-onecloud .oc-plan-grid--count-2 .oc-ms-plan-card__btn,
#order-onecloud .oc-plan-grid--count-3 .oc-ms-plan-card__btn {
  align-self: flex-start;
  width: auto !important;
  min-width: 168px;
  max-width: calc(100% - 44px);
  padding-inline: 24px;
}

#order-onecloud .oc-plan-grid--count-2 .oc-ms-plan-card__btn,
#order-onecloud .oc-plan-grid--count-3 .oc-ms-plan-card__btn {
  margin-right: 22px !important;
}

@media (max-width: 900px) {
  #order-onecloud .oc-ms-plan-grid.oc-plan-grid--count-2,
  #order-onecloud .oc-ms-plan-grid.oc-plan-grid--count-3,
  #order-onecloud .oc-cf-plan-grid.oc-plan-grid--count-2,
  #order-onecloud .oc-cf-plan-grid.oc-plan-grid--count-3,
  #order-onecloud .oc-sp-plan-grid.oc-plan-grid--count-2,
  #order-onecloud .oc-sp-plan-grid.oc-plan-grid--count-3,
  #order-onecloud .oc-cp-plan-grid.oc-plan-grid--count-2,
  #order-onecloud .oc-cp-plan-grid.oc-plan-grid--count-3,
  #order-onecloud .oc-yearly-plan-grid.oc-plan-grid--count-2,
  #order-onecloud .oc-yearly-plan-grid.oc-plan-grid--count-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  #order-onecloud .oc-ms-plan-grid.oc-plan-grid--count-1,
  #order-onecloud .oc-ms-plan-grid.oc-plan-grid--count-2,
  #order-onecloud .oc-ms-plan-grid.oc-plan-grid--count-3,
  #order-onecloud .oc-cf-plan-grid.oc-plan-grid--count-1,
  #order-onecloud .oc-cf-plan-grid.oc-plan-grid--count-2,
  #order-onecloud .oc-cf-plan-grid.oc-plan-grid--count-3,
  #order-onecloud .oc-sp-plan-grid.oc-plan-grid--count-1,
  #order-onecloud .oc-sp-plan-grid.oc-plan-grid--count-2,
  #order-onecloud .oc-sp-plan-grid.oc-plan-grid--count-3,
  #order-onecloud .oc-cp-plan-grid.oc-plan-grid--count-1,
  #order-onecloud .oc-cp-plan-grid.oc-plan-grid--count-2,
  #order-onecloud .oc-cp-plan-grid.oc-plan-grid--count-3,
  #order-onecloud .oc-yearly-plan-grid.oc-plan-grid--count-1,
  #order-onecloud .oc-yearly-plan-grid.oc-plan-grid--count-2,
  #order-onecloud .oc-yearly-plan-grid.oc-plan-grid--count-3 {
    grid-template-columns: 1fr !important;
  }
}