/* src/styles/components/pages/home/palettes.css */
.palette-section {
    padding: var(--padding-xl) 0;
}

.palette-section-content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.palette-grid {
    display: grid;
    gap: var(--gap-md);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.palette-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--color-primary-600);
    transition: all 0.2s ease;
    border-radius: var(--radius-md);
    transform-origin: bottom center;
}

.palette-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.palette-card__head {
    padding: var(--padding-sm);
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.palette-card__title {
    margin: 0;
}

.palette-colors {
    display: flex;
    width: 100%;
    gap: 0;
    margin-top: 0;
}

.palette-swatch {
    flex: 1 1 0;
    height: 36px;
    border: 1px solid var(--card-border);
    border-radius: 0;
}

.palette-colors .palette-swatch:first-child {
    border-bottom-left-radius: var(--radius-md);
}

.palette-colors .palette-swatch:last-child {
    border-bottom-right-radius: var(--radius-md);
}

.cards-bridge {
    text-align: center;
    margin-top: var(--margin-md);
    margin-bottom: var(--margin-md);
}

@media (min-width: 992px) {
    .cards-bridge {
        margin-top: 0;
        margin-bottom: 0;
        width: 30%;
        display: flex;
        justify-content: center;
    }

    .palette-section-content {
        flex-direction: row;
    }

    .palette-grid {
        flex: 1;
        grid-template-columns: none;
    }

    /* WING EFFECT - Cards rotate in opposite directions */
    .palette-grid--row1 .palette-card {
        transform: rotate(8deg);
    }

    .palette-grid--row2 .palette-card {
        transform: rotate(-8deg);
    }
}

/* Twilight Reverie */
.palette-twilight-1 {
    background: #0c134f;
}

.palette-twilight-2 {
    background: #1d267d;
}

.palette-twilight-3 {
    background: #4a53a9;
}

.palette-twilight-4 {
    background: #7a83d9;
}

.palette-twilight-5 {
    background: #aab3ff;
}

/* Ocean Breeze */
.palette-ocean-1 {
    background: #0b2447;
}

.palette-ocean-2 {
    background: #19376d;
}

.palette-ocean-3 {
    background: #3a599a;
}

.palette-ocean-4 {
    background: #5c7bb7;
}

.palette-ocean-5 {
    background: #89a9e4;
}

/* Arctic Horizon */
.palette-arctic-1 {
    background: #1b262c;
}

.palette-arctic-2 {
    background: #0f4c75;
}

.palette-arctic-3 {
    background: #3a739c;
}

.palette-arctic-4 {
    background: #6699c2;
}

.palette-arctic-5 {
    background: #99bbd9;
}

/* Indigo Spectrum */
.palette-indigo-1 {
    background: #1c0c5b;
}

.palette-indigo-2 {
    background: #3d2c8d;
}

.palette-indigo-3 {
    background: #6a5ab9;
}

.palette-indigo-4 {
    background: #9788e5;
}

.palette-indigo-5 {
    background: #c4b7ff;
}

.palette-indigo-6,
.palette-arctic-6,
.palette-ocean-6,
.palette-twilight-6{
    background: #f0f0f0;
}

/* Golden Dusk */
.palette-golden-1 {
    background: #e8c872;
}

.palette-golden-2 {
    background: #f0d48a;
}

.palette-golden-3 {
    background: #f5de9c;
}

.palette-golden-4 {
    background: #fae8b5;
}

.palette-golden-5 {
    background: #fcf2d6;
}

/* Skybound Silk (brand-like) */
.palette-skybound-1 {
    background: #7286d3;
}

.palette-skybound-2 {
    background: #8ea7e9;
}

.palette-skybound-3 {
    background: #b4c6f2;
}

.palette-skybound-4 {
    background: #d0ddf7;
}

.palette-skybound-5 {
    background: #e8eefc;
}

/* Azure Drift */
.palette-azure-1 {
    background: #00a9ff;
}

.palette-azure-2 {
    background: #89cff3;
}

.palette-azure-3 {
    background: #bce0ff;
}

.palette-azure-4 {
    background: #d9f0ff;
}

.palette-azure-5 {
    background: #ebf8ff;
}

/* Sunlit Meadow */
.palette-sunlit-1 {
    background: #fff67e;
}

.palette-sunlit-2 {
    background: #bfea7c;
}

.palette-sunlit-3 {
    background: #d9f5a9;
}

.palette-sunlit-4 {
    background: #ebf9c6;
}

.palette-sunlit-5 {
    background: #f4fce3;
}

.palette-sunlit-6,
.palette-azure-6,
.palette-skybound-6,
.palette-golden-6{
    background: #4a4a4a;
}