/* El Arrejuntao lottery styling */
h2.elarrejuntao {
    background: transparent;
}

/* Pinterest-style Masonry Grid Layout */

.lottery-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 0 auto;
    padding: 15px 0;
    grid-auto-flow: dense;
}

/* Pinterest-style masonry using CSS columns */
.lottery-grid-masonry {
    column-count: 3;
    column-gap: 15px;
    margin: 0 auto;
    padding: 15px 0;
}

.lottery-grid-masonry > .lottery-grid-item,
.lottery-grid-masonry > .lottery-grid-item-full {
    break-inside: avoid;
    overflow: hidden;
    margin-bottom: 15px;
}

.lottery-grid-masonry > .col-break {
    break-before: column;
}

.lottery-grid-masonry > .ad-full-width {
    column-span: all;
    margin-bottom: 15px;
}

/* Two-column row: wide card (2fr) + narrow card (1fr) */
.lottery-grid-pair {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 15px;
    align-items: start;
}

.lottery-grid-pair > .lottery-grid-item-full {
    grid-column: auto;
}

.lottery-grid-pair .resultado {
    display: flex;
    align-items: center;
}

.lottery-grid-pair .col-xs-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.lottery-grid-pair .col-xs-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.lottery-grid-item {
    /* Ensure senal elements are contained within each item */
    position: relative;
}

.lottery-grid-item .resultados {
    padding: 10px;
    position: relative;
}

.ad-grid-item {
    /* Basic ad container styling */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background-color: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    position: relative;
}

.ad-grid-item .ad {
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    padding: 20px;
}

.ad-full-width {
    grid-column: 1 / -1;
    min-height: 100px;
    background-color: #fff;
}

/* Wide lottery item - spans 2 of 3 columns */
.lottery-grid-item-full {
    grid-column: span 2;
    position: relative;
}

.lottery-grid-item-full .resultados {
    padding: 10px;
    position: relative;
}

/* Multi-column results grid */
.results-grid-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.results-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.results-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.results-grid-column {
    /* Each column maintains the standard card styling */
}

.results-grid-column .resultado {
    display: flex;
    align-items: center;
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 992px) {
    .results-grid-4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .results-grid-4col,
    .results-grid-3col,
    .results-grid-2col {
        grid-template-columns: 1fr;
    }
}

/* Handle Bootstrap column classes within grid items */
.lottery-grid-container .resultado,
.lottery-grid-masonry .resultado {
    display: flex;
    align-items: center;
}

/* Triple Popular table columns - 18% x 4 + 28% = 100% */
.lottery-grid-item-full .col-time {
    flex: 0 0 18%;
    max-width: 18%;
}

.lottery-grid-item-full .col-result {
    flex: 0 0 18%;
    max-width: 18%;
}

/* Cacho column - 28% */
.lottery-grid-item-full .col-result:last-child {
    flex: 0 0 28%;
    max-width: 28%;
}

.lottery-grid-item-full .col-result:last-child span {
    font-size: 0.9em;
}

.lottery-grid-container .col-xs-4,
.lottery-grid-masonry .col-xs-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.lottery-grid-container .col-xs-8,
.lottery-grid-masonry .col-xs-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.lottery-animalitos-grid-container {
    display: grid;
    /* Default: 70/30 split */
    grid-template-columns: 70% 30%;
    gap: 17px;
    margin: 0 auto;
    padding: 17px;
}

/* Modifier for 30/70 split */
.lottery-animalitos-grid-container.reverse {
    grid-template-columns: 30% 70%;
}

body .resultados {
    position: relative !important;
}

.lottery-animalitos-grid-container .resultados {
    padding: 10px;
}

.lottery-animalitos-grid-container .resultados .lotResTit {
    margin: 0px !important;
    padding: 0px !important;
    margin-bottom: 10px !important;
}

.lottery-animalitos-grid-container .resultados .lotinfo-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
}

.lottery-animalitos-grid-container .resultados .lotinfo {
    margin: 0px !important;
}

/* Desktop/Mobile visibility */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

/* Responsive Design */
@media (max-width: 992px) {
    .lottery-grid-masonry {
        column-count: 2;
    }

    .lottery-grid-masonry > .col-break {
        break-before: auto;
    }

    .lottery-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .lottery-grid-item-full {
        grid-column: span 2;
    }

    .lottery-animalitos-grid-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .lottery-animalitos-grid-container.reverse {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .lottery-grid-masonry {
        column-count: 1;
    }

    .lottery-grid-pair {
        grid-template-columns: 1fr;
    }

    .lottery-grid-container {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .lottery-grid-item-full {
        grid-column: span 1;
    }

    /* Show mobile layout, hide desktop layout */
    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }

    .ad-grid-item {
        min-height: 150px;
    }

    .ad-full-width {
        min-height: 80px;
    }
}