/* src/assets/css/club-az.css
   Clubs A to Z (/club-directory/a-z/). Sits on the club-page broadsheet
   look from club-storefront.css: racing green, EB Garamond names, and the
   same double gold rule as "About the Club" and "Club particulars". */

.az { padding-bottom: var(--sf-section); }

/* Heading band: the engraved green of an unclaimed club's hero, kept short */
.az-head {
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 1px, transparent 1px 16px),
    radial-gradient(120% 90% at 50% 0%, var(--club-primary) 0%, var(--club-primary-dark) 78%);
  color: #fff;
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2.25rem, 5vw, 3.25rem);
}
.az-head .az-eyebrow { color: var(--club-accent); }
.az-title {
  font-family: "EB Garamond", Georgia, serif; font-weight: 550;
  font-size: clamp(2.6rem, 6vw, 4.25rem); line-height: 1.02; letter-spacing: -0.01em;
  color: #fff; margin: 0 0 1rem;
}
.az-intro {
  font-family: "EB Garamond", Georgia, serif; font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.55;
  color: rgba(255,255,255,.86); max-width: 60ch; margin: 0;
}
.az-intro a { color: #fff; text-decoration: underline; text-decoration-color: var(--club-accent); text-underline-offset: 3px; }

/* Letter bar: sticks under the site header (height set by the page script) */
.az-bar {
  position: sticky; top: var(--az-header, 0px); z-index: 20;
  background: var(--paper, #fff);
  border-bottom: 3px double var(--club-accent);
}
.az-letters {
  list-style: none; margin: 0 auto; padding-top: 0.6rem; padding-bottom: 0.6rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.15rem;
}
.az-letters li { flex: 1 0 auto; text-align: center; }
.az-letters a, .az-letters span {
  display: inline-block; min-width: 1.9rem; padding: 0.3rem 0.2rem;
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em;
}
.az-letters a { color: var(--club-primary); text-decoration: none; border-radius: 2px; }
.az-letters a:hover, .az-letters a:focus-visible { background: var(--club-primary); color: #fff; }
.az-letters span { color: var(--line-200, #d9d9d9); }

/* Letter sections */
.az-body { padding-top: clamp(2rem, 4vw, 3rem); }
.az-group { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); scroll-margin-top: calc(var(--az-header, 0px) + var(--az-bar, 3.5rem) + 1rem); }
.az-letter {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin: 0 0 1.25rem; padding-bottom: 0.4rem; border-bottom: 3px double var(--club-accent);
  font-family: "EB Garamond", Georgia, serif; font-weight: 550; font-size: clamp(2.2rem, 4vw, 2.9rem); line-height: 1;
  color: var(--club-primary);
}
.az-count {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-500);
}

.az-list { list-style: none; margin: 0; padding: 0; columns: 3 16rem; column-gap: clamp(2rem, 4vw, 3.5rem); }
.az-list li {
  break-inside: avoid; padding: 0.55rem 0; border-bottom: 1px solid var(--line-100, #eee);
}
.az-list a {
  font-family: "EB Garamond", Georgia, serif; font-size: 1.12rem; line-height: 1.3;
  color: var(--ink-900); text-decoration: none;
}
.az-list a:hover, .az-list a:focus-visible { color: var(--club-primary); text-decoration: underline; text-underline-offset: 3px; }
.az-meta {
  display: block; margin-top: 0.15rem;
  font-family: var(--font-display); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-500);
}

.az-foot { margin: 1rem 0 0; font-family: var(--font-display); font-size: 0.85rem; color: var(--ink-500); }
.az-foot a { color: var(--club-primary); }

/* On a phone the bar is one row you swipe along, so it never covers more
   than a line of the list. */
@media (max-width: 640px) {
  .az-letters {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .az-letters::-webkit-scrollbar { display: none; }
  .az-letters li { flex: 0 0 auto; }
  .az-letters a, .az-letters span { min-width: 2.1rem; padding: 0.45rem 0.2rem; }
}