/*
 * The first screen (decision 064): four cards side by side, two ways on, above the page as it
 * was. Everything here is scoped to `.land`, so the page below keeps its own look. Its text waits
 * on no download: the page's fonts swap in when they arrive.
 */
.land {
  --ink: #10282c;
  --muted: #566670;
  --page: #ffffff;
  --card: #ffffff;
  --line: #e1e8eb;
  --sand: #f1f5f7;
  --food: #b8501f;
  --go: #2f6db5;
  --know: #4b3fa0;
  --speak: #8a2d68;
  --wa: #1c7f4f;
  --alarm: #b3261e;
  --hue: var(--food);
  /* Its own white from edge to edge, though the column is narrow: the page below is a cool grey. */
  background: var(--page);
  box-shadow: 0 0 0 100vmax var(--page);
  clip-path: inset(0 -100vmax);
  color: var(--ink);
  line-height: 1.3;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.land-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 4px;
}
.land-top img {
  border-radius: 8px;
}
.land-wordmark {
  font:
    700 20px 'Quicksand Wordmark',
    system-ui,
    sans-serif;
  color: var(--ink);
}
/* The app's own front door, for a reader who already knows what Saathi is. */
.land-app {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--onTeal);
  background: var(--teal);
  border-radius: 999px;
  padding: 7px 14px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}
.land-lang {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--sand);
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  min-height: 36px;
}

.land-lead {
  padding: 2px 16px 8px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--muted);
}
.land-lead b {
  color: var(--ink);
}

.land-tabs {
  display: flex;
  gap: 6px;
  padding: 0 16px 8px;
}
.land-tabs button {
  flex: 1;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 0;
  border: 0;
  border-radius: 999px;
  background: var(--sand);
  color: var(--muted);
  min-height: 40px;
}
.land-tabs button[aria-current='true'] {
  background: var(--hue);
  color: #fff;
}

/* A card and a clear slice of the next: the slice is what says "swipe". The margin keeps a swipe
   off the screen's edge, where the phone would read it as "back". */
.land-row {
  flex: 1 1 auto;
  min-height: 300px;
  /* A tall phone gets the space under the buttons, not inside the cards. */
  max-height: 400px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  padding: 0 16px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.land-row::-webkit-scrollbar {
  display: none;
}

.land-card {
  margin: 0;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  flex: 0 0 82%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}
.land-card:last-child {
  margin-right: 16px;
}
.land-card[data-hue='food'] .land-head {
  background: var(--food);
}
.land-card[data-hue='go'] .land-head {
  background: var(--go);
}
.land-card[data-hue='know'] .land-head {
  background: var(--know);
}
.land-card[data-hue='speak'] .land-head {
  background: var(--speak);
}

.land-head {
  color: #fff;
  padding: 14px 52px 12px 16px;
  position: relative;
}

/* The arrow says the whole card opens — the one sign a phone, which has no hover, can show. */
.land-go {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.18s ease;
}
.land-card[data-hue='food'] .land-go {
  color: var(--food);
}
.land-card[data-hue='go'] .land-go {
  color: var(--go);
}
.land-card[data-hue='know'] .land-go {
  color: var(--know);
}
.land-card[data-hue='speak'] .land-go {
  color: var(--speak);
}

/* The card a finger is on presses in; the card in view on the phone's row sits up. */
.land-card:active {
  transform: scale(0.98);
}
@media (max-width: 639px) {
  .land-card.is-shown {
    box-shadow: 0 8px 22px rgb(16 40 44 / 0.12);
  }
}

/* A mouse over a card lifts it, edges it in its own colour and nudges its arrow. */
@media (hover: hover) and (pointer: fine) {
  .land-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgb(16 40 44 / 0.16);
  }
  .land-card[data-hue='food']:hover {
    border-color: var(--food);
  }
  .land-card[data-hue='go']:hover {
    border-color: var(--go);
  }
  .land-card[data-hue='know']:hover {
    border-color: var(--know);
  }
  .land-card[data-hue='speak']:hover {
    border-color: var(--speak);
  }
  .land-card:hover .land-go {
    transform: translateX(3px);
  }
  .land-card:hover .land-card-open {
    filter: brightness(1.12);
  }
}
.land-head h2 {
  font-size: 26px;
  line-height: 1.1;
  font-weight: 700;
}
.land-head h2 small {
  font-size: 14px;
  font-weight: 600;
  margin-left: 4px;
}
.land-head h2 em {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  background: rgb(255 255 255 / 0.2);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}
.land-head p {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  margin-top: 6px;
}

