/* 
    Image hover scaling grid (CurryGrid)
    Darryl's pure CSS GRIDBOX version 
    9 block: 3x3
*/

.ddw-grid-9 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  --gap: 1rem;
  gap: var(--gap);
  width: 600px;
  height: 600px;
  position: relative;
  overflow: hidden;
}

.ddw-grid-9-item {
  position: relative;
  width: 100%;
  height: 100%;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  background: black; /* ok for dark background to not see flash of empty as it shrinks */
  border-radius: 1rem;
  max-width: unset;
}

.ddw-grid-9-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

#item-1:hover {
  width: calc(200% + var(--gap));
  height: calc(200% + var(--gap));
  z-index: 2;
}
.ddw-grid-9:has(#item-1:hover) {
  #item-2 {
    margin-left: 100%;
    width: 0;
  }
  #item-4 {
    margin-top: 100%;
    height: 0;
  }
  #item-5 {
    margin-left: 100%;
    margin-top: 100%;
    width: 0;
    height: 0;
  }
} 

#item-2:hover {
  margin-left: -50%;
  width: 200%;
  height: calc(200% + var(--gap));
}
.ddw-grid-9:has(#item-2:hover) {
  #item-1,
  #item-4 {
    width: 50%;
  }
  #item-3,
  #item-6 {
    width: 50%;
    margin-left: 50%;
  }
  #item-5 {
    height: 0;
    margin-top: 100%;
  }
}

#item-3:hover {
  margin-left: calc(-100% - var(--gap));
  width: calc(200% + var(--gap));
  height: calc(200% + var(--gap));
}
.ddw-grid-9:has(#item-3:hover) {
  #item-2 {
    width: 0;
  }
  #item-6 {
    margin-top: 100%;
    height: 0;
  }
  #item-5 {
    margin-top: 100%;
    width: 0;
    height: 0;
  }
}

#item-4:hover {
  margin-top: -50%;
  width: calc(200% + var(--gap));
  height: 200%;
}
.ddw-grid-9:has(#item-4:hover) {
  #item-1,
  #item-2 {
    height: 50%;
  }
  #item-7,
  #item-8 {
    height: 50%;
    margin-top: 50%;
  }
  #item-5 {
    width:0;
    margin-left: 100%;
  }
}

#item-5:hover {
  margin-left: -50%;
  width: 200%;
  height: calc(200% + var(--gap));
}
.ddw-grid-9:has(#item-5:hover) {
  #item-4,
  #item-7 {
    width: 50%;
  }
  #item-6,
  #item-9 {
    width: 50%;
    margin-left: 50%;
  }
  #item-8 {
    height: 0;
    margin-top: 100%;
  }
}


#item-6:hover {
  width: calc(200% + var(--gap));
  height: 200%;
  margin-top: -50%;
  margin-left: calc(-100% - var(--gap));
}
.ddw-grid-9:has(#item-6:hover) {
  #item-2,
  #item-3 {
    height: 50%;
  }
  #item-8,
  #item-9 {
    margin-top: 50%;
    height: 50%;
  }
  #item-5 {
    width: 0;
  }
}

#item-7:hover {
  margin-top: calc(-100% - var(--gap));
  width: calc(200% + var(--gap));
  height: calc(200% + var(--gap));
}
.ddw-grid-9:has(#item-7:hover) {
  #item-4 {
    height: 0;
  }
  #item-5 {
    margin-left: 100%;
    width: 0;
    height: 0;
  }
  #item-8 {
    margin-left: 100%;
    width: 0;
  }
}

#item-8:hover {
  margin-left: -50%;
  margin-top: calc(-100% - var(--gap));
  width: 200%;
  height: calc(200% + var(--gap));
}
.ddw-grid-9:has(#item-8:hover) {
  #item-4,
  #item-7 {
    width: 50%;
  }
  #item-5 {
    height: 0;
  }
  #item-6,
  #item-9 {
    margin-left: 50%;
    width: 50%;
  }
}

#item-9:hover {
  margin-left: calc(-100% - var(--gap));
  margin-top: calc(-100% - var(--gap));
  width: calc(200% + var(--gap));
  height: calc(200% + var(--gap));
}
.ddw-grid-9:has(#item-9:hover) {
  #item-5 {
    width: 0;
    height: 0;
  }
  #item-6 {
    height: 0;
  }
  #item-8 {
    width: 0;
  }
}




/* 
    Image hover scaling, multi-item flexible grid 
    Darryl's Javascript version of GRIDBLOCK 
*/

.curry-grid {
  --cols: 3;
  --rows: 6;
  --gap: 1rem;
  --cell-height: 1fr; /* gets a px size set by js but must begin as 1fr */
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), var(--cell-height)); /* --cell-height is required in order to maintain the structure of the grid upon cell resizing/moving */
  gap: var(--gap);
  width: calc(190px * var(--cols));
  height: calc(190px * var(--rows));
  position: relative;
  overflow: hidden;
}

.curry-grid>div {
  position: relative;
  width: 100%;
  height: 100%;
  transition: margin-left 0.4s, margin-top .4s, width .4s, height .4s;
  will-change: margin-left, margin-top, width, height;
  overflow: hidden;
  border-radius: 1rem;
  max-width: unset;
}

.curry-grid>div>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.curry-grid>.grow-full {
  width: calc(200% + var(--gap));
  height: calc(calc(2 * var(--cell-height)) + var(--gap));
}

.curry-grid>.grow-full.centered {
  margin-top: calc(-0.5 * var(--cell-height));
}

.curry-grid>.grow-full.no-horizontal-gap {
  width: 200%;
}

.curry-grid>.grow-full.no-vertical-gap {
  height: calc(2 * var(--cell-height));
}

.curry-grid>.left-50 {
  margin-left: -50%;
}

.curry-grid>.left-100 {
  margin-left: calc(-100% - var(--gap));
}

.curry-grid>.up-50 {
  --half-height: calc(var(--cell-height) * .5);
  margin-top: calc(-1 * var(--half-height));
}

.curry-grid>.up-100 {
  margin-top: calc(-1 * calc(var(--cell-height) + var(--gap)));
}

.curry-grid>.grow-left {
  width: calc(200% + var(--gap));
  height: calc(calc(2 * var(--cell-height)) + var(--gap));
}

.curry-grid>.push-up {
  height: 0;
}

.curry-grid>.push-half-up {
  height: calc(var(--cell-height) * .5);
}

.curry-grid>.push-right {
  margin-left: 100%;
  width: 0;
}

.curry-grid>.push-half-right {
  margin-left: 50%;
  width: 50%;
}

.curry-grid>.push-left {
  width: 0;
}

.curry-grid>.push-half-left {
  width: 50%;
}

.curry-grid>.push-down {
  height: 0;
  margin-top: var(--cell-height);
}

.curry-grid>.push-half-down {
  --half-height: calc(var(--cell-height) * .5);
  height: var(--half-height);
  margin-top: var(--half-height);
}

.curry-grid>.shrink-down-right {
  margin-left: 100%;
  margin-top: var(--cell-height);
  width: 0;
  height: 0;
}

.curry-grid>.shrink-down-left {
  margin-top: var(--cell-height);
  width: 0;
  height: 0;
}

.curry-grid>.shrink-up-left {
  width: 0;
  height: 0;
}

.curry-grid>.shrink-up-right {
  width: 0;
  height: 0;
  margin-left: 100%;
}