/* ==========================================================================
   thursdvys - the customer "Where we're live" outlets section
   --------------------------------------------------------------------------
   A standalone stylesheet so nothing shared has to change for it: the
   landing sheet, the shell and the grid stay exactly as they were, and this
   file is the only thing the section costs a page.

   The palette is the brand's and nothing else: near-black canvas, white,
   grey #D8D8D8, a #2A2A2A hairline, and #FF6B00 as the single accent. No
   logo - the header carries the one mark the page is allowed - and both
   cards read identically, because to a customer every outlet is just a shop
   they can walk into.
   ========================================================================== */

.wl { background: transparent; color: #fff; padding: 34px 0 44px; }
.wl-in { max-width: 820px; margin: 0 auto; }

/* the kicker, then the heading */
.wl-kick {
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: #D8D8D8;
}
/* grid.css styles every h2/h3 as an uppercase, counterspaced section head. The section is its
   own thing, so the two headings below reset that back to the approved design - sentence case,
   body font, the agreed sizes and weights - and the h3 counter/hairline is switched off. */
.wl-h2 {
  margin: 12px 0 0; font-size: 32px; font-weight: 500; line-height: 1.15;
  letter-spacing: -.01em; color: #fff;
  font-family: inherit; text-transform: none;
}

/* the pair, capped so two cards do not stretch into billboards */
.wl-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-top: 26px; max-width: 820px;
}
.wl-card {
  display: flex; flex-direction: column;
  border: 1px solid #2A2A2A; background: transparent;
  padding: 22px 22px 0;
  transition: border-color .18s ease;
}
.wl-card:hover { border-color: #FF6B00; }

/* the outlet name: reset grid.css's section-head h3 (uppercase + counter + hairline) */
.wl-name {
  margin: 0; font-size: 19px; font-weight: 500; line-height: 1.25; color: #fff;
  font-family: inherit; text-transform: none; letter-spacing: 0; display: block;
  counter-increment: none;
}
.wl-name::before, .wl-name::after { content: none; display: none; }

/* open / closed: a small dot and a wide-tracked label */
.wl-status {
  display: flex; align-items: center; gap: 7px; margin-top: 11px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: #8A8A8A;
}
/* grid.css forces border-radius:0 !important brand-wide. The status indicator is the one 7px
   element the approved design calls a dot, so it is rounded back on purpose - it is not a card
   corner and does not touch the square-corner rule the rest of the page follows. */
.wl-dot { width: 7px; height: 7px; border-radius: 50% !important; background: #8A8A8A; flex: none; }
.wl-status.on { color: #FF6B00; }
.wl-status.on .wl-dot { background: #FF6B00; }

.wl-addr { margin: 12px 0 0; font-size: 13px; color: #D8D8D8; line-height: 1.5; }
.wl-hours { margin: 7px 0 0; font-size: 12px; color: #8A8A8A; }

/* the way to the map, under its own hairline, with the one accent in the card */
.wl-dir {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 20px; padding: 14px 0; border-top: 1px solid #2A2A2A;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: #fff; text-decoration: none;
}
.wl-dir:hover { color: #FF6B00; }
.wl-chev {
  stroke: #FF6B00; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* one column under 820, so the cards stay readable on a phone */
@media (max-width: 820px) {
  .wl { padding: 36px 20px 44px; }
  .wl-cards { grid-template-columns: 1fr; }
  .wl-h2 { font-size: 26px; }
}
@media (max-width: 420px) {
  .wl-h2 { font-size: 23px; }
}