/* modern.css — additive layer over the original global.css.
   Carries layout for class-based containers, the new gallery, magnetism
   slideshow, responsive rules. Desktop look mirrors the 2009 site. */

/* ---- case grid (mirrors #casecontainer geometry, now class-based) ---- */
.casecontainer {
  overflow: hidden;
  position: relative;
  z-index: 10;
  width: 1000px;
  height: 300px;
}
.casecontainer > div {
  margin-top: 10pt;
  padding: 14px 0;
  background: #fff;
  width: 1000px;
  position: absolute;
  top: 0;
}
.casecontainer > div.case1 { left: 0; }
.casecontainer > div.case2 { left: 205px; }
.casecontainer > div.case3 { left: 410px; }
.casecontainer > div.case4 { left: 615px; }
.casecontainer > div.case5 { left: 820px; }
.casecontainer .casebox,
.casecontainer .indexbox {
  width: 184px;
  height: 300px;
  position: absolute;
  top: 14px;
  left: 0;
}
.casecontainer .caseimage { overflow: hidden; width: 184px; height: 186px; }
.casecontainer .indeximage { overflow: hidden; width: 185px; height: 220px; }
.casecontainer .caselink {
  background: #000;
  color: #fff;
  width: 184px;
  height: 40px;
  z-index: 11;
  position: absolute;
  top: 187px;
}
.casecontainer .caseheader {
  margin: 5px;
  font-weight: normal;
  font-size: 10px;
  line-height: 1.5em;
}

/* ---- products grid (mirrors #prodcontainer) ---- */
.prodcontainer {
  overflow: hidden;
  position: relative;
  z-index: 10;
  width: 1100px;
  height: 300px;
  left: -15px;
  margin-top: 30px;
}
.prodcontainer .prod1,
.prodcontainer .prod2,
.prodcontainer .prod3 {
  height: 275px;
  margin: 5px 0 5px 5px;
  width: 1000px;
  position: absolute;
  top: 0;
}
.prodcontainer .prod1 { left: 0; }
.prodcontainer .prod2 { left: 338px; }
.prodcontainer .prod3 { left: 675px; }
.prodcontainer .prodbox {
  width: 350px;
  height: 275px;
  position: absolute;
  top: 0;
  left: -8px;
  background: url(/img/product/prod_back.jpg);
}
.prodcontainer .prodimage,
.prodcontainer .prodimage_over {
  overflow: hidden;
  width: 328px;
  height: 220px;
  padding-left: 9px;
  margin-right: 10px;
}
.prodcontainer .prodlink {
  background: #000;
  color: #fff;
  width: 328px;
  height: 65px;
  z-index: 11;
  position: absolute;
  top: 220px;
  left: 7pt;
  opacity: 0.85;
}
.prodcontainer .prodheader {
  margin: 5px;
  font-weight: normal;
  font-size: 12px;
  line-height: 1.5em;
}
.prodcontainer .prodtext {
  margin: 0 10px 0 5px;
  font-weight: normal;
  font-size: 10px;
  line-height: 1.5em;
}

/* ---- case gallery ---- */
ul.gallerylist button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
  width: 100%;
  height: 100%;
}
ul.gallerylist button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  transition: opacity 0.25s;
}
ul.gallerylist li.active button img,
ul.gallerylist button:hover img,
ul.gallerylist button:focus-visible img {
  opacity: 1;
}
#main_image img {
  cursor: pointer;
  transition: opacity 0.25s;
  opacity: 1;
}

/* ---- magnetism slideshow ---- */
#slides img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.5s;
  z-index: 1;
}
#slides img.on {
  opacity: 1;
  z-index: 2;
}

/* ---- responsive layer (phones/tablets) ---- */
@media (max-width: 1040px) {
  body { background-image: none; }
  #gheader,
  #main,
  #breadcrumb,
  #footer,
  #links,
  .casecontainer,
  .prodcontainer,
  .imglist,
  #main_image,
  #main_image img,
  #intro img,
  .gallery_show {
    max-width: 100%;
  }
  #intro img { height: auto; }
  .casecontainer,
  .prodcontainer { height: auto; }
  .casecontainer > div,
  .prodcontainer > div,
  .prodcontainer .prod1,
  .prodcontainer .prod2,
  .prodcontainer .prod3 {
    position: static;
    width: auto;
    margin: 0;
    padding: 0;
  }
  .casecontainer,
  .prodcontainer { display: flex; flex-wrap: wrap; gap: 16px; padding: 0 12px; }
  .casecontainer .casebox,
  .casecontainer .indexbox {
    position: static;
    width: 184px;
    height: auto;
    padding-bottom: 10px;
  }
  .casecontainer .caselink { position: static; }
  .prodcontainer .prodbox { position: static; left: 0; }
  .prodcontainer .prodlink { position: static; margin-top: 10px; }
  .gallery_show { width: 100% !important; }
  .gallery_show li { float: none; display: inline-block; }
  #main_image img { width: 100%; height: auto; }
  #content .subcolumn1-2,
  #content .subcolumn2-2,
  #content .subcolumn3-1,
  #content .subcolumn3-2 { float: none; width: auto; }
  #gheader #gnav { position: static; }
  #gheader #gnav li a { float: none; display: block; }
}

/* ---- a11y ---- */
:focus-visible {
  outline: 2px solid #af2f12;
  outline-offset: 2px;
}