/* Homepage grid: gaps are included in the available column width. */
.home .form-wrapper[hidden] { display: none !important; }
.home .form-wrapper .search-form { display: flex; align-items: center; gap: 16px; max-width: 900px; margin: 0 auto; }
.home .form-wrapper .search-form label { flex: 1; min-width: 0; }
.home .form-wrapper .search-form button { flex-shrink: 0; border: 1px solid #fff; }
@media (max-width: 639px) {
    .home .form-wrapper .search-form { flex-direction: column; align-items: stretch; }
    .home .form-wrapper .search-field { font-size: 1.2rem; }
}
.post-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin: 48px 16px; }
.post-pagination a { display: inline-flex; min-width: 40px; min-height: 40px; align-items: center; justify-content: center; padding: 8px 16px; background: #e4e9ed; color: #12334b; text-decoration: none; border: 1px solid transparent; font-size: 14px; }
.post-pagination a[aria-current="page"] { background: #fff; border-color: #dce3ea; font-weight: 700; }
.post-pagination a:hover, .post-pagination a:focus-visible { background: #d1e7f6; }
.dark-mode .post-pagination a { background: #263445; color: #edf5ff; }
.dark-mode .post-pagination a[aria-current="page"] { border-color: #8ac9ff; }
.home #main.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    align-items: stretch;
}
.home #main.grid > article {
    width: auto;
    min-width: 0;
    padding: 0;
    margin: 0;
}
.home #main .card { width: 100%; }
.home #main .card__media { flex-shrink: 0; aspect-ratio: 363 / 188; }
.home #main .card__media img { display: block; }
.home #main .card__title { font-size: 1.4rem; line-height: 1.3; overflow-wrap: anywhere; }
.home #main .card__body { padding: 28px 30px; }
.home #main .card__footer { gap: 12px; flex-wrap: wrap; }
.home #main .posts-status { grid-column: 1 / -1; width: auto; text-align: center; padding: 32px; }
@media (max-width: 1023px) {
    .home #main.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 639px) {
    .home #main.grid { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0 16px; }
    .home #main .card__body { padding: 24px; }
}