/**
 * HyperDAF Core — Homepage Categories Grid Styles
 * File: /wp-content/themes/hyperdaf-core/assets/css/home-categories-grid.css
 * Location: /wp-content/themes/hyperdaf-core/assets/css/home-categories-grid.css
 *
 * Purpose:
 * - Styles the homepage browse top categories section.
 * - Keeps category cards compact, colorful, and premium.
 * - Converts tablet/mobile layouts into a lightweight horizontal swipe row.
 * - Uses native overflow + scroll-snap instead of heavy slider libraries.
 *
 * Related Files:
 * - /wp-content/themes/hyperdaf-core/inc/home/sections/categories-grid.php
 * - /wp-content/themes/hyperdaf-core/assets/css/home-sections.css
 *
 * Notes:
 * - Desktop keeps the standard grid layout.
 * - Tablet shows 3 cards per visible row in a horizontal swipe section.
 * - Mobile shows 2 cards per visible row in a horizontal swipe section.
 */

.hdaf-home-categories-grid .hdaf-home-section__head{margin-bottom:16px}

.hdaf-home-categories-grid__grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px;
min-width:0;
}

.hdaf-home-categories-grid__card{
display:flex;
align-items:flex-start;
gap:14px;
min-height:112px;
padding:18px;
background:#FFFFFF;
border:1px solid #E2E8F0;
border-radius:12px;
text-decoration:none;
transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
min-width:0;
}

.hdaf-home-categories-grid__card:hover{
transform:translateY(-2px);
border-color:#D7E0EA;
box-shadow:0 12px 24px rgba(15,23,42,.05);
}

.hdaf-home-categories-grid__icon{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 48px;
border-radius:12px;
color:#2563EB;
background:#EFF6FF;
}

.hdaf-home-categories-grid__icon svg{
width:22px;
height:22px;
display:block;
}

.hdaf-home-categories-grid__content{
display:flex;
flex:1 1 auto;
flex-direction:column;
gap:6px;
min-width:0;
}

.hdaf-home-categories-grid__name{
display:block;
color:#0F172A;
font-size:16px;
font-weight:800;
line-height:1.25;
}

.hdaf-home-categories-grid__desc{
display:block;
color:#64748B;
font-size:13px;
font-weight:500;
line-height:1.55;
}

.hdaf-home-categories-grid__card--soft-blue .hdaf-home-categories-grid__icon{color:#2563EB;background:#EFF6FF}
.hdaf-home-categories-grid__card--soft-orange .hdaf-home-categories-grid__icon{color:#F97316;background:#FFF7ED}
.hdaf-home-categories-grid__card--soft-green .hdaf-home-categories-grid__icon{color:#16A34A;background:#DCFCE7}
.hdaf-home-categories-grid__card--soft-indigo .hdaf-home-categories-grid__icon{color:#4F46E5;background:#EEF2FF}
.hdaf-home-categories-grid__card--soft-sky .hdaf-home-categories-grid__icon{color:#0284C7;background:#E0F2FE}
.hdaf-home-categories-grid__card--soft-amber .hdaf-home-categories-grid__icon{color:#D97706;background:#FFFBEB}
.hdaf-home-categories-grid__card--soft-violet .hdaf-home-categories-grid__icon{color:#7C3AED;background:#F5F3FF}
.hdaf-home-categories-grid__card--soft-teal .hdaf-home-categories-grid__icon{color:#0F766E;background:#F0FDFA}

@media (max-width:1199px){
.hdaf-home-categories-grid__grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}

@media (max-width:991px){
.hdaf-home-categories-grid__grid{
display:grid;
grid-auto-flow:column;
grid-auto-columns:calc((100% - 24px) / 3);
grid-template-columns:none;
gap:12px;
overflow-x:auto;
overflow-y:hidden;
padding-bottom:6px;
scroll-snap-type:x mandatory;
scrollbar-width:thin;
-webkit-overflow-scrolling:touch;
}

.hdaf-home-categories-grid__grid::-webkit-scrollbar{
height:6px;
}

.hdaf-home-categories-grid__grid::-webkit-scrollbar-thumb{
background:#CBD5E1;
border-radius:999px;
}

.hdaf-home-categories-grid__card{
min-height:96px;
padding:14px;
gap:10px;
scroll-snap-align:start;
}

.hdaf-home-categories-grid__icon{
width:40px;
height:40px;
flex:0 0 40px;
border-radius:10px;
}

.hdaf-home-categories-grid__icon svg{
width:18px;
height:18px;
}

.hdaf-home-categories-grid__name{
font-size:14px;
line-height:1.25;
}

.hdaf-home-categories-grid__desc{
font-size:11px;
line-height:1.45;
}
}

@media (max-width:767px){
.hdaf-home-categories-grid__grid{
grid-auto-columns:calc((100% - 10px) / 2);
gap:10px;
}

.hdaf-home-categories-grid__card{
min-height:92px;
padding:13px;
gap:10px;
}

.hdaf-home-categories-grid__icon{
width:38px;
height:38px;
flex:0 0 38px;
border-radius:10px;
}

.hdaf-home-categories-grid__icon svg{
width:17px;
height:17px;
}

.hdaf-home-categories-grid__name{
font-size:13px;
}

.hdaf-home-categories-grid__desc{
font-size:11px;
line-height:1.4;
}
}

@media (max-width:575px){
.hdaf-home-categories-grid .hdaf-home-section__head{
margin-bottom:14px;
}
}