/* The step cards, used by the home page and the clinics page.
 *
 * Its own file since 2026-09-11. These rules lived in v2.css, which only index.html
 * loads, so when the clinics page was given the same cards they rendered as a bare
 * list with markers and a serif heading. Copying them into lp.css would have put one
 * component in two files, and a component four pages use belongs in a file four pages
 * load.
 *
 * Written by hand rather than extracted. The first attempt pulled every rule whose
 * selector mentioned .proc out of v2.css automatically, which lifted the responsive
 * rules straight out of their @media blocks: the one-column rule for phones became a
 * top level rule and the cards stacked at every width.
 */

.process {
  background: var(--espresso);
  color: var(--cream);
  padding: var(--band) 0;
}

.proc-title-main {
  font-family: var(--display);
  font-weight: var(--h1-weight);
  font-size: var(--h2-size);
  line-height: var(--lh-caps-a);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--cream);
  text-align: center;
  margin: 0 auto .7rem;
  /* 16ch put the clinics page heading on three lines and cost 90px of section
     for nothing; 22ch still broke to three and left "dig" alone on the last
     one. Wide enough for two, balanced so they are of even length. The home
     page heading is two words and does not notice either value. */
  max-width: 30ch;
  text-wrap: balance;
}
.proc-intro {
  text-align: center;
  font-size: var(--type-0);
  line-height: var(--lh-body);
  color: var(--cream);
  margin: 0 auto clamp(1.4rem, 2.6vw, 2.2rem);
  max-width: 62ch;
}

.proc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.9rem, 1.6vw, 1.5rem);
  /* start, not stretch: with stretch the row height settles first and aspect-ratio
     then derives WIDTH from it, and the cards overlap their columns. */
  align-items: start;
}
/* Capped. Three cards across the full 1320px column are 424px wide, and at
   4:5 that is 530px of card for four lines of text. */
.proc-list-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1080px;
  margin-inline: auto;
}

.proc-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: var(--radius-card);
  padding: clamp(1.1rem, 1.9vw, 1.6rem);
  aspect-ratio: 4 / 5;
  text-align: center;
  background: rgba(253, 249, 240, .10);
  border: 1px solid rgba(253, 249, 240, .18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* One card solid and pale, as the reference gives one of its three a filled panel. */
.proc-card:nth-child(2) {
  background: rgba(216, 231, 239, .92);
  border-color: transparent;
}
.proc-card:nth-child(2) .proc-title,
.proc-card:nth-child(2) .proc-num,
.proc-card:nth-child(2) .proc-copy { color: var(--ink); opacity: 1; }

.proc-num {
  font-family: var(--label);
  font-size: .76rem;
  letter-spacing: .08em;
  color: var(--cream);
}
/* The number sits at the top and the words group at the foot. Between title and
   caption the space read as a hole where a picture had been taken out. */
.proc-gap { flex: 1 1 0; margin: 0; min-height: 0; }
.proc-foot { margin-top: auto; }
/* The reserves. The text group is anchored to the bottom of the card, so with
   a two line title beside two three line ones the three titles sat at three
   different heights and the row read as ragged. Each part now reserves three
   lines, which makes the group the same height in every card, so the titles
   start on one line and the copy under them starts on another.

   Three is the count both languages need today, and the longest title of the
   six is three lines. A fourth would push the copy down inside its own card
   only, so it would show up as the same raggedness this fixes: check the row
   in a browser after any change to these six strings. */
.proc-title {
  font-family: var(--text);
  font-size: var(--h3-size);
  font-weight: 600;
  line-height: 1.2;
  min-height: 3.6em;
  /* Otherwise "Du får varje förfrågan samma dag" leaves "dag" alone on the
     third line, in a reserve that is exactly three lines tall. */
  text-wrap: balance;
  color: var(--cream);
  margin: 0 0 .5rem;
  max-width: 16ch;
  margin-left: auto;
  margin-right: auto;
}
.proc-copy {
  font-size: var(--type-0);
  line-height: var(--lh-body);
  min-height: 4.5em;
  color: var(--cream);
  opacity: .88;
  margin: 0;
}

/* ------------------------------------------------------------- the shape steps
 * Each breakpoint is the width at which a card would fall below 260px, not a
 * number picked off a device chart. Four cards need 4 x 260, three 18px gaps
 * and two 60px gutters, which is 1214px, so they go to two across below 1220.
 * Three cards need 936px by the same sum, so they go to one below 940.
 *
 * They used to be 980 and 900. At 1024 that left four cards 226px wide with a
 * 140px title inside each, and at 768 a single 683px card still had its title
 * held to 140px. Both were invisible at 1440 and on a phone, which is where
 * anything ever gets looked at.
 *
 * The 16ch measure on the title is sized for a card three or four across, so it
 * opens up at each step too: past a point a measure stops narrowing text for
 * readability and just becomes a column down the middle of the card.
 */
@media (max-width: 1220px) {
  .proc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proc-title { max-width: 20ch; }
}
@media (max-width: 940px) {
  .proc-list-3 { grid-template-columns: minmax(0, 1fr); }
  /* One per row: there is nothing beside a card to line up with, and the
     reserves would only add empty space under short text. */
  .proc-list-3 .proc-title,
  .proc-list-3 .proc-copy { min-height: 0; }
  .proc-list-3 .proc-title { max-width: none; }
}
@media (max-width: 560px) {
  .proc-list { grid-template-columns: minmax(0, 1fr); }
  .proc-card { aspect-ratio: auto; }
  .proc-gap { min-height: 90px; }
  .proc-title, .proc-copy { min-height: 0; }
  /* 16ch is what keeps a title to two or three lines in a 344px column. Full
     width on a phone it is 140px of text in a 330px card, and the title breaks
     four times for nothing. The measure is only doing work while the cards
     stand side by side. */
  .proc-title { max-width: none; }
}