/* Specs by Series Block Styles */
.specs-by-series-block {
    /* Layout properties */
    --sbs-row-gap: 2rem;
    --sbs-column-gap: 2rem;
    --sbs-heading-align: start;
    --sbs-divide-color: var(--wp--preset--color--contrast-3, #e5e7eb);
    --sbs-divide-width: 1px;
}

.series-group {
    padding: var(--sbs-row-gap) 0;
}

.series-group:first-child {
    padding-top: 0;
}

/* Section divide styling */
.specs-by-series-block.has-section-divide .series-group {
    border-top: var(--sbs-divide-width) solid var(--sbs-divide-color);
}

.specs-by-series-block.has-section-divide .series-group:first-child {
    border-top: none;
}

.series-layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: var(--sbs-column-gap);
    align-items: start;
}

.series-header {
    display: flex;
    height: 100%;
    align-items: var(--sbs-heading-align);
}

.series-title {
    margin: 0;
    font-size: var(--sbs-heading-font-size, inherit);
    font-weight: var(--sbs-heading-font-weight, inherit);
    text-transform: var(--sbs-heading-text-transform, none);
}


.specs-grid {
    display: grid;
    gap: 0.5rem var(--sbs-column-gap);
    padding: 0;
    margin: 0;
}

.specs-grid.columns-1 {
    grid-template-columns: 1fr;
}

.specs-grid.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.specs-grid.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.specs-grid.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* List styles - use native browser rendering */
.specs-grid.list-style-disc {
    list-style-type: disc;
}

.specs-grid.list-style-circle {
    list-style-type: circle;
}

.specs-grid.list-style-square {
    list-style-type: square;
}

.specs-grid.list-style-none {
    list-style: none;
}

.spec-link {
    font-size: var(--sbs-link-font-size, inherit);
    font-weight: var(--sbs-link-font-weight, inherit);
    text-decoration: var(--sbs-link-text-decoration, none);
    color: var(--sbs-link-color, inherit);
}

.spec-link:hover {
    text-decoration: underline;
}

/* Editor placeholder styles */
.specs-by-series-placeholder {
    padding: 2rem;
    text-align: center;
}

/* Responsive */
@media (max-width: 782px) {
    .series-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .specs-grid.columns-3,
    .specs-grid.columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .specs-grid {
        grid-template-columns: 1fr !important;
    }
}