/* ==========================================================================
   Cheshire Park Clubs: shop components.
   Loaded only on /shop/ pages, after style.css. Uses the existing design
   tokens only; no global styles are overridden.
   Versioned filename because /assets/* is cached as immutable for a year:
   for changes, create clubs.v2.css and update the <link> tags.
   ========================================================================== */

/* ---- Club cards ------------------------------------------------------ */
.club-grid { display: grid; gap: var(--space-3); }
.club-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.club-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
@media (max-width: 860px) {
  .club-grid--2, .club-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

.club-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.club-card .plate { border-radius: 0; }
.club-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  padding: var(--space-2);
  flex: 1;
}
.club-card__body > .link { margin-top: auto; align-self: flex-start; }
.club-card__body p { font-size: 0.98rem; }
.club-card__body p + p { margin-top: 0; }
.club-card__kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-olive) !important;
}
.club-card h3 { margin-top: -0.3em; }

.club-price { display: flex; align-items: baseline; gap: 0.35em; flex-wrap: wrap; }
.club-price__amount {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--c-ink);
  line-height: 1;
}
.club-price__unit { font-size: 0.9rem; color: var(--c-ink-soft); }

/* ---- Status tags --------------------------------------------------------- */
.club-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35em 0.7em;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  color: var(--c-ink-soft);
  background: var(--c-paper);
}
.club-tag--soon, .club-tag--reserved { border-color: var(--c-gold); color: #7A5A22; }
.club-tag--available { border-color: var(--c-olive-2); color: var(--c-olive); background: #EEF0E6; }
.club-tag--named { border-color: var(--c-clay); color: var(--c-clay); }
.post-header .club-card__status { margin-top: 1.2em; }

/* ---- Notices --------------------------------------------------------- */
.club-notice {
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-olive);
  background: var(--c-paper-deep);
  padding: 1em 1.2em;
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
}
.club-notice p { font-size: 0.95rem; }
.club-notice p + p { margin-top: 0.8em; }
.club-notice--demo { border-left-color: var(--c-clay); background: #F5E7DC; }
.club-notice:focus { outline: none; }

/* ---- Step layout ------------------------------------------------------ */
.clubs-step { margin-bottom: var(--space-3); }
.clubs-step[hidden] { display: none; }
.clubs-step__title {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 0.9em;
  padding: 0;
}
.clubs-step__num {
  display: inline-grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  border: 1px solid var(--c-ink);
  font-family: var(--font-body);
  font-size: 0.75em;
  font-weight: 600;
}
.clubs-help, .field-help { font-size: 0.88rem; color: var(--c-ink-faint); margin-bottom: 1em; }
.field-help { margin-top: 0.5em; margin-bottom: 0; }
.field-error { font-size: 0.88rem; color: var(--c-clay); margin-top: 0.5em; font-weight: 600; }
.field-optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--c-ink-faint); }
.field-label {
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--c-ink-soft); margin-bottom: 0.6em;
}
.form-field [aria-invalid="true"] { border-color: var(--c-clay); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-2); }
@media (max-width: 600px) { .form-row { grid-template-columns: minmax(0, 1fr); } }

/* ---- Plan switch ------------------------------------------------------ */
.plan-switch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); }
.plan-switch--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .plan-switch--3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .plan-switch { grid-template-columns: minmax(0, 1fr); } }
.plan-option { position: relative; cursor: pointer; }
.plan-option input { position: absolute; opacity: 0; inset: 0; }
.plan-option__box {
  display: flex; flex-direction: column; gap: 0.25em; height: 100%;
  padding: 1em 1.1em;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.plan-option__name { font-weight: 600; }
.plan-option__price { font-family: var(--font-display); font-size: 1.35rem; }
.plan-option__note { font-size: 0.85rem; color: var(--c-ink-faint); }
.plan-option input:checked + .plan-option__box { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
.plan-option input:focus-visible + .plan-option__box { outline: 2px solid var(--c-olive); outline-offset: 3px; }

/* ---- Calf grid ------------------------------------------------------- */
.calf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); }
@media (max-width: 760px) { .calf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 340px) { .calf-grid { grid-template-columns: minmax(0, 1fr); } }
.calf-grid > .clubs-help { grid-column: 1 / -1; }

