/* Watch / Listen / Read archive pages - reuses .jdv-card and the
   --jdv-* design tokens from page-explore.css (loaded alongside this). */

.jdv-archive {
  padding: 48px 0 100px;
}

/* font-family is set explicitly, not inherited, and that is the whole fix
   for this label. Customizer > Additional CSS opens with

     @import url(...family=Montserrat);
     :not(i,element-icon){ font-family:"Montserrat" }

   which matches this <a> directly. A rule that matches the element always
   beats a value inherited from an ancestor, however specific that ancestor's
   rule is - so .jdv-explore's Inter never reached this label and it has been
   rendering in Montserrat. Naming the family here is what stops that; the
   weight is the design's medium rather than the browser default. Anything
   else on these pages that leaves font-family unset has the same leak. */
.jdv-archive__breadcrumb {
  display: inline-block;
  font-family: var(--jdv-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--jdv-ink-soft);
  margin-bottom: 22px;
}
.jdv-archive__breadcrumb:hover {
  color: var(--jdv-ink);
}

.jdv-archive__title {
  font-family: var(--jdv-serif);
  font-weight: 500;
  font-size: 44px;
  margin: 0 0 36px;
}

.jdv-archive__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 22px;
  row-gap: 44px;
}

.jdv-archive__loadmore-wrap {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.jdv-archive__loadmore {
  font-family: var(--jdv-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--jdv-ink);
  background: #F3EEE2;
  border: 1px solid var(--jdv-line);
  border-radius: 999px;
  padding: 12px 28px;
  cursor: pointer;
  transition: background .2s ease;
}
.jdv-archive__loadmore:hover {
  background: #ECE5D6;
}
.jdv-archive__loadmore[disabled] {
  opacity: .5;
  cursor: default;
}

@media (max-width: 1024px) {
  .jdv-archive__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .jdv-archive__title {
    font-size: 34px;
  }
}

@media (max-width: 600px) {
  .jdv-archive__grid {
    grid-template-columns: 1fr;
  }
}