/* Rennis Block Styling */
:root {
    --rennis-pink: #F566D6;
    --rennis-light-pink: #F8D3EA;
    --rennis-dark-pink: #D357CC;
    --rennis-transition: all 0.3s ease;
}

.wp-block-rennis-two-column,
.wp-block-rennis-three-column {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 20px;
    border-radius: 15px;
    transition: var(--rennis-transition);
}

.wp-block-rennis-custom-button {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    background-color: var(--rennis-pink);
    transition: var(--rennis-transition);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.wp-block-rennis-custom-button:hover {
    background-color: var(--rennis-dark-pink);
    transform: translateY(-3px);
}

.wp-block-rennis-custom-button.pill {
    border-radius: 50px;
}

.wp-block-rennis-custom-button.heart {
    clip-path: path('M12 21.593c-5.63-5.539-11-10.297-11-14.402 0-3.791 3.068-5.191 5.281-5.191 1.312 0 4.151.501 5.719 4.457 1.59-3.968 4.464-4.447 5.726-4.447 2.54 0 5.274 1.621 5.274 5.181 0 4.069-5.136 8.625-11 14.402m5.726-20.583c-2.203 0-4.446 1.042-5.726 3.238-1.285-2.206-3.528-3.248-5.719-3.248-3.183 0-6.281 2.187-6.281 6.191 0 4.661 5.57 9.427 12 15.809 6.43-6.382 12-11.148 12-15.809 0-4.011-3.095-6.181-6.274-6.181');
}

.wp-block-rennis-image-mosaic {
    display: grid;
    grid-gap: 15px;
    padding: 20px;
    background-color: var(--rennis-light-pink);
    border-radius: 15px;
}

.wp-block-rennis-image-mosaic img {
    border-radius: 10px;
    transition: var(--rennis-transition);
}

.wp-block-rennis-image-mosaic img:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.wp-block-rennis-single-column {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--rennis-light-pink);
    border-radius: 15px;
}

/* Responsivt design med blød overgang */
@media (max-width: 768px) {
    .wp-block-rennis-two-column,
    .wp-block-rennis-three-column {
        flex-direction: column;
        gap: 15px;
    }

    .wp-block-rennis-image-mosaic {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .wp-block-rennis-image-mosaic {
        grid-template-columns: 1fr;
    }

    .wp-block-rennis-custom-button {
        width: 100%;
        text-align: center;
    }
}