/*
 * 05-archive.css  —  アーカイブ一覧（NOTES / WORKS / TRPG）
 *
 * このファイル群は読み込み順がそのままカスケードになる。
 * functions.php の ichika_style_parts() が順番を持っている。
 * 並べ替える前に tools/vr の回帰テストを走らせること。
 */

.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.square-card{min-width:0}
.square-media{aspect-ratio:1/1;background:#eae8f0;overflow:hidden}
.square-title{font-weight:700;margin-top:10px}
.filter-bar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:20px 0 34px;padding-bottom:14px;border-bottom:1px solid rgba(17,11,35,.18);font-size:.88rem}
.pagination{display:flex;justify-content:space-between;margin-top:44px;font-size:2rem;font-weight:700}
.log-card{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:22px;border:1px solid rgba(17,11,35,.16);background:#fff}
.placeholder{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,var(--pink),var(--wine));color:#fff;font-weight:800}
@media(max-width:900px){
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .card-grid{grid-template-columns:1fr}
  .log-card{grid-template-columns:1fr}
}
/* v0.3.7: NOTES / WORKS archive = 2 columns x up to 6 rows, uncropped thumbnails */
body.post-type-archive-jetpack-portfolio .card-grid,
body.page .card-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(max-width:560px){
  body.post-type-archive-jetpack-portfolio .card-grid,
    body.page .card-grid{grid-template-columns:1fr}
}
/* Archive pages: title/filter/list are intentionally not equidistant. */
@media (min-width:901px){
  main.notes-archive-page .card-grid,
    main.works-archive-page .card-grid{
      row-gap:28px;
    }
}
.square-card .square-title,
.filter-bar{
  line-height:var(--meta-leading);
}
.square-card .square-title{
  line-height:var(--card-leading);
}
@media (hover:hover) and (pointer:fine){
  .square-card:hover{
      box-shadow:0 4px 10px rgba(17,11,35,.08);
    }
}
@media (max-width:900px){
  main.notes-archive-page .notes-grid,
    main.works-archive-page .card-grid{
      width:100%;
      min-width:0;
    }
}
@media (min-width:901px){
  .home-right .square-title{
      font-size:1.05rem;
      line-height:1.55;
    }
}
/* v0.7.6: persistent current-section state for desktop and mobile navigation. */
.archive-empty{
  margin:0;
  padding:22px 24px;
  background:#fffdf8;
  border:1px solid rgba(17,11,35,.16);
  color:#2d1d5d;
}
.card-grid .square-media{
  border:2px solid var(--brass);
}
/* ---------- Things sitting bare on the desk ---------- */
.filter-bar{
  border-bottom-color:rgba(226,221,242,.20);
}
.pagination{
  color:rgba(226,221,242,.82);
}
.archive-empty{
  border-color:rgba(74,48,151,.30);
}
h2.square-title,
h3.square-title{
  margin-top:0;
  margin-bottom:0;
}
h2.square-title,
h3.square-title{
  margin-top:10px;
}
@media (max-width:900px){
  main.notes-archive-page .notes-grid{
      grid-template-columns:1fr;
      gap:30px;
    }
}
main.notebook-sheet::before{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  bottom:0;
  left:24px;
  width:1px;
  background:rgba(74,48,151,.16);
  pointer-events:none;
}
/* NOTES specifically: match WORKS card spacing and grid on desktop. */
main.notes-archive-page.notebook-sheet .notes-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:30px;
  row-gap:40px;
  width:100%;
  min-width:0;
}
@media (max-width:900px){
  main.notebook-sheet::before{
      left:17px;
    }
  main.notes-archive-page.notebook-sheet .notes-grid{
      grid-template-columns:1fr;
      gap:30px;
    }
}
main.notebook-sheet > .filter-bar{
  margin:0 0 42px;
  padding:0;
}
/* The first card/grid starts at the same distance below the filter row. */
main.notebook-sheet > .notes-grid{
  margin-top:0;
}
main.archive-page.notebook-sheet > .filter-bar{
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  column-gap:8px;
  row-gap:8px;
  min-height:0;
  background:transparent;
  border:0;
  color:var(--wine);
  position:relative;
  z-index:1;
}
main.archive-page.notebook-sheet > .filter-bar::after{
  display:initial;
}
@media (max-width:900px){
  main.archive-page.notebook-sheet > .filter-bar{
      align-items:center;
      column-gap:7px;
      row-gap:7px;
    }
  main.archive-page.notebook-sheet > .filter-bar::after{
      display:none;
    }
}
/* ==========================================================================
   NOTES / WORKS archive cards
   v1.1.49: paper card, 16:9 thumbnail, two-column grid and tape treatment.

   Earlier versions built the same appearance through separate NOTES/WORKS
   rules. Keep the shared geometry here; only the deliberately different tape
   angles remain type-specific below.
   ========================================================================== */
