/* Global / Body Context (ensure these are set correctly for dvh to work well) */
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

html, body {
  display: flex;
  flex-direction: column;
  height: 100dvh; /* Use dvh for better mobile height handling */
  width: 100vw;
  margin: 0; /* Remove default body margin */
  padding: 0; /* Remove default body padding */
}


.dali_page_container {
  min-height: 100dvh; /* Use dvh here too */
  width: 100vw;
  display: flex;
  flex-direction: column;
  flex: 1; /* Allow container to grow and fill available height */
}

.dali_header {
  display: flex; /* <-- CRITICAL: Make it a flex container */
  justify-content: space-between; /* Distribute space: Dali left, Text center, ISCTE right */
  align-items: center; /* Vertically center items within the header */
  background: rgb(180, 176, 176); /* Grey background */
  color: black;
  height: 20dvh; /* Example height (20% of dynamic viewport height) */
  width: 100%;
  margin: 0; /* Clean up margins */
  padding: 0;
  box-sizing: border-box; /* Include padding in the element's total width/height */
}

/* LOGO IMAGES (Both Dali and ISCTE) */
.iscte_logo_image,
.dali_logo_image {
  height: 100%;
  width: auto; /* Allow width to scale proportionally based on height */
  max-height: 150px; /* Required to prevent logos from being too tall on very large screens */
  max-width: 300px; /* Required to prevent logos from being too wide */
  flex-shrink: 0; /* Prevents logos from shrinking below their content size (important for visibility) */
  flex-grow: 0; /* Prevents logos from growing larger than their content size (unless you want them to fill space) */
  object-fit: contain;
}

/* THE NEW TEXT CONTAINER (for h1 and h2) */
.header_text_container {
  flex-grow: 1; /* Allows this container to take up all available horizontal space */
  flex-shrink: 1; /* Allows it to shrink if needed (but min-width below helps) */
  flex-basis: 0; /* Tells flexbox to distribute space based on flex-grow, not initial content size */
  text-align: center; /* Keeps text centered within its own container */
  padding: 0 10px; /* Add some horizontal padding around the text */
  box-sizing: border-box;
  min-width: 150px; /* OPTIONAL: Give it a minimum width to prevent it from collapsing too much */
}

/* Adjust margins/paddings for h1 and h2 within the text container */
.header_text_container h1,
.header_text_container h2 {
    margin: 0; /* Remove default heading margins */
    padding: 5px 0; /* Add some vertical padding between h1 and h2 */
    text-align: center;
}

.header_text_container h1 {
    font-size: 2em;
}
.header_text_container h2 {
    font-size: 2em;
}


.default_font_color {
  color: white;
}


/*
  These definitions are to be applied to each occurrence
  of the word "dali"
*/
.dali_format {
  font-weight: bold;
  font-family: "Courier New";
  font-size: larger
}

.dali_body {
  flex: 1; /* Takes remaining space */
  display: block; /* Change from flex to normal flow */
  position: relative; /* For child positioning */
  overflow-y: auto; /* Only if you want scrolling */
  background-color: black;
  color: white;
}

.dali_text {
  padding: 1rem;
  font-size: 1.5rem;
  width: 100%;
}

/* regular spacing for all paragraphs */
p {
  margin-top: 0.5em;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 0.5em;
}

p:first-of-type {
  margin-top: 2em; /* more space before the first paragraph */
}

.image_with_description_div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.description {
  font-size: 150%;
  margin-bottom: 0.4%;
}

.media_div {
  display: flex;
  align-items: end;
  gap: 10px;
}

.media_title {
  font-weight: bold;
  font-size: 165%;
  margin-bottom: 0.4%;
}

/* This is the grid for displaying photos, images... */
.thumbnails-grid {
  --columns: 12;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin: 0.8%;
  gap: 1rem;
  padding: 1rem;
  width: 100%;
  max-width: 1250px; /* Prevents over-expansion */
}


/*  This is the navigation grid: collaborations, dali shows, dali photos, dali images,
    dali audios, dali videos and other stuff
*/
.navigation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin: 0.8%;
  gap: 1rem;
  padding: 1rem;
  width: 100%;
  max-width: 1250px; /* Prevents over-expansion */
}



