/* Mulberry Farm — contact page */

/* ---------- ways to reach us ---------- */

.ways {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  margin-top: 2.4rem
}

.way {
  display: block;
  padding: 1.6rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease)
}

.way:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: rgba(110, 35, 64, .3);
  color: inherit
}

.way__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(110, 35, 64, .08);
  color: var(--mulberry);
  margin-bottom: 1.1rem
}

.way__ico svg {
  width: 21px;
  height: 21px;
  fill: currentColor
}

.way--wa .way__ico {
  background: rgba(201, 122, 84, .14);
  color: var(--lawn-2)
}

.way--call .way__ico {
  background: rgba(231, 149, 108, .16);
  color: var(--lawn-2)
}

.way h3 {
  font-size: 1.18rem;
  margin: 0 0 .3rem
}

.way__val {
  font-weight: 700;
  font-size: .96rem;
  color: var(--mulberry);
  margin: 0 0 .6rem;
  word-break: break-word
}

.way__note {
  font-size: .88rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
  max-width: none
}

/* ---------- directions ---------- */

.contact__subhead {
  margin-top: 2.2rem
}

/* ---------- map ---------- */

.contact__map {
  margin-top: 2rem;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  line-height: 0
}

.contact__map iframe {
  display: block;
  width: 100%;
  height: clamp(320px, 46vw, 460px);
  border: 0;
  filter: saturate(.92)
}

/* ---------- responsive ---------- */

@media (max-width:1000px) {
  .ways {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:560px) {
  .ways {
    grid-template-columns: 1fr;
    gap: .9rem
  }

  .way {
    padding: 1.3rem 1.2rem
  }
}

@media (prefers-reduced-motion:reduce) {
  .way {
    transition: none
  }

  .way:hover {
    transform: none
  }
}