/* The home page (Phase 1, step 6): stalls, food filters, Near me and the map. */

.home { min-height: 100vh; }

.home__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4) 0;
}

.home__nav {
  display: flex;
  gap: var(--space-4);
  font-weight: 800;
}

.home__nav a { padding-block: .6rem; } /* a bigger tap area */

.home__hero { padding-block: var(--space-5) var(--space-3); }
.home__hero h1 { margin: 0 0 var(--space-2); }
.home__lead { max-width: 34rem; margin: 0 0 var(--space-4); font-size: var(--fs-lg); font-weight: 700; }
.home__test { max-width: 34rem; }

/* Only for keyboards and screen readers: jump past the map. */
.home__skip:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.home__h2 { margin: 0 0 var(--space-3); font-size: var(--fs-xl); }

/* The map */
.home__map-wrap { margin-block: var(--space-2) var(--space-5); }

.home__map {
  position: relative;
  z-index: 0; /* keeps the map's layers under the page */
  height: min(60vh, 420px);
  min-height: 280px;
  overflow: hidden;
  background: var(--surface-sunk);
  border: 2px solid var(--outline);
  border-radius: var(--radius-lg);
}

.home__map-waiting {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-4);
  color: var(--text-muted);
  font-weight: 700;
  text-align: center;
}

.home__map-waiting p { margin: 0; }

.home__map-note { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 700; }

/* Leaflet's own pieces, in our fonts and colours. */
.home__map .leaflet-container,
.home__map.leaflet-container { font: 700 var(--fs-xs) / 1.3 var(--font-body); background: var(--surface-sunk); }
.home__map .leaflet-control-attribution { padding: 2px 6px; color: #222; background: rgb(255 255 255 / .85); }
.home__map .leaflet-control-attribution a { color: #0a4f7a; }
.map-credit__logo { display: inline; width: 20px; height: 20px; vertical-align: middle; }
.home__map .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; font-size: 22px; }

/* An area's bubble: "Tampines · 3" */
.map-bubble-icon { background: none; border: 0; }

.map-bubble {
  display: inline-block;
  transform: translate(-50%, -50%);
  padding: .35rem .75rem;
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--outline);
  border-radius: var(--radius-pill);
  box-shadow: 0 3px 0 var(--outline);
  font: 700 var(--fs-sm) / 1.1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
}

.map-bubble strong { font-weight: 800; }
.map-bubble-icon:focus-visible { outline: none; }
.map-bubble-icon:focus-visible .map-bubble { outline: 3px solid var(--focus); outline-offset: 3px; }

/* A cook on their pin (busy areas only). */
.map-pin-icon { background: none; border: 0; }

.map-pin {
  display: block;
  width: 48px;
  height: 60px;
  overflow: hidden;
  background: var(--sky-100);
  border: 2px solid var(--outline);
  border-radius: 24px 24px 24px 4px;
  box-shadow: 0 3px 0 var(--outline);
  cursor: pointer;
}

.map-pin img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.map-pin-icon:focus-visible { outline: none; }
.map-pin-icon:focus-visible .map-pin { outline: 3px solid var(--focus); outline-offset: 3px; }

.map-popup { display: grid; gap: .2rem; font-size: var(--fs-sm); }
.map-popup strong { font: 600 var(--fs-lg) / 1.15 var(--font-display); }
.map-popup a { padding-block: .4rem; font-weight: 800; }
.home__map .leaflet-popup-content-wrapper,
.home__map .leaflet-popup-tip { color: var(--text); background: var(--surface); }

/* Filters and Near me */
.home__finder { margin-bottom: var(--space-5); }

.home__cuisines { min-width: 0; margin: 0 0 var(--space-2); padding: 0; border: 0; }

.home__switches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.home__finder .field__hint { display: block; margin: var(--space-1) 0 var(--space-4); }

.home__near { display: grid; justify-items: start; gap: var(--space-3); }

.home__near-panel {
  display: grid;
  gap: var(--space-4);
  width: min(100%, 26rem);
  padding: var(--space-4);
  background: var(--surface);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-lg);
}

.home__near-panel[hidden] { display: none; }
.home__postal { display: grid; gap: var(--space-2); }
.home__postal .field__hint { margin: 0; }
.home__postal-row { display: flex; gap: var(--space-2); align-items: flex-start; }
.home__near .form-status:empty { display: none; }
.home__near .form-status { width: min(100%, 34rem); }

/* A button that looks like a link. */
.link-button {
  min-height: var(--tap);
  padding: 0 .2rem;
  color: var(--link);
  background: none;
  border: 0;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

/* The list */
.home__list { padding-bottom: var(--space-8); scroll-margin-top: var(--space-4); }
.home__list:focus { outline: none; }
.home__count { margin: 0 0 var(--space-3); color: var(--text-muted); font-weight: 800; }
.home__count:empty { display: none; }

.home__area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  margin: 0 0 var(--space-3);
  font-weight: 800;
}

