/*
  About page styling — matched to the live front-page design system.
  Plain CSS (Shopify serves .scss raw; SCSS syntax never compiles).

  Tokens sampled from the homepage:
    navy       #0C2E6E  — headings, primary buttons (matches product/brand)
    ink        #474C60  — body copy
    cream      #F7F6F1  — soft band (reviews band)
    periwinkle #F0F5FD  — feature band ("Not All Deodorants Are Created Equal")
    border     #E2E7F0  — hairline card borders
  Buttons are square (0 radius); headings are Plus Jakarta Sans 700 (theme-global).
  Photography is rectangular with sharp corners — no masks, no decoration.
*/

main.page-about {
  --el-navy: #0c2e6e;
  --el-navy-rgb: 12, 46, 110;
  --el-ink: #474c60;
  --el-cream: #f7f6f1;
  --el-periwinkle: #f0f5fd;
  --el-border: #e2e7f0;
  background-color: #fff;
}

/* ---------- Hero: cream editorial band, like the homepage About strip ---------- */

main.page-about .shopify-section:has(> .image-with-text) {
  background: var(--el-cream);
}

main.page-about .shopify-section > .image-with-text {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

main.page-about .shopify-section > .image-with-text .image-with-text__content {
  background: transparent;
}

main.page-about .shopify-section > .image-with-text .image-with-text__heading {
  color: var(--el-navy);
  letter-spacing: -0.02em;
  line-height: 1.08;
}

main.page-about .shopify-section > .image-with-text .image-with-text__text {
  color: var(--el-ink);
}

main.page-about .shopify-section > .image-with-text .image-with-text__text p {
  font-size: 1.7rem;
  line-height: 1.75;
  max-width: 58ch;
}

main.page-about .shopify-section > .image-with-text .button {
  --color-button: var(--el-navy-rgb);
  --color-button-text: 255, 255, 255;
  border-radius: 0;
}

main.page-about .shopify-section > .image-with-text .image-with-text__media,
main.page-about .shopify-section > .image-with-text .image-with-text__media img {
  border-radius: 0;
}

/* ---------- "Why Elemental": periwinkle band, white hairline cards ---------- */

main.page-about .multicolumn {
  background: var(--el-periwinkle);
}

main.page-about .multicolumn .title {
  color: var(--el-navy);
}

main.page-about .multicolumn-card {
  background: #fff;
  border: 1px solid var(--el-border);
  border-radius: 0;
  height: 100%;
}

main.page-about .multicolumn-card__image-wrapper {
  width: 48px;
  margin: 2.4rem 2rem 0;
  padding: 0;
}

main.page-about .multicolumn-card__image-wrapper .media {
  width: 48px;
  height: 48px;
  padding-bottom: 0 !important;
}

main.page-about .multicolumn-card__image-wrapper .media img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

main.page-about .multicolumn-card__info {
  padding: 1.2rem 2rem 2.4rem;
}

main.page-about .multicolumn-card__info .inline-richtext {
  color: var(--el-navy);
  font-weight: 700;
}

main.page-about .multicolumn-card__info .rte {
  color: var(--el-ink);
}

main.page-about .multicolumn-card__info .rte ul {
  list-style: disc;
  padding-left: 1.8rem;
  text-align: left;
}

main.page-about .multicolumn .button {
  --color-button: var(--el-navy-rgb);
  --color-button-text: 255, 255, 255;
  border-radius: 0;
}

/* ---------- Founder bio rows: alternating white/cream editorial bands ---------- */

main.page-about .multirow {
  background: #fff;
}

main.page-about .multirow__inner .image-with-text {
  margin-top: 0;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Hairline rules between rows — editorial rhythm, no boxes */
main.page-about .multirow__inner .image-with-text + .image-with-text {
  border-top: 1px solid var(--el-border);
}

main.page-about .multirow__inner .image-with-text .image-with-text__content {
  background: transparent;
}

/* Small-caps kicker, homepage "ABOUT ELEMENTAL" style */
main.page-about .multirow__inner .image-with-text__text--caption {
  color: var(--el-ink);
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

main.page-about .multirow__inner .image-with-text__heading {
  color: var(--el-navy);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

main.page-about .multirow__inner .image-with-text__text.rte {
  color: var(--el-ink);
  line-height: 1.75;
  max-width: 58ch;
}

main.page-about .multirow__inner .image-with-text__media {
  border-radius: 0;
  padding-bottom: 0 !important;
  height: auto;
}

main.page-about .multirow__inner .image-with-text__media img {
  border-radius: 0;
  position: static;
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 48rem;
  margin: 0 auto;
}

main.page-about .multirow .button {
  --color-button: var(--el-navy-rgb);
  --color-button-text: 255, 255, 255;
  border-radius: 0;
}

/* base.css makes secondary buttons transparent on hover, which turns these
   white-on-white; keep a solid navy fill instead (darkened for feedback) */
main.page-about .multirow .button.button--secondary:not([disabled]):hover {
  background-color: #0a2557;
  color: #fff;
}

/* ---------- Closing CTA: navy band, white button ---------- */

main.page-about .rich-text {
  background: var(--el-navy);
}

main.page-about .rich-text .rich-text__heading,
main.page-about .rich-text .rich-text__text {
  color: #fff;
}

main.page-about .rich-text .button {
  --color-button: 255, 255, 255;
  --color-button-text: var(--el-navy-rgb);
  border-radius: 0;
}