/* ==========================================================================
   The partners index.

   Everything except the tile row comes from base.css and therapy.css: the
   hero, the tick lists, the dark band, the closing CTA. The two service tiles
   are the only thing that needed new CSS, so this file is only the tiles.
   Same arrangement as contact.css, which is only the form.

   It is a two up rather than the home page's .trio, because there are exactly
   two partner services and there is no third coming. .trio could not be reused:
   it is a hard repeat(3, 1fr) at 48rem, so two items in it leave a third of the
   row empty.

   No colour, size, radius or duration is written by hand: every value is a
   --rw-* token.
   ========================================================================== */

.ptiles {
  display: grid;
  gap: var(--rw-s-7);
  grid-template-columns: 1fr;
}

/* 56rem rather than the 48rem .trio uses. Two tiles side by side need more
   room each than three do, and at 48rem the arch and the body copy both get
   too narrow to read as a card. */
@media (min-width: 56rem) {
  .ptiles { grid-template-columns: repeat(2, 1fr); gap: var(--rw-s-6); }
}

/* A column, so the button can be pushed to the bottom and the two CTAs line up
   with each other regardless of how long each tile's copy runs. */
.ptile { display: flex; flex-direction: column; }

/* The arch is capped rather than filling the column. At 1280 a half width
   column is about 560px, and a 3:4 arch at that width is 747px tall, which
   reads as a poster rather than a tile. 22rem keeps it close to the size the
   same crop is on the home page. */
.ptile__img {
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 22rem;
  margin-bottom: var(--rw-s-5);
}

.ptile__meta { color: var(--rw-text-muted); }
.ptile .h-card { margin-block: var(--rw-s-2) var(--rw-s-3); }

/* The location line is the one thing on this page a reader must not skim past,
   because the two services are in different buildings. */
.ptile__where { margin-top: var(--rw-s-4); }

.ptile .btn { margin-top: var(--rw-s-6); align-self: flex-start; }

/* Pushes the button to the bottom of the taller tile so both align. Only
   applies once the tiles are actually side by side. */
@media (min-width: 56rem) {
  .ptile__body { flex: 1; }
}

.ptile:nth-child(2) { transition-delay: 80ms; }