/* Compact tea-type navigation. Atlas tiles are arranged in three columns/two rows. */
.tea-types {
  margin: 0;
  padding: 30px 0 29px;
  background: #fdfaf3;
  border-bottom: 1px solid #e6d9bc;
}
.tea-types-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 7px 0 0;
}
.tea-type-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  padding: 0 3px;
  color: var(--forest, #3c2536);
  text-decoration: none;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  scroll-margin-inline: 8px;
}
.tea-type-photo {
  display: block;
  flex: 0 0 auto;
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-color: #f6efe4;
  background-image: url("assets/tea-types-atlas-v1.png");
  background-repeat: no-repeat;
  background-size: 300% 200%;
  background-position: var(--tea-x, 0%) var(--tea-y, 0%);
  transition: transform .18s ease;
}
.tea-type-photo::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid var(--tea-ring, #b49662);
  border-radius: 50%;
  opacity: .78;
  pointer-events: none;
  transition: opacity .18s ease;
}
.tea-type-label {
  display: block;
  margin-top: 17px;
  font-family: var(--serif, Georgia, serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .015em;
}
.tea-type-link:hover .tea-type-photo { transform: translateY(-3px); }
.tea-type-link:hover .tea-type-photo::after { opacity: 1; }
.tea-type-link:hover .tea-type-label { color: var(--wine, #63243f); }
.tea-type-link:focus-visible {
  outline: 2px solid var(--wine, #63243f);
  outline-offset: 7px;
}

@media (min-width: 701px) and (max-width: 900px) {
  .tea-types-list { gap: 8px; }
  .tea-type-photo { width: 84px; height: 84px; }
  .tea-type-label { font-size: 18px; letter-spacing: 0; }
}

@media (max-width: 700px) {
  .tea-types { padding: 27px 0 25px; }
  .tea-types-list {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    width: calc(100% + 10px);
    max-width: none;
    margin: 0 -5px -10px;
    padding: 7px 5px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c9b8a2 transparent;
  }
  .tea-type-link { flex: 0 0 100px; padding-inline: 3px; scroll-snap-align: start; }
  .tea-type-photo { width: 84px; height: 84px; }
  .tea-type-label { margin-top: 16px; font-size: 18px; letter-spacing: 0; }
  .tea-type-link:focus-visible { outline-offset: 3px; }
  .tea-types-list::-webkit-scrollbar { height: 3px; }
  .tea-types-list::-webkit-scrollbar-thumb { background: #c9b8a2; border-radius: 2px; }
  .tea-types-list::-webkit-scrollbar-track { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .tea-type-photo, .tea-type-photo::after { transition: none; }
  .tea-type-link:hover .tea-type-photo { transform: none; }
}