/* ============================================================
   STORE - shopfront index and product pages (/store/).
   Loaded after styles.css and product.css, before nav.css.
   Only store-specific rules live here. Shared shell, buttons,
   cards, section rhythm and the CTA band come from the two
   stylesheets above. No new colour or spacing values are
   introduced; everything below uses existing tokens.
   ============================================================ */

/* ---------- Breadcrumb ---------- */

.store-breadcrumb {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-6);
}

.store-breadcrumb a { color: var(--color-blue); }

.store-breadcrumb span[aria-hidden] {
  margin: 0 var(--space-2);
  color: var(--color-ink-faint);
}

/* ---------- Product page: media beside the buy card ---------- */

/* minmax(0, ...) rather than plain fr: a bare fr column can never shrink
   below its widest unbreakable content, which pushed phone pages sideways. */
.store-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}

@media (min-width: 800px) {
  .store-product-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.store-product__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  background: var(--color-surface);
}

.store-product__name { margin-bottom: var(--space-3); }

.store-product__tagline { margin-bottom: var(--space-4); }

.store-product__meta {
  margin-bottom: var(--space-6);
}

/* ---------- Price card ---------- */

.store-price-card { padding: var(--space-6); }

.store-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.store-price__amount {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

.store-price__currency {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink-muted);
}

/* The member line is the store's single most important piece of copy:
   it is where a one-off buyer is shown what membership is worth. */
.store-price__member {
  font-size: var(--text-base);
  color: var(--color-ink-muted);
  background: var(--color-teal-faint);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}

.store-price__member strong { color: var(--color-ink); }

/* Buttons do not wrap by default. "Join the membership and save 80%" is
   wider than a phone's buy card, so these two may wrap onto a second line. */
.store-buy,
.store-join {
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: var(--leading-snug);
}

.store-buy { margin-bottom: var(--space-3); }

.store-join {
  border: 1px solid var(--color-border);
  color: var(--color-blue);
  background: var(--color-surface);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.store-join:hover,
.store-join:focus-visible {
  border-color: var(--color-blue);
  background: var(--color-teal-faint);
}

.store-price__terms {
  margin-top: var(--space-4);
  margin-bottom: 0;
  line-height: var(--leading-normal);
}

.store-price__terms a { color: var(--color-blue); }

/* ---------- Body sections ---------- */

.store-prose { max-width: var(--container-prose); }

.store-prose p { line-height: var(--leading-loose); }

.store-prose p + p { margin-top: var(--space-4); }

.store-includes {
  list-style: none;
  padding: 0;
  margin: 0;
}

.store-includes li {
  position: relative;
  padding-left: var(--space-8);
  margin-bottom: var(--space-3);
  line-height: var(--leading-loose);
}

.store-includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: var(--space-4);
  height: var(--space-2);
  border-left: 2px solid var(--color-blue);
  border-bottom: 2px solid var(--color-blue);
  transform: rotate(-45deg);
}

/* ---------- Index grid ---------- */

.store-grid { align-items: stretch; }

/* Groups within a semester: everything, year bundles, singles. */
.store-group + .store-group { margin-top: var(--space-12); }

.store-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
}

.store-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.store-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}

.store-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}

.store-card__link:hover .store-card__name,
.store-card__link:focus-visible .store-card__name { color: var(--color-blue); }

.store-card__tagline {
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-3);
}

.store-card__meta {
  margin-bottom: var(--space-4);
  letter-spacing: var(--tracking-wide);
}

/* Pushed to the bottom so prices line up across cards of uneven height. */
.store-card__price {
  margin-top: auto;
  margin-bottom: 0;
  font-size: var(--text-lg);
}

.store-card__member {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.store-empty {
  max-width: var(--container-prose);
  margin: 0 auto;
  text-align: center;
  line-height: var(--leading-loose);
}

.store-empty a { color: var(--color-blue); }

/* ============================================================
   LEGAL PAGES - store/licence/ and store/refunds/.
   Hand-authored prose pages, not generated. Deliberately calm:
   the "you may not" list uses the muted neutral rather than a
   warning colour, because a red list of prohibitions reads as
   scolding and Term Talk does not scold. No new colour values.
   ============================================================ */

.legal-prose {
  max-width: var(--container-prose);
}

.legal-prose p { line-height: var(--leading-loose); }

.legal-h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  margin: var(--space-12) 0 var(--space-4);
}

.legal-h2:first-of-type { margin-top: var(--space-10); }

/* ---------- The plain-English summary at the top ---------- */

.legal-summary {
  background: var(--color-teal-faint);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}

.legal-summary__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-blue-dark);
  margin-bottom: var(--space-3);
}

.legal-summary p:last-child { margin-bottom: 0; }

.legal-summary__note {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin-top: var(--space-4);
}

/* ---------- May / may not, side by side ---------- */

.legal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: var(--space-6) 0 var(--space-8);
}

@media (min-width: 720px) {
  .legal-grid { grid-template-columns: 1fr 1fr; }
}

.legal-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
}

.legal-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}

.legal-panel--allow .legal-panel__title { color: var(--color-blue); }
.legal-panel--deny .legal-panel__title { color: var(--color-ink-muted); }

/* ---------- Lists ---------- */

.legal-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.legal-list li {
  position: relative;
  padding-left: var(--space-8);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
}

.legal-list li:last-child { margin-bottom: 0; }

.legal-list--plain li {
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
}

/* Tick: the same construction as .store-includes. */
.legal-list--allow li::before,
.legal-list--plain li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: var(--space-4);
  height: var(--space-2);
  border-left: 2px solid var(--color-blue);
  border-bottom: 2px solid var(--color-blue);
  transform: rotate(-45deg);
}

/* Cross, drawn rather than typed so screen readers never announce it. */
.legal-list--deny li::before {
  content: "";
  position: absolute;
  left: var(--space-1);
  top: 0.55em;
  width: var(--space-3);
  height: var(--space-3);
  background:
    linear-gradient(to bottom, var(--color-ink-faint), var(--color-ink-faint)) center/100% 2px no-repeat,
    linear-gradient(to right, var(--color-ink-faint), var(--color-ink-faint)) center/2px 100% no-repeat;
  transform: rotate(45deg);
}

/* ---------- Notes and sign-off ---------- */

.legal-note {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  margin: var(--space-5) 0;
}

.legal-updated {
  margin-top: var(--space-12);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}