/* ARJO — Services Overview section.
   Values come from theme.json (--wp--preset--* / --wp--custom--*) only. */

.arjo-overview__intro {
  display: grid;
  gap: var(--wp--preset--spacing--50);
}
.arjo-overview__intro > div {
  display: grid;
  gap: var(--wp--preset--spacing--50);
  align-content: start;
}

.arjo-overview__list {
  display: grid;
  gap: var(--wp--preset--spacing--100);
  padding-top: var(--wp--preset--spacing--90);
}

.arjo-pillar {
  display: grid;
  gap: var(--wp--preset--spacing--50);
}
.arjo-pillar__index {
  font-size: var(--wp--preset--font-size--xxs);
  letter-spacing: var(--wp--custom--tracking-widest);
  color: var(--wp--preset--color--accent);
}
.arjo-pillar__title {
  display: flex;
  align-items: baseline;
  gap: var(--wp--preset--spacing--40);
}
.arjo-pillar__text {
  margin: 0;
  color: var(--wp--preset--color--ink-secondary);
  text-wrap: pretty;
}

/* ---- Staggered grid ---------------------------------------------------- */
@media (min-width: 48rem) {
  .arjo-overview__list {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--wp--custom--layout-gap);
    row-gap: var(--wp--preset--spacing--110);
  }
  .arjo-pillar:nth-child(1) { grid-column: 1 / span 5; }
  .arjo-pillar:nth-child(2) {
    grid-column: 7 / span 6;
    margin-top: var(--wp--preset--spacing--120);
  }
  .arjo-pillar:nth-child(3) {
    grid-column: 2 / span 5;
    margin-top: calc(var(--wp--preset--spacing--110) * -1);
  }
  .arjo-pillar:nth-child(2) .arjo-media { aspect-ratio: var(--wp--custom--ratio-wide); }
  .arjo-pillar:nth-child(3) .arjo-media { aspect-ratio: var(--wp--custom--ratio-portrait); }
}

@media (min-width: 62rem) {
  .arjo-overview__intro {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--wp--custom--layout-gap);
  }
  .arjo-overview__intro > :first-child { grid-column: 1 / span 6; }
  .arjo-overview__intro > :last-child {
    grid-column: 8 / span 5;
    align-self: end;
  }
}