/* Personal Injury landing (templates/personal-injury.php) */

/* Top-align the directory grid: 12 of the 18 areas have no sub-pages, and
   stretching them to match a 22-item neighbour is what produced the tall
   empty cards. Cards now size to their own content. */
#clf-pi-areas .row {
    align-items: flex-start;
}

.clf-pi-card {
    /* flex column so the footer link sits under the content, not floating */
    gap: 0;
}

.clf-pi-parent-link {
    color: var(--clf-primary);
    text-decoration: none;
}

.clf-pi-parent-link:hover {
    text-decoration: underline;
}

.clf-pi-teaser {
    color: var(--clf-muted);
    font-size: .9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.clf-pi-children li {
    border-top: 1px solid var(--clf-line);
}

.clf-pi-children a {
    display: block;
    padding: .45rem 0;
    color: var(--clf-body);
    font-size: .9rem;
    text-decoration: none;
}

.clf-pi-children a:hover,
.clf-pi-children a:focus {
    color: var(--clf-primary);
}

/* Footer link: pushed to the card bottom, hairline above it when a child
   list precedes it so the two don't read as one run-on list. */
.clf-pi-card-foot {
    margin-top: auto;
    padding-top: 1rem;
}

.clf-pi-children + .clf-pi-card-foot {
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid var(--clf-line);
}

/* Directory packing: card heights vary a lot (0 to 22 sub-pages), so a plain
   grid row leaves a tall gap beside the biggest card. Flowing the existing
   Bootstrap row as CSS columns packs them with no markup change. Reading
   order becomes column-major, which is the usual way an A-Z index is set.
   Cards are unbreakable, so each stays whole. */
@media (min-width: 768px) {
    #clf-pi-areas .row {
        display: block;
        column-gap: 1.5rem; /* matches the g-4 gutter */
        margin-left: 0;
        margin-right: 0;
    }

    #clf-pi-areas .row > [class*="col-"] {
        display: block;
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin: 0 0 1.5rem;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #clf-pi-areas .row { column-count: 2; }
}

@media (min-width: 992px) {
    #clf-pi-areas .row { column-count: 3; }
}