/* This site's own fixes on top of the final revision's theme (main.css is
   regenerated from the reference copy by scripts/minify-css.mjs, so changes
   go here). Loaded after main.css. */

/* Tile titles are one long line of white text over the photo; a long word
   ("Atap Zincalume/Colorbond") ran past a phone screen and made the whole
   page scroll sideways. Break inside a word only when it can't fit. */
.category-item .title {
  overflow-wrap: anywhere;
}

/* The home background is the page's largest paint: WebP instead of the
   theme's JPEGs (same images, same breakpoint). Preloaded in the page head. */
.section-hero-slideshow {
  background-image: url(../img/home/bg.webp);
}
@media (width <= 40em) {
  .section-hero-slideshow {
    background-image: url(../img/home/bg-mobile.webp);
  }
}

/* Slideshows (slick) start after the page scripts load. Until then the
   slides stacked vertically and the page jumped when slick collapsed them
   (layout shift up to 0.3). Lay them out as slick will show them: */

/* one slide at a time (home hero, product and portfolio galleries) */
.hero-slideshow:not(.slick-initialized) > :not(:first-child),
.slideshow-portfolio:not(.slick-initialized) > :not(:first-child) {
  display: none;
}

/* the thumbnail strip in one row: 5 per row, 4 below 1024 px, 3 below 768,
   2 below 480 (main.js slidesToShow and its responsive breakpoints) */
.slideshow-nav:not(.slick-initialized) {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}
.slideshow-nav:not(.slick-initialized) > * {
  flex: 0 0 20%;
  min-width: 0;
  height: auto;
}
.slideshow-nav:not(.slick-initialized) > * img,
.slideshow-nav:not(.slick-initialized) > img {
  display: block;
}
@media (max-width: 1023.98px) {
  .slideshow-nav:not(.slick-initialized) > * { flex-basis: 25%; }
}
@media (max-width: 767.98px) {
  .slideshow-nav:not(.slick-initialized) > * { flex-basis: 33.3333%; }
}
@media (max-width: 479.98px) {
  .slideshow-nav:not(.slick-initialized) > * { flex-basis: 50%; }
}

/* main.js (setMainHeight) stretches <main> so the footer reaches the bottom
   of a short page, but only after the plugins load: the footer jumped. The
   aside and menu are fixed, so the shell can do it from the first paint. */
.app-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.main-page {
  flex: 1 0 auto;
}