/**
 * 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/
 */
/*.wp-block-column.has-border-color .wp-block-paragraph:not(.has-text-color):not(.is-style-sub-title),
.wp-block-column .wp-block-paragraph:not(.has-text-color):not(.is-style-sub-title),
.wp-block-column.has-border-color p:not(.has-text-color):not(.is-style-sub-title),
.wp-block-column p:not(.has-text-color):not(.is-style-sub-title) {
    color: var(--wp--preset--color--primary) !important;
}*/

/* ==========================================================================
   Media & Text: Image fade-to-background gradient
   ========================================================================== */

/*
 * Overlay a gradient on the image edge closest to the text column so the
 * photo bleeds smoothly into the page background.  Uses the theme background
 * color token so it adapts to style-variations / dark-mode if one is added.
 *
 * Default (media left):  fade right edge  ->  gradient goes left-to-right
 * Media on right:        fade left edge   ->  gradient goes right-to-left
 *
 * The gradient starts transparent and becomes opaque across roughly the
 * inner half of the image, matching the Figma spec (node 2082:2669).
 */
.wp-block-media-text .wp-block-media-text__media {
    position: relative;
}

.wp-block-media-text .wp-block-media-text__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 50%,
        var(--wp--preset--color--background, #fff) 100%
    );
    z-index: 1;
}

/* Reverse gradient when image is on the right */
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media::after {
    background: linear-gradient(
        to left,
        rgba(255, 255, 255, 0) 50%,
        var(--wp--preset--color--background, #fff) 100%
    );
}

/* Disable gradient on mobile stack so full image shows */
@media (max-width: 600px) {
    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media::after {
        display: none;
    }
}

/* ==========================================================================
   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 */
}


/* ==========================================================================
   Button: Min-height and shadow
   ========================================================================== */

.wp-block-button__link {
    min-height: 44px;
    box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.1);
}


/* ==========================================================================
   Core Accordion Styles
   ========================================================================== */

/* Override core reset (background: none) — two-class specificity beats core's one-class rule */
.wp-block-accordion .wp-block-accordion-heading__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 24px;
    margin: 0;
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
    line-height: 1.3;
    color: #222;
    background-color: var(--wp--preset--color--pale-blue);
    border: 1px solid var(--wp--preset--color--light-blue);
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}

.wp-block-accordion .wp-block-accordion-heading__toggle:hover {
    background-color: #d8e1f0;
}

.wp-block-accordion .wp-block-accordion-heading__toggle:focus-visible {
    outline: 2px solid var(--wp--preset--color--blue);
    outline-offset: 2px;
}

.wp-block-accordion .wp-block-accordion-heading {
    margin: 0;
}

.wp-block-accordion .wp-block-accordion-panel {
    background-color: #fff;
}

.wp-block-accordion .wp-block-accordion-panel__content {
    padding: 24px;
}

.wp-block-accordion .wp-block-accordion-panel__content > *:first-child {
    margin-top: 0;
}

.wp-block-accordion .wp-block-accordion-panel__content > *:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   Table Styles
   ========================================================================== */

.wp-block-table table {
    border: 1px solid var(--wp--preset--color--sand);
    border-collapse: collapse;
    width: 100%;
}

.wp-block-table thead th {
    background-color: var(--wp--preset--color--blue);
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem; /* 20px */
    line-height: 1.3;
    padding: 8px;
    /* text-align: left; */
    border-right: 1px solid #898989;
}

.wp-block-table thead th:last-child {
    border-right: none;
}

.wp-block-table tbody td {
    border-bottom: 1px solid var(--wp--preset--color--sand);
    padding: 8px;
    font-size: 1rem;
    line-height: 1.5;
}

.wp-block-table tfoot tr {
    border-top: 2px solid var(--wp--preset--color--sand);
}

.wp-block-table tfoot td {
    border-bottom: 1px solid var(--wp--preset--color--sand);
    padding: 8px;
}