/* ==========================================================================
   Lavora — About page
   Page-specific components only. Shared primitives (.wrap, .mark, .btn,
   .founder, .team, .textlink) come from main.css and are not redefined here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   About hero — the arch figure from the homepage, without the trust chips
   -------------------------------------------------------------------------- */
.abouthero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.abouthero__copy {
  min-inline-size: 0;
}
.abouthero__title {
  max-inline-size: 16ch;
}
.abouthero__brand {
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line-strong);
  max-inline-size: 34ch;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-style: italic;
  color: var(--c-plum);
  line-height: 1.4;
}
/* clinic.jpg is near-square (1000x955); a tall arch would crop the branded
   wall out of frame, so the figure stays close to the source ratio. */
.abouthero__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: clip;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3.7;
  border-start-start-radius: 999px;
  border-start-end-radius: 999px;
  border-end-start-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}
.abouthero__figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Keep the emblem wall in frame when the arch crops */
  object-position: 50% 42%;
}

/* --------------------------------------------------------------------------
   Who we are — split head, then three numbered pillars
   -------------------------------------------------------------------------- */
.story__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: start;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}
.story__headside {
  min-inline-size: 0;
}
.story__aside {
  margin-block-start: var(--sp-4);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--c-rose);
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-style: italic;
  color: var(--c-plum);
  line-height: 1.5;
}

.story__pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--col-gap);
  padding-block-start: clamp(2rem, 3vw, 3rem);
  border-block-start: 1px solid var(--line);
}
/* Icon and numeral share one row so the pillar keeps its height */
.story__pillar {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-3);
  row-gap: var(--sp-3);
  align-items: center;
}
.story__pillar h3,
.story__pillar p {
  grid-column: 1 / -1;
}
.story__picon {
  display: inline-grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  color: var(--c-rose);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition:
    color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}
.story__picon svg {
  inline-size: 23px;
  block-size: 23px;
}
.story__pillar:hover .story__picon {
  color: #fff;
  background: var(--c-rose);
  border-color: var(--c-rose);
}
.story__pnum {
  justify-self: end;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--c-rose);
  line-height: 1;
  opacity: 0.55;
}
.story__pillar h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--c-plum);
}
.story__pillar p {
  margin-block-start: var(--sp-2);
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   Philosophy — dark band, copy beside a numbered sequence
   -------------------------------------------------------------------------- */
.philos__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.philos__copy {
  min-inline-size: 0;
}
.philos__boundary {
  margin-block-start: var(--sp-4);
  padding-inline-start: var(--sp-4);
  border-inline-start: 1px solid var(--line-on-dark);
  font-size: var(--t-small);
  color: var(--on-dark-soft);
  line-height: var(--lh-body);
}

.philos__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-5);
  min-inline-size: 0;
}
.philos__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-4);
  align-items: start;
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line-on-dark);
}
.philos__step:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}
.philos__snum {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--c-rose);
  line-height: 1;
}
.philos__step h3 {
  font-size: var(--t-body);
  font-weight: var(--fw-semibold);
  color: #fff;
}
.philos__step p {
  margin-block-start: 0.35rem;
  font-size: var(--t-small);
  color: var(--on-dark-soft);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   Cellular Medicine — image inline-start, copy inline-end
   -------------------------------------------------------------------------- */
.cell__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.cell__figure {
  margin: 0;
  overflow: clip;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 4.2;
  box-shadow: var(--shadow-md);
}
.cell__figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.cell__copy {
  min-inline-size: 0;
}
.cell__note {
  margin-block-start: var(--sp-4);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--c-rose);
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   The Clinic — full-bleed band over photography
   -------------------------------------------------------------------------- */
.clinic {
  position: relative;
  padding-block: clamp(5rem, 8vw, 9rem);
  overflow: clip;
  isolation: isolate;
}
.clinic__bg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Solid tint, not a gradient — keeps copy legible over photography */
.clinic__veil {
  position: absolute;
  inset: 0;
  background: rgba(78, 31, 56, 0.78);
  z-index: -1;
}
.clinic__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.clinic__copy {
  min-inline-size: 0;
}
.clinic h2,
.clinic .mark__num {
  color: #fff;
}
.clinic .lead {
  color: var(--on-dark);
}
.clinic .mark__label {
  color: var(--on-dark-soft);
}
.clinic .mark__rule {
  background: var(--line-on-dark);
}
.clinic .btn--ghost {
  --btn-fg: #fff;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  margin-block-start: var(--sp-5);
}
.clinic .btn--ghost:hover {
  color: var(--c-plum);
  background: #fff;
  border-color: #fff;
}

.clinic__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  min-inline-size: 0;
}
.clinic__facts li {
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line-on-dark);
  min-inline-size: 0;
}
.clinic__facts li:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}
.clinic__facts b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-semibold);
  color: #fff;
}
.clinic__facts span {
  display: block;
  margin-block-start: 0.3rem;
  font-size: var(--t-small);
  color: var(--on-dark-soft);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   Standards — icon list, two up
   -------------------------------------------------------------------------- */
.gov__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: end;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}
.gov__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--col-gap) clamp(2rem, 4vw, 3.5rem);
}
.gov__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-4);
  align-items: start;
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line);
}
.gov__icon {
  inline-size: 40px;
  block-size: 40px;
  color: var(--c-rose);
}
.gov__icon svg {
  inline-size: 100%;
  block-size: 100%;
}
.gov__text b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-plum);
}
.gov__text span {
  display: block;
  margin-block-start: 0.3rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   Patient experience — four numbered steps
   -------------------------------------------------------------------------- */
.exp__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: end;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}
.exp__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.exp__step {
  min-inline-size: 0;
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line-strong);
}
.exp__fig {
  margin: 0 0 var(--sp-4);
  overflow: clip;
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
  background: var(--s-blush);
}
.exp__fig img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.exp__step:hover .exp__fig img {
  transform: scale(1.05);
}
.exp__num {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--c-rose);
  line-height: 1;
  margin-block-end: var(--sp-3);
}
.exp__step h3 {
  font-size: var(--t-body);
  font-weight: var(--fw-semibold);
  color: var(--c-plum);
  line-height: var(--lh-snug);
}
.exp__step p {
  margin-block-start: var(--sp-2);
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .philos__grid,
  .cell__grid,
  .clinic__grid {
    grid-template-columns: 1fr;
  }
  /* Image follows the copy once stacked, rather than leading with it */
  .cell__figure {
    order: 2;
    aspect-ratio: 16 / 10;
  }
  /* Two per row, the odd one spanning — keeps the scroll short on phones */
  .story__pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-4);
    row-gap: var(--sp-5);
  }
  .story__pillar:last-child {
    grid-column: 1 / -1;
  }
  .story__pillar {
    padding-block-start: var(--sp-4);
    border-block-start: 1px solid var(--line);
  }
  .story__pillar:first-child,
  .story__pillar:nth-child(2) {
    padding-block-start: 0;
    border-block-start: 0;
  }
  .exp__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
  }
}

