/* Kuhlman Pickleball - one lesson page (/lessons/{slug}).
   Loaded on top of site.css + components.css. Everything here is the length
   picker and the two lines that go with it; the rest of the page is the
   shared .book-layout / .summary-card / .pkg-card from components.css. */

/* ------------------------------------------------------------ the picker */
.len-picker { display: grid; gap: 10px; }
.len-opt {
  position: relative; display: grid; align-items: center; gap: 14px;
  grid-template-columns: 22px 1fr auto;
  padding: 16px 18px;
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius);
  color: var(--body); text-decoration: none;
  transition: transform .15s, border-color .15s, box-shadow .15s, background-color .15s;
}
.len-opt:hover { border-color: var(--lime-600); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.len-opt:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.len-opt.is-sel {
  border-color: var(--navy-900); background: var(--lime-50);   /* lime-600 was 2.43:1 */
  box-shadow: 0 0 0 3px rgba(166, 214, 8, .18);
}

/* The radio dot is drawn, not a real input, so the option can stay a link
   that works with the script blocked. */
.len-mark {
  width: 20px; height: 20px; border-radius: 50%; position: relative; flex: none;
  border: 2px solid var(--line-2); background: var(--white);
  transition: border-color .15s;
  /* On the NAME's line, not the middle of the block. The row is centred as a
     whole so the price sits opposite the option rather than floating above
     it, but a radio that labels "90 minutes" and sits level with the sentence
     underneath it reads as belonging to the sentence. */
  align-self: start; margin-top: 2px;
}
.len-opt.is-sel .len-mark { border-color: var(--lime-600); }
.len-opt.is-sel .len-mark::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--navy-900);
}

.len-body { min-width: 0; }
.len-name {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 1.04rem; color: var(--ink); line-height: 1.2;
}
.len-tag {
  font-family: var(--display); font-size: .6875rem; font-weight: 700; /* 11px: nothing a visitor reads is smaller */
  letter-spacing: .05em; text-transform: uppercase;
  background: var(--navy-900); color: var(--lime);
  padding: 3px 8px; border-radius: 100px; line-height: 1.3;
}
.len-blurb { display: block; font-size: .88rem; color: var(--body); margin-top: 4px; max-width: 46ch; }

.len-price { text-align: right; white-space: nowrap; }
.len-price b {
  display: block; font-family: var(--display); font-weight: 800; font-size: 1.32rem;
  color: var(--ink); line-height: 1.1; letter-spacing: -.02em;
}
.len-price small { display: block; font-size: .74rem; font-weight: 600; color: var(--muted); margin-top: 3px; }
/* The list price struck through beside a rate promised to this student (StudentRate). */
.len-price b s { font-size: .82rem; font-weight: 600; color: var(--muted); text-decoration: line-through; margin-right: 4px; letter-spacing: 0; }

/* ------------------------------------------------------ the lines around it */
.len-intro { margin-bottom: 14px; }
.len-note {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: .86rem; color: var(--muted); margin-top: 12px;
}
.len-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--lime-700); }

/* The summary card's Length row is written live by lesson.js, so it must not
   jump in width as the label changes from "1 hour" to "90 minutes". */
.summary-row .v#lenLabel { min-width: 8ch; }

/* The second Book button, under the picker: only once components.css has
   stacked the layout and the summary card has dropped below the content. */
.len-cta { display: none; }
@media (max-width: 980px) {
  .len-cta { display: inline-flex; width: 100%; margin-top: 16px; }
}

/* ------------------------------------------------------------------ phones */
@media (max-width: 480px) {
  .len-opt { grid-template-columns: 20px 1fr; padding: 14px 16px; gap: 12px; }
  .len-price { grid-column: 2; text-align: left; display: flex; gap: 8px; align-items: baseline; margin-top: 2px; }
  .len-price b { font-size: 1.15rem; }
  .len-price small { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .len-opt, .len-mark { transition: none; }
  .len-opt:hover { transform: none; }
}