/* ==========================================================
   grid.css — Product Category Grid (6 cards)
   ========================================================== */

.jyl-cat-grid{display:grid;grid-template-columns:repeat(2,1fr);width:100%}
@media(min-width:898px){.jyl-cat-grid{grid-template-columns:repeat(3,1fr)}}

.jyl-cat-card{
    position:relative;overflow:hidden;cursor:pointer;display:block;
    background:var(--jyl-beige-xlight);aspect-ratio:.81;min-height:0;
}
@media(min-width:598px){.jyl-cat-card{aspect-ratio:1.66}}
@media(min-width:898px){.jyl-cat-card{aspect-ratio:.81}}
@media(min-width:1198px){.jyl-cat-card{aspect-ratio:1.28}}

.jyl-cat-grid[style*="align-items: start"] .jyl-cat-card,
.jyl-cat-grid[style*="align-items:start"] .jyl-cat-card{width:100%;height:auto}

.jyl-cc__link{position:absolute;inset:0;z-index:5;display:block;outline:none}
.jyl-cc__link:focus-visible{outline:3px solid var(--jyl-blue);outline-offset:-3px}

.jyl-cc__media-img{
    position:absolute;inset:0;width:100%;height:100% !important;
    object-fit:cover;object-position:center;
    opacity:.85;z-index:0;display:block;
    transition:transform var(--jyl-t1000) var(--jyl-ease-sharp),opacity var(--jyl-t300) var(--jyl-ease);
    will-change:transform;
    transform: scale(1.2);
}
.jyl-cat-card .jyl-cc__media-img{
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
}
.jyl-cc__media-video{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;opacity:.85;z-index:0;display:block;
    transition:opacity var(--jyl-t300) var(--jyl-ease);
}
.jyl-cc__media-embed{position:absolute;inset:-10%;width:120%;height:120%;border:none;z-index:0;pointer-events:none}

.jyl-cc__overlay{position:absolute;inset:0;z-index:1;pointer-events:none;transition:background var(--jyl-t300) var(--jyl-ease)}

.jyl-cat-card:hover .jyl-cc__media-img,
.jyl-cat-card:hover .jyl-cc__media-video{opacity:1}
.jyl-cat-grid--hover-scale .jyl-cat-card:hover .jyl-cc__media-img,
.jyl-cat-grid--hover-scale .jyl-cat-card:hover .jyl-cc__media-video{opacity:1}

.jyl-cc__title{
    position:relative;z-index:10;
    padding:1rem 0 0 13px;
    font-family:var(--jyl-font);font-size:var(--jyl-fs-18);font-weight:var(--jyl-fw-medium);
    color:var(--jyl-black);line-height:var(--jyl-lh-normal);
    transition:color var(--jyl-t300) var(--jyl-ease);
    pointer-events:none;margin:0;
}
@media(min-width:898px){.jyl-cc__title{font-size:var(--jyl-fs-24)}}
@media(min-width:1198px){.jyl-cc__title{padding:2rem 0 0 2rem;font-size:var(--jyl-fs-24)}}

.jyl-cc__title--light{color:var(--jyl-white)}
.jyl-cat-card:hover .jyl-cc__title{color:var(--jyl-blue)}
.jyl-cat-card:hover .jyl-cc__title--light{color:var(--jyl-blue-light)}

.jyl-cat-card__footer{
    position:absolute;bottom:12px;left:12px;right:12px;z-index:10;
    display:flex;gap:12px;flex-wrap:wrap;pointer-events:auto;
}
@media(min-width:1198px){
    .jyl-cat-card__footer{bottom:2rem;left:2rem;right:auto;flex-wrap:nowrap}
}

.jyl-cc__cta-btn{
    position:relative;z-index:10;pointer-events:auto;outline:none;cursor:pointer;
    text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
    border:1px solid transparent;border-radius:var(--jyl-radius-sm);
    font-family:var(--jyl-font);font-size:var(--jyl-fs-14);font-weight:var(--jyl-fw-medium);
    white-space:nowrap;user-select:none;
    transition:background-color var(--jyl-t200) var(--jyl-ease),color var(--jyl-t200) var(--jyl-ease),border-color var(--jyl-t200) var(--jyl-ease);
}
.jyl-cc__cta-btn:active{transform:scale(.97)}
.jyl-cc__cta-btn:focus-visible{outline:3px solid var(--jyl-blue);outline-offset:2px}

.jyl-dark .jyl-cat-card{background:var(--jyl-black)}
.jyl-dark .jyl-cc__title:not(.jyl-cc__title--light){color:var(--jyl-white)}