/* Local fixes to keep overrides separate from theme bundle */
/* The inner wrapper gets a padding-top so the absolute stacked images
   have a definite height to fill (avoids collapse). You can tune the
   padding-top to change thumbnail aspect ratio. */
/* Make the index images render as a centered overlay so hover previews sit above
   the index links without affecting document flow. Use fixed positioning and
   an aspect-box inner wrapper to control size. This intentionally overrides the
   theme's large full-height fixed layout so the preview is central and contained. */
/* OVERRIDE ALL THEME RULES - MAXIMUM SPECIFICITY */
.project-index-images-wrapper,
footer .project-index-images-wrapper,
.footer .project-index-images-wrapper,
body footer .project-index-images-wrapper,
html body footer .project-index-images-wrapper,
html body .footer .project-index-images-wrapper,
div.project-index-images-wrapper {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  -webkit-transform: translate(-50%, -50%) !important;
  -ms-transform: translate(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important;
  width: 80% !important; /* MAXIMUM desktop 3-column scale - ultra brute force */
  height: auto !important; /* height controlled by inner padding-top */
  pointer-events: none !important;
  z-index: 7 !important;
}

/* Medium screens (tablets in 3-column) - MAXIMUM specificity */
@media (max-width: 991.98px) and (min-width: 768px) {
  .project-index-images-wrapper,
  footer .project-index-images-wrapper,
  .footer .project-index-images-wrapper,
  body footer .project-index-images-wrapper,
  html body footer .project-index-images-wrapper,
  html body .footer .project-index-images-wrapper,
  div.project-index-images-wrapper {
    width: 80% !important; /* MAXIMUM desktop standard - ultra brute force */
  }
}

/* Mobile screens (1-column view) - MAXIMUM scale with highest specificity */
@media (max-width: 767.98px) {
  .project-index-images-wrapper,
  footer .project-index-images-wrapper,
  .footer .project-index-images-wrapper,
  body footer .project-index-images-wrapper,
  html body footer .project-index-images-wrapper,
  html body .footer .project-index-images-wrapper,
  div.project-index-images-wrapper {
    width: 98% !important; /* MAXIMUM mobile 1-column scale - ultra brute force */
  }
}

/* Very small mobile screens - MAXIMUM size with highest specificity */
@media (max-width: 575.98px) {
  .project-index-images-wrapper,
  footer .project-index-images-wrapper,
  .footer .project-index-images-wrapper,
  body footer .project-index-images-wrapper,
  html body footer .project-index-images-wrapper,
  html body .footer .project-index-images-wrapper,
  div.project-index-images-wrapper {
    width: 99% !important; /* MAXIMUM size for smallest screens - ultra brute force */
  }
}

/* Medium screens (tablets in 3-column) - MAXIMUM specificity */
@media (min-width: 576px) and (max-width: 991px) {
    .project-index-images-wrapper {
        width: 98% !important;
    }
}

/* Mobile screens (1-column view) - MAXIMUM scale with highest specificity */
@media (max-width: 767.98px) {
  footer .project-index-images-wrapper,
  .footer .project-index-images-wrapper,
  body footer .project-index-images-wrapper,
  html body footer .project-index-images-wrapper {
    width: 98% !important; /* MAXIMUM mobile 1-column scale - ultra brute force */
  }
}

/* Very small mobile screens - MAXIMUM size with highest specificity */
@media (max-width: 575px) {
    .project-index-images-wrapper {
        width: 99% !important;
    }
}

footer .project-index-images-inner { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 default */ }

/* Theme sets .project-index-images-inner { height:100% } which breaks
  our padding-top aspect-box approach. Force auto height so padding-top
  establishes the aspect ratio correctly. */
footer .project-index-images-inner { height: auto !important; }

footer .project-index-images-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Ensure the images inside the overlay fill the area and are centered */
footer .project-index-images-item img { 
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
}

/* Make images fill the item and remain responsive. Use object-fit to
   preserve cropping behavior. Remove any letterbox background so the
   overlay is transparent. */
footer .project-index-images-item img {
  width: 100%;
  height: 100%;
  display: block;
  /* show the full image within the thumbnail area rather than cropping */
  object-fit: contain;
  background-color: transparent !important; /* ensure transparency */
}

/* Override theme rules which absolutely position and translate images
   and apply complex max-width/max-height calculations. Those calculations
   can produce incorrect sizes inside our aspect-box; undo them here. */
footer .project-index-images-wrapper .project-index-images-item img {
  /* Ensure the image is absolutely positioned within the aspect-box so
     it overlays correctly. Keep transforms and max sizing overrides. */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* If you supply a separate rollover image (optional), it can sit
   above the base image by using the .rollover class. We don't hide
   the base image on hover here — the JS already toggles opacity/z-index. */
footer .project-index-images-item img.rollover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Hidden by default; JS will add .index-hovered-project to show the active image */
footer .project-index-images-item { opacity: 0; transition: opacity 160ms ease-in-out; }
footer .project-index-images-item.index-hovered-project { opacity: 1; }

/* small transition helpers (let CSS handle opacity transitions) */
footer .project-index-images-item { transition: opacity 120ms ease-in-out; }

/* Replace inline style="position: relative; z-index: 9" that was on
   the footer project index UL in some pages */
footer .project-index-images-wrapper + ul.nav.flex-column,
footer .project-index-images-wrapper ~ ul.nav.flex-column {
  position: relative;
  z-index: 9;
}

/* page wrapper used for some layout and overflow handling */
.wrapper {
  position: relative;
  overflow: hidden;
}

/* Remove unexpected dark/black gutters from footer areas */
.footer,
.footer .container-fluid,
.container-fluid.central {
  background-color: transparent !important;
}

/* Some pages include an empty <footer class="footer text-left"></footer> that
   can collapse to a thin dark bar due to theme defaults; hide empty footers */
.footer:empty { display: none !important; }

/* If an empty footer is present and followed by a container with a row that uses .border-top
   (for example the small 'Share' block in some project pages), remove that border so the
   thin dark gutter does not appear. This is narrowly targeted so other border-top usages
   are not affected. */
footer.footer:empty + .container-fluid.central .row.border-top,
footer:empty + .container-fluid.central .row.border-top {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Responsive video embed — keeps aspect ratio and scales with container width */
.video-embed {
  position: relative;
  width: 100%;
  /* default 16:9 ratio; individual videos can override with data-aspect attribute if needed */
  padding-top: 56.25%;
  overflow: hidden;
}
.video-embed video,
.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* use contain so full frame is visible; change to cover if cropping desired */
}

/* Limit video embed height to a percentage of the viewport so it can't grow too tall on large screens
   and so mobile viewports keep videos within the visible area. */
.video-embed {
  max-height: 80vh; /* never exceed 80% of viewport height */
}

/* On small screens give videos more vertical space (taller aspect) so they remain readable */
/* Mobile 1-column view ONLY - disable hover effects */
@media (max-width: 575.98px) {
  .video-embed { padding-top: 75%; max-height: 65vh; }
  .video-embed video, .video-embed iframe { object-fit: cover; }
  
  /* Disable hover effects ONLY in true mobile 1-column view */
  main .shuffle-me {
    pointer-events: none !important;
  }
  
  main .shuffle-me .featuredImageRollover {
    display: none !important;
    opacity: 0 !important;
  }
  
  main .shuffle-me .img-fluid.first {
    display: block !important;
    opacity: 1 !important;
  }
  
  /* Ensure only the main link anchor is clickable in mobile */
  main .shuffle-me a.info {
    pointer-events: auto !important;
  }
}

/* Medium and larger screens - ensure hover effects work */
@media (min-width: 576px) {
  .video-embed { padding-top: 56.25%; }
  .video-embed video, .video-embed iframe { object-fit: contain; }
  
  /* Ensure hover effects are enabled for medium+ screens */
  main .shuffle-me {
    pointer-events: auto;
  }
}

/* Ensure videos will scale down gracefully if their container becomes constrained */
.video-embed, .video-embed * { box-sizing: border-box; }
/* Desktop-only: Constrain images inside .pack-shot to 80% width with 10% margins */
@media (min-width: 1200px) {
  .pack-shot img {
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
}