/*
Block Name: Problem Index
Description: Not sure where to start? Problems in a client's own words, each linking to the right service.
*/

.block-problem-index .pi-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1.2rem 3.2rem; margin-bottom: var(--lf-gap-head); }
.block-problem-index .pi-list { border-top: 0.1rem solid var(--brand-2); }
.block-problem-index .pi-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8rem 3.2rem; padding: 2.2rem 0; border-bottom: 0.1rem solid var(--brand-2); color: var(--brand-2); text-decoration: none; }
.block-problem-index .pi-row .lf-number { flex: 0 0 4.8rem; }
.block-problem-index .pi-problem { flex: 1 1 42rem; font-family: var(--font-serif-text); font-style: italic; font-size: clamp(2.6rem, 2.6vw, 3.8rem); line-height: 1.15; }
.block-problem-index .pi-service { flex: 0 1 auto; font-family: var(--font-mono); font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.08em; }
.block-problem-index a.pi-row:hover .pi-service, .block-problem-index a.pi-row:focus-visible .pi-service { color: var(--brand-1); }
.block-problem-index a.pi-row:focus-visible { outline: 0.2rem solid var(--brand-1); outline-offset: 0.4rem; }