.thumbnail {
  width: auto;
  max-width: 100px; /* Absolute maximum size */
  aspect-ratio: 1 / 1;
  margin-bottom: 0.8%;
}


.thumbnail img {
  width: 100%;
  height: 100%;
  /*object-fit: cover;*/
  object-fit: fill;
}

/* Add a hover effect   */
.thumbnail img:hover {
  /* 0px horizontal offset, 0px vertical offset, 10px blur, 10px spread */
  box-shadow: 0 0 10px 10px rgba(142, 142, 142, 1);
  transition: box-shadow 0.3s ease-in-out; /* Add a smooth transition for a nicer effect */
}



/*  
    2025/06/13

    The next CSS rules (until, but excluding the media queries) are used for the lightbox used
    to display a set of images, on an overlay, one at a time with forward, backward and close controls.

    Remove this if it does not work
*/
/* Lightbox Overlay */
#lightbox-overlay {
    display: none; /* Make absolutely sure this is present and effective */
    position: fixed; /* Stays in place even if page scrolls */
    z-index: 1000; /* Sits on top of everything else */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Prevent scrolling of content behind */
    background-color: rgba(0, 0, 0, 0.9); /* Black background with opacity */
    
    /* Use flexbox to center the content */
    display: flex; /* This will be set to 'flex' by JS when shown */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
}

/* Lightbox Content Container (holds ONLY the image now) */
#lightbox-content {
    /* No relative position needed here as children are not absolute relative to it */
    max-width: 90%; /* Max width of the content area */
    max-height: 90%; /* Max height of the content area */
    display: flex; /* To center the image inside */
    justify-content: center;
    align-items: center;
    /* Optional: Add some padding if image is very large to separate from arrows */
    padding: 0 50px; /* Example padding to ensure arrows are not too close */
}

/* Lightbox Image */
#lightbox-img {
    max-width: 100%; /* Ensure image fits within its container */
    max-height: 90vh; /* Max height relative to viewport height */
    display: block; /* Remove extra space below image */
    margin: auto; /* Center image if container is larger */
    object-fit: contain; /* Scales the image to fit within the content area without cropping */
    user-select: none; /* Prevent accidental image dragging/selection */
    -webkit-user-drag: none; /* Disable image dragging for WebKit browsers */
}

/* Navigation Buttons (Next/Previous) */
.lightbox-nav-btn {
    position: absolute; /* Now absolute relative to #lightbox-overlay */
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(100, 100, 100, 0.5); /* Semi-transparent background */
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 2em;
    cursor: pointer;
    border-radius: 5px;
    user-select: none; /* Prevent text selection */
    transition: background-color 0.3s;
    outline: none; /* Remove focus outline */
    z-index: 1001; /* Ensure they are above the image and content */
}

.lightbox-nav-btn:hover {
    background-color: rgba(150, 150, 150, 0.7);
}

#lightbox-prev {
    left: 20px; /* Position further from the edge of the screen */
}

#lightbox-next {
    right: 20px; /* Position further from the edge of the screen */
}

/* Close Button */
#lightbox-close {
    position: absolute; /* Absolute relative to #lightbox-overlay */
    top: 20px; /* Position from the top of the overlay */
    right: 20px; /* Position from the right of the overlay */
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    user-select: none; /* Prevent text selection */
    z-index: 1001; /* Ensure it is above the image and content */
}

#lightbox-close:hover,
#lightbox-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


/*                            Media Queries                                             */
/* --- Breakpoint for Tablets and Smaller Laptops (e.g., screens up to 1024px wide) --- */
@media (max-width: 1024px) {
    .dali_header {
        height: 15dvh; /* Slightly reduced height for tablets */
        /* You might want to add some padding back for tablet edges, e.g.: */
        /* padding: 0 15px; */
    }
    .header_text_container h1 {
        font-size: 1.8em; /* Slightly smaller H1 for tablets */
    }
    .header_text_container h2 {
        font-size: 1.5em; /* Slightly smaller H2 for tablets */
    }
    .iscte_logo_image,
    .dali_logo_image {
        max-height: 100px; /* Reduced max height for logos on tablets */
        max-width: 200px; /* Reduced max width for logos on tablets */
    }
}


