/**
 * Forgewell Resources - Frontend Styles
 * Responsive grid layout for resource cards
 */

/* Main container - NO padding or margin */
.kk-resources-container {
    margin: 0;
    max-width: 100%;
    padding: 0;
    /* Background color controlled via inline styles */
}

/* No resources message */
.kk-no-resources {
    text-align: center;
    font-size: 1.125rem;
    color: #666;
    padding: 2rem;
}

/* Resources grid */
.kk-resources-grid {
    display: grid;
    /* Grid columns controlled via inline styles */
    /* Gap controlled via inline styles */
}

/* Individual resource card */
.resource-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Background controlled via inline styles */
}

.resource-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Resource title */
.resource-title {
    margin: 0 0 1rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    /* Color controlled via inline styles */
}

/* Resource description */
.resource-description {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    line-height: 1.6;
    flex-grow: 1;
    /* Color controlled via inline styles */
}

/* Resource type label */
.resource-type-label {
    margin: 0 0 1rem 0;
}

.type-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* Type-specific badge colors */
.type-badge.type-book {
    background: rgba(52, 152, 219, 0.3);
}

.type-badge.type-video {
    background: rgba(231, 76, 60, 0.3);
}

.type-badge.type-document {
    background: rgba(241, 196, 15, 0.3);
}

/* Resource action button */
.resource-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background: rgba(52, 152, 219, 0.8);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    align-self: flex-start;
}

.resource-button:hover {
    background: rgba(52, 152, 219, 1);
    transform: scale(1.02);
    color: #ffffff;
}

.resource-button:active {
    transform: scale(0.98);
}

/* Button variations by type */
.resource-card[data-type="book"] .resource-button {
    background: rgba(52, 152, 219, 0.8);
}

.resource-card[data-type="book"] .resource-button:hover {
    background: rgba(52, 152, 219, 1);
}

.resource-card[data-type="video"] .resource-button {
    background: rgba(231, 76, 60, 0.8);
}

.resource-card[data-type="video"] .resource-button:hover {
    background: rgba(231, 76, 60, 1);
}

.resource-card[data-type="document"] .resource-button {
    background: rgba(241, 196, 15, 0.8);
}

.resource-card[data-type="document"] .resource-button:hover {
    background: rgba(241, 196, 15, 1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .resource-card {
        padding: 1.25rem;
    }

    .resource-title {
        font-size: 1.25rem;
    }

    .resource-description {
        font-size: 0.9375rem;
    }

    .type-badge {
        font-size: 0.5rem;
        padding: 0.2rem 0.6rem;
    }

    .resource-button {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .resource-card {
        padding: 1rem;
        border-radius: 4px;
    }

    .resource-title {
        font-size: 1.125rem;
    }

    .resource-description {
        font-size: 0.875rem;
    }
}

/*
 * Additional customization options
 * You can add custom CSS here to further style the resources display
 * Grid layout, colors, and spacing are controlled via the Style Settings page
 */