/* ==========================================================================
   Where to Eat

   A magazine-style grid rather than 81 identical tiles. Each listing carries
   its own size (small / wide / feature) stored in page_items, so the rhythm of
   the page is content, not CSS -- an editor changes it from the page itself.

   Self-contained: no Bootstrap grid classes, so it doesn't inherit the
   conflicting rules the rest of the site carries.
   ========================================================================== */

.wte {
  --wte-purple:  #7f3f98;
  --wte-ink:     #2b2530;
  --wte-soft:    #6d6577;
  --wte-line:    #e7e2ec;
  --wte-surface: #fff;
  --wte-sand:    #faf7f2;

  background: var(--wte-sand);
  padding: 0 0 72px;
  color: var(--wte-ink);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

.wte-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- head -- */

/* Generous room above and below: the heading sits under the site nav, and the
   intro needs to breathe before the grid starts. */
.wte-head { padding: 72px 0 48px; text-align: center; }

.wte-head h1 {
  margin: 0;
  font-family: "Amatic SC", cursive;
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1.08;   /* 1 clipped the descenders on Amatic SC */
  color: var(--wte-purple);
}

.wte-head p {
  max-width: 60ch;
  margin: 18px auto 0;
  color: var(--wte-soft);
  font-size: 1.125rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------- section -- */

.wte-head + .wte-section { margin-top: 8px; }

.wte-section {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 56px 0 26px;
}
.wte-section::before,
.wte-section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--wte-line);
}
.wte-section h2 {
  margin: 0;
  font-family: "Amatic SC", cursive;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--wte-purple);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- grid -- */

.wte-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 390px;
  grid-auto-flow: dense;   /* lets small cards backfill gaps left by big ones */
  gap: 22px;
}

/* ---------------------------------------------------------------- card -- */

/* Open listings: no border, no panel, no shadow. The photo carries the
   structure and the text sits directly on the page. */
.wte-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease;
}

a.wte-card:hover { transform: translateY(-3px); color: inherit; }

/* Sizes -- the same names stored in page_items.size */
/* Every card is one cell.
   The grid used to mix three widths -- 45 small, 19 wide, 15 feature -- which
   left the rows ragged and read as a collage rather than a list of places. The
   size is still stored per listing, so this is reversible, but nothing renders
   differently now. */
.wte-card.is-wide,
.wte-card.is-feature { grid-column: auto; grid-row: auto; }

/* ---- media ---- */

.wte-media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #efe9f2;
  box-shadow: 0 1px 2px rgba(43, 37, 48, .05), 0 6px 16px rgba(43, 37, 48, .07);
  transition: box-shadow .18s ease;
}
a.wte-card:hover .wte-media {
  box-shadow: 0 4px 10px rgba(43, 37, 48, .09), 0 16px 34px rgba(43, 37, 48, .13);
}
.wte-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* keeps mixed source ratios looking deliberate */
  display: block;
  transition: transform .4s ease;
}
a.wte-card:hover .wte-media img { transform: scale(1.04); }

.wte-media-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #a99cb4;
  font-size: .8125rem;
}

/* Hours sit on the photo so the body stays about the food. */
.wte-hours {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(43, 37, 48, .82);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  backdrop-filter: blur(4px);
}

/* ---- body ---- */

.wte-body { flex: 0 0 auto; padding: 14px 2px 0; }

.wte-name {
  margin: 0;
  font-size: 2rem;       /* 32px */
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--wte-ink);
}

.wte-desc {
  margin: 6px 0 0;
  color: var(--wte-soft);
  font-size: .9375rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wte-meta {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--wte-ink);
}
.wte-meta li { display: flex; gap: 9px; margin-top: 5px; }
.wte-meta .wte-label {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wte-purple);
  padding-top: 3px;
}

/* Bigger cards get room to say more. */
/* No per-size type scale any more: one card size means one set of sizes. */

/* The address shows on every size now. It was hidden on the small tiles when
   they were boxed and cramped; without the box there is room for it. */

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

@media (max-width: 1100px) {
  .wte-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 370px; }
}
@media (max-width: 820px) {
  .wte-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 350px; }
}
@media (max-width: 560px) {
  .wte-inner { padding: 0 16px; }
  .wte-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 18px; }
  /* Spans stop meaning anything in a single column. */
  /* sizes are already uniform above */
  .wte-media { height: 220px; flex: 0 0 220px; }


}

