/* ==========================================================================
   loyalty.css — Loyalty page (/loyalty/)
   Loaded only on the loyalty page, after styles.css + nav.css. Mirrors the
   homepage/events minimal language (light, cream, green, quiet palette).
   ========================================================================== */

/* Calmer heading scale, matching the events page. */
.loy-intro__title { font-size: clamp(2.3rem, 5.2vw, 4rem); color: var(--green); margin: 8px 0 16px; }
#main .section-head .display { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }

/* --- Opener ------------------------------------------------------------- */
#top-intro { padding-top: clamp(28px, 4vw, 48px); }
.loy-intro { max-width: 760px; margin: 0 auto; text-align: center; }
.loy-breadcrumb { font-family: var(--body); font-size: .8rem; letter-spacing: .04em; color: var(--ink); opacity: .72; margin: 0 0 18px; }
.loy-breadcrumb a { color: var(--green); text-decoration: none; }
.loy-breadcrumb a:hover { color: var(--orange); }
.loy-breadcrumb span { margin: 0 .5em; opacity: .5; }
.loy-intro .lede { margin-left: auto; margin-right: auto; max-width: 58ch; }
.loy-intro__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: clamp(22px, 3vw, 32px); }

.loy-narrow { max-width: 860px; }

/* --- How it works (3 steps) --------------------------------------------- */
.loy-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 34px); margin-top: clamp(30px, 4vw, 48px);
}
.loy-step { background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: clamp(22px, 3vw, 32px); }
.loy-step__num { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--orange-text); letter-spacing: .08em; display: block; margin-bottom: 12px; }
.loy-step h3 { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: 1.2rem; color: var(--green); margin: 0 0 10px; line-height: 1.1; }
.loy-step p { font-family: var(--body); font-size: .98rem; line-height: 1.55; color: var(--ink); opacity: .85; margin: 0; }
.loy-step p strong { opacity: 1; color: var(--green); }

/* --- Rewards ------------------------------------------------------------ */
.loy-rewards {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 52px);
  margin-top: clamp(28px, 4vw, 44px); align-items: start;
}
.loy-rewards__head {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1.1rem; color: var(--green);
  margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.loy-reward-list { list-style: none; margin: 0; padding: 0; }
.loy-reward { padding: 14px 0; border-bottom: 1px solid rgba(34, 76, 36, .08); }
.loy-reward:last-child { border-bottom: 0; }
.loy-reward__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.loy-reward__name { font-family: var(--body); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.loy-reward__sub { font-weight: 400; opacity: .55; font-size: .86em; }
.loy-reward__pts { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--green); white-space: nowrap; }
.loy-reward__desc { display: block; font-family: var(--body); font-size: .9rem; line-height: 1.45; color: var(--ink); opacity: .65; margin-top: 4px; }

.loy-fineprint { font-family: var(--body); font-size: .85rem; color: var(--ink); opacity: .65; margin: clamp(22px, 3vw, 32px) 0 0; text-align: center; }

/* --- Good to know (rules) ----------------------------------------------- */
.loy-terms { list-style: none; margin: clamp(24px, 3.5vw, 40px) auto 0; padding: 0; max-width: 64ch; }
.loy-terms li {
  font-family: var(--body); font-size: .98rem; line-height: 1.55; color: var(--ink);
  padding: 13px 0 13px 22px; position: relative; border-bottom: 1px solid rgba(34, 76, 36, .1);
}
.loy-terms li:last-child { border-bottom: 0; }
.loy-terms li::before { content: ""; position: absolute; left: 0; top: 1.2em; width: 10px; height: 1px; background: var(--orange); }

/* --- Join band (the one dark-green moment) ------------------------------ */
.loy-join { background: var(--green); color: var(--cream); padding: clamp(56px, 9vh, 104px) 0; }
.loy-join__inner { max-width: 760px; text-align: center; }
.loy-join .lede--cream { margin: 0 auto; max-width: 56ch; }
.loy-join__cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px); margin: clamp(26px, 3.5vw, 38px) 0 0;
}
.loy-join__card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; text-align: center;
  background: rgba(255, 246, 240, .06);
  border: 1px solid rgba(255, 246, 240, .28); border-radius: 14px;
  padding: clamp(22px, 3vw, 30px);
  transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.loy-join__card:hover { border-color: var(--cream); transform: translateY(-3px); background: rgba(255, 246, 240, .1); }
.loy-join__city { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: 1.5rem; color: var(--cream); }
.loy-join__sub { font-family: var(--body); font-size: .86rem; color: rgba(255, 246, 240, .72); }
.loy-join__go { margin-top: 12px; font-family: var(--body); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #ff9d77; }
.loy-join__card:hover .loy-join__go { color: var(--cream); }
.loy-join__note { font-family: var(--body); font-size: .92rem; color: rgba(255, 246, 240, .82); margin: clamp(22px, 3vw, 30px) 0 0; }
.loy-join__note a { color: var(--cream); font-weight: 600; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 820px) {
  .loy-steps { grid-template-columns: 1fr; }
  .loy-rewards { grid-template-columns: 1fr; gap: 30px; }
  .loy-join__cards { grid-template-columns: 1fr; }
}