/* Responsive hex grid, adapted from web-tiki "responsive grid of hexagons" (CodePen / GitHub). Scoped to #hex-features only. */

.hex-feature-lead {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  color: var(--paper-muted);
}

.hex-feature-lead h1 {
  margin: 0 0 0.75rem;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
  color: var(--paper-ink);
}

.hex-feature-lead > p {
  margin: 0;
  line-height: 1.55;
}

.hex-feature-lead .mag__stream--hex {
  margin: clamp(0.85rem, 2vw, 1.15rem) auto 0;
  max-width: 34rem;
  text-align: left;
}

.hex-feature-shell {
  max-width: var(--site-content-max);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem) clamp(2.5rem, 5vw, 4rem);
  overflow: auto;
}

#hex-features {
  overflow: hidden;
  width: min(90%, 75rem);
  margin: 0 auto;
}

#hex-features.clr::after {
  content: "";
  display: block;
  clear: both;
}

#hex-features li {
  position: relative;
  list-style-type: none;
  width: 27.85714285714286%;
  padding-bottom: 32.16760145166612%;
  float: left;
  overflow: hidden;
  visibility: hidden;
  transform: rotate(-60deg) skewY(30deg);
}

#hex-features li:nth-child(3n + 2) {
  margin: 0 1%;
}

#hex-features li:nth-child(6n + 4) {
  margin-left: 0.5%;
}

#hex-features li:nth-child(6n + 4),
#hex-features li:nth-child(6n + 5),
#hex-features li:nth-child(6n + 6) {
  margin-top: -6.9285714285%;
  margin-bottom: -6.9285714285%;
  transform: translateX(50%) rotate(-60deg) skewY(30deg);
}

#hex-features li:nth-child(6n + 4):last-child,
#hex-features li:nth-child(6n + 5):last-child,
#hex-features li:nth-child(6n + 6):last-child {
  margin-bottom: 0%;
}

#hex-features li * {
  position: absolute;
  visibility: visible;
}

#hex-features li > div {
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  overflow: hidden;
  transform: skewY(-30deg) rotate(60deg);
  -webkit-backface-visibility: hidden;
}

/* picture wraps <source> + <img> for WebP; does not add a box so the img still fills the hex. */
#hex-features li picture {
  display: contents;
}

#hex-features li img {
  left: 50%;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: center;
}

#hex-features div h1,
#hex-features div p {
  left: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: clamp(0.85rem, 3.5vw, 1.35rem);
  padding-right: clamp(0.85rem, 3.5vw, 1.35rem);
  box-sizing: border-box;
  text-align: center;
  background-color: rgba(42, 69, 57, 0.88);
  font-family: var(--font-sans);
  transform: translateZ(0);
  transition:
    top 0.2s ease-out,
    bottom 0.2s ease-out,
    padding 0.2s ease-out;
}

#hex-features li h1 {
  bottom: 110%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 600;
  font-size: 1.35em;
  padding-top: 100%;
  padding-bottom: 100%;
}

#hex-features li p {
  font-size: 1rem;
  line-height: 1.35;
  padding-top: 50%;
  top: 110%;
  padding-bottom: 50%;
}

#hex-features li h1::after {
  content: "";
  display: block;
  width: 2.25rem;
  margin: 0.45rem auto 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.95);
}

#hex-features li .hex-hit {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
}

#hex-features li .hex-hit:focus-visible {
  outline: 2px solid #fdfcfa;
  outline-offset: 2px;
}

#hex-features li div:hover h1,
#hex-features li div:focus-within h1 {
  bottom: 50%;
  padding-bottom: 10%;
}

#hex-features li div:hover p,
#hex-features li div:focus-within p {
  top: 50%;
  padding-top: 10%;
}

@media (min-width: 1200px) {
  #hex-features {
    width: min(96%, 82rem);
  }

  #hex-features li {
    width: 22.75%;
    padding-bottom: 26.269%;
  }

  #hex-features li:nth-child(3n + 2) {
    margin: 0;
  }

  #hex-features li:nth-child(6n + 4),
  #hex-features li:nth-child(6n + 5),
  #hex-features li:nth-child(6n + 6) {
    margin-top: 0;
    margin-bottom: 0;
    transform: rotate(-60deg) skewY(30deg);
  }

  #hex-features li:nth-child(4n + 2),
  #hex-features li:nth-child(4n + 3),
  #hex-features li:nth-child(4n + 4) {
    margin-left: 1%;
  }

  #hex-features li:nth-child(8n + 5),
  #hex-features li:nth-child(8n + 6),
  #hex-features li:nth-child(8n + 7),
  #hex-features li:nth-child(8n + 8) {
    margin-top: -5.66%;
    margin-bottom: -5.66%;
    transform: translateX(50%) rotate(-60deg) skewY(30deg);
  }

  #hex-features li:nth-child(8n + 5):last-child,
  #hex-features li:nth-child(8n + 6):last-child,
  #hex-features li:nth-child(8n + 7):last-child,
  #hex-features li:nth-child(8n + 8):last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 900px) {
  #hex-features li h1 {
    font-size: clamp(0.92rem, 1.25vw + 0.45rem, 1.08rem);
    line-height: 1.15;
  }

  #hex-features li p {
    font-size: clamp(0.82rem, 1vw + 0.42rem, 0.94rem);
    line-height: 1.3;
  }

  #hex-features div h1,
  #hex-features div p {
    padding-left: clamp(0.5rem, 2.2vw, 0.8rem);
    padding-right: clamp(0.5rem, 2.2vw, 0.8rem);
  }
}

@media (max-width: 640px) {
  #hex-features li h1 {
    font-size: clamp(0.78rem, 1.6vw + 0.38rem, 0.92rem);
    line-height: 1.1;
  }

  #hex-features li p {
    font-size: clamp(0.7rem, 1.3vw + 0.32rem, 0.82rem);
    line-height: 1.25;
  }

  #hex-features li h1::after {
    width: 1.6rem;
    margin-top: 0.32rem;
  }
}