/**
 * Block Styles CSS
 * 
 * Custom styles for blocks (core WordPress and third-party, e.g. Kadence).
 *
 * @package PlaneteriaMedia
 * @since 1.0.0
 */

/* ==========================================================================
   Column block: paragraph text color inside bordered columns
   ========================================================================== */

/*
 * WORKAROUND (WordPress core behavior): Paragraph text color inside columns
 * with a border color.
 *
 * ISSUE (core, not theme): When a border color is applied to a core/column
 * block, block supports set the column's `color` to the border preset so that
 * borders using currentColor render. Global styles output
 * ".has-{slug}-color { color: var(--wp--preset--color--{slug}) !important; }"
 * for each preset (including "border"); that applies to the column, so
 * paragraphs inside inherit the border preset as text color.
 *
 * This theme override forces paragraph text in columns to use the theme
 * primary text color when the paragraph has no explicit .has-text-color, so
 * body text is readable. Stylesheet is enqueued with dependency 'global-styles'
 * so this rule loads after global styles and wins. Editor parity: same rule
 * in assets/css/editor-styles.css (loaded by add_editor_style).
 *
 * Sources:
 * - Block supports apply to wrapper: Block Editor Handbook, Block Supports
 *   https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/
 * - Style Engine generates .has-{slug}-color (text), .has-{slug}-border-color:
 *   Using the Style Engine with block supports
 *   https://developer.wordpress.org/block-editor/reference-guides/packages/packages-style-engine/using-the-style-engine-with-block-supports/
 * - Preset utility classes (has-X-color, has-X-border-color): CSS-Tricks,
 *   How the Style Engine Generates Classes
 *   https://css-tricks.com/how-the-style-engine-generates-classes/
 */

/* Whole-column link (core/column extended): anchor replaces wrapper on frontend */
a.wp-block-column.is-planeteria-column-link {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

a.wp-block-column.is-planeteria-column-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ==========================================================================
   Button Styles
   ========================================================================== */

/* Outline Button Style */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    border: 2px solid currentColor;
    color: inherit;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: currentColor;
    color: var(--wp--preset--color--dark);
}

/* ==========================================================================
   Kadence Blocks
   ========================================================================== */

/* Kadence: underline title on card/item hover */
.wp-block-kadence-infobox:hover .kt-blocks-info-box-title,
.wp-block-kadence-query .kb-query-item:hover .wp-block-post-title {
    text-decoration: underline;
}

/* ==========================================================================
   Flexbox Button Layouts
   ========================================================================== */

/* Flexbox Button Layouts with Column Control */
.wp-block-buttons.is-style-flex-2-col,
.wp-block-buttons.is-style-flex-3-col,
.wp-block-buttons.is-style-flex-4-col {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--4);
    align-items: stretch;
    justify-content: center; /* Center buttons when there aren't enough to fill the row */
}

/* 2 Column Layout */
.wp-block-buttons.is-style-flex-2-col .wp-block-button {
    flex: 0 0 calc(50% - var(--wp--preset--spacing--2));
    margin: 0;
}

/* 3 Column Layout */
.wp-block-buttons.is-style-flex-3-col .wp-block-button {
    flex: 0 0 calc(33.333% - var(--wp--preset--spacing--3));
    margin: 0;
}

/* 4 Column Layout */
.wp-block-buttons.is-style-flex-4-col .wp-block-button {
    flex: 0 0 calc(25% - var(--wp--preset--spacing--3));
    margin: 0;
}

/* Button link styling for all flex layouts */
.wp-block-buttons.is-style-flex-2-col .wp-block-button__link,
.wp-block-buttons.is-style-flex-3-col .wp-block-button__link,
.wp-block-buttons.is-style-flex-4-col .wp-block-button__link {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    box-sizing: border-box;
}


/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Tablet adjustments */
@media (max-width: 768px) {
    /* 4 columns become 2 columns on tablet */
    .wp-block-buttons.is-style-flex-4-col .wp-block-button {
        flex: 0 0 calc(50% - var(--wp--preset--spacing--2));
    }
    
    /* 3 columns become 2 columns on tablet */
    .wp-block-buttons.is-style-flex-3-col .wp-block-button {
        flex: 0 0 calc(50% - var(--wp--preset--spacing--2));
    }
}

/* Mobile adjustments */
@media (max-width: 480px) {
    /* All layouts become single column on mobile */
    .wp-block-buttons.is-style-flex-2-col,
    .wp-block-buttons.is-style-flex-3-col,
    .wp-block-buttons.is-style-flex-4-col {
        flex-direction: column;
    }
    
    .wp-block-buttons.is-style-flex-2-col .wp-block-button,
    .wp-block-buttons.is-style-flex-3-col .wp-block-button,
    .wp-block-buttons.is-style-flex-4-col .wp-block-button {
        flex: 0 0 100%;
    }
    
    /* Media & Text responsive adjustments - now handled via style panel */
}