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

/* The photograph sits well behind the type: dimmed, then covered by a scrim. */
.arjo-packages .arjo-section__media img { opacity: 0.28; }

.arjo-packages__head {
  display: grid;
  gap: var(--wp--preset--spacing--50);
  padding-bottom: var(--wp--preset--spacing--90);
}

.arjo-tier {
  display: grid;
  gap: var(--wp--preset--spacing--30);
  padding-block: var(--wp--preset--spacing--70);
  border-top: var(--wp--custom--border-hairline) solid var(--wp--preset--color--line-invert);
}
.arjo-tier:last-of-type {
  border-bottom: var(--wp--custom--border-hairline) solid var(--wp--preset--color--line-invert);
}
.arjo-tier__index {
  margin: 0;
  font-size: var(--wp--preset--font-size--xxs);
  letter-spacing: var(--wp--custom--tracking-widest);
  color: var(--wp--preset--color--accent-soft);
}
.arjo-tier__text {
  margin: 0;
  color: var(--wp--preset--color--on-invert-muted);
  text-wrap: pretty;
}

.arjo-packages__note {
  display: grid;
  gap: var(--wp--preset--spacing--50);
  margin-top: var(--wp--preset--spacing--80);
  padding: var(--wp--preset--spacing--60);
  border: var(--wp--custom--border-hairline) solid var(--wp--preset--color--line-invert);
}
.arjo-packages__note p {
  margin: 0;
  max-width: var(--wp--custom--layout-measure);
  color: var(--wp--preset--color--on-invert-muted);
}

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

  .arjo-tier {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--wp--custom--layout-gap);
    align-items: baseline;
  }
  .arjo-tier__index { grid-column: 1 / span 1; }
  .arjo-tier__name  { grid-column: 2 / span 4; }
  .arjo-tier__text  { grid-column: 7 / span 6; }

  .arjo-packages__note {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--wp--custom--layout-gap);
    align-items: center;
    padding: var(--wp--preset--spacing--70);
  }
  .arjo-packages__note p { grid-column: 1 / span 7; }
  .arjo-packages__note .arjo-btn-group {
    grid-column: 9 / span 4;
    justify-self: end;
  }
}