/* Gallery System Styles */

/* Gallery Row - Horizontal container for gallery items */
.gallery-row {
    display: grid;
    gap: 1rem; /* Doubled default gap */
    margin-bottom: 1rem; /* Doubled margin */
    /* Ensure all direct children (items or cols) match height */
    align-items: stretch;
    justify-items: stretch;
}

/* Ratio-based row layout - Fixed height, variable width */
.gallery-row.ratio-layout {
    display: flex;
    align-items: stretch;
    height: 500px; /* Default row height */
    min-height: 200px; /* Prevent overly small rows */
    max-height: 100vh; /* Prevent overflow beyond viewport */
    width: 100%;
    box-sizing: border-box; /* Ensure consistent sizing */
    overflow-x: auto; /* Handle overflow if needed */
}

/* Width-controlled layout - Fixed width (container), variable height */
.gallery-row.width-controlled {
    display: flex;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box; /* Ensure consistent sizing */
    /* Let height be determined by content */
}

.gallery-row.ratio-layout > .gallery-item,
.gallery-row.ratio-layout > .gallery-col {
    flex-shrink: 0;
}

/* Calculate dimensions based on aspect ratio for fixed-height layout */
.gallery-row.ratio-layout > .gallery-item {
    height: 100%;
    width: auto !important;
    aspect-ratio: var(--rw)/var(--rh) !important;
}

/* Calculate dimensions for width-controlled layout */
.gallery-row.width-controlled > .gallery-item {
    /* Set base width and let flex grow handle the rest */
    flex: calc(var(--rw) / var(--rh)) 1 0;
    min-width: 0; /* Prevent overflow */
    aspect-ratio: var(--rw)/var(--rh) !important;
}

/* For nested galleries, calculate widths appropriately */
.gallery-row.ratio-layout > .gallery-col {
    display: flex;
    flex-direction: column;
    gap: inherit;
    height: 100%;
    width: auto;
}

.gallery-row.ratio-layout > .gallery-col > .gallery-row {
    flex: 1 1 auto;
    height: auto;
}

/* Gap classes */
.gap-0 {
    gap: 0 !important;
}

.gap-1 {
    gap: 0.5rem !important;
}

.gap-2 {
    gap: 1rem !important;
}

.gap-3 {
    gap: 2rem !important;
}

.gap-4 {
    gap: 3rem !important;
}

.gap-5 {
    gap: 6rem !important;
}

/* Column spans */
.gallery-row.grid-cols-1 {
    grid-template-columns: 1fr;
}

.gallery-row.grid-cols-2 {
    grid-template-columns: 1fr 1fr;
}

.gallery-row.grid-cols-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Gallery Column - Vertical container for nested rows */
.gallery-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    /* Ensure columns match siblings in height */
    align-self: stretch;
    /* For nested rows, ensure they fill available space proportionally */
    > .gallery-row {
        flex: 1 1 auto;
        min-height: 0; /* Prevent overflow issues */
    }
}

/* Ratio-based column layout - Fixed width, variable height */
.gallery-col.ratio-layout {
    flex-direction: column;
    align-items: stretch;
    gap: inherit;
}

/* Height-controlled layout - Fixed height (container), variable width */
.gallery-col.height-controlled {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: stretch;
    box-sizing: border-box;
}

/* Calculate dimensions based on aspect ratio for fixed-width column layout */
.gallery-col.ratio-layout > .gallery-item {
    width: 100%;
    height: auto !important;
    aspect-ratio: var(--rw)/var(--rh) !important;
}

/* Calculate dimensions for height-controlled column layout */
.gallery-col.height-controlled > .gallery-item {
    /* Set base height and let flex grow handle the rest */
    flex: calc(var(--rh) / var(--rw)) 1 0;
    min-height: 0; /* Prevent overflow */
    aspect-ratio: var(--rw)/var(--rh) !important;
}

/* Nested rows inside ratio-based columns */
.gallery-col.ratio-layout > .gallery-row {
    width: 100%;
}

/* Nested rows inside height-controlled columns */
.gallery-col.height-controlled > .gallery-row {
    flex: calc(var(--rh) / var(--rw)) 1 0;
    min-height: 0; /* Prevent overflow */
}

/* Flex utility classes */
.flex {
    display: flex !important;
}

.flex-col {
    flex-direction: column !important;
}

.items-stretch {
    align-items: stretch !important;
}

/* Gallery Item */
.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    width: 100%; /* Ensure full width in all containers */
    display: flex;
    align-items: stretch;
    /* Ensure proper containment */
    box-sizing: border-box;
}

/* Aspect ratios - ensure these take precedence */
.gallery-item.aspect-video {
    aspect-ratio: 16 / 9 !important;
}

.gallery-item.aspect-square {
    aspect-ratio: 1 / 1 !important;
}

.gallery-item.aspect-\[2\/3\] {
    aspect-ratio: 2 / 3 !important;
}

.gallery-item.aspect-\[3\/2\] {
    aspect-ratio: 3 / 2 !important;
}

.gallery-item.aspect-\[9\/16\] {
    aspect-ratio: 9 / 16 !important;
}

.gallery-item.aspect-\[1\/2\.5\] {
    aspect-ratio: 1 / 2.5 !important;
}

.gallery-item.aspect-\[1\/3\.5\] {
    aspect-ratio: 1 / 3.5 !important;
}


/* Ensure figure element stretches in gallery item */
.gallery-item > figure {
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Gallery Media */
.gallery-media {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover; /* This will crop images to fit the ratio while maintaining aspect */
    transition: transform 0.3s ease-in-out;
    /* Ensure no accidental gaps */
    box-sizing: border-box;
}

.gallery-item:hover .gallery-media {
    transform: scale(1.05);
}

/* Gallery Caption */
.gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.gallery-item:hover .gallery-caption {
    opacity: 1;
}

.gallery-caption h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.gallery-caption p {
    font-size: 0.875rem;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .gallery-row.grid-cols-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .gallery-row.grid-cols-2,
    .gallery-row.grid-cols-3 {
        grid-template-columns: 1fr;
    }
}