/* Home only. Shared tokens and components are in /styles.css. */

/* Each destination is a sign in its own colour; the colour follows you to that page. */
.module-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.module-grid > li { display: grid; }

.module {
  --sign-line: 0.2rem;
  --sign-gap: 0.32rem;
  --focus: var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: flex-start;
  min-height: 13rem;
  padding: max(1.5rem, min(4vw, 2rem));
  text-decoration: none;
  filter: drop-shadow(var(--post-shadow));
}

.module-kicker {
  padding: 0.3rem 0.65rem 0.15rem;
  font-family: var(--font-sign);
  font-weight: 800;
  font-size: var(--small);
  line-height: 1.2;
  border: 0.14rem solid currentColor;
  border-radius: 0.4rem;
}

.module-title {
  font-family: var(--font-sign);
  font-weight: 900;
  font-size: var(--step-2);
  line-height: 1.08;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.module-desc { line-height: 1.45; }

.module:active { transform: scale(0.98); }

@media (hover: hover) and (pointer: fine) {
  .module:hover { translate: 0 -0.25rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .module {
    transition: translate 180ms var(--ease-out), transform var(--press) var(--ease-out);
  }
}

.link-groups {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: start;
}

.camera-figure {
  max-width: 50rem;
  margin-bottom: var(--space-m);
}

.camera-map {
  width: 100%;
  border-radius: var(--radius-s);
}

.section .callout { margin-bottom: var(--space-m); }
.section .callout:last-child { margin-bottom: 0; }

/* Old WebKit has no flex gap; see the note at the end of /styles.css. */
@supports not (inset: 0) {
  .module > * + * { margin-top: var(--space-xs); }
}