/**
 * YD Grid Component - Reusable Grid System
 * 27 columns × 5 rows decorative grid pattern
 */

/* Grid Container */
.yd-grid {
    width: 100%;
    display: grid;
    /* 27 colunas × 5 linhas (só as barras coloridas) */
    grid-template-columns: repeat(27, 1fr);
    grid-template-rows: repeat(5, var(--cell-size));
    z-index: 2;
    pointer-events: none;
}

/* Grid Bar Base Styles */
.grid-bar {
    position: relative;
    z-index: 2;
}

.grid-bar.bar-top::before,
.grid-bar.bar-bottom::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: calc(var(--cell-size) * 0.14); /* 6px @ 1920px */
    background-color: var(--color-brown);
}

.grid-bar.bar-top::before { top: 0; }
.grid-bar.bar-bottom::after { bottom: 0; }

/* Grid Bar Colors */
.grid-bar--golden { background-color: var(--color-golden); z-index: 1; }
.grid-bar--deep-blue { background-color: var(--color-deep-blue); }
.grid-bar--yellow { background-color: var(--color-yellow); }
.grid-bar--pink { background-color: var(--color-pink); }
.grid-bar--green { background-color: var(--color-green); }
.grid-bar--white { background-color: var(--color-white); }

/* Grid Rows - apenas 5 linhas */
.yd-grid .row-1 { grid-row: 1; }
.yd-grid .row-2 { grid-row: 2; }
.yd-grid .row-3 { grid-row: 3; }
.yd-grid .row-4-5 { grid-row: 4 / span 2; }
.yd-grid .row-5 { grid-row: 5; }

/* Grid Columns */
.yd-grid .col-full { grid-column: 1 / -1; }
.yd-grid .col-1-3 { grid-column: 1 / span 3; }
.yd-grid .col-3 { grid-column: 3; }
.yd-grid .col-4 { grid-column: 4; }
.yd-grid .col-4-7 { grid-column: 4 / span 4; }
.yd-grid .col-5 { grid-column: 5; }
.yd-grid .col-6-9 { grid-column: 6 / span 4; }
.yd-grid .col-8-9 { grid-column: 8 / span 2; }
.yd-grid .col-10-13 { grid-column: 10 / span 4; }
.yd-grid .col-14 { grid-column: 14; }
.yd-grid .col-14-15 { grid-column: 14 / span 2; }
.yd-grid .col-16-18 { grid-column: 16 / span 3; }
.yd-grid .col-18 { grid-column: 18; }
.yd-grid .col-19-21 { grid-column: 19 / span 3; }
.yd-grid .col-22-23 { grid-column: 22 / span 2; }
.yd-grid .col-23 { grid-column: 23; }
.yd-grid .col-23-27 { grid-column: 22 / span 5; } /* col 22-26, margem 1 célula à direita */
.yd-grid .col-24-26 { grid-column: 24 / span 3; }
.yd-grid .col-24-27 { grid-column: 24 / span 4; }
.yd-grid .col-27 { grid-column: 27; }