/* Wine Club — storefront (perks + join card) and member portal. */
/* Ports mockups/wineclub.html + wineclub-portal.html. Mobile-first: single */
/* column by default, two columns at >=981px. Tokens only. */

/* ---- Storefront: title + alternating text/image rows (matches the landing
   page's split bands: text left / image right, then image left / text right). ---- */
.wc-page.section { padding-top: clamp(30px, 4vw, 52px); padding-bottom: clamp(48px, 6vw, 88px); }
.wc__h { margin: 0 0 clamp(24px, 4vw, 44px); }

.wc-row { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 4vw, 44px); align-items: start; }
.wc-row + .wc-row { margin-top: clamp(28px, 5vw, 64px); }
.wc-row__media { margin: 0; max-width: 360px; justify-self: center; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.wc-row__media img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* NB: the intro paragraph is styled by .pagelede in base.css and nothing here.
   It set margin:0 to close the gap between this page's TWO intro paragraphs; the
   shared class now joins them into one panel instead. */
.wc__meet { font-weight: 600; font-size: 1.05rem; line-height: 1.6; margin: 0 0 20px; }

.wc__perks { list-style: none; margin: 0 0 26px; padding: 0; }
.wc__perks li {
  position: relative;
  padding: 10px 0 10px 22px;
  color: var(--ink-2);
  line-height: 1.6;
}
.wc__perks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 20px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
}

.wc__cta { margin: 8px 0 0; }

@media (min-width: 820px) {
  .wc-row { grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); }
}

/* ---- Member portal ---- */
.portal__h { margin-top: 8px; }
.portal__section { padding-top: 0; }
.portal { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 52px); align-items: start; margin-top: clamp(28px, 5vw, 48px); }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 3vw, 34px); }
.panel + .panel { margin-top: 24px; }
.panel h2 { font-size: 1.5rem; margin: 0 0 4px; }
.panel__note { color: var(--sage); font-size: 0.9rem; margin: 0 0 22px; }
.panel__note--last { margin-bottom: 0; }

.status-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.status-row h2 { margin: 0; }

.detail-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 14px 28px; align-items: baseline; }
.detail-list dt { font-family: var(--font-display-stack); font-style: italic; color: var(--gold-ink); font-size: 1rem; }
.detail-list dd { margin: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.detail-list dd .sub { display: block; color: var(--sage); font-size: 0.82rem; font-style: normal; }

.actions { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.actions__primary { display: flex; gap: 12px; flex-wrap: wrap; }
.danger-link { font-size: 0.82rem; color: var(--sage); border: 0; background: none; cursor: pointer; padding: 0; align-self: flex-start; border-bottom: 1px solid transparent; transition: 0.2s; }
.danger-link:hover { color: var(--danger); border-bottom-color: var(--danger); }

.bottle { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.bottle:last-of-type { border-bottom: 0; padding-bottom: 0; }
.bottle:first-of-type { padding-top: 0; }
.bottle__img { flex: 0 0 96px; aspect-ratio: 3 / 4; overflow: hidden; background: var(--cream-2); border-radius: var(--r); }
.bottle__img img { width: 100%; height: 100%; object-fit: cover; }
.bottle__name { font-family: var(--font-display-stack); font-size: 1.18rem; font-weight: 500; line-height: 1.15; margin: 0 0 4px; }
.bottle__meta { color: var(--olive-ink); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; margin: 0 0 8px; }
.bottle__desc { color: var(--ink-2); font-size: 0.92rem; margin: 0; }
.portal__cta { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.portal__cta .panel__note { margin: 0 0 14px; }

/* Pickup & shipment history table (shared .tbl/.badge live in components.css). */
.tbl-wrap { overflow-x: auto; }
.tbl td .badge { font-size: 0.66rem; }

@media (min-width: 981px) {
  .portal { grid-template-columns: 1.15fr 0.85fr; }
}

/* The line out to /wine-list (April, 8/28). Under the join CTA, quiet, so it offers the
   alternative without competing with it. */
.wc__browse { margin: 14px 0 0; font-size: 0.88rem; color: var(--text-muted); }
.wc__browse a { color: var(--ink); border-bottom: 1px solid var(--line); }
.wc__browse a:hover, .wc__browse a:focus-visible { border-bottom-color: var(--ink); }