/* Bento Grid Utilities */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 1.5rem;
}

.span-2 {
    grid-column: span 2;
}

.span-row {
    grid-row: span 2;
}

@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }

    .span-2,
    .span-row {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* Section Dividers */
.section-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.section-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 60px;
}

.section-divider .shape-fill {
    fill: var(--color-bg-secondary);
}

/* Gradient Text Utilities */
.text-gradient-red {
    background: var(--gradient-red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-teal {
    background: var(--gradient-teal);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-purple {
    background: var(--gradient-purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card Variants */
.card-teal {
    border-color: rgba(20, 184, 166, 0.3);
}

.card-teal:hover {
    border-color: var(--color-teal);
    box-shadow: var(--shadow-glow-teal);
}

.card-purple {
    border-color: rgba(139, 92, 246, 0.3);
}

.card-purple:hover {
    border-color: var(--color-purple);
    box-shadow: var(--shadow-glow-purple);
}

.card-amber {
    border-color: rgba(245, 158, 11, 0.3);
}

.card-amber:hover {
    border-color: var(--color-amber);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}