.home__area[hidden] { display: none; }
.home__area svg { width: 1.2em; height: 1.2em; }

.home__stalls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-card { position: relative; }
.home-card:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }

/* The whole photo, never cut off (like the stall page). */
.home-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: var(--surface-sunk);
}

.home-card__photo--none { background: var(--sky-scene); }

.home-card__link { color: inherit; text-decoration: none; }
.home-card__link:focus-visible { outline: none; }
/* The whole card is one big tap area. */
.home-card__link::after { content: ""; position: absolute; inset: 0; }

.home-card .stall-card__area { display: flex; align-items: center; gap: .3rem; margin: var(--space-1) 0 var(--space-2); }
.home-card .stall-card__area svg { width: 1.1em; height: 1.1em; flex: none; }
.home-card__cuisines { margin: 0 0 var(--space-3); font-size: var(--fs-sm); }

.home__empty { display: grid; justify-items: start; gap: var(--space-3); }
.home__empty[hidden] { display: none; }
.home__empty p { margin: 0; font-weight: 700; }
.home__empty button[hidden] { display: none; }

/* The carousel (step 7): swipe, or use the arrows. It never moves by itself. */
.home__carousel { margin-bottom: var(--space-6); }
.home__carousel[hidden] { display: none; }
.home__tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.home__tabs .chip[hidden] { display: none; }

.carousel { position: relative; }

.carousel__track {
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-1) var(--space-1) var(--space-3);
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-1);
  scrollbar-width: thin;
}

.carousel__item { flex: none; width: min(15rem, 72vw); scroll-snap-align: start; }

.carousel__arrow {
  position: absolute;
  top: calc(50% - 22px - var(--space-3));
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--outline);
  border-radius: 50%;
  box-shadow: 0 3px 0 var(--outline);
  cursor: pointer;
}

.carousel__arrow:first-child { left: calc(-1 * var(--space-2)); }
.carousel__arrow:last-child { right: calc(-1 * var(--space-2)); }
.carousel__arrow[hidden] { display: none; }
.carousel__arrow:disabled { opacity: 0; pointer-events: none; }
.carousel__arrow svg { width: 22px; height: 22px; }

/* Phones swipe; the arrows are for mouse and keyboard, so they stay out of the way there. */
@media (hover: none) and (pointer: coarse) {
  .carousel__arrow:not(:focus-visible) { opacity: 0; pointer-events: none; }
}

.dish-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}

.dish-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain; /* the whole photo, never cut off */
  background: var(--surface-sunk);
}

.dish-card__body { display: grid; gap: .15rem; padding: var(--space-3); }
.dish-card__name { font: 600 var(--fs-lg) / 1.2 var(--font-display); overflow-wrap: anywhere; }
.dish-card__price { font-weight: 800; }
.dish-card__stall { font-size: var(--fs-sm); font-weight: 700; overflow-wrap: anywhere; }
.dish-card__area { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 700; }
.dish-card__area svg { width: 1.1em; height: 1.1em; flex: none; }

/* "Near me" before a spot is chosen. */
.dish-card--ask {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 14rem;
  padding: var(--space-4);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.dish-card--ask svg { width: 2rem; height: 2rem; color: var(--primary); }
.dish-card--ask strong { font: 600 var(--fs-lg) / 1.2 var(--font-display); }
.dish-card--ask span { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 700; }

.home__carousel-empty { margin: 0; font-weight: 700; }
.home__carousel-empty[hidden] { display: none; }

/* The Featured Stall */
.home__featured { margin-bottom: var(--space-6); }
.home__featured[hidden] { display: none; }
.home__featured h2 { display: flex; align-items: center; gap: var(--space-2); }
.home__featured h2 svg { width: 1.2em; height: 1.2em; fill: var(--accent-yellow); stroke: var(--ink-900); stroke-width: 1.5px; stroke-linejoin: round; }
.home-card--featured { max-width: 36rem; border: 2px solid var(--outline); }

.featured-note { position: relative; z-index: 1; margin: var(--space-3) 0 0; padding: var(--space-3); background: var(--surface-sunk); border-radius: var(--radius); }
.featured-note blockquote { margin: 0 0 var(--space-1); font-weight: 700; overflow-wrap: anywhere; }
.featured-note figcaption { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 700; }

/* An open drop (Phase 2, step 5): a "!" bubble by the cook and on their pin. The words
   "Drop open" are always there too. The bubble's look is in drop.css (.bang). */
.home-card__bang { position: absolute; left: calc(var(--space-3) + 50px); bottom: 18px; }
.home-card__drop { margin: 0 0 var(--space-3); font-weight: 800; }
.map-pin-holder { position: relative; display: block; }
.map-pin__bang { position: absolute; top: -10px; right: -12px; }
:root[data-simple="on"] .home-card__bang,
:root[data-simple="on"] .map-pin__bang { display: none; }