/**
 * Section Block - Frontend Styles
 * 
 * @package Ably_Blocks
 */

/* ----- Section Block ----- */
.ably-section {
    width: 100%;
}

/* ----- Padding Modifiers ----- */
.ably-section--padding-small {
    padding: var(--semantics-padding-small, 40px) 0;
}

.ably-section--padding-medium {
    padding: var(--semantics-padding-medium, 60px) 0;
}

.ably-section--padding-broad {
    padding: var(--semantics-padding-broad, 80px) 0;
}

.ably-section--padding-large {
    padding: var(--semantics-padding-large, 120px) 0;
}

/* ----- Background Colors ----- */
.ably-section.bg-purpura {
    background-color: var(--semantics-colors-fill-accent-purpura, #6D28D9);
}

.ably-section.bg-purpura-subtle {
    background-color: var(--semantics-colors-fill-accent-purpura-subtle, #EDE9FE);
}

.ably-section.bg-ponkan {
    background-color: var(--semantics-colors-fill-accent-ponkan, #FFA301);
}

.ably-section.bg-ponkan-subtle {
    background-color: var(--semantics-colors-fill-accent-ponkan-subtle, #FFF6E5);
}

.ably-section.bg-pitaya {
    background-color: var(--semantics-colors-fill-accent-pitaya, #C41362);
}

.ably-section.bg-pitaya-subtle {
    background-color: var(--semantics-colors-fill-accent-pitaya-subtle, #FDECF4);
}

.ably-section.bg-pistache {
    background-color: var(--semantics-colors-fill-accent-pistache, #059669);
}

.ably-section.bg-pistache-subtle {
    background-color: var(--semantics-colors-fill-accent-pistache-subtle, #ECFDF5);
}

.ably-section.bg-petunia {
    background-color: var(--semantics-colors-fill-accent-petunia, #1E293B);
}

.ably-section.bg-petunia-subtle {
    background-color: var(--semantics-colors-fill-accent-petunia-subtle, #F1F5F9);
}

.ably-section.bg-white {
    background-color: #FFFFFF;
}

.ably-section.bg-light {
    background-color: var(--semantics-colors-fill-background-secondary, #F8FAFC);
}