@import url('/.css/aredel.css');

.navigation-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0;
}

.navigation-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    color: #502542;
    text-decoration: none;
    background: #fff;
    border: 1px solid #d9d3d8;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgb(29 31 33 / 12%);
    transition: box-shadow .18s ease, transform .18s ease;
}

.navigation-card:hover,
.navigation-card:focus-visible {
    color: #502542;
    text-decoration: none;
    box-shadow: 0 5px 14px rgb(29 31 33 / 22%);
    outline: 2px solid #31b393;
    outline-offset: 2px;
    transform: translateY(-2px);
}

.navigation-card__image {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: #502542;
}

.navigation-card__bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: .2rem .65rem;
    padding: .55rem .75rem .65rem;
}

.navigation-card__title {
    grid-column: 1 / -1;
    font-size: 1.05rem;
    line-height: 1.2;
}

.navigation-card__summary {
    display: -webkit-box;
    overflow: hidden;
    color: #625b64;
    font-size: .82rem;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.navigation-card__action {
    align-self: end;
    color: #278f75;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

@media screen and (max-width: 850px) {
    .navigation-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 560px) {
    .navigation-cards { grid-template-columns: 1fr; }
}

/* No ragged holes: when the last row comes up short, its tail fills it.
 * 3-column layout: a two-card last row (child 3n+2 is last) spans full width.
 * 2-column layout: a lone last card (odd child) spans full width.
 * Full rows never match, so even grids render exactly as before. */
@media screen and (min-width: 851px) {
    .navigation-cards > :last-child:nth-child(3n+2) { grid-column: span 2; }
}

@media screen and (max-width: 850px) and (min-width: 561px) {
    .navigation-cards > :last-child:nth-child(odd):not(:only-child) { grid-column: span 2; }
}