/* ARJO — Why Choose Us section.
   Values come from theme.json (--wp--preset--* / --wp--custom--*) only. */

.arjo-why__layout {
  display: grid;
  gap: var(--wp--preset--spacing--80);
}
.arjo-why__figures {
  display: grid;
  gap: var(--wp--preset--spacing--40);
}
.arjo-why__figures figure { margin: 0; }

/* The overlapping second photograph is a desktop-only flourish. */
.arjo-why__figure-b { display: none; }

.arjo-why__quote {
  margin: 0;
  padding-left: var(--wp--preset--spacing--50);
  border-left: var(--wp--custom--border-medium) solid var(--wp--preset--color--accent);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: var(--wp--custom--weight-medium);
  line-height: var(--wp--custom--leading-snug);
  letter-spacing: var(--wp--custom--tracking-snug);
  text-wrap: pretty;
}

.arjo-reasons { display: grid; }
.arjo-reason {
  display: grid;
  gap: var(--wp--preset--spacing--20);
  padding-block: var(--wp--preset--spacing--60);
  border-top: var(--wp--custom--border-hairline) solid var(--wp--preset--color--line);
}
.arjo-reason:last-child {
  border-bottom: var(--wp--custom--border-hairline) solid var(--wp--preset--color--line);
}
.arjo-reason__index {
  margin: 0;
  font-size: var(--wp--preset--font-size--xxs);
  letter-spacing: var(--wp--custom--tracking-widest);
  color: var(--wp--preset--color--accent);
}
.arjo-reason__text {
  margin: 0;
  color: var(--wp--preset--color--ink-secondary);
  text-wrap: pretty;
}

@media (min-width: 62rem) {
  .arjo-why__layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--wp--custom--layout-gap);
    align-items: start;
  }
  .arjo-why__figures {
    grid-column: 1 / span 5;
    position: relative;
    padding-bottom: var(--wp--preset--spacing--110);
  }
  .arjo-why__figure-b {
    display: block;
    position: absolute;
    right: calc(var(--wp--preset--spacing--90) * -1);
    bottom: 0;
    width: 58%;
    border: var(--wp--preset--spacing--20) solid var(--wp--preset--color--base);
  }
  .arjo-why__content {
    grid-column: 7 / span 6;
    display: grid;
    gap: var(--wp--preset--spacing--70);
  }
  .arjo-reason {
    grid-template-columns: 3rem 1fr;
    column-gap: var(--wp--custom--layout-gap);
    align-items: baseline;
  }
  .arjo-reason__index { grid-row: span 2; }
}