@layer components {

/* Find Us Section */
.find-us {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
}

.find-us h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--brand-primary);
  font-size: 2rem;
  margin: 0.5rem 0 2.5rem;
  font-weight: 600;
}

/* Same decorative arrow as "What We Offer" (see 06-offer.css), rotated a bit
   so each section's flourish reads slightly differently. */
.find-us h2::after {
  content: "";
  flex: 0 0 auto;
  width: 1.4rem;
  height: 2.25rem;
  background: url("/assets/icons/arrow.svg") center / contain no-repeat;
  transform: translateY(35%) translateX(-15%) rotate(-14deg);
}

.find-us__accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 700px;
  margin: 0 auto;
}

.accordion {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 15px solid var(--brand-primary);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.08);
}

.accordion__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.accordion__header:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}

.accordion__heading {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}

.accordion__day {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.accordion__title {
  color: var(--brand-primary);
  font-size: 1.1rem;
  font-weight: 600;
}

.accordion__icon {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--brand-primary);
  border-bottom: 2px solid var(--brand-primary);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.accordion__header[aria-expanded="true"] .accordion__icon {
  transform: rotate(-135deg);
}

.accordion__panel {
  padding: 0 1.5rem 1.5rem;
}

.market-card__location {
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.market-card__address {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

.market-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.2rem;
  margin-bottom: 1rem;
}

.market-card__copy {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--brand-primary);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.market-card__copy-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.market-card__copy-icon--check {
  display: none;
}

.market-card__copy.is-copied .market-card__copy-icon--check {
  display: block;
}

.market-card__copy.is-copied .market-card__copy-icon:not(.market-card__copy-icon--check) {
  display: none;
}

.market-card__divider {
  color: var(--color-border);
}

.market-card__apple-maps {
  color: var(--brand-primary);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
}

.market-card__date {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0.5rem 0 0;
}

/* Market-specific conditions (e.g. "only X available here") — written as
   plain body text in the market's .md file, so it needs to read as a
   notice rather than blend in with the rest of the card's metadata. */
.market-card__note {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--brand-secondary);
  background: var(--color-bg-alt);
  border-radius: 0 4px 4px 0;
  color: var(--color-text);
  font-size: 0.85rem;
  line-height: 1.5;
}

.market-card__note p {
  margin: 0;
}

.market-card__note p + p {
  margin-top: 0.5rem;
}

.market-card__time {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-top: 1rem;
}

.accordion__map {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: 8px;
  margin-top: 1rem;
}


/* ---------------------------------------------------------------------------
   Retail stockists ("Also Find Us At").
   Markets are day-based events and earn an accordion; a coffee house is open
   ongoing and has two lines of detail, so these stay expanded in a grid.
   --------------------------------------------------------------------------- */

.find-us__subhead {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 2.5rem 0 1rem;
}

.find-us__accordion + .find-us__subhead {
  margin-top: 3rem;
}

.client-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Fixed-width columns (not 1fr) so a lone card keeps its intended shape
     instead of stretching the full section width. auto-fill packs as many
     300px cards per row as fit; min() lets it shrink on narrow phones. */
  grid-template-columns: repeat(auto-fill, min(300px, 100%));
  justify-content: start;
  gap: 1.5rem;
}

.client-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1.5rem;
}

/* Books & Brew's logo is only 360px square, so 180px is the largest it can
   render without softening on a 2x screen. Cap rather than stretch. */
.client-card__logo {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  margin: 0 auto 1.25rem;
}

.client-card__pills {
  margin-bottom: 1rem;
  list-style: none;
  padding: 0;
}

.pill--carries {
  background: var(--neutral-200);
  color: var(--neutral-700);
  border: 1px solid var(--color-border);
}

.client-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.client-card__link {
  color: inherit;
  text-decoration: none;
}

.client-card__link:hover,
.client-card__link:focus-visible {
  color: var(--brand-primary);
  text-decoration: underline;
}

.client-card__address {
  font-style: normal;
  line-height: 1.5;
  color: var(--color-text);
}

.client-card__phone {
  display: inline-block;
  margin-top: 0.35rem;
  color: var(--brand-primary);
  text-decoration: none;
}

.client-card__phone:hover,
.client-card__phone:focus-visible {
  text-decoration: underline;
}

.client-card__actions {
  margin-top: 1rem;
}

}