/* Hero keeps the image beside the copy down to 768px */
@media (max-width: 768px) {
  .abouthero__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .abouthero__figure {
    aspect-ratio: 4 / 3.2;
  }
}

@media (max-width: 900px) and (min-width: 769px) {
  /* Narrower column: give the copy room before the figure takes half the row */
  .abouthero__grid {
    grid-template-columns: 1fr 0.86fr;
    gap: var(--sp-5);
  }
  .abouthero__title {
    max-inline-size: 14ch;
  }
}

@media (max-width: 900px) {
  .story__head,
  .gov__head,
  .exp__head {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

@media (max-width: 680px) {
  /* The authored <br /> sets the break; the ch cap must not add another */
  .abouthero__title {
    max-inline-size: none;
  }
  /* Two per row rather than a four-item stack */
  .philos__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-3);
    row-gap: var(--sp-4);
  }
  /* Numeral above the text: side-by-side leaves no room in half a column */
  .philos__step {
    grid-template-columns: 1fr;
    row-gap: var(--sp-2);
  }
  .philos__step:nth-child(2) {
    padding-block-start: 0;
    border-block-start: 0;
  }
  .philos__snum {
    font-size: 1.5rem;
  }
  .gov__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-3);
    row-gap: var(--sp-4);
  }
  /* The icon would crowd the text in half a phone column */
  .gov__item {
    grid-template-columns: 1fr;
    row-gap: var(--sp-2);
  }
  .gov__icon {
    inline-size: 34px;
    block-size: 34px;
  }
  /* Two per row on phones keeps the sequence compact rather than a long stack */
  .exp__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-3);
  }
  .exp__num {
    font-size: 1.5rem;
    margin-block-end: var(--sp-2);
  }
  .exp__fig {
    margin-block-end: var(--sp-3);
  }
  .story__pnum {
    font-size: 1.8rem;
  }
  .philos__step {
    column-gap: var(--sp-3);
  }
  .abouthero__brand {
    font-size: var(--t-body);
  }
}

@media (max-width: 420px) {
  .exp__steps {
    column-gap: var(--sp-2);
  }
  .exp__step h3 {
    font-size: 0.95rem;
  }
}