/* --- Breakpoint for Mobile Phones (e.g., screens up to 768px wide) --- */
@media (max-width: 768px) {
    .dali_header {
        display: flex;
        flex-direction: row; /* Keep flex-direction: row for the main container */
        flex-wrap: wrap;     /* <<< --- CRITICAL: Allow items to wrap to the next line --- >>> */
        justify-content: space-between; /* Pushes logos to the edges of the first line */
        align-items: center; /* Vertically center items on their respective lines */
        height: auto;        /* Let header height adjust to content */
        min-height: 12dvh;   /* Ensure a comfortable minimum height for the header */
/*         padding: 10px 10px;  Add padding around the header content for breathing room */
        padding: 0;
        box-sizing: border-box; /* Crucial for padding not to overflow */
    }

    /* Styles for the individual logo images */
    .dali_logo_image,
    .iscte_logo_image {
        max-height: 110px;    /* Adjust logo height for mobile */
        max-width: 210px;    /* Control logo width. They will sit on the first line. */
        flex-grow: 0;        /* Prevents logos from growing beyond their max-width */
        flex-shrink: 1;      /* Allows logos to shrink if space is very tight */
        flex-basis: auto;    /* Let content size determine initial basis, but max-width will cap it */
/*      margin: 5px 0;          Add a small vertical margin for spacing when content wraps */
        margin: 0;
    }

    /* Styles for the text container, forcing it to the second row */
    .header_text_container {
        flex-basis: 100%;    /* <<< --- CRITICAL: Force text container to take full width, pushing it to new line --- >>> */
        order: 1;            /* <<< --- CRITICAL: Make text container appear after logos --- >>> */
        flex-grow: 0;        /* Don't grow beyond 100% width */
        flex-shrink: 0;      /* Don't shrink much either */
        text-align: center;  /* Center text within its own 100% width line */
        padding: 5px 0;      /* Add some internal vertical padding around the text */
        min-width: unset;    /* Override any desktop min-width that might be too restrictive */
    }

    /* Adjust font sizes to be readable now that they have more horizontal room */
    .header_text_container h1 {
        font-size: 1.3em;    /* More readable size for H1 */
        margin: 0;           /* Remove default heading margins */
        padding: 2px 0;      /* Fine-tune padding around H1 */
    }
    .header_text_container h2 {
        font-size: 1.3em;      /* More readable size for H2 */
        margin: 0;
        padding: 2px 0;
    }
}

/* --- Optional: Breakpoint for Very Small Phones (e.g., screens up to 480px wide) --- */
@media (max-width: 480px) {
    .dali_header {
        flex-direction: column; /* Stack all items vertically */
        justify-content: center; /* Vertically center the stacked items */
        align-items: center;     /* Horizontally center the stacked items */
        min-height: 18dvh;       /* Likely need more vertical space for 3 rows */
        padding: 8px 5px;        /* Slightly less padding for very small screens */
    }

    .dali_logo_image {
        max-height: 100px;
        max-width: 100px;
        margin: 5px 0;    /* Add some vertical spacing between stacked elements */
        order: 2;
    }

    .iscte_logo_image {
        max-height: 100px;
        max-width: 100px;
        margin: 5px 0;    /* Add some vertical spacing between stacked elements */
        order: 1;
    }


    .header_text_container {
        /* These properties are now set for the column layout */
        flex-basis: auto; /* Let it shrink/grow as needed, no longer forced 100% width */
        order: 3;
        width: 100%;      /* Ensure it takes full available width */
        padding: 5px 0;
    }

    .header_text_container h1 {
        font-size: 1.1em; /* Adjust font size for very small screens */
    }
    .header_text_container h2 {
        font-size: 0.9em; /* Adjust font size for very small screens, slightly smaller than h1 */
    }
}