/* 
   Filename: slideshow.css
   Description: Styles for the display_pics subroutine.
*/

/* The Main Container injected by the User */
.slideshow-container-wrapper {
    position: relative;
    width: 100%;
    /* Flex-grow handling or explicit height is handled by parent page */
    background: #000;
    overflow: hidden;
    /* Default variables if JSON fails */
    --outer: 10px;
    --inner: 10px;
    --caption-height: 35px;
}

/* White Border Box (The Outer Border) */
#slideshow-border {
    position: absolute;
    top: var(--outer);
    left: var(--outer);
    right: var(--outer);
    bottom: var(--outer);
    border: 2px solid white;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    pointer-events: none;
    z-index: 100;
}

/* 
   Inner Content Area 
   This applies the "Inner Border" spacing.
   Everything inside here is safe from the white line.
*/
#slideshow-inner {
    position: absolute;
    top: var(--outer);
    left: var(--outer);
    right: var(--outer);
    bottom: var(--outer);
    padding: var(--inner); /* This creates the Inner Border gap */
    box-sizing: border-box;
}

/* 
   The Layer (Holds the images)
   By default, it takes the full height of the inner area.
   JS will adjust the height if a caption is present.
*/
.layer {
    position: absolute;
    top: var(--inner); 
    left: var(--inner);
    /* Width is always full width minus inner padding sides */
    width: calc(100% - (2 * var(--inner))); 
    /* Height is dynamic: 100% normally, or reduced by caption height via JS */
    height: calc(100% - (2 * var(--inner))); 
    
    opacity: 0;
    display: grid;
    background: #000;
    z-index: 1;
    overflow: hidden;
}

/* -- Grid Layouts -- */
.layout-1 { display: block; overflow: hidden; }
.layout-1 .tile { width: 100%; height: 100%; }

.layout-2 {
    grid-template-columns: calc(50% - 1px) 2px calc(50% - 1px);
    grid-template-rows: 1fr;
    gap: 0;
}
.layout-2 .A1 { grid-area: 1 / 1; }
.layout-2 .B1 { grid-area: 1 / 3; }
.layout-2 .divider-v { grid-area: 1 / 2; background: #000; }

.layout-4 {
    grid-template-columns: calc(50% - 1px) 2px calc(50% - 1px);
    grid-template-rows: calc(50% - 1px) 2px calc(50% - 1px);
    gap: 0;
}
.layout-4 .A1 { grid-area: 1 / 1; }
.layout-4 .A2 { grid-area: 3 / 1; }
.layout-4 .B1 { grid-area: 1 / 3; }
.layout-4 .B2 { grid-area: 3 / 3; }
.layout-4 .divider-v { grid-area: 1 / 2 / 4 / 3; background: #000; }
.layout-4 .divider-h { grid-area: 2 / 1 / 3 / 4; background: #000; }

/* -- Tiles & Images -- */
.tile {
    width: 100%;
    height: 100%;
    background: #000;
    position: relative;
    overflow: hidden;
}

.tile img {
    width: 100%;
    height: 100%;
    /* 
       CONTAIN: Ensures the full image is visible.
       Since JS resizes the .layer div to make room for text,
       this image will automatically scale down to fit that smaller area.
    */
    object-fit: contain; 
    display: block;
}

/* Alignment Specifics */
.layout-2 .A1 img { object-position: right center; }
.layout-2 .B1 img { object-position: left center; }
.layout-4 .A1 img { object-position: right top; }
.layout-4 .A2 img { object-position: right bottom; }
.layout-4 .B1 img { object-position: left top; }
.layout-4 .B2 img { object-position: left bottom; }

/* 
   Description Band 
   Positioned at the BOTTOM of the Inner Area.
   It sits exactly inside the Inner Border.
*/
#description-band {
    position: absolute;
    bottom: var(--inner); /* Stick to bottom of inner padding */
    left: var(--inner);
    width: calc(100% - (2 * var(--inner)));
    height: var(--caption-height);
    
    background-color: #000; /* Solid Black */
    color: white;
    font: italic 14px Arial, sans-serif;
    
    display: flex;
    align-items: center; /* Vertically Center Text */
    justify-content: center; /* Horizontally Center Text */
    
    pointer-events: none;
    opacity: 0;
    z-index: 50;
}