/* 
 * TILT BLOCK DESIGN SYSTEM 
 * Version: 9.0.0 - Grid Layout Architecture (Performance optimized)
 * Author: TILT Engineer
 */

:root {
    --tilt-content-width: 1400px;
    --tilt-narrow-width: 1280px;
    --tilt-gutter: 1.5rem;
    --tilt-gold: #B99D75;
    --tilt-radius-lg: 1.5rem;
}

@media (min-width: 768px) { :root { --tilt-gutter: 2.5rem; } }

/* 
 * ==========================================================================
 * 1. MODERN GRID ENGINE
 * Umesto calc(100vw), koristimo grid koji automatski pravi "kanale" za sadržaj.
 * ==========================================================================
 */

body:not(.editor-styles-wrapper) .tilt-root-container {
    /* display: grid; */
    grid-template-columns: 
        [full-start] minmax(var(--tilt-gutter), 1fr) 
        [content-start] min(var(--tilt-content-width), 100% - (var(--tilt-gutter) * 2)) 
        [content-end] minmax(var(--tilt-gutter), 1fr) 
        [full-end];
    width: 100%;
    overflow-x: clip;
}

/* Svi blokovi po defaultu idu u "content" kanal (centrirano na 1400px) */
body:not(.editor-styles-wrapper) .tilt-root-container > * {
    grid-column: content;
    width: 100%;
}

/* Alignfull blokovi skaču u "full" kanal (ivice ekrana) */
body:not(.editor-styles-wrapper) .tilt-root-container > .alignfull {
    grid-column: full;
    width: 100%;
}

/* 
 * ==========================================================================
 * 2. TILT STYLE BUTTONS (The Logic Fix)
 * Samo spoljni kontejner reaguje, unutrašnji blokovi ostaju netaknuti
 * ==========================================================================
 */

/* --- TILT FULL (Skida unutrašnji padding glavnog bloka) --- */
.is-style-tilt-box-full {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Unutrašnji wrapper-i unutar TILT Full bloka se šire na 100% */
.is-style-tilt-box-full > .wp-block-group__inner-container,
.is-style-tilt-box-full > .wp-block-cover__inner-container,
.is-style-tilt-box-full.wc-block-featured-category .wc-block-featured-category__wrapper {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

/* --- TILT BOXED (Narrow content - 900px) --- */
.is-style-tilt-box-narrow {
    max-width: var(--tilt-narrow-width) !important;
    margin-inline: auto !important;
}

.is-style-tilt-box-narrow > .wp-block-group__inner-container,
.is-style-tilt-box-narrow > .wp-block-cover__inner-container {
    max-width: var(--tilt-narrow-width) !important;
}

/* 
 * ==========================================================================
 * 3. COMPONENT STYLES (Performance Tweaks)
 * ==========================================================================
 */

/* Rounding images bez clippinga */
.is-style-tilt-img-rounded img {
    border-radius: var(--tilt-radius-lg);
    content-visibility: auto; /* Browser ignoriše render ako je van ekrana */
}

/* TILT Button - Gold */
.wp-block-button.is-style-tilt-btn-gold .wp-block-button__link {
    background: var(--tilt-gold) !important;
    color: #000 !important;
    font-weight: 800;
    border-radius: 99px;
    border: none;
}

/* 
 * ==========================================================================
 * 4. EDITOR REPLICA (Za vizuelnu vernost u adminu)
 * ==========================================================================
 */
.editor-styles-wrapper .is-style-tilt-box-full {
    padding: 0 !important;
}
.editor-styles-wrapper .is-style-tilt-box-narrow {
    max-width: var(--tilt-narrow-width) !important;
}