/*
 * The zukan pages (#33): the entry page, a zukan's gallery and the list of zukans.
 * Loaded on those three views, and on an article whose summary has something to show. Colours, fonts and
 * spacing are the theme's presets, and the sizes follow the theme's article page and Index so the zukan reads
 * as part of the same site.
 */

.zukan-entry,
.zukan-shell { padding-block: var(--wp--preset--spacing--lg); }

/* Heading of the gallery and the list: like the Index's title. */
.nk-zukan-head > * { margin: 0; }
.nk-zukan-head__back { margin-bottom: 1.25rem; font: .75rem/1.8 var(--wp--preset--font-family--sans); letter-spacing: .08em; }
.nk-zukan-head__back a { color: var(--wp--preset--color--muted); text-decoration: none; }
.nk-zukan-head__back a::before { content: "← "; }
.nk-zukan-head__back a:hover { color: var(--wp--preset--color--ink); }
.nk-zukan-title { margin: 0; font-size: clamp(2.375rem, 5vw, 3.875rem); font-weight: 400; line-height: 1.25; letter-spacing: .08em; overflow-wrap: anywhere; }
.nk-zukan-head__count { margin-top: .875rem; color: var(--wp--preset--color--muted); font: .75rem/1.8 var(--wp--preset--font-family--sans); letter-spacing: .08em; }
.nk-zukan-head__lead { margin-top: 1rem; color: var(--wp--preset--color--muted); font-size: .94rem; }
.nk-zukan-head__lead > :first-child { margin-top: 0; }
.nk-zukan-head__lead > :last-child { margin-bottom: 0; }

/* Cards: the photo on paper inside a hairline frame, then the name and one line per card field. */
.nk-zukan-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem .875rem;
  margin: var(--wp--preset--spacing--md) 0 0;
  padding: var(--wp--preset--spacing--md) 0 0;
  border-top: 1px solid var(--wp--preset--color--line);
  list-style: none;
}
.nk-zukan-card { position: relative; min-width: 0; margin: 0; }
.nk-zukan-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--paper);
  transition: border-color .3s;
}
.nk-zukan-card__image img {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  padding: 6% 7%;
  object-fit: contain;
  transition: transform .6s cubic-bezier(.25, .46, .45, .94);
}
.nk-zukan-card__initial { color: var(--wp--preset--color--line); font-family: var(--wp--preset--font-family--mincho); font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1; }
.nk-zukan-card:hover .nk-zukan-card__image { border-color: var(--wp--preset--color--muted); }
.nk-zukan-card:hover .nk-zukan-card__image img { transform: scale(1.03); }
.nk-zukan-card__name { margin: .875rem 0 0; font-size: 1rem; font-weight: 500; line-height: 1.6; letter-spacing: .06em; overflow-wrap: anywhere; }
.nk-zukan-card__link { color: var(--wp--preset--color--ink); text-decoration: none; }
/* The name's link covers the whole card. */
.nk-zukan-card__link::after { content: ""; position: absolute; inset: 0; }
.nk-zukan-card__link:focus-visible { outline: none; }
.nk-zukan-card__link:focus-visible::after { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 4px; }
.nk-zukan-card__line { margin: .25rem 0 0; color: var(--wp--preset--color--muted); font: .6875rem/1.7 var(--wp--preset--font-family--sans); letter-spacing: .02em; overflow-wrap: anywhere; }
.nk-zukan-card__name + .nk-zukan-card__line { margin-top: .375rem; }
.nk-zukan-empty { margin-top: var(--wp--preset--spacing--md); color: var(--wp--preset--color--muted); font: .875rem/1.8 var(--wp--preset--font-family--sans); }

@media (min-width: 700px) {
  .nk-zukan-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.25rem; }
}
@media (min-width: 960px) {
  .nk-zukan-gallery .nk-zukan-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .nk-zukan-gallery .nk-zukan-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.75rem 1.5rem; }
}

/* The list of zukans has few, larger cards. */
.nk-zukan-index .nk-zukan-card__name { font-size: 1.1875rem; font-weight: 400; letter-spacing: .08em; }
.nk-zukan-index .nk-zukan-card__line { font-size: .75rem; letter-spacing: .08em; }

