/**
 * Home Page Styles
 * Custom styles for home page template
 * Converted from Tailwind CSS to custom classes
 */

/* ===============================================
   Main Layout
   =============================================== */
.home-page {
    width: 100%;
}

.home-page section {
    margin-bottom: 4.5rem;
    margin-top: 4.5rem;
    /* 40px */
}

/* ===============================================
   Products Wrapper
   =============================================== */
.home-products-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* 20px */
}

/* ===============================================
   Section Headings
   =============================================== */
.home-section-title {
    font-family: sans-serif;
    color: var(--color-primary, #3984be);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    padding-left: 0.625rem;
    /* 10px */
    border-left: 10px solid var(--color-primary, #3984be);
}

@media (min-width: 1024px) {
    .home-section-title {
        font-size: 28px;
    }
}

.home-section-title a {
    color: inherit;
    text-decoration: none;
}

/* ===============================================
   Content Box
   =============================================== */
.home-content-box {
    padding: 0;
    /* 16px */
    border-radius: 1rem;
    /* 16px */
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* 20px */
}

/* ===============================================
   Category/Brand Section Title
   =============================================== */
.home-subsection-title {
    color: #3984be;
    font-size: 1rem;
    /* 16px */
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}

@media (min-width: 1024px) {
    .home-subsection-title {
        font-size: 22px;
    }
}

/* ===============================================
   Category/Brand Grid Wrapper
   =============================================== */
.home-grid-wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 1rem;
    /* 16px */
    justify-content: center;
    align-items: center;
}

/* ===============================================
   Category Item
   =============================================== */
.home-category-item {
    width: calc(33.33% - 11px);
    /* 3 items per row on mobile */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .home-category-item {
        width: calc(16.66% - 14px);
        /* 6 items per row on tablet */
    }
}

@media (min-width: 1024px) {
    .home-category-item {
        width: calc(12.5% - 14px);
        /* 8 items per row on desktop */
    }
}

.home-category-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.home-category-item span {
    font-size: 0.75rem;
    /* 12px */
    font-weight: 500;
    color: #1f2937;
}

@media (min-width: 1024px) {
    .home-category-item span {
        font-size: 0.875rem;
        /* 14px */
    }
}

.home-category-item:hover span {
    color: #3984be;
}

/* ===============================================
   Brand Item
   =============================================== */
.home-brand-item {
    width: calc(33.33% - 11px);
}

@media (min-width: 768px) {
    .home-brand-item {
        width: calc(16.66% - 14px);
    }
}

@media (min-width: 1024px) {
    .home-brand-item {
        width: calc(12.5% - 14px);
    }
}

.home-brand-item img {
    width: 100%;
    aspect-ratio: 134 / 74;
    object-fit: contain;
}

/* ===============================================
   View More Button Container
   =============================================== */
.home-btn-container {
    display: flex;
    justify-content: center;
}

/* ===============================================
   View More Button
   =============================================== */
.home-view-more-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border-radius: 0;
    border: 1px solid #3984be;
    background: #fff;
    color: #3984be;
    font-weight: bold;
    cursor: pointer;
    transition: all .2s ease;
    max-width: 160px;
    height: 48px;
    border-radius: 100vmax;
}


.home-view-more-btn:hover {
    background-color: var(--color-primary, #3984be);
    color: #ffffff;
}
/* ===============================================
   Utility Classes
   =============================================== */

/* Text Colors */
.text-primary {
    color: var(--color-primary, #3984be);
}

.text-gray-800 {
    color: #1f2937;
}

/* Border Colors */
.border-primary {
    border-color: var(--color-primary, #3984be);
}

.border-ddd {
    border-color: #ddd;
}

/* Responsive Text Sizes */
@media (min-width: 1024px) {
    .lg-text-28 {
        font-size: 28px;
    }

    .lg-text-22 {
        font-size: 22px;
    }

    .lg-text-sm {
        font-size: 0.875rem;
    }
}