/*=========================================================
=                         CATALOG                         =
=========================================================*/

/*---------- Section ----------*/

.catalog{
    background:var(--bg-alt);
}

/*---------- Container ----------*/

.catalog__container{}

/*---------- Header ----------*/

.catalog__header{
    margin-bottom:var(--space-4);
}

.catalog__title{}

.catalog__description{}

/*---------- Category ----------*/

.catalog-section:not(:last-child){
    margin-bottom:var(--space-4);
}

.catalog-section__title{
    display:inline-block;
    margin-bottom:var(--space-3);
    font-size:1.3rem;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:var(--primary-dark);
    padding-left:1rem;
    border-left:3px solid var(--accent);
}

/*---------- Grid ----------*/

.catalog-section__grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:var(--space-3);
}

/*---------- Item (button-style: image + name only) ----------*/

.catalog-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--space-2);
    padding:var(--space-3) var(--space-2);
    text-align:center;

    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--surface);
    box-shadow:var(--shadow-sm);
    transition:transform var(--transition-slow), box-shadow var(--transition), border-color var(--transition);
}

.catalog-item:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
    border-color:var(--sunflower);
}

.catalog-item__media{
    width:100%;
    aspect-ratio:1;
    border-radius:var(--radius-md);
    overflow:hidden;
    background:var(--primary-soft);
}

.catalog-item__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform var(--transition-slow);
}

.catalog-item:hover .catalog-item__media img{
    transform:scale(1.1);
}

.catalog-item__title{
    font-size:1rem;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:var(--primary-dark);
}