@media (prefers-reduced-motion: reduce) {
  .wte-card, .wte-media img { transition: none; }
  a.wte-card:hover { transform: none; }
  a.wte-card:hover .wte-media img { transform: none; }
}

/* ====================================================== edit mode only === */

/* Size buttons, shown on each card once "Edit page" is switched on. */
.wte-size {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: none;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(43, 37, 48, .88);
  backdrop-filter: blur(4px);
}
body.cms-editing .wte-size { display: inline-flex; }

.wte-size button {
  width: 30px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #d9cfe2;
  font: 700 11px/1 "Open Sans", sans-serif;
  cursor: pointer;
}
.wte-size button:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.wte-size button[aria-pressed="true"] { background: #7f3f98; color: #fff; }

/* The photo is the click target for replacing it, so make that obvious. */
body.cms-editing .wte-media { cursor: pointer; }

/* ============================================== add / delete (edit mode) === */

/* Tile that appears at the end of every section while editing. */
.wte-add {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  border: 2px dashed #cbbcd6;
  border-radius: 16px;
  background: transparent;
  color: var(--wte-purple);
  font: 600 .9375rem/1.3 "Open Sans", sans-serif;
  cursor: pointer;
  text-align: center;
  padding: 16px;
  transition: background .15s ease, border-color .15s ease;
}
body.cms-editing .wte-add { display: flex; }
.wte-add:hover { background: rgba(127, 63, 152, .06); border-color: var(--wte-purple); }
.wte-add span { font-size: 1.75rem; line-height: 1; }

/* Remove button, paired with the size controls in the card corner. */
.wte-del {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  display: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(43, 37, 48, .88);
  color: #f3d5d2;
  font: 700 14px/1 "Open Sans", sans-serif;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
body.cms-editing .wte-del { display: inline-flex; align-items: center; justify-content: center; }
.wte-del:hover { background: #b3261e; color: #fff; }

.wte-card.is-removing { opacity: .3; pointer-events: none; }

/* ------------------------------------------------------------- filter --- */

/* Cuisine filter.
   About 80 restaurants over thirteen cuisines is a long scroll, so the bar
   lets one be picked out. Sticky, because the point is to change your mind
   part-way down without scrolling back to the top. */
.wte-filter {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
  padding: 14px 0;
  /* The sand matches the page, so cards scrolling underneath are covered
     rather than showing through behind the buttons. */
  background: var(--wte-sand, #faf7f2);
  border-bottom: 1px solid var(--wte-line, #e7e2ec);
}

.wte-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--wte-line, #e7e2ec);
  border-radius: 999px;
  background: #fff;
  color: var(--wte-soft, #6d6577);
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.wte-pill:hover {
  border-color: var(--wte-purple, #7f3f98);
  color: var(--wte-purple, #7f3f98);
}
.wte-pill:focus-visible {
  outline: 2px solid var(--wte-purple, #7f3f98);
  outline-offset: 2px;
}

.wte-pill.is-active {
  border-color: var(--wte-purple, #7f3f98);
  background: var(--wte-purple, #7f3f98);
  color: #fff;
}

/* The count is supporting information, so it stays lighter than the label. */
.wte-pill-n {
  font-size: .6875rem;
  font-weight: 700;
  opacity: .55;
}
.wte-pill.is-active .wte-pill-n { opacity: .75; }

/* Set by where-to-eat.js. Declared only here, so with JavaScript off no group
   is ever hidden and the page reads exactly as it did before. */
.wte-group.is-hidden { display: none; }

@media (max-width: 720px) {
  /* One sideways-scrolling row rather than four stacked rows of pills, which
     would push the listings off the first screen. */
  .wte-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .wte-filter::-webkit-scrollbar { display: none; }
  .wte-pill { padding: 8px 14px; font-size: .78125rem; }
}

/* Clearing a photo. Clicking the picture replaces it; this takes it away and
   puts the "No photo yet" placeholder back. Editors could previously only ever
   swap one photo for another, so a wrong picture had to stay. */
.wte-img-del {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 4;
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(23, 18, 28, .62);
  color: #fff;
  font-family: inherit;
  font-size: .6875rem;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, background-color .15s ease;
}
.wte-card:hover .wte-img-del { opacity: 1; }
.wte-img-del:hover { background: #b3261e; }

/* Shown on a listing page that has nothing in it yet, so a visitor gets a
   sentence rather than a heading over blank space. */
.wte-coming {
  max-width: 62ch;
  margin: 0 0 40px;
  color: var(--wte-soft, #6d6577);
  font-size: 1.0625rem;
  line-height: 1.75;
}