.land-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 14px;
}
.land-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.land-chips > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
}
.land-chips > span.on {
  background: var(--food);
  border-color: var(--food);
  color: #fff;
}
.land-trip {
  font-size: 15.5px;
}
.land-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
.land-item > b {
  font-size: 15.5px;
}
.land-item .price {
  position: absolute;
  right: 10px;
  top: 8px;
  font-size: 15px;
}
.land-item small {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--muted);
}
.land-board {
  font-size: 26px;
  text-align: center;
  color: #fff;
  background: #1d3b2a;
  border: 3px solid #e9e9e9;
  border-radius: 10px;
  padding: 6px;
}
.land-foot {
  margin-top: auto;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--muted);
}
.land-alarm {
  color: var(--alarm);
}

.land-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 7px 0;
}
.land-dots i {
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: var(--line);
  transition: width 0.2s;
}
.land-dots i.on {
  width: 18px;
  background: var(--hue);
}

.land-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 16px 6px;
}
.land-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}
.land-open {
  background: var(--hue);
  color: #fff;
}
.land-wa {
  background: #fff;
  color: var(--wa);
  border: 2px solid var(--wa);
}
.land-price {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 4px 16px 16px;
}

/* A card's own button: on a wide screen, where all four are in view at once, each card opens
   itself; on a phone the one button under the row does, so this stays hidden there. */
.land-card-open {
  display: none;
}
.land-card[data-hue='food'] .land-card-open {
  background: var(--food);
}
.land-card[data-hue='go'] .land-card-open {
  background: var(--go);
}
.land-card[data-hue='know'] .land-card-open {
  background: var(--know);
}
.land-card[data-hue='speak'] .land-card-open {
  background: var(--speak);
}

/* A mouse cannot swipe: where the row still scrolls and the pointer is not a finger, the
   scrollbar shows. */
@media (pointer: fine) {
  .land-row {
    scrollbar-width: thin;
  }
  .land-row::-webkit-scrollbar {
    display: block;
    height: 8px;
  }
  .land-row::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 4px;
  }
}

/* A tablet or a half-width window: two by two, nothing to swipe. */
@media (min-width: 640px) {
  .land {
    max-width: 760px;
  }
  .land-tabs,
  .land-dots,
  #open {
    display: none;
  }
  .land-row {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    overflow: visible;
    max-height: none;
    min-height: 0;
    padding-bottom: 16px;
  }
  .land-card,
  .land-card:last-child {
    margin-right: 0;
  }
  .land-foot {
    margin-top: 4px;
  }
  .land-card-open {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: auto;
    border-radius: 12px;
    color: #fff;
    font-size: 16.5px;
    font-weight: 700;
    text-decoration: none;
  }
  .land-actions {
    align-items: center;
  }
  .land-wa {
    width: 100%;
    max-width: 360px;
  }
}

/* A laptop: all four side by side. */
@media (min-width: 1000px) {
  .land {
    max-width: 1180px;
  }
  .land-top,
  .land-lead {
    padding-left: 24px;
    padding-right: 24px;
  }
  .land-lead {
    font-size: 17px;
  }
  .land-row {
    grid-template-columns: repeat(4, 1fr);
    padding: 0 24px 20px;
  }
}

/* The page's floating WhatsApp, while the first screen with its own button is in view. */
.wa-float.land-float-hidden {
  opacity: 0;
  pointer-events: none;
}

/* A short screen — Facebook's browser with its bars on a small phone — keeps the cards and both
   buttons in view, and gives up the cards' footnotes first. */
@media (max-height: 700px) and (max-width: 639px) {
  .land-lead {
    padding-bottom: 6px;
    font-size: 14px;
  }
  .land-tabs {
    padding-bottom: 6px;
  }
  .land-head {
    padding: 10px 14px 8px;
  }
  .land-head h2 {
    font-size: 22px;
  }
  .land-head p {
    font-size: 14px;
    margin-top: 4px;
  }
  .land-body {
    gap: 6px;
    padding: 8px 12px 10px;
  }
  .land-foot {
    display: none;
  }
  .land-row {
    min-height: 230px;
    max-height: 340px;
  }
  .land-top {
    padding-top: 8px;
  }
  .land-price {
    padding-bottom: 2px;
  }
  .land-dots {
    padding: 6px 0;
  }
  .land-actions a {
    min-height: 46px;
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .land-dots i,
  .land-card,
  .land-go {
    transition: none;
  }
  .land-card:hover,
  .land-card:active,
  .land-card:hover .land-go {
    transform: none;
  }
}