/* Entry page: one column, photo, name, the lines under it, the table, then the body. */
.zukan-entry > .wp-block-post-featured-image { margin-bottom: 0; }
.zukan-entry > .wp-block-post-featured-image img { width: 100%; height: auto; max-height: min(62vh, 30rem); object-fit: contain; }
.zukan-entry > .wp-block-post-title { margin-top: var(--wp--preset--spacing--md); }
.zukan-entry > .wp-block-post-content { margin-top: .5rem; }
.zukan-entry .wp-block-post-content > .nk-zukan-subtitle { margin-block: 0; color: var(--wp--preset--color--muted); font: .875rem/1.8 var(--wp--preset--font-family--sans); letter-spacing: .02em; overflow-wrap: anywhere; }
.zukan-entry .wp-block-post-content > .nk-zukan-table { width: 100%; margin-block: var(--wp--preset--spacing--md); border-collapse: collapse; border-top: 1px solid var(--wp--preset--color--line); }
.nk-zukan-table th,
.nk-zukan-table td { padding: .875rem 0; border-bottom: 1px solid var(--wp--preset--color--line); vertical-align: top; text-align: left; }
.nk-zukan-table th { width: 7.5em; padding-right: 1rem; color: var(--wp--preset--color--muted); font: 400 .75rem/2.5 var(--wp--preset--font-family--sans); letter-spacing: .08em; white-space: nowrap; }
.nk-zukan-table td { font-size: .94rem; line-height: 1.95; overflow-wrap: anywhere; }
.zukan-entry .wp-block-post-content :where(p, li) { line-height: 2; }
.zukan-entry .wp-block-post-content img { height: auto; }

@media (max-width: 700px) {
  .nk-zukan-table th { width: 5.5em; }
}

@media (prefers-reduced-motion: reduce) {
  .nk-zukan-card__image,
  .nk-zukan-card__image img { transition: none; }
}

/*
 * The summary above the footer of an article and an entry page (#35). It sits outside <main>, so it spans the
 * article's two-column frame (the photo panel's left edge to the text's right edge, at most 112rem, see the
 * theme's article-reader.css) with the page's own side margins; on narrow screens it is the page's width.
 * One heading and one row of cards per zukan; a row that does not fit scrolls sideways and stops at a card.
 */
.nk-zukan-links {
  box-sizing: border-box;
  width: 100%;
  margin-block: 0;
  margin-inline: auto;
  padding: 0 var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
}
.nk-zukan-links__group + .nk-zukan-links__group { margin-top: var(--wp--preset--spacing--md); }
.nk-zukan-links__heading { margin: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.6; letter-spacing: .08em; }
.nk-zukan-links .nk-zukan-cards {
  display: flex;
  gap: .875rem;
  margin-top: 1rem;
  padding: 1.25rem 0 .75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--wp--preset--color--line) transparent;
}
.nk-zukan-links .nk-zukan-cards::-webkit-scrollbar { height: 6px; }
.nk-zukan-links .nk-zukan-cards::-webkit-scrollbar-track { background: transparent; }
.nk-zukan-links .nk-zukan-cards::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--wp--preset--color--line); }
/* The small cards keep their size: about 2.3 to a phone's width, so the edge of the third shows the row scrolls
   (phone scrollbars only appear while scrolling); 12rem from 700px. */
.nk-zukan-links .nk-zukan-card { flex: 0 0 calc((100% - 2 * .875rem) / 2.3); scroll-snap-align: start; }
/* The row clips anything outside it, so the focus ring goes just inside the card. */
.nk-zukan-links .nk-zukan-card__link:focus-visible::after { outline-offset: -2px; }
.nk-zukan-cards--small .nk-zukan-card__name { margin-top: .625rem; font-size: .875rem; }
.nk-zukan-cards--small .nk-zukan-card__image img { width: 100%; height: 100%; }
@media (min-width: 700px) {
  .nk-zukan-links .nk-zukan-cards { gap: 1rem; }
  .nk-zukan-links .nk-zukan-card { flex-basis: 12rem; }
}
@media (min-width: 1024px) {
  .nk-zukan-links { width: min(100% - clamp(2rem, 4vw, 7rem), 112rem); }
}