/* Portal responsive: 5-col (1050–1366) → 3-col (680–1049) → 1-col (≤679). ≥1367px unchanged. */

/* Center card text; override template link width */
body.portal-page .single-service {
  text-align: center;
}

body.portal-page .single-service-content {
  width: 100%;
  text-align: center;
}

body.portal-page .single-service-content a {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  text-align: center !important;
  box-sizing: border-box;
}

body.portal-page .single-service-content h4,
body.portal-page .single-service-content p {
  width: 100%;
  box-sizing: border-box;
  text-align: center !important;
}

/* ≤1366: base layout */
@media only screen and (max-width: 1366px) {
  body.portal-page {
    --portal-card-width: 190px;
    min-height: 100vh;
    background-position: center top;
    background-repeat: no-repeat;
  }

  body.portal-page #services.services-area {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  body.portal-page #services .container {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    max-width: 100% !important;
    margin-inline: auto;
    padding-top: clamp(120px, 16vh, 200px) !important;
    padding-inline: 15px;
    box-sizing: border-box;
  }

  body.portal-page #services .all-service-wrapper > .row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin-inline: 0;
  }

  body.portal-page #services .all-service-wrapper > .row > [class*="col-md-"]:not(:has(.single-service)) {
    display: none;
  }

  body.portal-page #services .all-service-wrapper > .row > [class*="col-md-"]:has(.single-service) {
    display: flex;
    justify-content: center;
    padding-inline: 15px;
    box-sizing: border-box;
  }

  body.portal-page .single-service {
    width: var(--portal-card-width) !important;
    max-width: var(--portal-card-width) !important;
    margin-inline: auto !important;
    margin-bottom: 30px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 61px 40px 15px !important;
  }

  body.portal-page .single-service img {
    width: 100% !important;
    height: auto !important;
  }

  body.portal-page .single-service-content h4 {
    height: auto !important;
    min-height: 110px;
    font-size: 24px !important;
    line-height: 1.35;
    display: block !important;
    padding: 25px 0 10px;
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  body.portal-page .single-service-content p {
    font-size: 10px !important;
    margin-top: 15px !important;
  }

  body.portal-page #services > .row:last-child {
    flex-shrink: 0;
    margin-top: auto !important;
    width: 100%;
    padding-bottom: 24px;
  }

  body.portal-page #services > .row:last-child span[style] {
    font-size: 15px !important;
  }
}

/* 5 columns */
@media only screen and (min-width: 1050px) and (max-width: 1366px) {
  body.portal-page {
    --portal-card-gap: clamp(12px, 1.4vw, 22px);
  }

  body.portal-page #services .all-service-wrapper > .row {
    flex-wrap: nowrap;
    gap: var(--portal-card-gap);
  }

  body.portal-page #services .all-service-wrapper > .row > [class*="col-md-"]:has(.single-service) {
    flex: 0 0 var(--portal-card-width);
    width: var(--portal-card-width);
    max-width: var(--portal-card-width);
    padding-inline: 0;
  }

  body.portal-page .single-service {
    padding-inline: 22px !important;
  }

  body.portal-page .single-service-content h4 {
    font-size: 20px !important;
    line-height: 1.3;
  }
}

/* 3-col & 1-col: wrap + gap */
@media only screen and (max-width: 1049px) {
  body.portal-page {
    --portal-card-gap: clamp(10px, 2vw, 20px);
  }

  body.portal-page #services .all-service-wrapper > .row {
    flex-wrap: wrap;
    gap: var(--portal-card-gap);
  }

  body.portal-page .single-service {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: clamp(22px, 4vw, 32px) !important;
  }

  body.portal-page .single-service-content h4 {
    min-height: 96px;
    font-size: clamp(18px, 2.4vw, 22px) !important;
  }
}

/* 3 columns; col width accounts for 2 gaps */
@media only screen and (min-width: 680px) and (max-width: 1049px) {
  body.portal-page #services .container {
    padding-top: clamp(140px, 20vh, 240px) !important;
  }

  body.portal-page #services .all-service-wrapper > .row > [class*="col-md-"]:has(.single-service) {
    flex: 0 0 calc((100% - 2 * var(--portal-card-gap)) / 3);
    width: calc((100% - 2 * var(--portal-card-gap)) / 3);
    max-width: calc((100% - 2 * var(--portal-card-gap)) / 3);
    padding-inline: 0;
  }
}

/* 1 column */
@media only screen and (max-width: 679px) {
  body.portal-page #services .container {
    padding-top: clamp(160px, 24vh, 280px) !important;
  }

  body.portal-page #services .all-service-wrapper > .row > [class*="col-md-"]:has(.single-service) {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
  }

  body.portal-page .single-service {
    width: clamp(240px, 84vw, 320px) !important;
    max-width: 100% !important;
    padding-inline: clamp(20px, 6vw, 28px) !important;
  }

  body.portal-page .single-service-content h4 {
    min-height: 0;
    font-size: clamp(17px, 4.8vw, 20px) !important;
    line-height: 1.45;
  }
}