/* Home loans in 30 seconds: the clip picker under the player, the "next
   clip" button on the end card and the written versions below. The player
   itself is styled by css/loan-story.css. */

.cc-picker {
  max-width: 1080px;
  margin: 20px auto 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.cc-picker a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 10px 12px;
  border: 2px solid var(--brand-navy);
  border-radius: 12px;
  background: #fff;
  color: var(--brand-navy);
  font: 700 0.9rem/1.2 'Poppins', sans-serif;
  text-decoration: none;
  box-shadow: 0 4px 0 var(--brand-navy);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.cc-picker a:hover {
  background: #eef3fa;
}

.cc-picker a:active,
.cc-picker a[aria-current="true"] {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--brand-navy);
}

.cc-picker a[aria-current="true"] {
  background: var(--brand-navy);
  color: #fff;
}

.lv-end-next {
  min-height: 48px;
  padding: 12px 20px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--brand-navy);
  font: 700 1rem/1.2 'Poppins', sans-serif;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.25);
}

.lv-end-next span {
  color: var(--brand-navy);
}

.cc-notes {
  max-width: 44rem;
  margin: 0 auto;
  padding: 56px 24px 64px;
}

.cc-notes h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.15;
  color: var(--brand-navy);
  margin: 0 0 8px;
}

.cc-note {
  scroll-margin-top: 90px;
}

.cc-note h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--brand-navy);
  margin: 36px 0 12px;
}

.cc-note p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
}

.cc-note a {
  color: var(--brand-navy);
  text-decoration: underline;
  text-decoration-color: var(--brand-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Without JavaScript the picker still jumps to each written version. */
html:not(.ls-js) .cc-picker {
  margin-top: 0;
}

@media (max-width: 900px) {
  .cc-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 16px;
  }
}

@media (max-width: 640px) {
  .cc-notes {
    padding: 44px 20px 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-picker a {
    transition: none;
  }
}

/* Every clip's hook already says its name on screen, so the start button
   shows only its play icon, in the clear band between the hook's headline
   and its drawing. The name and length stay for screen readers. */
.lv-player .lv-start {
  justify-content: center;
  padding: 0;
}

.lv-player .lv-start-label,
.lv-player .lv-start-time {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}