/**
 * BlueSky Resources - Public Styles
 * 
 * Styles for the public-facing side of the plugin.
 */

:root {
    /* Colors */
    --bluesky-resources-bg-color: #fff;
    --bluesky-resources-color: #333;
    --bluesky-resources-primary: #0073aa;
    --bluesky-resources-secondary: #00a0d2;
    
    /* Spacing */
    --bluesky-resources-section-padding: min(5vw, 96px);
    --bluesky-resources-border-radius: 5px;
    
    /* Typography */
    --bluesky-resources-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.dsl_resource-section {
    position: relative;
    padding: min(96px, 5vw) 0;
}

.dsl_resource-row {
    position: relative;
    padding: 0;
    width: 92%;
    max-width: 1200px;
    margin: auto;
    display: flex;
}

.dsl_resource-row:has(> .dsl_resource-column:nth-of-type(2)) {
    gap: 30px;
}

.dsl_resource-column {
    position: relative;
    padding: 0;
    display: flex;
    margin: auto 0;
    flex: 1;
}

.dsl_resource-content-container {
    flex: 1;
}

.dsl_resource-content-container .link-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.dsl_resource-content-container.image img {
    display: block;
    margin: auto;
}

.dsl_resource-download-link {
    padding: .75em 1em;
    border: 2px solid #9ed8ff;
    border-radius: 3px;
}

/* Responsive Design */
@media (max-width: 980px) {
    .dsl_resource-row {
        flex-direction: column;
    }
}

@media (max-width: 768px) {

}

@media (max-width: 479px) {
    
}