main.notes-archive-page .card-grid,
main.works-archive-page .card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:30px;
  row-gap:40px;
  width:100%;
  min-width:0;
  overflow:visible;
}
main.notes-archive-page .square-card,
main.works-archive-page .square-card{
  position:relative;
  box-sizing:border-box;
  min-width:0;
  overflow:visible;
  padding:0;
  background:#fffdf8;
  border:1px solid rgba(17,11,35,.15);
  color:var(--ink);
  box-shadow:
    0 2px 0 rgba(17,11,35,.045),
    0 8px 16px rgba(17,11,35,.09);
  transform:rotate(-.18deg);
  transform-origin:center;
}
main.notes-archive-page .square-card:nth-child(even),
main.works-archive-page .square-card:nth-child(even){
  transform:rotate(.18deg);
}
main.notes-archive-page .square-media,
main.works-archive-page .square-media{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#fff;
}
main.notes-archive-page .square-title,
main.works-archive-page .square-title{
  margin-top:10px;
  padding:10px 4px 4px;
  color:var(--ink);
}
/* NOTES had an additional outer 10px inset on desktop in the established cascade. */
@media (min-width:901px){
  main.notes-archive-page .square-card{
      padding:10px;
    }
}
main.notes-archive-page .square-card::before,
main.works-archive-page .square-card::before{
  content:"";
  position:absolute;
  z-index:3;
  top:-11px;
  left:50%;
  width:82px;
  height:23px;
  transform:translateX(-50%) rotate(-1.2deg);
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.12) 0 5px,rgba(255,255,255,0) 5px 10px),
    rgba(109,80,197,.44);
  border:1px solid rgba(74,48,151,.10);
  clip-path:polygon(2% 7%,98% 0,100% 90%,96% 100%,2% 94%,0 12%);
  box-shadow:0 1px 2px rgba(17,11,35,.08);
  pointer-events:none;
}
main.notes-archive-page .square-card:nth-child(3n)::before,
main.works-archive-page .square-card:nth-child(3n)::before{
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.14) 0 5px,rgba(255,255,255,0) 5px 10px),
    rgba(141,118,208,.38);
}
/* WORKS keeps the slightly livelier tape angles from the approved treatment. */
main.works-archive-page .square-card::before{
  transform:translateX(-50%) rotate(-1.5deg);
}
main.works-archive-page .square-card:nth-child(3n)::before{
  transform:translateX(-50%) rotate(-.5deg);
}
@media (max-width:900px){
  main.notes-archive-page .card-grid,
    main.works-archive-page .card-grid{
      grid-template-columns:1fr;
      gap:30px;
    }
  main.notes-archive-page .square-card,
    main.works-archive-page .square-card{
      padding:10px;
    }
}
@media (max-width:900px){
  main.notes-archive-page .square-title,
    main.works-archive-page .square-title{
      margin:10px 2px 0;
      padding:0;
    }
  main.notes-archive-page .square-card::before,
    main.works-archive-page .square-card::before{
      top:-10px;
      width:72px;
      height:21px;
    }
}
/* Archive category filter */
main.archive-page.notebook-sheet > .filter-bar{
  column-gap:8px;
}

/* ==========================================================================
   v1.2.0 — filter link states

   Three states, declared once:

     rest      no line
     hover     pale purple line
     current   deep purple line, and bold

   Nothing here paints a background, a border or a box-shadow. The only mark a
   filter link carries in any state is a line under the words, so there is no
   shape that can appear or disappear behind them.

   These states used to be spread over eight rules across 01-base.css and
   09-misc.css, and several of them existed only to switch off a chip that
   another one had just switched on. That pairing is what produced a square
   under the cursor whenever the two halves loaded out of step. One place now,
   and nothing to cancel.

   The transition is narrowed to the underline colour for the same reason: the
   inherited list animated background-color and border-color, neither of which
   these links have any business changing.
   ========================================================================== */
main.archive-page.notebook-sheet > .filter-bar a{
  background:transparent;
  border:0;
  box-shadow:none;
  color:var(--wine);
  text-decoration-line:none;
  text-decoration-thickness:2px;
  text-underline-offset:6px;
  transition:text-decoration-color .14s ease;
}
main.archive-page.notebook-sheet > .filter-bar a:hover{
  text-decoration-line:underline;
  text-decoration-color:var(--pink);
}
main.archive-page.notebook-sheet > .filter-bar a[aria-current="page"],
main.archive-page.notebook-sheet > .filter-bar a.active,
main.archive-page.notebook-sheet > .filter-bar a.current,
main.archive-page.notebook-sheet > .filter-bar a.is-active{
  font-weight:700;
  text-decoration-line:underline;
  text-decoration-color:var(--deep-red);
  text-decoration-thickness:3px;
}