/*
 * publication.css — Issue listing grid and single issue / article list styles.
 */

/* ── Issue grid ───────────────────────────────────────────────────────────── */
.issue-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: var(--space-12);
}

@media (min-width: 36rem) {
  .issue-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 60rem) {
  .issue-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Issue card ───────────────────────────────────────────────────────────── */
.issue-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}

.issue-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.issue-card__inner {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  height: 100%;
}

.issue-card__cover {
  background-color: var(--color-border-light);
  aspect-ratio: 7 / 10;
  overflow: hidden;
}

.issue-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.issue-card:hover .issue-card__cover img {
  transform: scale(1.03);
}

.issue-card__cover--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-faint);
  font-size: var(--text-2xl);
  font-family: var(--font-serif);
}

.issue-card__meta {
  padding: var(--space-3) var(--space-4);
}

.issue-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
}

.issue-card:hover .issue-card__title {
  color: var(--color-accent);
}

.issue-card__year {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.issue-card__count {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}

/* ── Issue header: cover left, info right ─────────────────────────────────── */
.issue-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.issue-header__cover {
  flex: 0 0 auto;
}

.issue-cover {
  display: block;
  width: 180px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.issue-header__info {
  flex: 1 1 0;
  min-width: 0;
}

.issue-header__info .page-header__title {
  margin-bottom: var(--space-2);
}

.issue-header__detay {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

@media (max-width: 36rem) {
  .issue-header { flex-direction: column; }
  .issue-cover  { width: 120px; }
}
.issue-header__ext-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-decoration: none;
}

.issue-header__ext-link:hover {
  text-decoration: underline;
}

/* ── PDF icon ─────────────────────────────────────────────────────────────── */
.pdf-icon {
  display: inline-block;
  width: 28px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  vertical-align: middle;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMzQuMzcxIDM4MC41NjMiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE0IDE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgoKCTxnIHRyYW5zZm9ybT0ibWF0cml4KC4wNDU4OSAwIDAgLjA0NTg5IC0uNjY4NzcgLS43MzM3OSkiPgoJCTxwb2x5Z29uIHBvaW50cz0iNTEuNzkxIDM1Ni42NSA1MS43OTEgMjMuOTkgMjA0LjUgMjMuOTkgMjgyLjY1IDEwMi4wNyAyODIuNjUgMzU2LjY1IiBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIxMi42NSIvPgoJCTxwYXRoIGQ9Im0yMDEuMTkgMzEuOTkgNzMuNDYgNzMuMzkzdjI0My4yNmgtMjE0Ljg2di0zMTYuNjZoMTQxLjRtNi42MjMtMTZoLTE2NC4wMnYzNDguNjZoMjQ2Ljg1di0yNjUuOXoiIHN0cm9rZS13aWR0aD0iMjEuNzkxIi8+Cgk8L2c+Cgk8ZyB0cmFuc2Zvcm09Im1hdHJpeCguMDQ1ODkgMCAwIC4wNDU4OSAtLjY2ODc3IC0uNzMzNzkpIj4KCQk8cG9seWdvbiBwb2ludHM9IjI4Mi42NSAzNTYuNjUgNTEuNzkxIDM1Ni42NSA1MS43OTEgMjMuOTkgMjA0LjUgMjMuOTkgMjA2LjMxIDI1LjggMjA2LjMxIDEwMC4zMyAyODAuOSAxMDAuMzMgMjgyLjY1IDEwMi4wNyIgZmlsbD0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyMTIuNjUiLz4KCQk8cGF0aCBkPSJtMTk4LjMxIDMxLjk5djc2LjMzN2g3Ni4zMzd2MjQwLjMyaC0yMTQuODZ2LTMxNi42NmgxMzguNTJtOS41LTE2aC0xNjQuMDJ2MzQ4LjY2aDI0Ni44NXYtMjY1LjlsLTYuNDMtNi40MjRoLTY5LjkwN3YtNjkuODQyeiIgc3Ryb2tlLXdpZHRoPSIyMS43OTEiLz4KCTwvZz4KCTxnIHRyYW5zZm9ybT0ibWF0cml4KC4wNDU4OSAwIDAgLjA0NTg5IC0uNjY4NzcgLS43MzM3OSkiIHN0cm9rZS13aWR0aD0iMjEuNzkxIj4KCQk8cG9seWdvbiBwb2ludHM9IjI1OC4zMSA4Ny43NSAyMTkuNjQgODcuNzUgMjE5LjY0IDQ4LjY2NyAyNTguMzEgODYuMzgiLz4KCQk8cGF0aCBkPSJtMjI3LjY0IDY3LjY0NiAxMi40MSAxMi4xMDRoLTEyLjQxdi0xMi4xMDRtLTUuMDAyLTI3LjIyOWgtMTAuOTk4djU1LjMzM2g1NC42NjZ2LTEyLjc0MnoiLz4KCTwvZz4KCTxnIHRyYW5zZm9ybT0ibWF0cml4KC4wNDU4OSAwIDAgLjA0NTg5IC0uNjY4NzcgLS43MzM3OSkiIGZpbGw9IiNlZDFjMjQiIHN0cm9rZS13aWR0aD0iMjEyLjY1Ij4KCQk8cG9seWdvbiBwb2ludHM9IjMxMS44OSAyODQuNDkgMjIuNTQ0IDI4NC40OSAyMi41NDQgMTY3LjY4IDM3LjI5MSAxNTIuOTQgMzcuMjkxIDE3MS40OSAyOTcuMTUgMTcxLjQ5IDI5Ny4xNSAxNTIuOTQgMzExLjg5IDE2Ny42OCIvPgoJCTxwYXRoIGQ9Im0zMDMuNjUgMTY4LjYzIDEuNzQ3IDEuNzQ3djEwNy42MmgtMjc2LjM1di0xMDcuNjJsMS43NDctMS43NDd2OS4zNjJoMjcyLjg1di05LjM2Mm0tMTIuOTk5LTMxLjM4NXYyNy43NDdoLTI0Ni44NnYtMjcuNzQ3bC0yNy43NDcgMjcuNzQ3djEyNmgzMDIuMzV2LTEyNnoiLz4KCTwvZz4KCTxyZWN0IHg9IjEuNzIxOSIgeT0iNy45NTQ0IiB3aWR0aD0iMTAuNjg0IiBoZWlnaHQ9IjQuMDMwNyIgZmlsbD0ibm9uZSIvPgoJPGcgdHJhbnNmb3JtPSJtYXRyaXgoLjA0NTg5IDAgMCAuMDQ1ODkgMS43MjE5IDExLjczMykiIGZpbGw9IiNmZmYiIHN0cm9rZS13aWR0aD0iMjEuNzkxIj48cGF0aCBkPSJtOS4yMTYgMHYtODMuMmgzMC40NjRxNi43ODQgMCAxMi45MjggMS40MDggNi4xNDQgMS4yOCAxMC43NTIgNC42MDggNC42MDggMy4yIDcuMjk2IDguNTc2IDIuODE2IDUuMjQ4IDIuODE2IDEzLjA1NiAwIDcuNjgtMi44MTYgMTMuMTg0LTIuNjg4IDUuNTA0LTcuMjk2IDkuMDg4LTQuNjA4IDMuNDU2LTEwLjYyNCA1LjI0OC02LjAxNiAxLjY2NC0xMi41NDQgMS42NjRoLTguOTZ2MjYuMzY4em0yMi4wMTYtNDMuNzc2aDcuOTM2cTYuNTI4IDAgOS42LTMuMDcyIDMuMi0zLjA3MiAzLjItOC43MDR0LTMuNDU2LTcuOTM2LTkuODU2LTIuMzA0aC03LjQyNHoiLz48cGF0aCBkPSJtODcuMDQgMHYtODMuMmgyNC41NzZxOS40NzIgMCAxNy4yOCAyLjMwNCA3LjkzNiAyLjMwNCAxMy41NjggNy4yOTZ0OC43MDQgMTIuOHEzLjIgNy44MDggMy4yIDE4LjgxNnQtMy4wNzIgMTguOTQ0LTguNzA0IDEzLjA1NnEtNS41MDQgNS4xMi0xMy4xODQgNy41NTItNy41NTIgMi40MzItMTYuNTEyIDIuNDMyem0yMi4wMTYtMTcuNjY0aDEuMjhxNC40OCAwIDguNDQ4LTEuMDI0IDMuOTY4LTEuMTUyIDYuNzg0LTMuODQgMi45NDQtMi42ODggNC42MDgtNy40MjR0MS42NjQtMTIuMDMyLTEuNjY0LTExLjkwNC00LjYwOC03LjE2OHEtMi44MTYtMi41Ni02Ljc4NC0zLjQ1Ni0zLjk2OC0xLjAyNC04LjQ0OC0xLjAyNGgtMS4yOHoiLz48cGF0aCBkPSJtMTY5LjIyIDB2LTgzLjJoNTQuMjcydjE4LjQzMmgtMzIuMjU2djE1Ljg3MmgyNy42NDh2MTguNDMyaC0yNy42NDh2MzAuNDY0eiIvPjwvZz4KCjwvc3ZnPgo=');
}

.article-card__pdf-link {
  display: inline-flex;
  align-items: center;
  opacity: 0.75;
  transition: opacity var(--transition);
}

.article-card__pdf-link:hover {
  opacity: 1;
}

/* ── Link icon (chain) ──────────────────────────────────────────────────────── */
.link-icon {
  display: inline-block;
  width: 28px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3f6e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
}
/* ── Filter bar ───────────────────────────────────────────────────────────── */
.filter-bar {
  margin-bottom: var(--space-6);
}

.filter-input {
  width: 100%;
  max-width: 32rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  background-color: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition);
}

.filter-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(107, 39, 55, 0.12);
}

