/**
 * Block-Based Layout System
 * Sistema de alineación basado en el Editor de Bloques de WordPress
 *
 * @package Ondas_Luxury
 */

/* ============================================
   GLOBAL LAYOUT CONFIGURATION
   ============================================ */

/**
 * Remove fixed containers and let blocks control width
 * El contenido principal debe poder respirar de borde a borde
 * EXCEPCIÓN: Páginas de WooCommerce mantienen su diseño personalizado
 */
body:not(.woocommerce-page):not(.woocommerce-checkout):not(.woocommerce-cart) .site-main {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Checkout específico NO debe ser afectado por bloques */
.woocommerce-checkout .site-main,
.woocommerce-cart .site-main {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/**
 * Prevenir que .container dentro de .site-main limite el ancho
 * Solo en páginas y posts con bloques (NO WooCommerce)
 */
body:not(.woocommerce):not(.woocommerce-page):not(.single-product):not(.post-type-archive-product) .site-main > .container,
body:not(.woocommerce):not(.woocommerce-page):not(.single-product):not(.post-type-archive-product).single .site-main > .container,
body:not(.woocommerce):not(.woocommerce-page):not(.single-product):not(.post-type-archive-product).page .site-main > .container {
    max-width: 100%;
    padding: 0;
}

/**
 * Artículos dentro del main no deben tener limitaciones de ancho
 * (NO WooCommerce)
 */
body:not(.woocommerce):not(.woocommerce-page):not(.single-product):not(.post-type-archive-product) .site-main > article {
    width: 100%;
    max-width: 100%;
}

/* ============================================
   WOOCOMMERCE EXCEPTIONS
   ============================================ */

/**
 * WooCommerce pages mantienen su diseño personalizado
 * NO aplicar estilos de bloques a estas páginas
 */

/**
 * Prevenir que los estilos de bloques afecten WooCommerce
 * Usar !important para asegurar que tome prioridad
 */
.woocommerce-page .wp-block,
.woocommerce-page .entry-content > *,
.woocommerce-shop .wp-block,
.woocommerce-shop .entry-content > *,
.post-type-archive-product .wp-block,
.post-type-archive-product .entry-content > *,
.tax-product_cat .wp-block,
.tax-product_cat .entry-content > *,
.tax-product_tag .wp-block,
.tax-product_tag .entry-content > *,
.single-product .wp-block,
.single-product .entry-content > *,
.woocommerce-cart .wp-block,
.woocommerce-cart .entry-content > *,
.woocommerce-checkout .wp-block,
.woocommerce-checkout .entry-content > *,
.woocommerce-account .wp-block,
.woocommerce-account .entry-content > * {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ============================================
   BLOCK ALIGNMENT SYSTEM
   ============================================ */

/**
 * Default Content Width (Box Mode)
 * Definido en theme.json como contentSize: 800px
 */
.wp-block,
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/**
 * Wide Alignment
 * Definido en theme.json como wideSize: 1400px
 */
.alignwide,
.wp-block.alignwide {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/**
 * Full Width Alignment
 * 100% del viewport, sin padding lateral
 */
.alignfull,
.wp-block.alignfull {
    max-width: 100%;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
}

/* ============================================
   GRUPO CON CONTENIDO INTERNO ALINEADO
   ============================================ */

/**
 * Group Block con layout interno
 * Permite que el fondo sea full-width pero el contenido interno respete contentSize
 */
.wp-block-group.alignfull.has-background,
.wp-block-cover.alignfull {
    padding-left: 0;
    padding-right: 0;
}

/**
 * Contenido interno del grupo respeta contentSize
 */
.wp-block-group.alignfull > .wp-block-group__inner-container,
.wp-block-group.alignfull > .wp-block-group__inner-container > * {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/**
 * Si el grupo tiene layout="constrained", respeta contentSize
 */
.wp-block-group.alignfull.is-layout-constrained > *,
.wp-block-group.alignfull[class*="is-layout-constrained"] > * {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/**
 * Elementos dentro del grupo con alineación wide
 */
.wp-block-group.alignfull > .wp-block-group__inner-container > .alignwide,
.wp-block-group.alignfull.is-layout-constrained > .alignwide {
    max-width: 1400px;
}

/**
 * Elementos dentro del grupo con alineación full
 */
.wp-block-group.alignfull > .wp-block-group__inner-container > .alignfull,
.wp-block-group.alignfull.is-layout-constrained > .alignfull {
    max-width: 100%;
    width: 100%;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ============================================
   COVER BLOCK
   ============================================ */

/**
 * Cover block full-width con contenido interno alineado
 */
.wp-block-cover.alignfull {
    width: 100%;
    max-width: 100%;
}

.wp-block-cover.alignfull > .wp-block-cover__inner-container {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.wp-block-cover.alignfull.is-layout-constrained > * {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   COLUMNS BLOCK
   ============================================ */

/**
 * Columns respeta el ancho del contenedor padre
 */
.wp-block-columns {
    max-width: 100%;
}

.alignwide > .wp-block-columns {
    max-width: 1400px;
}

.alignfull > .wp-block-columns {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* ============================================
   IMAGE BLOCK
   ============================================ */

/**
 * Imágenes con alineación completa
 */
.wp-block-image.alignfull img {
    width: 100%;
    max-width: 100%;
}

.wp-block-image.alignwide img {
    width: 100%;
}

/* ============================================
   GALLERY BLOCK
   ============================================ */

.wp-block-gallery.alignfull {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* ============================================
   SEPARADORES Y ESPACIADORES
   ============================================ */

.wp-block-separator.alignwide,
.wp-block-separator.alignfull {
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .wp-block,
    .entry-content > *:not(.alignwide):not(.alignfull) {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .alignwide {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .alignfull > .wp-block-columns {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .wp-block-group.alignfull > .wp-block-group__inner-container,
    .wp-block-cover.alignfull > .wp-block-cover__inner-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 480px) {
    .wp-block,
    .entry-content > *:not(.alignwide):not(.alignfull) {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .alignwide {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* ============================================
   EDITOR STYLES
   ============================================ */

/**
 * Estilos específicos para el editor de bloques
 * (solo se aplican en el editor, no en el frontend)
 */
.editor-styles-wrapper .wp-block {
    max-width: 800px;
}

.editor-styles-wrapper .alignwide {
    max-width: 1400px;
}

.editor-styles-wrapper .alignfull {
    max-width: 100%;
}

/* ============================================
   LEGACY SUPPORT
   ============================================ */

/**
 * Soporte para contenido legacy sin bloques
 */
.entry-content {
    width: 100%;
}

.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}