/* =========================
   Homepage listing layouts
   ========================= */

.khp-grid {
    display: grid;
    gap: clamp(8px, 1.2vw, 16px);
    align-items: stretch;
}

/* Business: 5 posts per row on desktop */

.khp-section--business .khp-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Ads: keep previous desktop layout */

.khp-section--ads .khp-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Events: desktop 2 rows x 6 */

.khp-events-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(8px, 1.2vw, 16px);
    align-items: stretch;
    overflow: visible;
    padding: 4px 0 14px;
}

/* =========================
   Scrollbar
   ========================= */

.khp-grid::-webkit-scrollbar,
.khp-events-row::-webkit-scrollbar {
    height: 8px;
}

.khp-grid::-webkit-scrollbar-track,
.khp-events-row::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 999px;
}

.khp-grid::-webkit-scrollbar-thumb,
.khp-events-row::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.khp-grid::-webkit-scrollbar-thumb:hover,
.khp-events-row::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* =========================
   Homepage card typography
   ========================= */

.khp-section .kbc-listing-card {
    --kbc-card-category-font-size: clamp(14px, 1.15vw, 17px);
    --kbc-card-title-font-size: clamp(13px, 1.1vw, 16px);
    --kbc-card-excerpt-font-size: clamp(14px, 1.15vw, 17px);
    --kbc-card-field-font-size: clamp(14px, 1.15vw, 17px);
}

.khp-section .kbc-listing-card__category,
.khp-section .kbc-listing-card__meta {
    line-height: 1.3;
}

/* =========================
   Desktop / tablet grid
   ========================= */

@media (max-width: 1280px) {
    .khp-section--business .khp-grid,
    .khp-section--ads .khp-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .khp-events-row {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 1280px) and (min-width: 1101px) {
    .khp-section--ads .khp-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - 50px) / 6);
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 0 14px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .khp-section--ads .khp-grid > .kbc-listing-card {
        scroll-snap-align: start;
    }
}

/* =========================
   Tablet / mobile horizontal scroll
   ========================= */

@media (max-width: 1100px) {
    .khp-section--business .khp-grid,
    .khp-section--ads .khp-grid,
    .khp-events-row {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - 30px) / 4);

        gap: 10px;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 4px 0 14px;

        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .khp-section--business .khp-grid > .kbc-listing-card,
    .khp-section--ads .khp-grid > .kbc-listing-card,
    .khp-events-row > .kbc-listing-card {
        scroll-snap-align: start;
    }

    .khp-events-row .kbc-listing-card--event {
        width: auto;
        min-width: 0;
        flex: initial;
        flex-basis: auto;
    }
}

@media (max-width: 768px) {
    .khp-section--business .khp-grid,
    .khp-section--ads .khp-grid,
    .khp-events-row {
        grid-auto-columns: calc((100% - 10px) / 2);
    }
}

@media (max-width: 480px) {
    .khp-section--business .khp-grid,
    .khp-section--ads .khp-grid,
    .khp-events-row {
        grid-auto-columns: calc((100% - 8px) / 2);
        gap: 8px;
    }
}

/* =========================
   Compact event cards
   ========================= */

.kbc-listing-card--context-homepage.kbc-listing-card--event {
    --kbc-card-event-title-font-size: 17px;
    --kbc-card-event-meta-font-size: 16px;

    width: auto;
    min-width: 0;
    min-height: auto;
    flex: initial;
    flex-basis: auto;
}

.kbc-listing-card--context-homepage.kbc-listing-card--event .kbc-listing-card__image {
    aspect-ratio: 1 / 1.35;
}

.kbc-listing-card--context-homepage.kbc-listing-card--event .kbc-listing-card__content {
    min-height: auto;
    padding: 8px;
}

.kbc-listing-card--context-homepage.kbc-listing-card--event .kbc-listing-card__title {
    min-height: auto;
    margin-bottom: 8px;
    line-height: 1.25;
}

.kbc-listing-card--context-homepage.kbc-listing-card--event .kbc-listing-card__event-meta {
    min-height: auto;
    line-height: 1.3;
}

@media (max-width: 480px) {
    .kbc-listing-card--context-homepage.kbc-listing-card--event .kbc-listing-card__image {
        aspect-ratio: 1 / 1.25;
    }

    .kbc-listing-card--context-homepage.kbc-listing-card--event .kbc-listing-card__content {
        padding: 7px;
    }
}