/* ── Article list ─────────────────────────────────────────────────────────── */
.article-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-12);
}

/* ── Article section heading ──────────────────────────────────────────────── */
.article-section {
  margin-bottom: var(--space-6);
}

.article-section__title {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  background-color: var(--color-border-light);
  padding: var(--space-2) var(--space-4);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

/* ── Article card ─────────────────────────────────────────────────────────── */
.article-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  padding-right: calc(var(--space-6) + 40px);
  transition: border-color var(--transition);
  position: relative;
}

.article-card:hover {
  border-color: var(--color-accent);
}

.article-card.is-hidden    { display: none; }
.article-section.is-hidden { display: none; }

.article-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
  line-height: 1.4;
}

.article-card__title a {
  color: var(--color-text);
  text-decoration: none;
}

.article-card__title a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.article-card__authors {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.article-card__pages {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.article-card__abstract {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.article-card__tags li a {
  display: inline-block;
  padding: 1px var(--space-2);
  background-color: var(--color-border-light);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.article-card__tags li a:hover {
  background-color: var(--color-accent);
  color: #fff;
}

.article-card__links {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}
/*  Book detail page  */
.book-buy-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.book-buy-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-link);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: 500;
}

.book-buy-link:hover {
  color: var(--color-link-hover);
}

.book-detail__isbn {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

.book-detail__meta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-6);
}

.book-detail__meta-copy {
  min-width: 0;
}

.book-detail__demo-action {
  margin: 0;
  display: flex;
  justify-content: flex-end;
  align-self: start;
}

.book-detail__demo-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.9rem 1.35rem;
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.book-detail__demo-button:hover {
  box-shadow: var(--shadow-md);
}

.book-detail__demo-icon {
  width: 1.5rem;
  height: 1.75rem;
  flex: 0 0 auto;
}

.book-detail {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.book-detail__cover-wrap {
  align-self: start;
}

.book-detail__cover {
  width: 100%;
  max-width: 360px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.book-detail__content {
  min-width: 0;
}

.book-detail__desc {
  line-height: 1.8;
  text-align: justify;
}

.book-detail__authors a {
  color: inherit;
}

@media (max-width: 48rem) {
  .book-detail__meta-row {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .book-detail__demo-action {
    justify-content: flex-start;
  }

  .book-detail {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .book-detail__cover {
    max-width: 300px;
  }
}