/* Advanced Solutions (built by scripts/build-advanced-solutions.mjs). The pages
   reuse the HYDRAMEM and Standard Products stylesheets; these rules only fit
   those patterns to this section's content. Hand-edited, no src twin. */

/* Group introduction: the HYDRAMEM family pages' pover block (heading left,
   text right), copied from membrane-ultra-filtration.css. */
#mem-page#mem-page .pover__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
#mem-page#mem-page .pover__head { min-width: 0; }
#mem-page#mem-page .pover__title { margin: 0; }
#mem-page#mem-page .pover__body p { margin: 0 0 16px; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; color: var(--text-secondary); }
#mem-page#mem-page .pover__body p:last-child { margin-bottom: 0; }
@media (max-width: 1080px) {
  #mem-page#mem-page .pover__layout { grid-template-columns: 1fr; }
}

/* Two solution cards share the row (as instruments.css). */
@media (min-width: 1181px) {
  #mem-page#mem-page .memgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
}

/* Solution cards carry no body line, so the panel holds only the family,
   the name (two lines reserved) and the Explore link. */
body.membrane-typography #mem-page#mem-page .memcard--as { --mem-panel: 158px; }

/* Light blue boxes: one column per box up to five; a box's link sits at its foot. */
@media (min-width: 621px) {
  .mcat-feat.as-feat--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1081px) {
  .mcat-feat.as-feat--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mcat-feat.as-feat--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.mcat-feat[class*="as-feat--"] > li { display: flex; flex-direction: column; }
.mcat-feat[class*="as-feat--"] .mcat-feat__body { margin: 0; }
.mcat-feat[class*="as-feat--"] p.mcat-feat__head { margin: 0; }
#main-content a.as-feat__link, #main-content a.as-feat__link:visited {
  margin-top: auto; padding-top: 16px;
  font-size: var(--type-helper); font-weight: var(--type-weight-subheading); line-height: 1.4;
  color: #007cc3; text-decoration: none;
}
#main-content a.as-feat__link:hover, #main-content a.as-feat__link:focus-visible { text-decoration: underline; }
/* Hub pages hold the boxes inside the membranes section rhythm. */
#mem-page#mem-page .mcat-feat { margin-top: clamp(18px, 1.8vw, 26px); }
#mem-page#mem-page .mcat-feat .mcat-feat__body { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; color: var(--text-secondary); }
.mcat-body .mcat-lead + .mcat-feat { margin-top: 18px; }
.mcat-lead.as-after { margin-top: 20px; }

/* Sibling tiles: one row for five, two rows of three for six. */
@media (min-width: 561px) {
  .mcat-sibs__list.as-sibs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
}
@media (min-width: 861px) {
  .mcat-sibs__list.as-sibs--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1081px) {
  .mcat-sibs__list.as-sibs--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.mcat-sibs__list.as-sibs--1 { grid-template-columns: minmax(0, 360px); }

/* Inside the hub pages' #mem-page reset: box titles keep their gap, the box
   link its colour, sibling tiles their gap below the heading. */
#mem-page#mem-page h3.mcat-feat__head { margin: 0 0 8px; }
#mem-page#mem-page a.as-feat__link, #mem-page#mem-page a.as-feat__link:visited { color: #007cc3; }
#mem-page#mem-page .mcat-sibs__list { margin-top: 0; }

/* Phones: three or more sibling tiles go two to a row instead of one long column. */
@media (max-width: 560px) {
  .mcat-sibs__list[class*="as-sibs--"]:not(.as-sibs--1):not(.as-sibs--2) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mcat-sibs__list[class*="as-sibs--"] .mcat-sibs__label { padding: 12px 14px; }
}