/* The "explore the archive" tile that closes the Abgeschlossene-Projekte row. */

/* Vier je Reihe. Ohne das greift .project-grid mit minmax(300px): vier Spalten
   brauechten 4*300 + 3*32 = 1296 px, der Inhaltsbereich misst aber 1240 px, und
   es blieben drei. Auf der Projektuebersicht steht die Klasse jetzt ebenfalls. */
.project-grid-4 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.project-card-more a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-xs);
    /* Matches the 3/2 image plus its caption block, so the four tiles line up. */
    min-height: 100%;
    aspect-ratio: 3 / 2;
    /* Ohne feste Breite rechnet der Browser die gestreckte Hoehe ueber das
       Seitenverhaeltnis zurueck in die Breite: neben drei Projektkacheln in
       derselben Reihe wurde die gruene Kachel 537 statt 316 px breit und
       schob die Startseite seitlich ueber den Rand. Solange sie allein in
       der letzten Reihe stand, fiel das nicht auf. */
    width: 100%;
    padding: var(--space-lg);
    background: var(--accent);
    color: #0d1a08;
    text-decoration: none;
    transition: background .2s ease;
}

.project-card-more a:hover,
.project-card-more a:focus-visible { background: var(--accent-dark); color: var(--white); }

.more-count {
    font-family: var(--font-display);
    font-size: var(--step-4);
    font-weight: 700;
    line-height: .9;
}

.more-title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.05;
}

.more-cta {
    margin-top: var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.more-cta::after { content: " \2192"; }