/*
 * Gallery stylesheet
 *
 * The gallery is designed to be independent of any existing Bootstrap grid
 * structure. It uses its own flex and grid layouts and applies a 5% margin
 * on the left and right sides to create breathing room on large screens
 * while allowing the gallery to occupy the full available width.
 */

/* Root variables for easy tuning */
:root {
    --gallery-margin: 5%;      /* Left and right margin on the container */
    --thumb-gap: 0.5rem;       /* Space between thumbnails */
    --thumb-aspect-width: 16;  /* Aspect ratio width component */
    --thumb-aspect-height: 9;  /* Aspect ratio height component */
}

/* Reset margins on the body to avoid unexpected gaps */
body {
    margin: 0;
    font-family: sans-serif;
    background-color: #fafafa;
}

/* Adicionar o prefixo Gal- antes de todas as classes CSS para evitar conflitos */

/* Outer container for the gallery */
.Gal-gallery-container {
    width: calc(100% - 2 * var(--gallery-margin));
    margin-left: var(--gallery-margin);
    margin-right: var(--gallery-margin);
    margin-top: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: flex-start;
    padding-bottom: 80px;
}

/* When there are no images we center the fallback text */
.Gal-gallery-container.Gal-empty {
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* Main preview area */
.Gal-main-section {
    flex: 3 1 60%;
    position: relative;
}

/* Ensure the main image scales and maintains its aspect ratio.
   We set an explicit aspect-ratio so that the height scales
   automatically when the width changes. */
#Gal-main-image {
    width: 100%;
    height: auto;
    aspect-ratio: var(--thumb-aspect-width) / var(--thumb-aspect-height);
    object-fit: contain;
    display: block;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Thumbnail section */
.Gal-thumb-section {
    flex: 2 1 40%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Grid of thumbnails. The number of columns changes in the media queries.
   The height of this grid is set via JavaScript to match the height of
   the main image on desktop and to match the number of rows on mobile. */
.Gal-thumb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, auto);
    gap: var(--thumb-gap);
    overflow: hidden;
    flex: 1 1 auto;
    align-content: start;
    justify-items: stretch;
}

/* Individual thumbnail wrapper. The aspect-ratio property forces the
   div to maintain the same ratio as the main image. */
.Gal-thumb-item {
    position: relative;
    width: 100%;
    aspect-ratio: var(--thumb-aspect-width) / var(--thumb-aspect-height);
    overflow: hidden;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s ease;
}

/* Hover effect for thumbnails */
.Gal-thumb-item:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Thumbnail image fills its wrapper */
.Gal-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Active thumbnail indicator */
.Gal-thumb-item.Gal-active {
    outline: 3px solid #007bff;
    outline-offset: -3px;
}

/* Pagination container */
.Gal-pagination {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Pagination buttons */
.Gal-pagination button {
    background: #e9ecef;
    border: none;
    padding: 0.4rem 0.6rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
}

.Gal-pagination button:hover {
    background: #d6d8db;
}

.Gal-pagination button.Gal-active {
    background: #007bff;
    color: #fff;
}

/* No images fallback styling */
.Gal-no-images {
    font-size: 1.2rem;
    color: #666;
    text-align: center;
    padding: 2rem;
}

/* Responsive adjustments for narrow screens */
@media (max-width: 767px) {
    /* Stack the main image above the thumbnails */
    .Gal-gallery-container {
        flex-direction: column;
    }
    .Gal-main-section,
    .Gal-thumb-section {
        width: 100%;
    }
    /* Use four columns for thumbnails on mobile */
    .Gal-thumb-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, auto);
        align-content: start;
    }
}