/* ========================================
   Topics Tokens
======================================== */

:where(.p-topics-archive, .p-post, .p-pagination) {
  /* filter */
  --topics-filter-gap: 24px;
  --topics-filter-mb: 36px;
  --topics-filter-title-fs: var(--font-size-base);
  --topics-filter-nav-gap: 14px;

  --topics-filter-btn-w: 106px;
  --topics-filter-btn-h: 32px;
  --topics-filter-btn-fs: var(--font-size-md);

  --topics-filter-bg-default: #a3c4c7;
  --topics-filter-bg-anniv: #dedf89;
  --topics-filter-bg-all: #e6e6e5;

  --topics-filter-txt-default: #ffffff;
  --topics-filter-txt-anniv: #666666;
  --topics-filter-txt-all: #000000;

  /* pagination */
  --topics-pagination-mt: 50px;
  --topics-pagination-gap: 24px;
  --topics-pagination-link: #7f8080;

  /* post */
  --post-meta-gap: 20px;
  --post-meta-mt: 24px;
  --post-meta-mb: 30px;
  --post-thumb-mb: 40px;

  --post-h2-border: #211815;
  --post-h2-border-w: 3px;
  --post-h2-pl: 16px;
  --post-h2-fs: 20px;

  --post-nav-mt: 70px;
  --post-nav-pt: 50px;
  --post-nav-icon: 10px;

  /* SP */
  --sp-post-meta-mb: 20px;
  --sp-post-thumb-mb: 26px;
  --sp-post-h2-fs: 18px;
  --sp-post-nav-pt: 30px;
  --sp-post-nav-fs: 12px;

  --sp-filter-gap: 16px;
  --sp-filter-grid-gap: 12px;

  --sp-topics-arrow-col: 16px;
  --sp-topics-row-gap: 10px;
  --sp-topics-col-gap: 16px;

  --sp-topics-cat-w: 92px;
  --sp-topics-cat-h: 30px;
}

/* ========================================
   Topics Filter
======================================== */

.p-topics-archive__filter {
  display: flex;
  align-items: center;
  gap: var(--topics-filter-gap);
  margin-bottom: var(--topics-filter-mb);
}

.p-topics-archive__filter-title {
  margin: 0;
  font-size: var(--topics-filter-title-fs);
  letter-spacing: 0;
  white-space: nowrap;
}

.p-topics-archive__filter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--topics-filter-nav-gap);
}

.p-topics-archive__filter-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--topics-filter-btn-w);
  height: var(--topics-filter-btn-h);

  font-size: var(--topics-filter-btn-fs);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  background: var(--topics-filter-bg-default);
  color: var(--topics-filter-txt-default);
}

.p-topics-archive__filter-link.is-cat-anniversary-pj {
  background: var(--topics-filter-bg-anniv);
  color: var(--topics-filter-txt-anniv);
}

.p-topics-archive__filter-link.is-all {
  background: var(--topics-filter-bg-all);
  color: var(--topics-filter-txt-all);
}

/* ========================================
   Pagination
======================================== */

.p-pagination {
  margin-top: var(--topics-pagination-mt);
}

.p-pagination ul {
  display: flex;
  justify-content: center;
  gap: var(--topics-pagination-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-pagination a.page-numbers {
  color: var(--topics-pagination-link);
  text-decoration: none;
}

.p-pagination .page-numbers.current {
  color: inherit;
}

/* ========================================
   Post Detail
======================================== */

.p-post {
  padding-bottom: var(--section-gap-before-footer);
}

.p-post__title {
  margin: 0;
  font-size: var(--font-size-post-title);
  font-weight: var(--fw-h2);
  line-height: var(--lh-heading);
}

.p-post__meta {
  display: flex;
  align-items: center;
  gap: var(--post-meta-gap);
  margin-top: var(--post-meta-mt);
  margin-bottom: var(--post-meta-mb);
}

.p-post__thumb {
  margin-bottom: var(--post-thumb-mb);
}

.p-post__thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.p-post__body h2.wp-block-heading {
  padding-left: var(--post-h2-pl);
  font-size: var(--post-h2-fs);
  line-height: 1.6;
  border-left: var(--post-h2-border-w) solid var(--post-h2-border);
}

.p-post__body p {
  font-size: var(--font-size-md);
  line-height: var(--lh-body);
}

/* ========================================
   Post Navigation
======================================== */

.p-post__nav {
  margin-top: var(--post-nav-mt);
  padding-top: var(--post-nav-pt);
  border-top: var(--border-hairline);
}

.p-post__navInner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.p-post__nav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  text-decoration: none;
  color: inherit;
}

.p-post__navPrev {
  justify-self: start;
}

.p-post__navBack {
  justify-self: center;
}

.p-post__navNext {
  justify-self: end;
}

.p-post__navPrev a::before,
.p-post__navNext a::after {
  content: "";
  width: var(--post-nav-icon);
  height: var(--post-nav-icon);
  background-size: var(--post-nav-icon) var(--post-nav-icon);
  background-repeat: no-repeat;
}

.p-post__navPrev a::before {
  background-image: url("/wp-content/themes/kawasakishokuhin2026/assets/img/common/arrow-prev-icon.svg");
}

.p-post__navNext a::after {
  background-image: url("/wp-content/themes/kawasakishokuhin2026/assets/img/common/arrow-next-icon.svg");
}

@media (hover: hover) {
  .p-post__nav a:hover {
    opacity: 0.85;
  }
}

/* ========================================
   SP (≤767px)
======================================== */

@media (max-width: 767px) {
  .p-post__meta {
    margin-bottom: var(--sp-post-meta-mb);
  }

  .p-post__thumb {
    margin-bottom: var(--sp-post-thumb-mb);
  }

  .p-post__body h2.wp-block-heading {
    font-size: var(--sp-post-h2-fs);
  }

  .p-post__nav {
    padding-top: var(--sp-post-nav-pt);
  }

  .p-post__nav a {
    font-size: var(--sp-post-nav-fs);
  }

  /* filter layout */
  .p-topics-archive__filter {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-filter-gap);
  }

  .p-topics-archive__filter-nav {
    display: grid;
    grid-template-columns: repeat(2, var(--topics-filter-btn-w));
    justify-content: center;
    gap: var(--sp-filter-grid-gap);
  }

  /* topics list */
  .p-topics__item {
    display: grid;
    grid-template-columns: 1fr var(--sp-topics-arrow-col);
    grid-template-rows: auto auto;
    align-items: start;
    gap: var(--sp-topics-row-gap) var(--sp-topics-col-gap);
  }

  .p-topics__head {
    grid-column: 1;
    grid-row: 1;

    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .p-topics__cat {
    flex: 0 0 auto;
    width: var(--sp-topics-cat-w);
    height: var(--sp-topics-cat-h);
  }

  .p-topics__date {
    flex: 0 0 auto;
  }

  .p-topics__title {
    grid-column: 1;
    grid-row: 2;

    min-width: 0;
    padding-right: 0;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .p-topics__arrow {
    grid-column: 2;
    grid-row: 2;

    align-self: center;
    justify-self: end;

    position: static;
    transform: none;
  }
}