/**
 * ================================
 * CATEGORY PAGE DESCRIPTION BLOCK
 * ================================
 * 
 * Displays category thumbnail and description in a two-column layout
 */

.cakeclub-category-page-description {
    margin: 0 0 30px 0;
    background: transparent;
}

.cakeclub-category-page-description .category-thumbnail {
    float: left;
    margin: 0 30px 20px 0;
    max-width: 100px;
}

.cakeclub-category-page-description .category-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.cakeclub-category-page-description .category-description {
    width: 100%;
    font-size: 1rem;
    line-height: 1.6;
    color: #495057;
}

/* Clear float after the block */
.cakeclub-category-page-description::after {
    content: "";
    display: table;
    clear: both;
}

.cakeclub-category-page-description .category-description p {
    margin: 0 0 15px 0;
}

.cakeclub-category-page-description .category-description p:last-child {
    margin-bottom: 0;
}

.cakeclub-category-page-description .category-description a {
    color: var(--color-accent-primary, #99C3B9);
    text-decoration: underline;
}

.cakeclub-category-page-description .category-description a:hover {
    color: var(--color-text, #394A78);
}

/* When there's only a description (no thumbnail) */
.cakeclub-category-page-description:not(:has(.category-thumbnail)) .category-description {
    max-width: 800px;
}

/* Mobile responsiveness */
@media screen and (max-width: 768px) {
    .cakeclub-category-page-description .category-thumbnail {
        float: none;
        margin: 0 0 20px 0;
        max-width: 100%;
    }
    
    .cakeclub-category-page-description .category-description {
        font-size: 0.95rem;
        width: 100%;
    }
}

/* Editor Preview Styles */
.cakeclub-category-page-description-editor {
    padding: 20px;
}

.cakeclub-category-page-description-editor .components-notice {
    margin-bottom: 20px;
}