.calf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.calf-card[hidden] { display: none; }
.calf-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calf-card .plate { border-radius: 0; }
.calf-card__body { display: flex; flex-direction: column; gap: 0.35em; padding: 0.8em 0.9em 1em; }
.calf-card__top { display: flex; justify-content: space-between; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.calf-card__id { font-weight: 600; letter-spacing: 0.04em; font-size: 0.95rem; }
.calf-card__meta { font-size: 0.85rem; color: var(--c-ink-soft); }
.calf-card__name { font-family: var(--font-display); font-style: italic; color: var(--c-ink); }
.calf-card__demo { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-clay); font-weight: 600; }
.calf-card:hover { border-color: var(--c-ink-faint); }
.calf-card:has(input:checked) { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
.calf-card:has(input:checked)::after {
  content: "Selected";
  position: absolute; top: 0.6em; left: 0.6em; z-index: 3;
  background: var(--c-ink); color: var(--c-white);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3em 0.6em; border-radius: var(--radius);
}
.calf-card:has(input:focus-visible) { outline: 2px solid var(--c-olive); outline-offset: 3px; }
.calf-card:has(input:disabled) { cursor: not-allowed; opacity: 0.6; }
.calf-card:has(input:disabled):hover { border-color: var(--c-line); }

/* ---- Choices --------------------------------------------------------- */
.choice-list { display: flex; flex-direction: column; gap: 0.7em; margin-top: 1em; }
.choice {
  display: grid; grid-template-columns: auto 1fr; gap: 0.7em; align-items: start;
  font-size: 0.95rem; color: var(--c-ink-soft); cursor: pointer;
}
.form-field .choice { display: grid; margin-bottom: 0; font-size: 0.95rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--c-ink-soft); }
.choice input { margin-top: 0.3em; width: 1.05em; height: 1.05em; accent-color: var(--c-ink); }
.choice strong { color: var(--c-ink); }

/* ---- Summary --------------------------------------------------------- */
.order-summary {
  background: var(--c-white);
  border: 1px solid var(--c-ink);
  border-radius: var(--radius);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
}
.order-summary h3 { margin-bottom: 0.6em; }
.order-summary dl > div {
  display: flex; justify-content: space-between; gap: 1em;
  padding-block: 0.6em; border-top: 1px solid var(--c-line-soft); font-size: 0.95rem;
}
.order-summary dl > div[hidden] { display: none; }
.order-summary dt { color: var(--c-ink-soft); }
.order-summary dd { text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.clubs-submit { margin-top: var(--space-2); width: 100%; justify-content: center; }

/* ---- FAQ / options table ------------------------------------------------ */
.clubs-faq > div { padding-block: var(--space-2); border-top: 1px solid var(--c-line); }
.clubs-faq dt { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin-bottom: 0.4em; }
.clubs-faq dd { color: var(--c-ink-soft); }

.club-options { width: 100%; border-collapse: collapse; margin-block: var(--space-2) 0.5em; background: var(--c-white); font-size: 0.95rem; }
.club-options th, .club-options td { text-align: left; padding: 0.8em 0.9em; border: 1px solid var(--c-line); }
.club-options thead th { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-soft); }
.club-options td { color: var(--c-ink-faint); font-style: italic; }

.interest-form {
  margin-block: var(--space-3);
  padding: var(--space-2);
  background: var(--c-paper-deep);
  border-radius: var(--radius);
}
.interest-form__title { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); margin-bottom: 0.4em; }
.interest-form > p { margin-bottom: var(--space-2); }
.interest-form .club-notice { margin-top: var(--space-2); margin-bottom: 0; background: var(--c-white); }

/* Wide card (Sponsor a Named Calf) */
.club-card--wide { margin-top: var(--space-3); }
@media (min-width: 861px) {
  .club-card--wide .club-card__body {
    display: grid;
    grid-template-columns: 1.1fr auto 1.6fr auto auto;
    align-items: center;
    gap: var(--space-2);
  }
  .club-card--wide .club-card__body > .link { margin-top: 0; align-self: center; }
}