/* ==========================================================================
   STILLMIND MENTAL HEALTH · SERVICES

   Six names, six links.

   WHY THIS IS NO LONGER CARDS
   The first version of this section was six cards, two of them double
   width, and it measured 3.77 phone screens. The whole home page budget
   is five to six screens, so one section was taking more than half of
   it to say six things.

   The cards were not bad. The copy in them was accurate and the
   hierarchy was real. They were simply the wrong container for a home
   page: a person deciding whether to book is not comparison shopping
   between modalities, and four hundred words of clinical detail is
   something you read after you have decided to look further, not
   before. All of it moved to the service pages intact.

   What is left is the part that belongs here: the list of what exists,
   readable in about two seconds, with a way into each one.

   Rules this file holds to:
   - No descriptions. At this size a four word summary helps nobody and
     doubles the height.
   - The whole row is the target, not just the words. On a phone a
     44px tap area is the floor and these rows clear it comfortably.
   - Two columns on desktop, one on phone. Six rows in a single column
     on a wide screen is a lot of empty space to the right of each name.
   ========================================================================== */

.svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-stone);
}

.svc-list li {
  border-bottom: 1px solid var(--c-stone);
}

.svc-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  /* 24px top and bottom made each row 72px tall, and six of those is
     432px, more than half this section, to list six short names.
     14px measures 49px per row, which still clears the 44px minimum tap
     target. That floor is the reason this does not go lower: the rows
     are the only control in the section and they are what a thumb aims
     at. */
  padding: 0.875rem var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-h4);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--c-text);
  text-decoration: none;
  transition:
    color var(--d-base) var(--ease-out-expo),
    padding-left var(--d-base) var(--ease-out-expo),
    transform var(--d-base) var(--ease-out-expo);
}

/* The arrow carries the hover, and the row shifts a little so the
   feedback is felt rather than just seen. Kept small: this is a list of
   clinical services, not a product menu. */
.svc-list__go {
  color: var(--c-brand);
  transition: transform var(--d-base) var(--ease-out-expo);
}

@media (hover: hover) {
  .svc-list a:hover {
    color: var(--c-brand);
    padding-left: var(--s-4);
    transform: translateX(4px);
  }
  .svc-list a:hover .svc-list__go { transform: translateX(6px) scale(1.08); }
}

.svc-list a:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Two columns once there is room. The border-top on the list would draw
   across both columns at the wrong place, so it moves to the items. */
@media (min-width: 760px) {
  .svc-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-8);
    border-top: 0;
  }
  .svc-list li { border-top: 1px solid var(--c-stone); border-bottom: 0; }
  /* The last item in each column needs the closing rule that the
     border-bottom used to provide. */
  .svc-list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--c-stone); }
}

.services__note {
  margin: var(--s-3) 0 0;
  font-size: var(--t-sm);
  /* --c-text-3 is the tertiary token, for captions and metadata sitting
     on flat paper. This line sits on the photograph and it is the one
     piece of advice on the section, so it takes the secondary token:
     measured 4.83:1 over the plate before, 6.6:1 after. */
  color: var(--c-text-2);
  max-width: var(--measure-tight);
}