/* General Spacing and Titles */

.site-main {
    margin-block: 4em; /* Logical top/bottom margin */
    padding-block-start: 0 !important; /* Theme override */
}

#main section + section { /* Set spacing between sections only */
    margin-block-start: 4em; /* Logical top margin */
}

#main h1 {
    text-align: center;
    font-size: 2em;
    margin-block-end: 1em; /* Logical bottom margin */
}

/* Recent Items Grid */
.recent-items ul {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(12vw, 30%, 180px), 1fr));
    gap: 1rem;
    padding: 0;
    list-style: none;    
}

/* Companies/Platforms Grid */
ul.parent-categories-list {
    --category-gap: 1.5rem; /* Define the gap here */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--category-gap);
    padding: 0;
    list-style: none;
    margin: 0;
}

/* The remainder should ideally be combined with archives into global.css */

li.parent-category-item {
    flex: 0 0 calc(100% / 1 - 1rem); /* Default: 2 items per row */
    box-sizing: border-box;
}

li.parent-category-item img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Keep image square */
    display: block;
    object-fit: contain; /* Ensures SVG scales nicely */
}

/* Preset grid (flex box rows) for increasing screen widths */
@media (min-width: 120px) {
    li.parent-category-item { flex: 0 0 calc((100% - var(--category-gap)) / 2); }
}
@media (min-width: 240px) {
    li.parent-category-item { flex: 0 0 calc((100% - 2 * var(--category-gap)) / 3); }
}
@media (min-width: 480px) {
    li.parent-category-item { flex: 0 0 calc((100% - 3 * var(--category-gap)) / 4); }
}
@media (min-width: 720px) {
    li.parent-category-item { flex: 0 0 calc((100% - 4 * var(--category-gap)) / 5); }
}
@media (min-width: 1280px) {
    li.parent-category-item { flex: 0 0 calc((100% - 9 * var(--category-gap)) / 10); }
}

/* Some minor animation on the category logos */
.parent-category-item img {
    transition: all 0.5s ease;
    transform: scale(0.95);
}
.parent-category-item img:hover {
    transform: scale(1);
}